quasar-ui-sellmate-ui-kit 2.3.1 → 3.0.0

package/src/components/SDateRange.vue

@@ -1,470 +1,470 @@
-<template>
-  <q-input
-    class="s-date-range q-pa-none bg-white"
-    :class="{ 'has-label': insideLabel }"
-    dense
-    outlined
-    readonly
-    :disable="isDisable"
-  >
-    <template v-if="insideLabel" #before>
-      <div class="date-picker-label">
-        {{ insideLabel }}
-      </div>
-    </template>
-
-    <template #default>
-      <div
-        class="flex no-wrap items-center"
-        style="flex-grow: 1; justify-content: center"
-      >
-        <q-input
-          class="inner-input"
-          v-model="dateModel.from"
-          dense
-          borderless
-          mask="####-##-##"
-          autocomplete="off"
-          ref="fromInputRef"
-        >
-          <template #prepend>
-            <q-icon
-              :name="dateRangeIcon"
-              size="20px"
-              color="Grey_Darken-1"
-              class="cursor-pointer"
-            />
-          </template>
-
-          <template #default>
-            <q-menu
-              ref="fromMenuRef"
-              class="s-date-menu"
-              no-focus
-              :offset="[0, 6]"
-            >
-              <div class="reset-btn-area flex justify-end">
-                <q-btn
-                  class="reset-btn no-hover"
-                  flat
-                  label="오늘"
-                  text-color="Grey_Darken-4"
-                  :ripple="false"
-                  @click="resetDate('from')"
-                />
-              </div>
-              <q-date
-                v-model="dateModel.from"
-                minimal
-                square
-                noUnset
-                flat
-                color="positive"
-                class="q-pa-none"
-                mask="YYYY-MM-DD"
-                :locale="lang ? locale[lang] : {}"
-                :options="optionsStartFn"
-                @update:modelValue="fromMenuRef.hide()"
-              >
-              </q-date>
-            </q-menu>
-          </template>
-        </q-input>
-        <span class="q-mx-sm">~</span>
-        <q-input
-          v-model="dateModel.to"
-          dense
-          borderless
-          mask="####-##-##"
-          autocomplete="off"
-          ref="toInputRef"
-          class="inner-input"
-        >
-          <template #prepend>
-            <q-icon
-              :name="dateRangeIcon"
-              size="20px"
-              color="Grey_Darken-1"
-              class="cursor-pointer"
-            />
-          </template>
-
-          <template #default>
-            <q-menu
-              ref="toMenuRef"
-              class="s-date-menu"
-              no-focus
-              :offset="[0, 6]"
-            >
-              <div class="reset-btn-area flex justify-end">
-                <q-btn
-                  class="reset-btn no-hover"
-                  flat
-                  label="오늘"
-                  text-color="Grey_Darken-4"
-                  :ripple="false"
-                  @click="resetDate('to')"
-                />
-              </div>
-              <q-date
-                v-model="dateModel.to"
-                minimal
-                square
-                noUnset
-                flat
-                color="positive"
-                class="q-pa-none"
-                mask="YYYY-MM-DD"
-                :locale="lang ? locale[lang] : {}"
-                :options="optionsEndFn"
-                @update:modelValue="toMenuRef.hide()"
-              />
-            </q-menu>
-          </template>
-        </q-input>
-      </div>
-    </template>
-    <template v-if="useDelete" #append>
-      <q-icon
-        :name="closeIcon"
-        size="16px"
-        class="cursor-pointer"
-        @click="deleteDate"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  import { ref } from 'vue';
-  import { QIcon, QInput, QDate, QMenu, QBtn, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons';
-  import { useModelBinder } from '../composables/modelBinder';
-
-  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월',
-      ],
-    },
-    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: 'SDateRange',
-    components: {
-      QDate,
-      QIcon,
-      QInput,
-      QMenu,
-      QBtn,
-    },
-
-    props: {
-      modelValue: {
-        type: Object,
-      },
-      isDisable: {
-        type: Boolean,
-        default: false,
-      },
-      insideLabel: {
-        type: String,
-        default: '',
-      },
-      lang: {
-        type: String,
-        default: 'ko',
-      },
-      useDelete: {
-        type: Boolean,
-        default: false,
-      },
-      rangeDate: { type: [Number, Object], default: () => 1 },
-      dateLimit: {
-        type: Object,
-        default: () => ({ from: '', to: '' }),
-      },
-    },
-
-    setup(props, { emit }) {
-      const dateModel = useModelBinder(props);
-      const fromInputRef = ref(null);
-      const toInputRef = ref(null);
-      const fromMenuRef = ref(null);
-      const toMenuRef = ref(null);
-
-      function resetDate(key) {
-        dateModel.value[key] = date.formatDate(new Date(), 'YYYY-MM-DD');
-      }
-
-      function optionsStartFn(day) {
-        const dayTo = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
-        let maxFromDate = date.formatDate(
-          date.subtractFromDate(
-            new Date(dateModel.value.to),
-            typeof props.rangeDate === 'number'
-              ? { month: props.rangeDate }
-              : props.rangeDate,
-          ),
-          'YYYY/MM/DD',
-        );
-
-        if (props.dateLimit.from) {
-          maxFromDate = date.formatDate(
-            new Date(
-              Math.max(new Date(maxFromDate), new Date(props.dateLimit.from)),
-            ),
-            'YYYY/MM/DD',
-          );
-        }
-
-        if (!dateModel.value.to) {
-          return true;
-        }
-        return maxFromDate <= day && day <= dayTo;
-      }
-
-      function optionsEndFn(day) {
-        const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
-        let maxToDate = date.formatDate(
-          date.addToDate(
-            new Date(dateModel.value.from),
-            typeof props.rangeDate === 'number'
-              ? { month: props.rangeDate }
-              : props.rangeDate,
-          ),
-          'YYYY/MM/DD',
-        );
-
-        if (props.dateLimit.to) {
-          maxToDate = date.formatDate(
-            new Date(
-              Math.min(new Date(maxToDate), new Date(props.dateLimit.to)),
-            ),
-            'YYYY/MM/DD',
-          );
-        }
-        if (!dateModel.value.from) {
-          return true;
-        }
-
-        return dayFrom <= day && day <= maxToDate;
-      }
-
-      function deleteDate() {
-        if (dateModel.value.from && dateModel.value.to) {
-          dateModel.value.from = '';
-          dateModel.value.to = '';
-          emit('update:modelValue', dateModel.value);
-        }
-      }
-
-      return {
-        locale,
-        dateModel,
-        fromMenuRef,
-        toMenuRef,
-        fromInputRef,
-        toInputRef,
-        dateRangeIcon,
-        closeIcon,
-        console,
-
-        resetDate,
-        optionsStartFn,
-        optionsEndFn,
-        deleteDate,
-      };
-    },
-  };
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-date-range {
-    width: fit-content;
-    height: $default-height;
-    border-radius: 4px;
-
-    &.has-label {
-      .q-field__inner {
-        .q-field__control {
-          border-radius: 0 2px 2px 0;
-        }
-      }
-
-      .q-field__before {
-        height: 100%;
-        padding: 4px 12px !important;
-        border: 1px solid $Grey_Lighten-1;
-        border-right: none;
-        border-radius: 2px 0 0 2px;
-        background: $Grey_Lighten-5;
-
-        .date-picker-label {
-          font-size: $default-font;
-          font-weight: $default-font-weight;
-          color: $Grey_Darken-4;
-        }
-      }
-    }
-
-    &.q-field--disabled {
-      .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
-        border-right: none;
-
-        .date-picker-label {
-          color: $Grey_Default;
-        }
-      }
-
-      .q-field__inner {
-        .q-field__control {
-          &:after {
-            border: 1px solid $Grey_Lighten-2;
-          }
-        }
-      }
-    }
-
-    .q-field__inner {
-      font-size: 12px;
-      text-align: center;
-      .q-field__control {
-        padding: 4px 16px 4px 8px !important;
-        height: 100%;
-
-        &:after {
-          border: 1px solid $Grey_Lighten-1;
-          box-shadow: none;
-        }
-
-        .q-field__prepend {
-          height: 20px;
-        }
-
-        .q-field__append {
-          height: 20px;
-
-          .q-icon {
-            margin-right: -8px;
-          }
-        }
-
-        &-container {
-          > input {
-            display: none;
-          }
-
-          .inner-input {
-            width: auto !important;
-            // flex-grow: 1;
-            > .q-field__inner {
-              > .q-field__control {
-                width: 100%;
-                min-width: 72px;
-                height: 20px;
-                padding: 0px !important;
-
-                &::before,
-                &::after {
-                  border: none;
-                }
-
-                .q-field__control-container {
-                  justify-content: center;
-                  input {
-                    width: 72px;
-                    display: block;
-                    text-align: center;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .s-date-menu {
-    .reset-btn-area {
-      padding: 20px 24px 0px;
-      .reset-btn {
-        width: 26px;
-        height: 22px;
-        min-height: 22px;
-        padding: 0;
-        text-decoration: underline;
-        font-weight: 400;
-
-        &:hover {
-          .q-btn__content {
-            text-decoration: underline;
-            color: $positive;
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-input
+    class="s-date-range q-pa-none bg-white"
+    :class="{ 'has-label': insideLabel }"
+    dense
+    outlined
+    readonly
+    :disable="isDisable"
+  >
+    <template v-if="insideLabel" #before>
+      <div class="date-picker-label">
+        {{ insideLabel }}
+      </div>
+    </template>
+
+    <template #default>
+      <div
+        class="flex no-wrap items-center"
+        style="flex-grow: 1; justify-content: center"
+      >
+        <q-input
+          class="inner-input"
+          v-model="dateModel.from"
+          dense
+          borderless
+          mask="####-##-##"
+          autocomplete="off"
+          ref="fromInputRef"
+        >
+          <template #prepend>
+            <q-icon
+              :name="dateRangeIcon"
+              size="20px"
+              color="Grey_Darken-1"
+              class="cursor-pointer"
+            />
+          </template>
+
+          <template #default>
+            <q-menu
+              ref="fromMenuRef"
+              class="s-date-menu"
+              no-focus
+              :offset="[0, 6]"
+            >
+              <div class="reset-btn-area flex justify-end">
+                <q-btn
+                  class="reset-btn no-hover"
+                  flat
+                  label="오늘"
+                  text-color="Grey_Darken-4"
+                  :ripple="false"
+                  @click="resetDate('from')"
+                />
+              </div>
+              <q-date
+                v-model="dateModel.from"
+                minimal
+                square
+                noUnset
+                flat
+                color="positive"
+                class="q-pa-none"
+                mask="YYYY-MM-DD"
+                :locale="lang ? locale[lang] : {}"
+                :options="optionsStartFn"
+                @update:modelValue="fromMenuRef.hide()"
+              >
+              </q-date>
+            </q-menu>
+          </template>
+        </q-input>
+        <span class="q-mx-sm">~</span>
+        <q-input
+          v-model="dateModel.to"
+          dense
+          borderless
+          mask="####-##-##"
+          autocomplete="off"
+          ref="toInputRef"
+          class="inner-input"
+        >
+          <template #prepend>
+            <q-icon
+              :name="dateRangeIcon"
+              size="20px"
+              color="Grey_Darken-1"
+              class="cursor-pointer"
+            />
+          </template>
+
+          <template #default>
+            <q-menu
+              ref="toMenuRef"
+              class="s-date-menu"
+              no-focus
+              :offset="[0, 6]"
+            >
+              <div class="reset-btn-area flex justify-end">
+                <q-btn
+                  class="reset-btn no-hover"
+                  flat
+                  label="오늘"
+                  text-color="Grey_Darken-4"
+                  :ripple="false"
+                  @click="resetDate('to')"
+                />
+              </div>
+              <q-date
+                v-model="dateModel.to"
+                minimal
+                square
+                noUnset
+                flat
+                color="positive"
+                class="q-pa-none"
+                mask="YYYY-MM-DD"
+                :locale="lang ? locale[lang] : {}"
+                :options="optionsEndFn"
+                @update:modelValue="toMenuRef.hide()"
+              />
+            </q-menu>
+          </template>
+        </q-input>
+      </div>
+    </template>
+    <template v-if="useDelete" #append>
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        class="cursor-pointer"
+        @click="deleteDate"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import { QIcon, QInput, QDate, QMenu, QBtn, date } from 'quasar';
+  import { dateRangeIcon, closeIcon } from '../assets/icons';
+  import { useModelBinder } from '../composables/modelBinder';
+
+  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월',
+      ],
+    },
+    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: 'SDateRange',
+    components: {
+      QDate,
+      QIcon,
+      QInput,
+      QMenu,
+      QBtn,
+    },
+
+    props: {
+      modelValue: {
+        type: Object,
+      },
+      isDisable: {
+        type: Boolean,
+        default: false,
+      },
+      insideLabel: {
+        type: String,
+        default: '',
+      },
+      lang: {
+        type: String,
+        default: 'ko',
+      },
+      useDelete: {
+        type: Boolean,
+        default: false,
+      },
+      rangeDate: { type: [Number, Object], default: () => 1 },
+      dateLimit: {
+        type: Object,
+        default: () => ({ from: '', to: '' }),
+      },
+    },
+
+    setup(props, { emit }) {
+      const dateModel = useModelBinder(props);
+      const fromInputRef = ref(null);
+      const toInputRef = ref(null);
+      const fromMenuRef = ref(null);
+      const toMenuRef = ref(null);
+
+      function resetDate(key) {
+        dateModel.value[key] = date.formatDate(new Date(), 'YYYY-MM-DD');
+      }
+
+      function optionsStartFn(day) {
+        const dayTo = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
+        let maxFromDate = date.formatDate(
+          date.subtractFromDate(
+            new Date(dateModel.value.to),
+            typeof props.rangeDate === 'number'
+              ? { month: props.rangeDate }
+              : props.rangeDate,
+          ),
+          'YYYY/MM/DD',
+        );
+
+        if (props.dateLimit.from) {
+          maxFromDate = date.formatDate(
+            new Date(
+              Math.max(new Date(maxFromDate), new Date(props.dateLimit.from)),
+            ),
+            'YYYY/MM/DD',
+          );
+        }
+
+        if (!dateModel.value.to) {
+          return true;
+        }
+        return maxFromDate <= day && day <= dayTo;
+      }
+
+      function optionsEndFn(day) {
+        const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
+        let maxToDate = date.formatDate(
+          date.addToDate(
+            new Date(dateModel.value.from),
+            typeof props.rangeDate === 'number'
+              ? { month: props.rangeDate }
+              : props.rangeDate,
+          ),
+          'YYYY/MM/DD',
+        );
+
+        if (props.dateLimit.to) {
+          maxToDate = date.formatDate(
+            new Date(
+              Math.min(new Date(maxToDate), new Date(props.dateLimit.to)),
+            ),
+            'YYYY/MM/DD',
+          );
+        }
+        if (!dateModel.value.from) {
+          return true;
+        }
+
+        return dayFrom <= day && day <= maxToDate;
+      }
+
+      function deleteDate() {
+        if (dateModel.value.from && dateModel.value.to) {
+          dateModel.value.from = '';
+          dateModel.value.to = '';
+          emit('update:modelValue', dateModel.value);
+        }
+      }
+
+      return {
+        locale,
+        dateModel,
+        fromMenuRef,
+        toMenuRef,
+        fromInputRef,
+        toInputRef,
+        dateRangeIcon,
+        closeIcon,
+        console,
+
+        resetDate,
+        optionsStartFn,
+        optionsEndFn,
+        deleteDate,
+      };
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-date-range {
+    width: fit-content;
+    height: $default-height;
+    border-radius: 4px;
+
+    &.has-label {
+      .q-field__inner {
+        .q-field__control {
+          border-radius: 0 2px 2px 0;
+        }
+      }
+
+      .q-field__before {
+        height: 100%;
+        padding: 4px 12px !important;
+        border: 1px solid $Grey_Lighten-1;
+        border-right: none;
+        border-radius: 2px 0 0 2px;
+        background: $Grey_Lighten-5;
+
+        .date-picker-label {
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+          color: $Grey_Darken-4;
+        }
+      }
+    }
+
+    &.q-field--disabled {
+      .q-field__before {
+        border: 1px solid $Grey_Lighten-2;
+        border-right: none;
+
+        .date-picker-label {
+          color: $Grey_Default;
+        }
+      }
+
+      .q-field__inner {
+        .q-field__control {
+          &:after {
+            border: 1px solid $Grey_Lighten-2;
+          }
+        }
+      }
+    }
+
+    .q-field__inner {
+      font-size: 12px;
+      text-align: center;
+      .q-field__control {
+        padding: 4px 16px 4px 8px !important;
+        height: 100%;
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        .q-field__prepend {
+          height: 20px;
+        }
+
+        .q-field__append {
+          height: 20px;
+
+          .q-icon {
+            margin-right: -8px;
+          }
+        }
+
+        &-container {
+          > input {
+            display: none;
+          }
+
+          .inner-input {
+            width: auto !important;
+            // flex-grow: 1;
+            > .q-field__inner {
+              > .q-field__control {
+                width: 100%;
+                min-width: 72px;
+                height: 20px;
+                padding: 0px !important;
+
+                &::before,
+                &::after {
+                  border: none;
+                }
+
+                .q-field__control-container {
+                  justify-content: center;
+                  input {
+                    width: 72px;
+                    display: block;
+                    text-align: center;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .s-date-menu {
+    .reset-btn-area {
+      padding: 20px 24px 0px;
+      .reset-btn {
+        width: 26px;
+        height: 22px;
+        min-height: 22px;
+        padding: 0;
+        text-decoration: underline;
+        font-weight: 400;
+
+        &:hover {
+          .q-btn__content {
+            text-decoration: underline;
+            color: $positive;
+          }
+        }
+      }
+    }
+  }
+</style>