Webclient libupdates (#6387)

* Update Webclient libs * Fix maska errors with latest web client library updates for AB#16877. --------- Co-authored-by: Stephen Laws <[email protected]>
bcgov · Dec 12, 2024 · f3f862f · f3f862f
1 parent 9e9db30
commit f3f862f
Show file tree

Hide file tree

Showing 8 changed files with 567 additions and 271 deletions.
diff --git a/Apps/WebClient/src/ClientApp/package-lock.json b/Apps/WebClient/src/ClientApp/package-lock.json
diff --git a/Apps/WebClient/src/ClientApp/package.json b/Apps/WebClient/src/ClientApp/package.json
@@ -14,31 +14,31 @@
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vuepic/vue-datepicker": "^5.4.0",
-        "axios": "^1.7.7",
+        "axios": "^1.7.9",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
         "keycloak-js": "^22.0.5",
         "loglevel": "^1.9.2",
         "luxon": "^3.5.0",
-        "maska": "^2.1.11",
-        "pinia": "^2.2.2",
+        "maska": "^3.0.4",
+        "pinia": "^2.3.0",
         "pinia-plugin-persistedstate": "^3.2.3",
         "roboto-fontface": "*",
         "throttle-debounce": "^5.0.2",
-        "vue": "^3.5.8",
+        "vue": "^3.5.13",
         "vue-clipboard3": "^2.0.0",
-        "vue-router": "^4.4.5",
-        "vuetify": "^3.7.2"
+        "vue-router": "^4.5.0",
+        "vuetify": "^3.7.5"
     },
     "devDependencies": {
         "@babel/types": "^7.25.6",
-        "@fortawesome/fontawesome-svg-core": "^6.6.0",
-        "@fortawesome/free-regular-svg-icons": "^6.6.0",
-        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.1",
+        "@fortawesome/free-regular-svg-icons": "^6.7.1",
+        "@fortawesome/free-solid-svg-icons": "^6.7.1",
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "@types/file-saver": "^2.0.7",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^18.19.50",
+        "@types/node": "^18.19.68",
         "@types/throttle-debounce": "^5.0.2",
         "@types/webfontloader": "^1.6.38",
         "@vitejs/plugin-vue": "^4.6.2",
@@ -47,12 +47,12 @@
         "eslint": "^8.57.1",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-unused-imports": "^2.0.0",
-        "eslint-plugin-vue": "^9.28.0",
+        "eslint-plugin-vue": "^9.32.0",
         "prettier": "^2.8.8",
-        "sass": "^1.79.3",
-        "typescript": "^5.6.2",
+        "sass": "^1.82.0",
+        "typescript": "5.6.2",
         "vite": "^4.5.5",
         "vite-plugin-vuetify": "^1.0.0",
-        "vue-tsc": "^2.1.6"
+        "vue-tsc": "^2.1.10"
     }
 }
diff --git a/Apps/WebClient/src/ClientApp/src/components/common/HgDatePickerComponent.vue b/Apps/WebClient/src/ClientApp/src/components/common/HgDatePickerComponent.vue
@@ -4,7 +4,7 @@ import "@vuepic/vue-datepicker/dist/main.css";
 import { useVuelidate } from "@vuelidate/core";
 import { helpers } from "@vuelidate/validators";
 import VueDatePicker from "@vuepic/vue-datepicker";
-import { vMaska } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, ref, watch } from "vue";
 
 import HgIconButtonComponent from "@/components/common/HgIconButtonComponent.vue";
@@ -118,7 +118,7 @@ watch(
 <template>
     <v-text-field
         v-model="textFieldValue"
-        v-maska:[maskOptions]
+        v-maska="maskOptions"
         clearable
         type="text"
         :label="label"

diff --git a/Apps/WebClient/src/ClientApp/src/components/private/dependent/AddDependentComponent.vue b/Apps/WebClient/src/ClientApp/src/components/private/dependent/AddDependentComponent.vue
@@ -2,7 +2,7 @@
 import { useVuelidate } from "@vuelidate/core";
 import { helpers, minLength, required, sameAs } from "@vuelidate/validators";
 import { Duration } from "luxon";
-import { vMaska } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, nextTick, ref, watch } from "vue";
 
 import HgButtonComponent from "@/components/common/HgButtonComponent.vue";
@@ -355,7 +355,7 @@ watch(() => dependent.value.dateOfBirth, touchDateOfBirth);
                         <v-text-field
                             id="phn"
                             v-model="dependent.PHN"
