quasar-ui-sellmate-ui-kit 2.2.8 → 2.2.9

package/package.json

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

package/src/components/SDate.vue

@@ -7,6 +7,7 @@
     readonly
     :disable="isDisable"
     ref="wrapperInputRef"
+    no-error-icon
   >
     <template v-slot:before v-if="insideLabel">
       <div class="date-picker-label">
@@ -46,11 +47,7 @@
                 no-refocus
                 :offset="[0, 6]"
                 no-parent-event
-                @hide="
-                  () => {
-                    if (wrapperInputRef) wrapperInputRef.validate();
-                  }
-                "
+                @hide="settingFromDate()"
               >
                 <div class="reset-btn-area flex justify-end">
                   <q-btn
@@ -73,7 +70,7 @@
                   mask="YYYY-MM-DD"
                   :locale="lang ? locale[lang] : {}"
                   :options="optionsStartFn"
-                  @update:modelValue="handleFromMenuHide"
+                  @update:modelValue="fromMenuRef.hide()"
                 >
                 </q-date>
               </q-menu>
@@ -109,11 +106,7 @@
                 no-refocus
                 :offset="[0, 6]"
                 no-parent-event
-                @hide="
-                  () => {
-                    if (wrapperInputRef) wrapperInputRef.validate();
-                  }
-                "
+                @hide="triggerValidation"
               >
                 <div class="reset-btn-area flex justify-end">
                   <q-btn
@@ -172,11 +165,7 @@
                 no-refocus
                 :offset="[0, 6]"
                 no-parent-event
-                @hide="
-                  () => {
-                    if (wrapperInputRef) wrapperInputRef.validate();
-                  }
-                "
+                @hide="triggerValidation"
               >
                 <div class="reset-btn-area flex justify-end">
                   <q-btn
@@ -324,39 +313,33 @@
         type: Boolean,
         default: false,
       },
