Improved: app to upgrade ionic to v7.6.0(#298)

package.json

@@ -15,12 +15,12 @@
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.12.1",
     "@hotwax/oms-api": "^1.10.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@ionic/core": "^7.6.0",
+    "@ionic/vue": "^7.6.0",
+    "@ionic/vue-router": "^7.6.0",
     "@shopify/app-bridge-utils": "^2.0.4",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",

src/components/ClosePurchaseOrderModal.vue

@@ -27,7 +27,7 @@
           <p>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
         </ion-label>
         <ion-buttons>
-          <ion-checkbox slot="end" :modelValue="isPOItemStatusPending(item) ? item.isChecked : true" :disabled="isPOItemStatusPending(item) ? false : true" />
+          <ion-checkbox aria-label="itemStatus" slot="end" :modelValue="isPOItemStatusPending(item) ? item.isChecked : true" :disabled="isPOItemStatusPending(item) ? false : true" />
         </ion-buttons>
       </ion-item>
     </ion-list>

src/components/LocationPopover.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-chip outline>
-    <ion-icon :icon="locationOutline"/>
-    <ion-select interface="popover" :placeholder="translate('facility location')" :value="item.locationSeqId" @ionChange="setFacilityLocation($event)">
+    <ion-select aria-label="Facility Location" interface="popover" :placeholder="translate('facility location')" :value="item.locationSeqId" @ionChange="setFacilityLocation($event)">
+      <ion-icon slot="start" :icon="locationOutline"/>
       <ion-select-option v-for="facilityLocation in (getFacilityLocationsByFacilityId(facilityId) ? getFacilityLocationsByFacilityId(facilityId) : [])" :key="facilityLocation.locationSeqId" :value="facilityLocation.locationSeqId" >{{ facilityLocation.locationPath ? facilityLocation.locationPath : facilityLocation.locationSeqId }}</ion-select-option>
     </ion-select>
   </ion-chip>
@@ -53,4 +53,10 @@ export default defineComponent({
     }
   }
 });
-</script> 
+</script>
+
+<style scoped>
+ion-chip > ion-select {
+  min-height: 0px;
+}
+</style>

src/main.ts

@@ -37,7 +37,8 @@ import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
-    mode: 'md'
+    mode: 'md',
+    innerHTMLTemplatesEnabled: true // added this entry to enable html support inside alert, and toast
   })
   .use(router)
   .use(store)

src/views/PurchaseOrderDetail.vue

@@ -18,12 +18,10 @@
     <ion-content>
       <main>
         <div class="doc-id">
-          <ion-item lines="none">
-            <ion-label>
-              <h1>{{ translate("Purchase Order")}}: {{ order.externalOrderId }}</h1>
-              <p>{{ translate("Item count") }}: {{ order.items.length }}</p>
-            </ion-label>
-          </ion-item>
+          <ion-label class="ion-padding">
+            <h1>{{ translate("Purchase Order")}}: {{ order.externalOrderId }}</h1>
+            <p>{{ translate("Item count") }}: {{ order.items.length }}</p>
+          </ion-label>
 
           <div class="doc-meta">
             <ion-chip @click="copyToClipboard(order.orderId, 'Internal ID saved to clipboard')">{{ order.orderId }}<ion-icon :icon="copyOutline"/></ion-chip>
@@ -33,8 +31,7 @@
 
         <div class="scanner">
           <ion-item>
-            <ion-label position="fixed">{{translate("Scan items")}}</ion-label>
-            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
+            <ion-input :label="translate('Scan items')" label-placement="fixed" autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
           </ion-item>
           <ion-button expand="block" fill="outline" @click="scan">
             <ion-icon slot="start" :icon="cameraOutline" />
@@ -71,8 +68,7 @@
 
             <div class="product-count">
               <ion-item>
-                <ion-label position="floating">{{ translate("Qty") }}</ion-label>       
-                <ion-input type="number" value="0" min="0" v-model="item.quantityAccepted" />
+                <ion-input :label="translate('Qty')" label-placement="floating" type="number" value="0" min="0" v-model="item.quantityAccepted" />
               </ion-item>
             </div>
           </div>

src/views/ReturnDetails.vue

@@ -25,8 +25,7 @@
 
         <div class="scanner">
           <ion-item>