-                            v-maska:[phnMaskaOptions]
+                            v-maska="phnMaskaOptions"
                             label="PHN"
                             clearable
                             type="text"

diff --git a/Apps/WebClient/src/ClientApp/src/components/private/profile/UserProfileSmsComponent.vue b/Apps/WebClient/src/ClientApp/src/components/private/profile/UserProfileSmsComponent.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import useVuelidate from "@vuelidate/core";
 import { helpers, not, sameAs } from "@vuelidate/validators";
-import { Mask, MaskaDetail, vMaska } from "maska";
+import { Mask, MaskaDetail } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, ref, watch } from "vue";
 
 import DisplayFieldComponent from "@/components/common/DisplayFieldComponent.vue";
@@ -177,7 +178,7 @@ watch(maskedStoreValue, (value) => (maskedValue.value = value));
     <v-sheet :max-width="400">
         <v-text-field
             v-model="maskedValue"
-            v-maska:[maskOptions]
+            v-maska="maskOptions"
             data-testid="smsNumberInput"
             :class="{ 'mb-4': inputErrorMessages.length > 0 }"
             type="tel"

diff --git a/Apps/WebClient/src/ClientApp/src/components/private/registration/RegistrationView.vue b/Apps/WebClient/src/ClientApp/src/components/private/registration/RegistrationView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
 import { helpers, required, sameAs } from "@vuelidate/validators";
-import { vMaska } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, Ref, ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -320,7 +320,7 @@ loadTermsOfService();
                 <v-text-field
                     id="smsNumberInput"
                     v-model="v$.smsNumber.$model"
-                    v-maska:[smsMaskaOptions]
+                    v-maska="smsMaskaOptions"
                     :disabled="!isSMSNumberChecked"
                     data-testid="smsNumberInput"
                     placeholder="Your phone number"

diff --git a/.../ClientApp/src/components/public/pcr-test-kit-registration/PcrTestKitRegistrationForm.vue b/.../ClientApp/src/components/public/pcr-test-kit-registration/PcrTestKitRegistrationForm.vue
@@ -7,7 +7,8 @@ import {
     required,
     requiredIf,
 } from "@vuelidate/validators";
-import { Mask, MaskaDetail, vMaska } from "maska";
+import { Mask, MaskaDetail } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, ref } from "vue";
 
 import DisplayFieldComponent from "@/components/common/DisplayFieldComponent.vue";
@@ -441,7 +442,7 @@ if (!props.serialNumber) {
                         />
                         <v-text-field
                             v-model="v$.phn.$model"
-                            v-maska:[phnMaskOptions]
+                            v-maska="phnMaskOptions"
                             label="Personal Health Number"
                             class="mb-2"
                             data-testid="phn-input"
@@ -512,7 +513,7 @@ if (!props.serialNumber) {
                         />
                         <v-text-field
                             v-model="v$.postalOrZip.$model"
-                            v-maska:[postalCodeMaskOptions]
+                            v-maska="postalCodeMaskOptions"
                             label="Postal Code"
                             data-testid="pcr-zip-input"
                             type="text"
@@ -543,7 +544,7 @@ if (!props.serialNumber) {
                         <v-text-field
                             v-if="dataSource === PcrDataSource.Manual"
                             v-model="v$.contactPhoneNumber.$model"
-                            v-maska:[phoneMaskOptions]
+                            v-maska="phoneMaskOptions"
                             data-testid="contact-phone-number-input"
                             class="mb-2"
                             type="tel"

diff --git a/Apps/WebClient/src/ClientApp/src/components/public/vaccine-card/VaccineCardView.vue b/Apps/WebClient/src/ClientApp/src/components/public/vaccine-card/VaccineCardView.vue
@@ -3,7 +3,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { helpers, required } from "@vuelidate/validators";
 import { saveAs } from "file-saver";
 import html2canvas from "html2canvas";
-import { vMaska } from "maska";
+import { vMaska } from "maska/vue";
 import { computed, ref, watch } from "vue";
 
 import HgButtonComponent from "@/components/common/HgButtonComponent.vue";
@@ -393,7 +393,7 @@ watch(vaccineRecord, (value) => {
                             <v-text-field
                                 id="phn"
                                 v-model="phn"
-                                v-maska:[phnMaskaOptions]
+                                v-maska="phnMaskaOptions"
                                 label="Personal Health Number"
                                 autofocus
                                 clearable