quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.5

package/src/components/SDateTimePicker.vue

@@ -1,349 +1,349 @@
-<template>
-  <q-input
-    dense
-    outlined
-    :class="{
-      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
-    }"
-    class="q-pa-none s-date-time-picker"
-    :placeholder="modelValue"
-    v-model="inputValue"
-    :disable="isDisable"
-    mask="####-##-## ##:##:##"
-    @update:modelValue="onInputUpdated"
-    @click="dateTimePopupRef.show()"
-    @keyup.enter="dateTimePopupRef.hide()"
-  >
-    <template v-slot:prepend>
-      <q-icon
-        name="event"
-        class="cursor-pointer"
-        size="20px"
-        @click="dateTimePopupRef[openPopup ? 'hide' : 'show']()"
-      />
-    </template>
-
-    <q-popup-proxy
-      v-model="openPopup"
-      ref="dateTimePopupRef"
-      transition-show="scale"
-      transition-hide="scale"
-      :offset="[0, 4]"
-      no-focus
-      no-parent-event
-    >
-      <div
-        class="date-time-picker-wrapper flex column"
-        style="overflow: hidden"
-      >
-        <q-date
-          v-model="dateValue"
-          mask="YYYY-MM-DD"
-          minimal
-          flat
-          :locale="lang ? locale[lang] : {}"
-          color="positive"
-          :options="optionsFn"
-          noUnset
-        />
-        <q-separator color="Grey_Lighten-4" />
-        <time-picker-card
-          v-model="timeValue"
-          :lang="lang"
-          useSecond
-          style="width: 290px"
-        />
-      </div>
-    </q-popup-proxy>
-  </q-input>
-</template>
-
-<script>
-  import { ref, watch } from 'vue';
-  import { QInput, QDate, QIcon, date, QPopupProxy, QSeparator } from 'quasar';
-  import TimePickerCard from './TimePickerCard.vue';
-
-  const locale = {
-    ko: {
-      daysShort: ['일', '월', '화', '수', '목', '금', '토'],
-      months: [
-        '1월',
-        '2월',
-        '3월',
-        '4월',
-        '5월',
-        '6월',
-        '7월',
-        '8월',
-        '9월',
-        '10월',
-        '11월',
-        '12월',
-      ],
-      monthsShort: [
-        '1월',
-        '2월',
-        '3월',
-        '4월',
-        '5월',
-        '6월',
-        '7월',
-        '8월',
-        '9월',
-        '10월',
-        '11월',
-        '12월',
-      ],
-    },
-    en: {
-      daysShort: ['SUN', 'MON', 'TUE', 'WEN', 'THU', 'FRI', 'SAT'],
-      months: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-      ],
-      monthsShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Ago',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-      ],
-    },
-    ja: {
-      today: '今日',
-      daysShort: ['日', '月', '火', '水', '木', '金', '土'],
-      months: [
-        '1月',
-        '2月',
-        '3月',
-        '4月',
-        '5月',
-        '6月',
-        '7月',
-        '8月',
-        '9月',
-        '10月',
-        '11月',
-        '12月',
-      ],
-      monthsShort: [
-        '1月',
-        '2月',
-        '3月',
-        '4月',
-        '5月',
-        '6月',
-        '7月',
-        '8月',
-        '9月',
-        '10月',
-        '11月',
-        '12月',
-      ],
-    },
-  };
-  export default {
-    name: 'SDateTimePicker',
-    components: {
-      QInput,
-      QDate,
-      QIcon,
-      TimePickerCard,
-      QPopupProxy,
-      QSeparator,
-    },
-    props: {
-      modelValue: {
-        type: String,
-        default: '',
-        require: true,
-      },
-      isDisable: Boolean,
-      lang: {
-        type: String,
-        default: 'ko',
-        require: false,
-      },
-      monthAgoLimit: {
-        type: [Number, null],
-        default: null,
-      },
-    },
-    setup(props, { emit }) {
-      const dateValue = ref(props.modelValue.match(/\d{4}-\d{2}-\d{2}/)[0]);
-      const timeValue = ref(props.modelValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]);
-      const inputValue = ref(`${dateValue.value} ${timeValue.value}`);
-      const dateTimePopupRef = ref(null);
-
-      watch(
-        () => props.modelValue,
-        newValue => {
-          inputValue.value = `${newValue.match(/\d{4}-\d{2}-\d{2}/)[0]} ${
-            newValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]
-          }`;
-          dateValue.value = `${
-            newValue.match(/\d{4}-\d{2}-\d{2}/)[0]
-          }`;
-          timeValue.value = `${
-            newValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]
-          }`;
-        },
-      );
-
-      function onInputUpdated(val) {
-        const matchedInput = val.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
-
-        if (!matchedInput) { return; }
-        const validInput = matchedInput[0];
-        if (
-          Number.isNaN(+new Date(validInput.match(/\d{4}-\d{2}-\d{2}/)[0]))
-        ) {
-          dateValue.value = date.formatDate(new Date(), 'YYYY-MM-DD');
-          inputValue.value = `${dateValue.value} ${timeValue.value}`;
-        } else {
-          [dateValue.value] = validInput.match(/\d{4}-\d{2}-\d{2}/);
-        }
-
-        [timeValue.value] = validInput.match(/(\d{2}):(\d{2}):(\d{2})/);
-      }
-
-      function updateInputValue() {
-        const formattedDate = date.formatDate(dateValue.value, 'YYYY-MM-DD');
-        const formattedTime = timeValue.value.match(/\d{2}:\d{2}:\d{2}/)[0];
-
-        inputValue.value = `${formattedDate} ${formattedTime}`;
-
-        emit('update:modelValue', inputValue.value);
-      }
-
-      function optionsFn(dateStr) {
-        if (props.monthAgoLimit === null) return true;
-
-        const minDate = date.formatDate(
-          date.subtractFromDate(new Date(), { month: props.monthAgoLimit }),
-          'YYYY/MM/DD',
-        );
-        return dateStr > minDate;
-      }
-
-      watch(dateValue, updateInputValue);
-      watch(timeValue, updateInputValue);
-
-      return {
-        console,
-        dateValue,
-        timeValue,
-        inputValue,
-        dateTimePopupRef,
-        locale,
-        optionsFn,
-        onInputUpdated,
-        openPopup: ref(false),
-      };
-    },
-  };
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-date-time-picker {
-    width: fit-content;
-    height: $default-height;
-
-    .q-field__before {
-      padding: 0;
-    }
-
-    .q-field__inner {
-      .q-field__control {
-        padding: 4px 8px !important;
-        align-items: center;
-        height: 100%;
-
-        &:after {
-          border: 1px solid $Grey_Lighten-1;
-          box-shadow: none;
-        }
-
-        &:hover,
-        &:active {
-          background: $Grey_Lighten-5;
-        }
-
-        .q-field__prepend {
-          .q-icon {
-            width: 20px;
-            height: 20px;
-            color: $Grey_Darken-1;
-          }
-        }
-
-        .q-field__prepend {
-          height: $default-content-height;
-          padding: 0;
-
-          > div {
-            min-height: 0;
-            height: 100%;
-            display: flex !important;
-            align-items: center;
-            justify-content: center;
-
-            .q-btn {
-              width: $default-content-size;
-              height: $default-content-size;
-              min-height: $default-content-size;
-
-              .q-icon {
-                font-size: $icon-size-lg;
-              }
-            }
-          }
-        }
-
-        &-container {
-          height: $default-content-height;
-
-          .q-field__native {
-            height: 100%;
-            line-height: $default-line-height;
-            text-align: center;
-            padding: 0 !important;
-
-            font: {
-              size: $default-font;
-              weight: $default-font-weight;
-            }
-
-            input::placeholder {
-              color: $Grey_Darken-4;
-            }
-          }
-        }
-      }
-    }
-  }
-  .date-time-picker-wrapper {
-    .time-picker-card {
-      box-shadow: none;
-    }
-  }
-</style>
+<template>
+  <q-input
+    dense
+    outlined
+    :class="{
+      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
+    }"
+    class="q-pa-none s-date-time-picker"
+    :placeholder="modelValue"
+    v-model="inputValue"
+    :disable="isDisable"
+    mask="####-##-## ##:##:##"
+    @update:modelValue="onInputUpdated"
+    @click="dateTimePopupRef.show()"
+    @keyup.enter="dateTimePopupRef.hide()"
+  >
+    <template v-slot:prepend>
+      <q-icon
+        name="event"
+        class="cursor-pointer"
+        size="20px"
+        @click="dateTimePopupRef[openPopup ? 'hide' : 'show']()"
+      />
+    </template>
+
+    <q-popup-proxy
+      v-model="openPopup"
+      ref="dateTimePopupRef"
+      transition-show="scale"
+      transition-hide="scale"
+      :offset="[0, 4]"
+      no-focus
+      no-parent-event
+    >
+      <div
+        class="date-time-picker-wrapper flex column"
+        style="overflow: hidden"
+      >
+        <q-date
+          v-model="dateValue"
+          mask="YYYY-MM-DD"
+          minimal
+          flat
+          :locale="lang ? locale[lang] : {}"
+          color="positive"
+          :options="optionsFn"
+          noUnset
+        />
+        <q-separator color="Grey_Lighten-4" />
+        <time-picker-card
+          v-model="timeValue"
+          :lang="lang"
+          useSecond
+          style="width: 290px"
+        />
+      </div>
+    </q-popup-proxy>
+  </q-input>
+</template>
+
+<script>
+  import { ref, watch } from 'vue';
+  import { QInput, QDate, QIcon, date, QPopupProxy, QSeparator } from 'quasar';
+  import TimePickerCard from './TimePickerCard.vue';
+
+  const locale = {
+    ko: {
+      daysShort: ['일', '월', '화', '수', '목', '금', '토'],
+      months: [
+        '1월',
+        '2월',
+        '3월',
+        '4월',
+        '5월',
+        '6월',
+        '7월',
+        '8월',
+        '9월',
+        '10월',
+        '11월',
+        '12월',
+      ],
+      monthsShort: [
+        '1월',
+        '2월',
+        '3월',
+        '4월',
+        '5월',
+        '6월',
+        '7월',
+        '8월',
+        '9월',
+        '10월',
+        '11월',
+        '12월',
+      ],
+    },
+    en: {
+      daysShort: ['SUN', 'MON', 'TUE', 'WEN', 'THU', 'FRI', 'SAT'],
+      months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+      ],
+      monthsShort: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Ago',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+      ],
+    },
+    ja: {
+      today: '今日',
+      daysShort: ['日', '月', '火', '水', '木', '金', '土'],
+      months: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
+      monthsShort: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
+    },
+  };
+  export default {
+    name: 'SDateTimePicker',
+    components: {
+      QInput,
+      QDate,
+      QIcon,
+      TimePickerCard,
+      QPopupProxy,
+      QSeparator,
+    },
+    props: {
+      modelValue: {
+        type: String,
+        default: '',
+        require: true,
+      },
+      isDisable: Boolean,
+      lang: {
+        type: String,
+        default: 'ko',
+        require: false,
+      },
+      monthAgoLimit: {
+        type: [Number, null],
+        default: null,
+      },
+    },
+    setup(props, { emit }) {
+      const dateValue = ref(props.modelValue.match(/\d{4}-\d{2}-\d{2}/)[0]);
+      const timeValue = ref(props.modelValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]);
+      const inputValue = ref(`${dateValue.value} ${timeValue.value}`);
+      const dateTimePopupRef = ref(null);
+
+      watch(
+        () => props.modelValue,
+        newValue => {
+          inputValue.value = `${newValue.match(/\d{4}-\d{2}-\d{2}/)[0]} ${
+            newValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]
+          }`;
+          dateValue.value = `${
+            newValue.match(/\d{4}-\d{2}-\d{2}/)[0]
+          }`;
+          timeValue.value = `${
+            newValue.match(/(\d{2}):(\d{2}):(\d{2})/)[0]
+          }`;
+        },
+      );
+
+      function onInputUpdated(val) {
+        const matchedInput = val.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
+
+        if (!matchedInput) { return; }
+        const validInput = matchedInput[0];
+        if (
+          Number.isNaN(+new Date(validInput.match(/\d{4}-\d{2}-\d{2}/)[0]))
+        ) {
+          dateValue.value = date.formatDate(new Date(), 'YYYY-MM-DD');
+          inputValue.value = `${dateValue.value} ${timeValue.value}`;
+        } else {
+          [dateValue.value] = validInput.match(/\d{4}-\d{2}-\d{2}/);
+        }
+
+        [timeValue.value] = validInput.match(/(\d{2}):(\d{2}):(\d{2})/);
+      }
+
+      function updateInputValue() {
+        const formattedDate = date.formatDate(dateValue.value, 'YYYY-MM-DD');
+        const formattedTime = timeValue.value.match(/\d{2}:\d{2}:\d{2}/)[0];
+
+        inputValue.value = `${formattedDate} ${formattedTime}`;
+
+        emit('update:modelValue', inputValue.value);
+      }
+
+      function optionsFn(dateStr) {
+        if (props.monthAgoLimit === null) return true;
+
+        const minDate = date.formatDate(
+          date.subtractFromDate(new Date(), { month: props.monthAgoLimit }),
+          'YYYY/MM/DD',
+        );
+        return dateStr > minDate;
+      }
+
+      watch(dateValue, updateInputValue);
+      watch(timeValue, updateInputValue);
+
+      return {
+        console,
+        dateValue,
+        timeValue,
+        inputValue,
+        dateTimePopupRef,
+        locale,
+        optionsFn,
+        onInputUpdated,
+        openPopup: ref(false),
+      };
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-date-time-picker {
+    width: fit-content;
+    height: $default-height;
+
+    .q-field__before {
+      padding: 0;
+    }
+
+    .q-field__inner {
+      .q-field__control {
+        padding: 4px 8px !important;
+        align-items: center;
+        height: 100%;
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        &:hover,
+        &:active {
+          background: $Grey_Lighten-5;
+        }
+
+        .q-field__prepend {
+          .q-icon {
+            width: 20px;
+            height: 20px;
+            color: $Grey_Darken-1;
+          }
+        }
+
+        .q-field__prepend {
+          height: $default-content-height;
+          padding: 0;
+
+          > div {
+            min-height: 0;
+            height: 100%;
+            display: flex !important;
+            align-items: center;
+            justify-content: center;
+
+            .q-btn {
+              width: $default-content-size;
+              height: $default-content-size;
+              min-height: $default-content-size;
+
+              .q-icon {
+                font-size: $icon-size-lg;
+              }
+            }
+          }
+        }
+
+        &-container {
+          height: $default-content-height;
+
+          .q-field__native {
+            height: 100%;
+            line-height: $default-line-height;
+            text-align: center;
+            padding: 0 !important;
+
+            font: {
+              size: $default-font;
+              weight: $default-font-weight;
+            }
+
+            input::placeholder {
+              color: $Grey_Darken-4;
+            }
+          }
+        }
+      }
+    }
+  }
+  .date-time-picker-wrapper {
+    .time-picker-card {
+      box-shadow: none;
+    }
+  }
+</style>