quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/SDateAutoRangePicker.vue

@@ -1,341 +1,341 @@
-<template>
-  <q-input
-    dense
-    outlined
-    :class="{
-      'text-Grey_Default bg-Grey_Lighten-5': disable,
-      's-date-auto-range-picker--inside': insideLabel,
-      's-date-auto-range-picker--use-icon': useDelete,
-    }"
-    readonly
-    class="q-pa-none s-date-auto-range-picker bg-white"
-    :disable="disable"
-    @click="calendarOpen = true"
-    data-cy="autoRangeCalendar"
-    v-model="inputDate"
-  >
-    <template v-slot:before v-if="insideLabel">
-      <div
-        class="date-picker-label s-px-sm q-py-xs text-Grey_Darken-4 bg-Grey_Lighten-5"
-        :class="disable
-          ? 's-border-Grey_Lighten-2'
-          : 's-border-Grey_Lighten-1'"
-      >
-        {{ insideLabel }}
-      </div>
-    </template>
-    <template v-slot:prepend>
-      <q-icon
-        :name="dateRangeIcon"
-        class="cursor-pointer q-pa-none no-hover"
-        size="20px"
-        :color="disable ? 'Grey_Default' : 'Grey_Darken-1'"
-      >
-        <q-menu v-model="calendarOpen" fit class="date-picker-range-wrapper" ref="dateMenuRef">
-          <q-date
-            v-model="dateModel.from"
-            minimal
-            square
-            color="positive"
-            class="q-pa-none"
-            mask="YYYY-MM-DD"
-            :locale="lang ? locale[lang] : {}"
-            :options="optionsStartFn"
-            @update:model-value="(value) => updateDate(value, 'from')"
-          />
-          <q-separator vertical />
-          <q-date
-            v-model="dateModel.to"
-            minimal
-            square
-            color="positive"
-            class="q-pa-none"
-            mask="YYYY-MM-DD"
-            :locale="lang ? locale[lang] : {}"
-            :options="optionsEndFn"
-            @update:model-value="(value) => updateDate(value, 'to')"
-          >
-            <q-btn
-              class="reset-to-today-btn no-shadow no-hover"
-              unelevated
-              text-color="black"
-              label="오늘"
-              @click="resetDate"
-            />
-          </q-date>
-        </q-menu>
-      </q-icon>
-    </template>
-    <template v-slot:default>
-      <span class="text-center date-str">{{
-        dateModel.from
-      }}</span>~<span class="text-center date-str">{{
-        dateModel.to
-      }}</span>
-    </template>
-    <template v-slot:append v-if="useDelete">
-      <q-icon
-        :name="closeIcon"
-        size="16px"
-        class="cursor-pointer"
-        @click="deleteDate"
-        data-cy="delete-icon"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  // @ts-check
-  import { defineComponent, ref, computed, watch } from 'vue';
-  import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
-
-  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월',
-      ],
-    },
-  };
-
-  export default defineComponent({
-    name: 'SDateAutoRangePicker',
-    components: {
-      QInput,
-      QBtn,
-      QDate,
-      QMenu,
-      QIcon,
-      QSeparator,
-    },
-    props: {
-      disable: {
-        type: Boolean,
-        default: false,
-      },
-      insideLabel: {
-        type: String,
-        default: '',
-      },
-      modelValue: {
-        type: Object,
-        /**
-         * @returns {{ from: null | string; to: null | string; }}
-        */
-        default: () => ({ from: null, to: null }),
-        require: true,
-      },
-      useDelete: {
-        type: Boolean,
-        default: false,
-      },
-      lang: {
-        type: String,
-        default: 'ko',
-      },
-      dateLimit: {
-        type: [Object, Number, null],
-        /**
-         * number 일 경우, 기본 값 date
-         * @returns {null | number | { ['date' | 'month' | 'year']: number; }}
-        */
-        default: null,
-      },
-      width: {
-        type: String,
-        default: 'fit-content',
-      },
-    },
-    setup(props, { emit }) {
-      const todayReset = date.formatDate(new Date(), 'YYYY/MM/DD');
-
-      const dateModel = ref({ from: todayReset, to: todayReset });
-      watch(() => props.modelValue, (newValue) => {
-        dateModel.value = newValue;
-      }, { immediate: true });
-
-      function resetDate() {
-        dateModel.value.from = date.formatDate(todayReset, 'YYYY-MM-DD');
-        dateModel.value.to = date.formatDate(todayReset, 'YYYY-MM-DD');
-      }
-
-      function deleteDate() {
-        dateModel.value = { from: null, to: null };
-      }
-
-      const limit = ref('');
-      function optionsStartFn() {
-        if (dateModel.value.from && props.dateLimit) {
-          limit.value = '';
-          limit.value = date.formatDate(date.addToDate(new Date(dateModel.value.from), typeof props.dateLimit === 'number'
-          ? { date: props.dateLimit }
-          : props.dateLimit), 'YYYY-MM-DD');
-        }
-        return true;
-      }
-
-      function optionsEndFn(to = '') {
-        if (!dateModel.value.from) {
-          dateModel.value.to = null;
-          return false;
-        }
-        if (!props.dateLimit) {
-          return true;
-        }
-        const formatTo = date.formatDate(to, 'YYYY-MM-DD');
-        return formatTo >= dateModel.value.from && formatTo <= limit.value;
-      }
-
-      /**
-       * @param {string} model
-       * @param {'from' | 'to'} position
-      */
-      function updateDate(model, position = 'from') {
-        dateModel.value[position] = model;
-        emit('update:modelValue', dateModel.value);
-      }
-
-      return {
-        dateRangeIcon,
-        closeIcon,
-        locale,
-        dateModel,
-        calendarOpen: ref(false),
-        inputDate: computed({
-          get() {
-            return `${dateModel.value.from} ~ ${dateModel.value.to}`;
-          },
-          set() {
-            return `${dateModel.value.from} ~ ${dateModel.value.to}`;
-          },
-        }),
-        dateWidth: computed(() => props.width || 'fit-content'),
-        resetDate,
-        deleteDate,
-        updateDate,
-        optionsStartFn,
-        optionsEndFn,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-@import '../css/quasar.variables.scss';
-
-.s-date-auto-range-picker {
-  width: v-bind(dateWidth);
-  .q-field__control {
-    max-height: $default-height;
-    height: $default-height;
-    padding: 0;
-    &:before {
-      border: 1px solid $Grey_Lighten-1 !important;
-    }
-    &:after {
-      border-color: transparent !important;
-      box-shadow: none !important;
-    }
-    &:hover,
-    &:active {
-      box-sizing: none;
-      background-color: $Grey_Lighten-5;
-    }
-    .q-field__prepend {
-      padding: 0;
-      margin: 0 4px 0 8px;
-      height: 28px;
-      width: 20px;
-    }
-    &-container {
-      align-items: center;
-      padding: 0;
-      margin: 0 16px 0 8px;
-      .q-field__native {
-        display: none;
-      }
-      .date-str {
-        min-width: 66px;
-        line-height: $default-height;
-        font-size: $default-font;
-        display: block;
-        color: $Grey_Darken-4;
-        height: 100%;
-        user-select: none;
-        &:first-of-type {
-          margin-right: $between-margin-sm;
-        }
-        &:last-of-type {
-          margin-left: $between-margin-sm;
-        }
-      }
-    }
-    .q-field__append {
-      height: $default-height;
-      padding: 0;
-      margin: 0 8px 0 0;
-    }
-  }
-  &.q-field--disabled {
-    .q-field__control {
-      &:before {
-        border: 1px solid $Grey_Lighten-2 !important;
-      }
-      &-container {
-        .date-str {
-          color: $Grey_Default;
-        }
-      }
-    }
-  }
-  &--inside {
-    .q-field__before {
-      height: $default-height;
-      line-height: $default-content-height;
-      padding: 0;
-      .date-picker-label {
-        border-right: none !important;
-        border-radius: $generic-border-radius 0 0 $generic-border-radius;
-        height: $default-height;
-        font-size: $default-font;
-      }
-    }
-    .q-field__control {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-  &--use-icon {
-    .q-field__control-container {
-      margin: 0 8px 0 4px;
-    }
-  }
-}
-</style>
+<template>
+  <q-input
+    dense
+    outlined
+    :class="{
+      'text-Grey_Default bg-Grey_Lighten-5': disable,
+      's-date-auto-range-picker--inside': insideLabel,
+      's-date-auto-range-picker--use-icon': useDelete,
+    }"
+    readonly
+    class="q-pa-none s-date-auto-range-picker bg-white"
+    :disable="disable"
+    @click="calendarOpen = true"
+    data-cy="autoRangeCalendar"
+    v-model="inputDate"
+  >
+    <template v-slot:before v-if="insideLabel">
+      <div
+        class="date-picker-label s-px-sm q-py-xs text-Grey_Darken-4 bg-Grey_Lighten-5"
+        :class="disable
+          ? 's-border-Grey_Lighten-2'
+          : 's-border-Grey_Lighten-1'"
+      >
+        {{ insideLabel }}
+      </div>
+    </template>
+    <template v-slot:prepend>
+      <q-icon
+        :name="dateRangeIcon"
+        class="cursor-pointer q-pa-none no-hover"
+        size="20px"
+        :color="disable ? 'Grey_Default' : 'Grey_Darken-1'"
+      >
+        <q-menu v-model="calendarOpen" fit class="date-picker-range-wrapper" ref="dateMenuRef">
+          <q-date
+            v-model="dateModel.from"
+            minimal
+            square
+            color="positive"
+            class="q-pa-none"
+            mask="YYYY-MM-DD"
+            :locale="lang ? locale[lang] : {}"
+            :options="optionsStartFn"
+            @update:model-value="(value) => updateDate(value, 'from')"
+          />
+          <q-separator vertical />
+          <q-date
+            v-model="dateModel.to"
+            minimal
+            square
+            color="positive"
+            class="q-pa-none"
+            mask="YYYY-MM-DD"
+            :locale="lang ? locale[lang] : {}"
+            :options="optionsEndFn"
+            @update:model-value="(value) => updateDate(value, 'to')"
+          >
+            <q-btn
+              class="reset-to-today-btn no-shadow no-hover"
+              unelevated
+              text-color="black"
+              label="오늘"
+              @click="resetDate"
+            />
+          </q-date>
+        </q-menu>
+      </q-icon>
+    </template>
+    <template v-slot:default>
+      <span class="text-center date-str">{{
+        dateModel.from
+      }}</span>~<span class="text-center date-str">{{
+        dateModel.to
+      }}</span>
+    </template>
+    <template v-slot:append v-if="useDelete">
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        class="cursor-pointer"
+        @click="deleteDate"
+        data-cy="delete-icon"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  // @ts-check
+  import { defineComponent, ref, computed, watch } from 'vue';
+  import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
+  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+
+  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월',
+      ],
+    },
+  };
+
+  export default defineComponent({
+    name: 'SDateAutoRangePicker',
+    components: {
+      QInput,
+      QBtn,
+      QDate,
+      QMenu,
+      QIcon,
+      QSeparator,
+    },
+    props: {
+      disable: {
+        type: Boolean,
+        default: false,
+      },
+      insideLabel: {
+        type: String,
+        default: '',
+      },
+      modelValue: {
+        type: Object,
+        /**
+         * @returns {{ from: null | string; to: null | string; }}
+        */
+        default: () => ({ from: null, to: null }),
+        require: true,
+      },
+      useDelete: {
+        type: Boolean,
+        default: false,
+      },
+      lang: {
+        type: String,
+        default: 'ko',
+      },
+      dateLimit: {
+        type: [Object, Number, null],
+        /**
+         * number 일 경우, 기본 값 date
+         * @returns {null | number | { ['date' | 'month' | 'year']: number; }}
+        */
+        default: null,
+      },
+      width: {
+        type: String,
+        default: 'fit-content',
+      },
+    },
+    setup(props, { emit }) {
+      const todayReset = date.formatDate(new Date(), 'YYYY/MM/DD');
+
+      const dateModel = ref({ from: todayReset, to: todayReset });
+      watch(() => props.modelValue, (newValue) => {
+        dateModel.value = newValue;
+      }, { immediate: true });
+
+      function resetDate() {
+        dateModel.value.from = date.formatDate(todayReset, 'YYYY-MM-DD');
+        dateModel.value.to = date.formatDate(todayReset, 'YYYY-MM-DD');
+      }
+
+      function deleteDate() {
+        dateModel.value = { from: null, to: null };
+      }
+
+      const limit = ref('');
+      function optionsStartFn() {
+        if (dateModel.value.from && props.dateLimit) {
+          limit.value = '';
+          limit.value = date.formatDate(date.addToDate(new Date(dateModel.value.from), typeof props.dateLimit === 'number'
+          ? { date: props.dateLimit }
+          : props.dateLimit), 'YYYY-MM-DD');
+        }
+        return true;
+      }
+
+      function optionsEndFn(to = '') {
+        if (!dateModel.value.from) {
+          dateModel.value.to = null;
+          return false;
+        }
+        if (!props.dateLimit) {
+          return true;
+        }
+        const formatTo = date.formatDate(to, 'YYYY-MM-DD');
+        return formatTo >= dateModel.value.from && formatTo <= limit.value;
+      }
+
+      /**
+       * @param {string} model
+       * @param {'from' | 'to'} position
+      */
+      function updateDate(model, position = 'from') {
+        dateModel.value[position] = model;
+        emit('update:modelValue', dateModel.value);
+      }
+
+      return {
+        dateRangeIcon,
+        closeIcon,
+        locale,
+        dateModel,
+        calendarOpen: ref(false),
+        inputDate: computed({
+          get() {
+            return `${dateModel.value.from} ~ ${dateModel.value.to}`;
+          },
+          set() {
+            return `${dateModel.value.from} ~ ${dateModel.value.to}`;
+          },
+        }),
+        dateWidth: computed(() => props.width || 'fit-content'),
+        resetDate,
+        deleteDate,
+        updateDate,
+        optionsStartFn,
+        optionsEndFn,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+@import '../css/quasar.variables.scss';
+
+.s-date-auto-range-picker {
+  width: v-bind(dateWidth);
+  .q-field__control {
+    max-height: $default-height;
+    height: $default-height;
+    padding: 0;
+    &:before {
+      border: 1px solid $Grey_Lighten-1 !important;
+    }
+    &:after {
+      border-color: transparent !important;
+      box-shadow: none !important;
+    }
+    &:hover,
+    &:active {
+      box-sizing: none;
+      background-color: $Grey_Lighten-5;
+    }
+    .q-field__prepend {
+      padding: 0;
+      margin: 0 4px 0 8px;
+      height: 28px;
+      width: 20px;
+    }
+    &-container {
+      align-items: center;
+      padding: 0;
+      margin: 0 16px 0 8px;
+      .q-field__native {
+        display: none;
+      }
+      .date-str {
+        min-width: fit-content;
+        line-height: $default-height;
+        font-size: $default-font;
+        display: block;
+        color: $Grey_Darken-4;
+        height: 100%;
+        user-select: none;
+        &:first-of-type {
+          margin-right: $between-margin-sm;
+        }
+        &:last-of-type {
+          margin-left: $between-margin-sm;
+        }
+      }
+    }
+    .q-field__append {
+      height: $default-height;
+      padding: 0;
+      margin: 0 8px 0 0;
+    }
+  }
+  &.q-field--disabled {
+    .q-field__control {
+      &:before {
+        border: 1px solid $Grey_Lighten-2 !important;
+      }
+      &-container {
+        .date-str {
+          color: $Grey_Default;
+        }
+      }
+    }
+  }
+  &--inside {
+    .q-field__before {
+      height: $default-height;
+      line-height: $default-content-height;
+      padding: 0;
+      .date-picker-label {
+        border-right: none !important;
+        border-radius: $generic-border-radius 0 0 $generic-border-radius;
+        height: $default-height;
+        font-size: $default-font;
+      }
+    }
+    .q-field__control {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  &--use-icon {
+    .q-field__control-container {
+      margin: 0 8px 0 4px;
+    }
+  }
+}
+</style>