Ability to customize verification help text to another text/language.

Author: Godofbrowser

README.md

@@ -139,6 +139,7 @@ let options = {
     animation: 'zoom', // Available: "zoom", "bounce", "fade"
     type: 'basic', // coming soon: 'soft', 'hard'
     verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button
+    verificationHelp: 'Type "[+:verification]" below to confirm', // Verification help text. [+:verification] will be matched with 'options.verification' (i.e 'Type "continue" below to confirm')
     clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
 };
 

dist/vuejs-dialog.min.js

@@ -14,10 +14,8 @@
                             <div v-else="" class="dg-content">{{ options.message }}</div>
 
                             <form v-if="isHardConfirm || isPrompt" class="dg-form" @submit.prevent="submitDialogForm">
-                                <label for="dg-input-label" style="font-size: 13px">
-                                    Type "{{ options.verification }}" below to confirm
-                                </label>
-                                <input type="text" placeholder="Verification text"
+                                <label for="dg-input-label" style="font-size: 13px">{{ hardConfirmHelpText }}</label>
+                                <input type="text" :placeholder="options.verification"
                                        v-model="input"
                                        id="dg-input-label"
                                        style="width: 100%;margin-top: 10px;
@@ -128,6 +126,12 @@
             },
             rightBtnText(){
                 return this.options.reverse ? this.options.cancelText : this.options.okText
+            },
+            hardConfirmHelpText() {
+                return this.options.verificationHelp
+                    .replace(/\[\+:(\w+)]/, (match, $1) => {
+                        return this.options[$1] || match
+                    })
             }
         },
         methods: {

dist/vuejs-dialog.min.js.map

@@ -18,17 +18,18 @@ export const ANIMATION_TYPES = {
 }
 
 export const DEFAULT_OPTIONS = {
-    html            : false,
-    loader          : false,
-    reverse         : false,
-    headline        : "Please confirm",
-    okText          : "Continue",
-    cancelText      : "Close",
-    type            : CONFIRM_TYPES.BASIC,
-    window          : DIALOG_TYPES.CONFIRM,
-    message         : "Proceed with the request?",
-    helpText        : "Click the proceed button to continue",
-    clicksCount      : 3,
-    animation       : 'zoom',
-    verification    : 'continue'
+    html                 : false,
+    loader               : false,
+    reverse              : false,
+    headline             : "Please confirm",
+    okText               : "Continue",
+    cancelText           : "Close",
+    type                 : CONFIRM_TYPES.BASIC,
+    window               : DIALOG_TYPES.CONFIRM,
+    message              : "Proceed with the request?",
+    helpText             : "Click the proceed button to continue",
+    clicksCount          : 3,
+    animation            : 'zoom',
+    verification         : 'continue',
+    verificationHelp     : 'Type "[+:verification]" below to confirm'
 }

docs/js/vuejs-dialog.min.js

@@ -32,7 +32,7 @@ if (isProduction) {
             minimize: true
         }),
         new WebpackShellPlugin({
-            onBuildExit: ['node src\\docs\\js\\copy-to-docs.js']
+            onBuildEnd: ['node src\\docs\\js\\copy-to-docs.js']
         })
     ])
 }