-            <ion-label>{{ translate("Scan items") }}</ion-label>
-            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
+            <ion-input :label="translate('Scan items')" autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
           </ion-item>
 
           <ion-button expand="block" fill="outline" @click="scanCode()">
@@ -57,8 +56,7 @@
 
             <div class="product-count">
               <ion-item v-if="isReturnReceivable(current.statusId)">
-                <ion-label position="floating">{{ translate("Qty") }}</ion-label>
-                <ion-input type="number" min="0" v-model="item.quantityAccepted" />
+                <ion-input :label="translate('Qty')" label-placement="floating" type="number" min="0" v-model="item.quantityAccepted" />
               </ion-item>
               <ion-item v-if="!isReturnReceivable(current.statusId)" lines="none">
                 <ion-label>{{ item.quantityAccepted }} {{ translate("received") }}</ion-label>

src/views/Settings.vue

@@ -48,8 +48,7 @@
             {{ translate('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
           </ion-card-content>
           <ion-item lines="none">
-            <ion-label>{{ translate("Select facility") }}</ion-label>
-            <ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
+            <ion-select :label="translate('Select facility')" interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
               <ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.facilityName }}</ion-select-option>
             </ion-select>
           </ion-item>
@@ -72,14 +71,12 @@
           </ion-card-content>
 
           <ion-item>
-            <ion-label>{{ translate("Primary Product Identifier") }}</ion-label>
-            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('primary identifier')" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
+            <ion-select :label="translate('Primary Product Identifier')" :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('primary identifier')" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
               <ion-select-option v-for="identification in productIdentifications" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
             </ion-select>
           </ion-item>
           <ion-item>
-            <ion-label>{{ translate("Secondary Product Identifier") }}</ion-label>
-            <ion-select :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('secondary identifier')" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
+            <ion-select :label="translate('Secondary Product Identifier')" :disabled="!hasPermission(Actions.APP_PRODUCT_IDENTIFIER_UPDATE) || !currentEComStore?.productStoreId" interface="popover" :placeholder="translate('secondary identifier')" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
               <ion-select-option v-for="identification in productIdentifications" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
               <ion-select-option value="">{{ translate("None") }}</ion-select-option>
             </ion-select>

src/views/ShipmentDetails.vue

@@ -23,8 +23,7 @@
 
         <div class="scanner" v-if="!isShipmentReceived()">
           <ion-item>
-            <ion-label>{{ translate("Scan items") }}</ion-label>
-            <ion-input autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()"></ion-input>
+            <ion-input :label="translate('Scan items')" autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()"></ion-input>
           </ion-item>
 
           <ion-button expand="block" fill="outline" @click="scanCode()">
@@ -56,8 +55,7 @@
 
             <div class="product-count">
               <ion-item v-if="!isShipmentReceived()">
-                <ion-label position="floating">{{ translate("Qty") }}</ion-label>
-                <ion-input type="number" min="0" v-model="item.quantityAccepted" />
+                <ion-input :label="translate('Qty')" label-placement="floating" type="number" min="0" v-model="item.quantityAccepted" />
               </ion-item>
               <div v-else>
                 <ion-item lines="none">

src/views/Shopify.vue

@@ -8,8 +8,9 @@
           <ion-list>
             <Logo />
             <ion-item>
-              <ion-label position="floating"> {{ translate("Shop") }}</ion-label>
               <ion-input
+                :label="translate('Shop')"
+                label-placement="floating"
                 v-model="shopOrigin"
                 name="shopOrigin"
                 type="text"
@@ -35,7 +36,6 @@ import {
   IonContent,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonPage,
 } from "@ionic/vue";
@@ -58,7 +58,6 @@ export default defineComponent({
     IonContent,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonPage,
     Logo

src/views/TimezoneModal.vue

@@ -31,14 +31,13 @@
         <ion-list>
           <ion-radio-group value="rd" v-model="timeZoneId">
             <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-              <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-              <ion-radio :value="timeZone.id" slot="start" />
+              <ion-radio :value="timeZone.id" label-placement="end" justify="start">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
             </ion-item>
           </ion-radio-group>
         </ion-list>
       </div>
     </form>
-
+    
     <!-- Defined ion-fab outside of form element as the fab button losoe its styling when wrapped inside form -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button :disabled="!timeZoneId" @click="setUserTimeZone">
@@ -58,7 +57,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonList,
   IonRadioGroup,
   IonRadio,
@@ -87,7 +85,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonRadioGroup,
     IonRadio,