-      durationLimit: Number,
-      rangeDate: { type: [Number, Object], default: () => 1 },
-      dateLimit: {
+      dateRangeLimit: { type: [Number, Object], default: 1 },
+      minMaxDate: {
         type: Object,
-        default: () => ({ from: '', to: '' }),
+        default: () => ({ minDate: '', maxDate: '' }),
       },
     },
 
     setup(props, { emit }) {
       const dateModel = useModelBinder(props);
-      const singleMenuRef = ref(null);
       const fromMenuRef = ref(null);
       const toMenuRef = ref(null);
       const wrapperInputRef = ref(null);
-      const menuModel = ref({
-        single: false,
-        from: false,
-        to: false,
-      });
 
       function resetDate(key) {
         const todayDate = date.formatDate(new Date(), 'YYYY-MM-DD');
-        const durationBeforeToday = date.formatDate(
-          date.subtractFromDate(new Date(), { month: props.durationLimit }),
-          'YYYY-MM-DD',
-        );
 
         if (!props.isRange) {
           dateModel.value = todayDate;
           return;
         }
 
-        if (props.noLimit && !!props.durationLimit) {
+        const durationBeforeToday = date.formatDate(
+          date.subtractFromDate(new Date(), { month: props.dateRangeLimit }),
+          'YYYY-MM-DD',
+        );
+
+        if (props.noLimit && !!props.dateRangeLimit) {
           if (typeof dateModel.value !== 'object' || !dateModel.value.from) {
             dateModel.value = { from: durationBeforeToday, to: todayDate };
             return;
@@ -374,9 +357,9 @@
             - fromDate.getMonth()
             + 12 * (toDate.getFullYear() - fromDate.getFullYear());
 
-          if (monthDifference >= props.durationLimit) {
+          if (monthDifference >= props.dateRangeLimit) {
             dateModel.value.from = date.formatDate(
-              date.subtractFromDate(toDate, { month: props.durationLimit }),
+              date.subtractFromDate(toDate, { month: props.dateRangeLimit }),
               'YYYY-MM-DD',
             );
           }
@@ -395,8 +378,10 @@
       function optionsFn(day) {
         if (props.noLimit) return true;
 
-        const minDate = props.dateLimit.from && date.formatDate(new Date(props.dateLimit.from), 'YYYY/MM/DD');
-        const maxDate = props.dateLimit.to && date.formatDate(new Date(props.dateLimit.to), 'YYYY/MM/DD');
+        const minDate = props.minMaxDate.minDate
+          && date.formatDate(new Date(props.minMaxDate.minDate), 'YYYY/MM/DD');
+        const maxDate = props.minMaxDate.maxDate
+          && date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
 
         if (minDate && maxDate) {
           return minDate <= day && day <= maxDate;
@@ -414,79 +399,97 @@
       }
 
       function optionsStartFn(day) {
-        if (props.noLimit && dateModel.value.to) {
-          const selectedEndDay = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
-          return day <= selectedEndDay;
+        if (props.noLimit) {
+          return true;
         }
 
         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',
-        );
+        let maxFromDate = dayTo
+          ? date.formatDate(
+              date.subtractFromDate(
+                new Date(dateModel.value.to),
+                typeof props.dateRangeLimit === 'number'
+                  ? { month: props.dateRangeLimit }
+                  : props.dateRangeLimit,
+              ),
+              'YYYY/MM/DD',
+            )
+          : null;
+
+        if (props.minMaxDate.minDate) {
+          maxFromDate = maxFromDate
+            ? date.formatDate(
+                new Date(Math.max(new Date(maxFromDate), new Date(props.minMaxDate.minDate))),
+                'YYYY/MM/DD',
+              )
+            : date.formatDate(new Date(props.minMaxDate.minDate), '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 (maxFromDate && dayTo) {
+          return maxFromDate <= day && day <= dayTo;
         }
 
-        if (!dateModel.value.to) {
-          return true;
+        if (maxFromDate) {
+          return maxFromDate <= day;
         }
-        return maxFromDate <= day && day <= dayTo;
+
+        if (dayTo) {
+          return day <= dayTo;
+        }
+
+        return true;
       }
 
       function optionsEndFn(day) {
-        const today = date.formatDate(new Date(), 'YYYY/MM/DD');
+        const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
 
-        // isRange와 noLimit이 모두 true일 때, 종료 날짜에 제한을 두지 않는다.
-        if (props.isRange && props.noLimit) {
-          const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
-          return dayFrom <= day && day <= today;
+        let maxToDate = dayFrom
+          ? date.formatDate(
+              date.addToDate(
+                new Date(dateModel.value.from),
+                typeof props.dateRangeLimit === 'number'
+                  ? { month: props.dateRangeLimit }
+                  : props.dateRangeLimit,
+              ),
+              'YYYY/MM/DD',
+            )
+          : null;
+
+        if (props.minMaxDate.maxDate) {
+          maxToDate = maxToDate
+            ? date.formatDate(
+                new Date(Math.min(new Date(maxToDate), new Date(props.minMaxDate.maxDate))),
+                'YYYY/MM/DD',
+              )
+            : date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
         }
 
-        if (props.noLimit && !!props.durationLimit) {
-          let maxToDate = today;
-          if (dateModel.value.from) {
-            const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
-            maxToDate = today;
-            return dayFrom <= day && day <= maxToDate;
-          }
-          return day <= maxToDate;
+        if (dayFrom && maxToDate) {
+          return dayFrom <= day && day <= maxToDate;
         }
 
-        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 (dayFrom) {
+          return dayFrom <= day;
         }
-        if (!dateModel.value.from) {
-          return day <= today;
+
+        if (maxToDate) {
+          return day <= maxToDate;
         }
 
-        return dayFrom <= day && day <= maxToDate && day <= today;
+        return true;
       }
 
-      function handleFromMenuHide() {
-        if (props.noLimit && !!props.durationLimit) {
+      function triggerValidation() {
+        if (wrapperInputRef.value) wrapperInputRef.value.validate();
+      }
+
+      function settingFromDate() {
+        triggerValidation();
+
+        if (props.noLimit && !!props.dateRangeLimit) {
           const fromDate = new Date(dateModel.value.from);
           const monthsLater = new Date(fromDate).setMonth(
-            fromDate.getMonth() + props.durationLimit,
+            fromDate.getMonth() + props.dateRangeLimit,
           );
           const maxToDate = date.formatDate(Math.min(monthsLater, new Date()), 'YYYY-MM-DD'); // 최대개월 후 또는 오늘 중 더 이른 날짜
 
@@ -495,14 +498,19 @@
             // 선택된 'to' 날짜가 최대개월을 초과하는 경우
             dateModel.value.to = maxToDate;
           }
+
+          if (fromDate > toDate) {
+            dateModel.value.to = '';
+          }
         }
-        fromMenuRef.value.hide();
       }
 
       function handleToMenuHide() {
-        if (props.noLimit && !!props.durationLimit) {
+        // FIXME: 종료 일자는 보통 시작 일자에 의해 제한 되기 때문에
+        // 종료 일자가 시작 일자를 제한하는 경우는 없을 것으로 보임, 추후 확인 후 삭제
+        if (props.noLimit && !!props.dateRangeLimit) {
           const toDate = new Date(dateModel.value.to);
-          const monthsBefore = new Date(toDate).setMonth(toDate.getMonth() - props.durationLimit);
+          const monthsBefore = new Date(toDate).setMonth(toDate.getMonth() - props.dateRangeLimit);
           const minFromDate = date.formatDate(monthsBefore, 'YYYY-MM-DD'); // 'to' 날짜로부터 최대개월 이전
 
           const fromDate = new Date(dateModel.value.from);
@@ -518,20 +526,23 @@
         if (!props.isRange) {
           dateModel.value = '';
           emit('update:modelValue', dateModel.value);
+          return;
         }
 
-        if (dateModel.value.from && dateModel.value.to) {
-          dateModel.value.from = '';
-          dateModel.value.to = '';
-          emit('update:modelValue', dateModel.value);
-        }
+        dateModel.value.from = '';
+        dateModel.value.to = '';
+        emit('update:modelValue', dateModel.value);
       }
 
       return {
         locale,
+        menuModel: ref({
+          single: false,
+          from: false,
+          to: false,
+        }),
         dateModel,
-        menuModel,
-        singleMenuRef,
+        singleMenuRef: ref(null),
         fromMenuRef,
         toMenuRef,
         wrapperInputRef,
@@ -542,9 +553,10 @@
         optionsFn,
         optionsStartFn,
         optionsEndFn,
-        handleFromMenuHide,
+        settingFromDate,
         handleToMenuHide,
         deleteDate,
+        triggerValidation,
       };
     },
   };

package/src/components/SSelect.vue

@@ -195,7 +195,7 @@
     @extend %select;
 
     &.q-field--disabled {
-      .q-field__control > div {
+      .q-field__control > .q-field__prepend {
         opacity: 1 !important;
         border-right: 1px solid $Grey_Lighten-2;
       }