@@ -65,24 +65,84 @@ import 'vuejs-dialog/vuejs-dialog.min.css'
65
65
Vue .use (VuejsDialog)
66
66
```
67
67
68
- ## Basic Usage
68
+ ## Basic Usage inside a vuejs application
69
69
70
70
``` javascript
71
71
// Anywhere in your Vuejs App.
72
72
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
73
80
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 ) {
75
103
console .log (' Clicked on proceed' )
76
104
})
77
105
.catch (function () {
78
106
console .log (' Clicked on cancel' )
79
107
});
80
108
```
81
109
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
+
82
143
83
144
## Usage with ajax - Loader enabled
84
145
` ` ` javascript
85
- // Anywhere in your Vuejs App.
86
146
87
147
this .$dialog .confirm (" If you delete this record, it'll be gone forever." , {
88
148
loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
@@ -134,7 +194,7 @@ methods: {
134
194
}
135
195
` ` `
136
196
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__
138
198
139
199
` ` ` html
140
200
// While looping through users
@@ -165,7 +225,7 @@ methods: {
165
225
` ` `
166
226
167
227
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__
169
229
170
230
` ` ` html
171
231
// While looping through users
@@ -222,7 +282,7 @@ this.$dialog.confirm(message)
222
282
` ` `
223
283
224
284
225
- ### Options
285
+ ## Options
226
286
` ` ` javascript
227
287
// Parameters and options
228
288
@@ -251,7 +311,7 @@ this.$dialog.confirm(message, options)
251
311
// This will be triggered when user clicks on cancel
252
312
});
253
313
` ` `
254
- ### Global Configuration
314
+ ## Global Configuration
255
315
` ` ` javascript
256
316
// You can also set all your defaults at the point of installation.
257
317
// This will be your global configuration
@@ -268,7 +328,7 @@ Vue.use(VuejsDialog, { // use VuejsDialog.default if installing inside script ta
268
328
// This gives you the flexibility of overriding the global config on individual call.
269
329
` ` `
270
330
271
- ### CSS Override
331
+ ## CSS Override
272
332
273
333
If you have included the plugin's style and wish to make a few overides, you can do so with basic css, ex:
274
334
` ` ` css
@@ -281,7 +341,7 @@ If you have included the plugin's style and wish to make a few overides, you can
281
341
}
282
342
` ` `
283
343
284
- ### Pro tip
344
+ ## Useful tip for customization
285
345
You can use any of the options in your verification help text. Example:
286
346
287
347
` ` ` javascript
@@ -346,15 +406,16 @@ this.$dialog.confirm($message, {
346
406
` ` `
347
407
348
408
` ` ` javascript
409
+ import Vue from ' vue'
349
410
import CustomView from ' ./path/to/file/custom-component.vue'
411
+
350
412
const VIEW_NAME = ' my-unique-view-name'
413
+ Vue .dialog .registerComponent (VIEW_NAME , CustomView)
351
414
352
415
let vm = new Vue ({
353
- created () {
354
- this .$dialog .registerComponent (VIEW_NAME , CustomView)
355
- },
356
416
methods: {
357
417
showCustomView (){
418
+ // Note: Use confirm instead of alert if you need to handle rejection
358
419
this .$dialog .alert (trans (' messages.html' ), {
359
420
view: VIEW_NAME , // can be set globally too
360
421
html: true ,
0 commit comments