quasar-ui-sellmate-ui-kit 1.3.21 → 1.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "1.3.21",
+  "version": "1.3.24",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SDatePickerRange.vue

@@ -38,7 +38,6 @@
             :locale="lang ? locale[lang] : {}"
             :options="optionsStartFn"
             @range-start="getRangeStartDay"
-            @update:modelValue="dateUpdate"
           />
           <q-separator vertical />
           <q-date
@@ -51,7 +50,6 @@
             :locale="lang ? locale[lang] : {}"
             :options="optionsEndFn"
             @range-end="getRangeEndDay"
-            @update:modelValue="dateUpdate"
           >
             <q-btn
               class="reset-to-today-btn no-shadow no-hover"
@@ -123,6 +121,7 @@ import {
   QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date,
 } from 'quasar';
 import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+import { useModelBinder } from '../composables/modelBinder';
 
 export default defineComponent({
   name: 'SDatePickeRange',
@@ -174,7 +173,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const calendarOpen = ref(false);
-    const dateValue = ref(props.modelValue);
+    const dateValue = useModelBinder(props);
     const inputDate = ref(`${dateValue.value.from} ~ ${dateValue.value.to}`);
 
     function resetDate() {
@@ -183,13 +182,6 @@ export default defineComponent({
       dateValue.value.to = date.formatDate(todayReset, 'YYYY-MM-DD');
     }
 
-    function dateUpdate() {
-      if (dateValue.value.from && dateValue.value.to) {
-        calendarOpen.value = false;
-      }
-      emit('update:modelValue', dateValue.value);
-    }
-
     function deleteDate() {
       dateValue.value.from = null;
       dateValue.value.to = null;
@@ -284,7 +276,6 @@ export default defineComponent({
       dateValue,
       inputDate,
       resetDate,
-      dateUpdate,
       getRangeStartDay,
       getRangeEndDay,
       optionsFn,

package/src/components/STimePicker.vue

@@ -20,23 +20,23 @@
         class="content"
       >
         <span class="cursor-pointer">
-          {{ model.from }}
+          {{ display.from }}
           <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-            <time-picker-card v-model="model.from" />
+            <time-picker-card v-model="display.from" @update:modelValue="(val) => handleModel(val, 'from')" />
           </q-menu>
         </span>
         <span class="q-mx-sm">~</span>
         <span class="cursor-pointer">
-          {{ model.to }}
+          {{ display.to }}
           <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-            <time-picker-card v-model="model.to" />
+            <time-picker-card v-model="display.to" @update:modelValue="(val) => handleModel(val, 'to')"/>
           </q-menu>
         </span>
       </div>
       <div v-else class="cursor-pointer content">
-        {{ model }}
+        {{ display }}
         <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
-          <time-picker-card v-model="model" />
+          <time-picker-card v-model="display" @update:modelValue="(val) => handleModel(val)" />
         </q-menu>
       </div>
     </div>
@@ -44,7 +44,9 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+import {
+  defineComponent, ref, onMounted,
+} from 'vue';
 import {
   QIcon, QMenu,
 } from 'quasar';
@@ -75,12 +77,53 @@ export default defineComponent({
       default: '',
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const model = ref(props.modelValue);
+    const display = ref(typeof model.value !== 'string' ? { ...model.value } : model.value);
+    function timeFormat(time) {
+      if (typeof time === 'string') {
+        const hour = Number(time.split(':')[0]);
+        const minute = Number(time.split(':')[1]);
+        const isAm = hour < 12;
+        time = `${hour === 12 ? hour : (`0${hour % 12}`).slice(-2)}:${minute} ${isAm ? 'AM' : 'PM'}`;
+        return time;
+      }
+      const toHour = Number(time.to.split(':')[0]);
+      const fromHour = Number(time.from.split(':')[0]);
+      const toMinute = time.to.split(':')[1];
+      const fromMinute = time.from.split(':')[1];
+      const toIsAm = toHour < 12;
+      const fromIsAm = fromHour < 12;
+      time.to = `${toHour === 12 ? toHour : (`0${toHour % 12}`).slice(-2)}:${toMinute}`;
+      time.to = `${time.to} ${toIsAm ? 'AM' : 'PM'}`;
+      time.from = `${fromHour === 12 ? fromHour : (`0${fromHour % 12}`).slice(-2)}:${fromMinute}`;
+      time.from = `${time.from} ${fromIsAm ? 'AM' : 'PM'}`;
+
+      return time;
+    }
+    onMounted(() => {
+      display.value = timeFormat(display.value);
+    });
+
+    function modelFormat(value) {
+      const hour = Number(value.split(':')[0]);
+      const minute = value.split(':')[1].split(' ')[0];
+      return value.includes('PM') ? `${hour < 12 ? hour + 12 : hour}:${minute}` : `${hour < 12 ? (`0${hour}`).slice(-2) : '00'}:${minute}`;
+    }
+    function handleModel(val, key) {
+      if (!key) {
+        model.value = modelFormat(val);
+        emit('update:modelValue', model.value);
+        return;
+      }
+      model.value[key] = modelFormat(val);
+      emit('update:modelValue', model.value);
+    }
+
     return {
       clockIcon,
-
-      model,
+      display,
+      handleModel,
     };
   },
 });