Improved: usage of ion-input as per changes in ionic7(#246)

hotwax · Dec 28, 2023 · ab96569 · ab96569
1 parent a96aa69
commit ab96569
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 20 deletions.
diff --git a/src/components/BulkAdjustmentModal.vue b/src/components/BulkAdjustmentModal.vue
@@ -13,13 +13,11 @@
   <ion-content>
     <ion-list>
       <ion-item lines="full">
-        <ion-label>{{ $t("Buffer days") }}</ion-label>
-        <ion-input v-model="bufferDays" type="number" :placeholder = "$t('Lead time')" min="1" /> 
+        <ion-input :label="$t('Buffer days')" v-model="bufferDays" type="number" :placeholder="$t('Lead time')" min="1" />
       </ion-item>
 
       <ion-item lines="full">
-        <ion-label>{{ $t("Order buffer") }}</ion-label>
-        <ion-input v-model="orderBuffer" type="number" :placeholder = "$t('Safety stock')" min="1" />
+        <ion-input :label="$t('Order buffer')" v-model="orderBuffer" type="number" :placeholder="$t('Safety stock')" min="1" />
       </ion-item>
 
       <ion-item>

diff --git a/src/components/BulkInventoryAdjustmentModal.vue b/src/components/BulkInventoryAdjustmentModal.vue
@@ -13,8 +13,7 @@
   <ion-content>
     <ion-list>
       <ion-item lines="full">
-        <ion-label>{{ $t("Buffer quantity") }}</ion-label>
-        <ion-input v-model="quantityBuffer" type="number" min="0" :placeholder = "$t('Quantity')" />
+        <ion-input :label="$t('Buffer quantity')" v-model="quantityBuffer" type="number" min="0" :placeholder="$t('Quantity')" />
       </ion-item>
 
       <ion-item>

diff --git a/src/components/ConfigureDateTimeFormatModal.vue b/src/components/ConfigureDateTimeFormatModal.vue
@@ -20,8 +20,7 @@
       <ion-label slot="end">{{ currentDate }}</ion-label>
     </ion-item>
     <ion-item lines="full">
-      <ion-label>{{ $t("Custom date format") }}</ion-label>
-      <ion-input clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value;" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
+      <ion-input :label="$t('Custom date format')" :clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value;" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
     </ion-item>
 
     <ion-item lines="none">

diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
@@ -11,8 +11,7 @@
   </ion-header>
 
   <ion-item>
-    <ion-label>{{ $t("Mapping name") }}</ion-label>
-    <ion-input :placeholder="$t('Field mapping name')" v-model="mappingName" />
+    <ion-input :label="$t('Mapping name')" :placeholder="$t('Field mapping name')" v-model="mappingName" />
   </ion-item>
 
   <ion-content class="ion-padding">

diff --git a/src/components/DateTimeParseErrorModal.vue b/src/components/DateTimeParseErrorModal.vue
@@ -20,7 +20,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-input clear-input='true' v-model="dateTimeFormat" :value="dateTimeFormat" />
+      <ion-input :clear-input='true' v-model="dateTimeFormat" :value="dateTimeFormat" />
     </ion-item>
 
     <ion-item>

diff --git a/src/components/MappingConfiguration.vue b/src/components/MappingConfiguration.vue
@@ -1,17 +1,13 @@
 <template>
   <section>
     <ion-item>
-      <ion-label>{{ $t("Mapping name") }}</ion-label>
-      <ion-input v-model="currentMapping.name" />
+      <ion-input :label="$t('Mapping name')" v-model="currentMapping.name" />
     </ion-item>
 
     <ion-list>
-
       <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
-        <ion-label>{{ $t(fieldValues.label) }}</ion-label>
-        <ion-input v-model="currentMapping.value[field]" />
+        <ion-input :label="$t(fieldValues.label)" v-model="currentMapping.value[field]" />
       </ion-item>
-
     </ion-list>
 
     <div class="ion-padding-top actions desktop-only">
@@ -46,7 +42,6 @@ import {
   IonButton,
   IonIcon,
   IonInput,
-  IonLabel,
   IonItem,
   IonList
 } from "@ionic/vue";
@@ -62,7 +57,6 @@ export default defineComponent({
     IonButton,
     IonIcon,
     IonInput,
-    IonLabel,
     IonItem,
     IonList
   },

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -85,7 +85,7 @@
             <p>{{ $t('Luxon date time formats can be found') }} <a target="_blank" rel="noopener noreferrer" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">{{ $t("here") }}</a></p>
           </ion-card-content> 
           <ion-item>
-            <ion-input clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value; parseSampleDateTime()" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
+            <ion-input :clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value; parseSampleDateTime()" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
           </ion-item>
           <ion-item>
             <ion-label>{{ sampleDateTime }}</ion-label>