quasar-ui-sellmate-ui-kit 2.2.33 → 2.3.1

package/src/components/SDatePicker.vue

@@ -1,472 +1,472 @@
-<template>
-  <q-input
-    dense
-    outlined
-    :class="{
-      's-date-picker-range': range,
-      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
-      's-date-picker-inside': insideLabel,
-    }"
-    readonly
-    class="q-pa-none s-date-picker"
-    :placeholder="dateText"
-    v-model="inputDate"
-    :disable="isDisable"
-    @click="calendarOpen = true"
-    :name="name"
-    :type="type"
-  >
-    <template #before v-if="insideLabel">
-      <div class="date-picker-label">
-        {{ label }}
-      </div>
-    </template>
-    <template #prepend>
-      <div v-if="!range">
-        <q-btn
-          :icon="dateRangeIcon"
-          dense
-          :ripple="false"
-          flat
-          color="Grey_Darken-4"
-          class="q-pa-none no-hover"
-          :nativeEl="{
-            'aria-label': 'date-button'
-          }"
-        >
-          <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
-            <q-date
-              v-model="dateValue"
-              color="positive"
-              minimal
-              no-unset
-              @update:modelValue="dateUpdate"
-              :options="optionsFn"
-            />
-          </q-menu>
-        </q-btn>
-      </div>
-      <div v-else>
-        <q-btn
-          :icon="dateRangeIcon"
-          dense
-          :ripple="false"
-          flat
-          class="q-pa-none no-hover"
-          @click="clickDateIcon"
-          color="Grey_Darken-4"
-          aria-label="date-button"
-        >
-          <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
-            <q-date
-              v-model="dateValue"
-              minimal
-              range
-              square
-              color="positive"
-              class="q-pa-none"
-              :options="optionsFn"
-              @range-start="getRangeStartDay"
-              @update:modelValue="dateUpdate"
-            />
-          </q-menu>
-        </q-btn>
-      </div>
-    </template>
-    <template #append v-if="useDelete">
-      <q-icon
-        :name="closeIcon"
-        size="16px"
-        color="Grey_Lighten-1"
-        class="cursor-pointer"
-        @click="deleteDate"
-        aria-label="close-button"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  import { defineComponent, ref, watch } from 'vue';
-  import { QInput, QBtn, QDate, QMenu, QIcon, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SDatePicker',
-    components: {
-      QInput,
-      QBtn,
-      QDate,
-      QMenu,
-      QIcon,
-    },
-    props: {
-      range: { type: Boolean, default: false },
-      isDisable: { type: Boolean, default: false },
-      insideLabel: { type: Boolean, default: false },
-      label: { type: String, default: '' },
-      name: { type: String, default: '' },
-      type: { type: String, default: 'text' },
-      modelValue: {
-        type: [String, Object],
-        required: true,
-        default: () => ({ from: '', to: '' }),
-      },
-      dateText: String,
-      subtractDate: {
-        years: Number,
-        months: Number,
-        days: Number,
-      },
-      addDate: {
-        years: Number,
-        months: Number,
-        days: Number,
-      },
-      unlimited: {
-        type: Boolean,
-        default: false,
-      },
-      afterToday: {
-        type: Boolean,
-        default: false,
-      },
-      selectableFrom: {
-        type: [String, null],
-        default: '',
-      },
-      useDelete: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props, { emit }) {
-      const calendarOpen = ref(false);
-      const inputDate = ref(props.dateText);
-      watch(
-        () => props.dateText,
-        val => {
-          inputDate.value = val;
-        },
-      );
-
-      const dateValue = ref(props.modelValue);
-      function dateUpdate() {
-        if (props.range) {
-          if (typeof dateValue.value === 'string') {
-            dateValue.value = {
-              from: dateValue.value.replaceAll('/', '-'),
-              to: dateValue.value.replaceAll('/', '-'),
-            };
-          } else {
-            dateValue.value.from = date.formatDate(dateValue.value.from, 'YYYY-MM-DD');
-            dateValue.value.to = date.formatDate(dateValue.value.to, 'YYYY-MM-DD');
-          }
-          inputDate.value = `${dateValue.value.from} ~ ${dateValue.value.to}`;
-        } else {
-          dateValue.value = date.formatDate(dateValue.value, 'YYYY-MM-DD');
-          inputDate.value = dateValue.value;
-        }
-        calendarOpen.value = false;
-        emit('update:modelValue', dateValue.value);
-      }
-
-      watch(
-        () => props.modelValue,
-        val => {
-          dateValue.value = val;
-        },
-      );
-
-      function deleteDate() {
-        inputDate.value = ' ';
-        emit('update:modelValue', '');
-      }
-
-      watch(
-        () => props.isDisable,
-        val => {
-          calendarOpen.value = !val;
-          inputDate.value = val ? null : inputDate.value;
-        },
-      );
-
-      const today = date.formatDate(new Date(), 'YYYY/MM/DD');
-      const startDate = ref(null);
-      function getRangeStartDay(from) {
-        startDate.value = from;
-      }
-      function optionsFn(day) {
-        // props.subtractDate : 클릭 한 날짜 이전 언제까지
-        // props.addDate : 클릭 이후 이후 날짜 언제까지
-        // 오늘 이전과 클릭 후 설정한 날짜 까지 (전, 후)
-        if (props.selectableFrom) {
-          const dayFrom = date.formatDate(props.selectableFrom, 'YYYY/MM/DD');
-          return day >= dayFrom;
-        }
-
-        const clickDate = startDate.value
-          ? `${startDate.value.year}/${startDate.value.month}/${startDate.value.day}`
-          : '';
-        if (clickDate) {
-          let dateAgo = date.subtractFromDate(clickDate, props.subtractDate);
-          dateAgo = date.addToDate(dateAgo, { days: 1 });
-          const dateLater = date.addToDate(clickDate, props.addDate);
-          const agoformatted = date.formatDate(dateAgo, 'YYYY/MM/DD');
-          const laterformatted = date.formatDate(dateLater, 'YYYY/MM/DD');
-          const todayDiff = startDate.value ? date.getDateDiff(clickDate, today) : null;
-          const laterDiff = startDate.value ? date.getDateDiff(clickDate, laterformatted) : null;
-          if (!props.unlimited && todayDiff > laterDiff) {
-            return agoformatted <= day && day <= today;
-          }
-          if (!props.unlimited && todayDiff < laterDiff) {
-            return agoformatted <= day && day < laterformatted;
-          }
-        }
-        return !props.unlimited && !props.afterToday
-          ? day <= today
-          : !props.unlimited && props.afterToday
-          ? day >= today
-          : true;
-      }
-
-      function getThisDayForth() {
-        // 오늘 이후의 날짜
-      }
-
-      function clickDateIcon() {
-        // 아이콘 클릭 시 원래 데이터 초기화
-        dateValue.value = {};
-        startDate.value = {};
-      }
-
-      return {
-        dateRangeIcon,
-        calendarOpen,
-        dateValue,
-        inputDate,
-        dateUpdate,
-        getRangeStartDay,
-        optionsFn,
-        clickDateIcon,
-        closeIcon,
-        getThisDayForth,
-        deleteDate,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-date-picker {
-    height: $default-height;
-    .q-field__before {
-      padding: 0;
-    }
-    .q-field__inner {
-      .q-field__control {
-        padding: 4px 8px !important;
-        align-items: center;
-        height: 100%;
-        align-items: center;
-        &: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;
-            }
-          }
-        }
-      }
-    }
-  }
-  .q-field--disabled.s-date-picker {
-    color: $Grey_Default !important;
-    .q-field__inner {
-      color: $Grey_Default !important;
-      .q-field__control {
-        color: $Grey_Default !important;
-        opacity: 1 !important;
-        &:after {
-          border: 1px solid $Grey_Lighten-2;
-        }
-        .q-field__prepend {
-          opacity: 1 !important;
-          .q-icon {
-            color: $Grey_Default;
-          }
-        }
-        &-container {
-          opacity: 1 !important;
-          .q-field__native {
-            color: $Grey_Default !important;
-          }
-        }
-      }
-    }
-    &.q-field--float {
-      color: $Grey_Default !important;
-      opacity: 0.9 !important;
-    }
-  }
-  .s-date-picker-inside {
-    width: fit-content !important;
-    height: 28px;
-    .q-field__before {
-      height: 100%;
-      line-height: $default-content-height;
-      padding: 4px 12px;
-      border: 1px solid $Grey_Lighten-1;
-      background-color: $Grey_Lighten-5;
-      border-right: none;
-      border-radius: 2px 0 0 2px;
-      .date-picker-label {
-        font-size: $default-font;
-        font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
-      }
-    }
-    .q-field__inner {
-      .q-field__control {
-        border-radius: 0 2px 2px 0;
-      }
-    }
-    &.q-field--disabled {
-      .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
-        border-right: none;
-        .date-picker-label {
-          color: $Grey_Default;
-        }
-      }
-    }
-  }
-
-  .s-date-picker-range {
-    width: 226px;
-    .q-field__inner {
-      .q-field__control {
-        .q-field__prepend {
-          padding: 0;
-        }
-        &-container {
-          .q-field__native {
-            text-align: center;
-          }
-        }
-      }
-    }
-  }
-
-  .date-picker-wrapper.q-menu {
-    width: 290px;
-    height: 288px;
-    min-width: 0 !important;
-    min-height: 0 !important;
-    .q-date {
-      height: 288px;
-      &__main {
-        .q-date__content {
-          .q-date__view {
-            min-height: 0 !important;
-            .q-date__navigation {
-              div {
-                height: 28px;
-                .q-btn {
-                  .q-icon {
-                    font-size: $default-font;
-                  }
-                }
-              }
-              .relative-position {
-                div {
-                  .q-btn--dense {
-                    padding: 0 !important;
-                    .q-btn__content {
-                      > span {
-                        font-size: 14px;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            .q-date__calendar-days-container {
-              .q-date__calendar-days {
-                .q-date__calendar-item {
-                  .q-btn {
-                    padding: 0;
-                    .q-btn__content {
-                      > span {
-                        font-size: 14px;
-                      }
-                    }
-                    &:hover {
-                      .q-focus-helper {
-                        background: $positive;
-                        opacity: 1;
-                        &:before,
-                        &:after {
-                          display: none;
-                        }
-                      }
-                      .q-btn__content {
-                        > span {
-                          color: white;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-input
+    dense
+    outlined
+    :class="{
+      's-date-picker-range': range,
+      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
+      's-date-picker-inside': insideLabel,
+    }"
+    readonly
+    class="q-pa-none s-date-picker"
+    :placeholder="dateText"
+    v-model="inputDate"
+    :disable="isDisable"
+    @click="calendarOpen = true"
+    :name="name"
+    :type="type"
+  >
+    <template #before v-if="insideLabel">
+      <div class="date-picker-label">
+        {{ label }}
+      </div>
+    </template>
+    <template #prepend>
+      <div v-if="!range">
+        <q-btn
+          :icon="dateRangeIcon"
+          dense
+          :ripple="false"
+          flat
+          color="Grey_Darken-4"
+          class="q-pa-none no-hover"
+          :nativeEl="{
+            'aria-label': 'date-button'
+          }"
+        >
+          <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
+            <q-date
+              v-model="dateValue"
+              color="positive"
+              minimal
+              no-unset
+              @update:modelValue="dateUpdate"
+              :options="optionsFn"
+            />
+          </q-menu>
+        </q-btn>
+      </div>
+      <div v-else>
+        <q-btn
+          :icon="dateRangeIcon"
+          dense
+          :ripple="false"
+          flat
+          class="q-pa-none no-hover"
+          @click="clickDateIcon"
+          color="Grey_Darken-4"
+          aria-label="date-button"
+        >
+          <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
+            <q-date
+              v-model="dateValue"
+              minimal
+              range
+              square
+              color="positive"
+              class="q-pa-none"
+              :options="optionsFn"
+              @range-start="getRangeStartDay"
+              @update:modelValue="dateUpdate"
+            />
+          </q-menu>
+        </q-btn>
+      </div>
+    </template>
+    <template #append v-if="useDelete">
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        color="Grey_Lighten-1"
+        class="cursor-pointer"
+        @click="deleteDate"
+        aria-label="close-button"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { defineComponent, ref, watch } from 'vue';
+  import { QInput, QBtn, QDate, QMenu, QIcon, date } from 'quasar';
+  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SDatePicker',
+    components: {
+      QInput,
+      QBtn,
+      QDate,
+      QMenu,
+      QIcon,
+    },
+    props: {
+      range: { type: Boolean, default: false },
+      isDisable: { type: Boolean, default: false },
+      insideLabel: { type: Boolean, default: false },
+      label: { type: String, default: '' },
+      name: { type: String, default: '' },
+      type: { type: String, default: 'text' },
+      modelValue: {
+        type: [String, Object],
+        required: true,
+        default: () => ({ from: '', to: '' }),
+      },
+      dateText: String,
+      subtractDate: {
+        years: Number,
+        months: Number,
+        days: Number,
+      },
+      addDate: {
+        years: Number,
+        months: Number,
+        days: Number,
+      },
+      unlimited: {
+        type: Boolean,
+        default: false,
+      },
+      afterToday: {
+        type: Boolean,
+        default: false,
+      },
+      selectableFrom: {
+        type: [String, null],
+        default: '',
+      },
+      useDelete: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, { emit }) {
+      const calendarOpen = ref(false);
+      const inputDate = ref(props.dateText);
+      watch(
+        () => props.dateText,
+        val => {
+          inputDate.value = val;
+        },
+      );
+
+      const dateValue = ref(props.modelValue);
+      function dateUpdate() {
+        if (props.range) {
+          if (typeof dateValue.value === 'string') {
+            dateValue.value = {
+              from: dateValue.value.replaceAll('/', '-'),
+              to: dateValue.value.replaceAll('/', '-'),
+            };
+          } else {
+            dateValue.value.from = date.formatDate(dateValue.value.from, 'YYYY-MM-DD');
+            dateValue.value.to = date.formatDate(dateValue.value.to, 'YYYY-MM-DD');
+          }
+          inputDate.value = `${dateValue.value.from} ~ ${dateValue.value.to}`;
+        } else {
+          dateValue.value = date.formatDate(dateValue.value, 'YYYY-MM-DD');
+          inputDate.value = dateValue.value;
+        }
+        calendarOpen.value = false;
+        emit('update:modelValue', dateValue.value);
+      }
+
+      watch(
+        () => props.modelValue,
+        val => {
+          dateValue.value = val;
+        },
+      );
+
+      function deleteDate() {
+        inputDate.value = ' ';
+        emit('update:modelValue', '');
+      }
+
+      watch(
+        () => props.isDisable,
+        val => {
+          calendarOpen.value = !val;
+          inputDate.value = val ? null : inputDate.value;
+        },
+      );
+
+      const today = date.formatDate(new Date(), 'YYYY/MM/DD');
+      const startDate = ref(null);
+      function getRangeStartDay(from) {
+        startDate.value = from;
+      }
+      function optionsFn(day) {
+        // props.subtractDate : 클릭 한 날짜 이전 언제까지
+        // props.addDate : 클릭 이후 이후 날짜 언제까지
+        // 오늘 이전과 클릭 후 설정한 날짜 까지 (전, 후)
+        if (props.selectableFrom) {
+          const dayFrom = date.formatDate(props.selectableFrom, 'YYYY/MM/DD');
+          return day >= dayFrom;
+        }
+
+        const clickDate = startDate.value
+          ? `${startDate.value.year}/${startDate.value.month}/${startDate.value.day}`
+          : '';
+        if (clickDate) {
+          let dateAgo = date.subtractFromDate(clickDate, props.subtractDate);
+          dateAgo = date.addToDate(dateAgo, { days: 1 });
+          const dateLater = date.addToDate(clickDate, props.addDate);
+          const agoformatted = date.formatDate(dateAgo, 'YYYY/MM/DD');
+          const laterformatted = date.formatDate(dateLater, 'YYYY/MM/DD');
+          const todayDiff = startDate.value ? date.getDateDiff(clickDate, today) : null;
+          const laterDiff = startDate.value ? date.getDateDiff(clickDate, laterformatted) : null;
+          if (!props.unlimited && todayDiff > laterDiff) {
+            return agoformatted <= day && day <= today;
+          }
+          if (!props.unlimited && todayDiff < laterDiff) {
+            return agoformatted <= day && day < laterformatted;
+          }
+        }
+        return !props.unlimited && !props.afterToday
+          ? day <= today
+          : !props.unlimited && props.afterToday
+          ? day >= today
+          : true;
+      }
+
+      function getThisDayForth() {
+        // 오늘 이후의 날짜
+      }
+
+      function clickDateIcon() {
+        // 아이콘 클릭 시 원래 데이터 초기화
+        dateValue.value = {};
+        startDate.value = {};
+      }
+
+      return {
+        dateRangeIcon,
+        calendarOpen,
+        dateValue,
+        inputDate,
+        dateUpdate,
+        getRangeStartDay,
+        optionsFn,
+        clickDateIcon,
+        closeIcon,
+        getThisDayForth,
+        deleteDate,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-date-picker {
+    height: $default-height;
+    .q-field__before {
+      padding: 0;
+    }
+    .q-field__inner {
+      .q-field__control {
+        padding: 4px 8px !important;
+        align-items: center;
+        height: 100%;
+        align-items: center;
+        &: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;
+            }
+          }
+        }
+      }
+    }
+  }
+  .q-field--disabled.s-date-picker {
+    color: $Grey_Default !important;
+    .q-field__inner {
+      color: $Grey_Default !important;
+      .q-field__control {
+        color: $Grey_Default !important;
+        opacity: 1 !important;
+        &:after {
+          border: 1px solid $Grey_Lighten-2;
+        }
+        .q-field__prepend {
+          opacity: 1 !important;
+          .q-icon {
+            color: $Grey_Default;
+          }
+        }
+        &-container {
+          opacity: 1 !important;
+          .q-field__native {
+            color: $Grey_Default !important;
+          }
+        }
+      }
+    }
+    &.q-field--float {
+      color: $Grey_Default !important;
+      opacity: 0.9 !important;
+    }
+  }
+  .s-date-picker-inside {
+    width: fit-content !important;
+    height: 28px;
+    .q-field__before {
+      height: 100%;
+      line-height: $default-content-height;
+      padding: 4px 12px;
+      border: 1px solid $Grey_Lighten-1;
+      background-color: $Grey_Lighten-5;
+      border-right: none;
+      border-radius: 2px 0 0 2px;
+      .date-picker-label {
+        font-size: $default-font;
+        font-weight: $default-font-weight;
+        color: $Grey_Darken-4;
+      }
+    }
+    .q-field__inner {
+      .q-field__control {
+        border-radius: 0 2px 2px 0;
+      }
+    }
+    &.q-field--disabled {
+      .q-field__before {
+        border: 1px solid $Grey_Lighten-2;
+        border-right: none;
+        .date-picker-label {
+          color: $Grey_Default;
+        }
+      }
+    }
+  }
+
+  .s-date-picker-range {
+    width: 226px;
+    .q-field__inner {
+      .q-field__control {
+        .q-field__prepend {
+          padding: 0;
+        }
+        &-container {
+          .q-field__native {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
+  .date-picker-wrapper.q-menu {
+    width: 290px;
+    height: 288px;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    .q-date {
+      height: 288px;
+      &__main {
+        .q-date__content {
+          .q-date__view {
+            min-height: 0 !important;
+            .q-date__navigation {
+              div {
+                height: 28px;
+                .q-btn {
+                  .q-icon {
+                    font-size: $default-font;
+                  }
+                }
+              }
+              .relative-position {
+                div {
+                  .q-btn--dense {
+                    padding: 0 !important;
+                    .q-btn__content {
+                      > span {
+                        font-size: 14px;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            .q-date__calendar-days-container {
+              .q-date__calendar-days {
+                .q-date__calendar-item {
+                  .q-btn {
+                    padding: 0;
+                    .q-btn__content {
+                      > span {
+                        font-size: 14px;
+                      }
+                    }
+                    &:hover {
+                      .q-focus-helper {
+                        background: $positive;
+                        opacity: 1;
+                        &:before,
+                        &:after {
+                          display: none;
+                        }
+                      }
+                      .q-btn__content {
+                        > span {
+                          color: white;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>