added optional input mask to textbox-question component

package-lock.json

@@ -15,6 +15,7 @@
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
         "jest-junit": "^13.0.0",
+        "maska": "^1.5.0",
         "vee-validate": "^4.5.7",
         "vue": "^3.0.0",
         "vue-plugin-load-script": "^2.1.0",
@@ -16625,6 +16626,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/maska": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-1.5.0.tgz",
+      "integrity": "sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q=="
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -37642,6 +37648,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "maska": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-1.5.0.tgz",
+      "integrity": "sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
     "jest-junit": "^13.0.0",
+    "maska": "^1.5.0",
     "vee-validate": "^4.5.7",
     "vue": "^3.0.0",
     "vue-plugin-load-script": "^2.1.0",

src/common-components/textbox-question/textbox-question.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="textbox-question">
     <label :for="inputId" class="form-label">{{labelText}}</label>
-    <input v-model="value" 
+    <input v-model="value" v-maska="mask"
       type="text" 
       class="form-control" 
       :ref="inputId" 
@@ -9,13 +9,14 @@
       :placeholder="placeholderText" 
       :aria-disabled="isDisabled" 
       :disabled="isDisabled" 
-      :aria-required="isRequired"
+      :aria-required="isRequired"     
       autocomplete="off" />
     <p class="mt-1 mb-0">There has been an error!</p>
   </div>
 </template>
 
 <script>
+
 export default {
   name: "textbox-question",
   props: {
@@ -25,6 +26,10 @@ export default {
     inputId: String,
     isDisabled: Boolean,
     isRequired: Boolean,
+    mask: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
       value: {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -19,7 +19,7 @@
                         <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
                     </div>            
                     <div class="col-6">
-                        <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
+                        <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" mask="#####" />
                     </div>      
                 </div> 
             </form>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import LoadScript from "vue-plugin-load-script";
+import Maska from "maska";
 import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
@@ -12,6 +13,7 @@ const vueApp = createApp(App);
 vueApp.use(router);
 vueApp.use(store);
 vueApp.use(LoadScript);
+vueApp.use(Maska);
 vueApp.mixin(baseMixin);
 
 vueApp.mount("#app");