Skip to content

Commit ca41342

Browse files
committed
Update readme
1 parent 90cd22e commit ca41342

File tree

1 file changed

+73
-12
lines changed

1 file changed

+73
-12
lines changed

README.md

+73-12
Original file line numberDiff line numberDiff line change
@@ -65,24 +65,84 @@ import 'vuejs-dialog/vuejs-dialog.min.css'
6565
Vue.use(VuejsDialog)
6666
```
6767

68-
## Basic Usage
68+
## Basic Usage inside a vuejs application
6969

7070
```javascript
7171
// Anywhere in your Vuejs App.
7272

73+
// Trigger an Alert dialog
74+
this.$dialog.alert('Request completed!')
75+
.then(function (dialog) {
76+
console.log('Closed')
77+
})
78+
79+
// Trigger a confirmation dialog
7380
this.$dialog.confirm('Please confirm to continue')
74-
.then(function () {
81+
.then(function (dialog) {
82+
console.log('Clicked on proceed')
83+
})
84+
.catch(function () {
85+
console.log('Clicked on cancel')
86+
});
87+
```
88+
89+
## Basic Usage outside a vuejs application
90+
```javascript
91+
// VuejsDialog Methods are also available on the global vue
92+
// This makes it possible to use the plugin inside a ReactJs application
93+
// or just any javascript application
94+
// Simply include vue, vuejs-dialog, ask vue to use the plugin and that's all:
95+
96+
Vue.dialog.alert('Request completed!')
97+
.then(function (dialog) {
98+
console.log('Closed')
99+
})
100+
101+
Vue.dialog.confirm('Please confirm to continue')
102+
.then(function (dialog) {
75103
console.log('Clicked on proceed')
76104
})
77105
.catch(function () {
78106
console.log('Clicked on cancel')
79107
});
80108
```
81109

110+
## Return value on success
111+
112+
```javascript
113+
// Whenever a user clicks on proceed,
114+
// the promise returned by the dialog call will be
115+
// resolved with a dialog object with the following shape:
116+
117+
118+
{
119+
close: function | sometimes | A method that can be used to close the dialog if it's in a loading state
120+
loading: function | sometimes | A method that can be used to stop the dialog loader
121+
node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive
122+
data: any | always | Data sent with the positive action. Useful in prompts or custom components
123+
}
124+
125+
// Example:
126+
127+
<button class="btn-danger"
128+
v-confirm="{
129+
loader: true,
130+
ok: okCallback,
131+
cancel: cancelcallback,
132+
message: 'Some confirmation message'}"
133+
>
134+
135+
okCallback: function (dialog) {
136+
dialog.loaging(false) // stop the loader (you won't be needing this)
137+
dialog.close() // stops loader and close the dialog
138+
dialog.node.className // === "btn-danger"
139+
dialog.data // === null
140+
}
141+
```
142+
82143
83144
## Usage with ajax - Loader enabled
84145
```javascript
85-
// Anywhere in your Vuejs App.
86146

87147
this.$dialog.confirm("If you delete this record, it'll be gone forever.", {
88148
loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
@@ -134,7 +194,7 @@ methods: {
134194
}
135195
```
136196
137-
__A more practical use of ths `v-confirm` directive inside a loop - Solution 1__
197+
__A more practical use of ths `v-confirm` directive with multiple triggers - Solution 1__
138198
139199
```html
140200
// While looping through users
@@ -165,7 +225,7 @@ methods: {
165225
```
166226
167227
168-
__( new ) A more practical use of ths `v-confirm` directive inside a loop - Solution 2__
228+
__( new ) A more practical use of ths `v-confirm` directive with multiple triggers - Solution 2__
169229
170230
```html
171231
// While looping through users
@@ -222,7 +282,7 @@ this.$dialog.confirm(message)
222282
```
223283
224284
225-
### Options
285+
## Options
226286
```javascript
227287
// Parameters and options
228288

@@ -251,7 +311,7 @@ this.$dialog.confirm(message, options)
251311
// This will be triggered when user clicks on cancel
252312
});
253313
```
254-
### Global Configuration
314+
## Global Configuration
255315
```javascript
256316
// You can also set all your defaults at the point of installation.
257317
// This will be your global configuration
@@ -268,7 +328,7 @@ Vue.use(VuejsDialog, { // use VuejsDialog.default if installing inside script ta
268328
// This gives you the flexibility of overriding the global config on individual call.
269329
```
270330
271-
### CSS Override
331+
## CSS Override
272332
273333
If you have included the plugin's style and wish to make a few overides, you can do so with basic css, ex:
274334
```css
@@ -281,7 +341,7 @@ If you have included the plugin's style and wish to make a few overides, you can
281341
}
282342
```
283343
284-
### Pro tip
344+
## Useful tip for customization
285345
You can use any of the options in your verification help text. Example:
286346
287347
```javascript
@@ -346,15 +406,16 @@ this.$dialog.confirm($message, {
346406
```
347407
348408
```javascript
409+
import Vue from 'vue'
349410
import CustomView from './path/to/file/custom-component.vue'
411+
350412
const VIEW_NAME = 'my-unique-view-name'
413+
Vue.dialog.registerComponent(VIEW_NAME, CustomView)
351414

352415
let vm = new Vue({
353-
created() {
354-
this.$dialog.registerComponent(VIEW_NAME, CustomView)
355-
},
356416
methods: {
357417
showCustomView(){
418+
// Note: Use confirm instead of alert if you need to handle rejection
358419
this.$dialog.alert(trans('messages.html'), {
359420
view: VIEW_NAME, // can be set globally too
360421
html: true,

0 commit comments

Comments
 (0)