quasar-ui-sellmate-ui-kit 3.2.14 → 3.2.16

package/package.json

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

package/src/components/SDate.vue

@@ -326,10 +326,10 @@
       const toMenuRef = ref(null);
       const wrapperInputRef = ref(null);
       const menuModel = ref({
-          single: false,
-          from: false,
-          to: false,
-        });
+        single: false,
+        from: false,
+        to: false,
+      });
 
       function resetDate(key) {
         const todayDate = date.formatDate(new Date(), 'YYYY-MM-DD');
@@ -356,12 +356,14 @@
             return;
           }
 
+          if (props.dateRangeLimit === -1) {
+            dateModel.value.to = todayDate;
+            return;
+          }
+
           const fromDate = new Date(dateModel.value.from);
           const toDate = new Date(todayDate);
-          const monthDifference = toDate.getMonth()
-            - fromDate.getMonth()
-            + 12 * (toDate.getFullYear() - fromDate.getFullYear());
-
+          const monthDifference = date.getDateDiff(fromDate, toDate, 'months');
           if (monthDifference >= props.dateRangeLimit) {
             dateModel.value.from = date.formatDate(
               date.subtractFromDate(toDate, { month: props.dateRangeLimit }),
@@ -383,10 +385,12 @@
       function optionsFn(day) {
         if (props.noLimit) return true;
 
-        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');
+        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;
@@ -407,7 +411,6 @@
         if (props.noLimit) {
           return true;
         }
-
         const dayTo = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
         let maxFromDate = dayTo
           ? date.formatDate(
@@ -446,6 +449,9 @@
       }
 
       function optionsEndFn(day) {
+        if (props.noLimit && props.dateRangeLimit === -1) {
+          return true;
+        }
         const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
 
         let maxToDate = dayFrom
@@ -491,7 +497,9 @@
       function settingFromDate() {
         menuModel.value.from = false;
         triggerValidation();
-
+        if (props.noLimit && props.dateRangeLimit === -1) {
+          return;
+        }
         if (props.noLimit && !!props.dateRangeLimit) {
           const fromDate = new Date(dateModel.value.from);
           const monthsLater = new Date(fromDate).setMonth(
@@ -509,7 +517,9 @@
       function settingToDate() {
         menuModel.value.to = false;
         triggerValidation();
-
+        if (props.noLimit && props.dateRangeLimit === -1) {
+          return;
+        }
         // FIXME: 종료 일자는 보통 시작 일자에 의해 제한 되기 때문에
         // 종료 일자가 시작 일자를 제한하는 경우는 없을 것으로 보임, 추후 확인 후 삭제
         if (props.noLimit && !!props.dateRangeLimit) {

package/src/components/SDropdown.vue

@@ -10,7 +10,6 @@
     :icon-right="arrowDownIcon"
     menu-anchor="bottom start"
     menu-self="top start"
-    class="s-dropdown"
     :class="{
       's-dropdown-xs': size === 'xs',
       's-dropdown-sm': size === 'sm',
@@ -18,7 +17,7 @@
       's-dropdown-lg': size === 'lg',
     }"
   >
-    <q-menu :class="menuClass" class="s-dropdown-menu" :offset="[0, 4]">
+    <q-menu :class="menuClass" fit class="s-dropdown-menu" :offset="[0, 4]">
       <template v-for="(opt, i) in options" :key="i">
         <q-item
           :clickable="opt.disable === undefined || opt.disable === false"
@@ -49,7 +48,6 @@
     name: 'SDropdown',
     components: {
       QBtn,
-      QMenu,
       QItem,
       QItemSection,
       QItemLabel,

package/src/components/SPagination.vue

@@ -217,6 +217,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 58px;
+
     .q-btn {
       min-height: $pagination-size;
       height: $pagination-size;

package/src/components/STable.vue

@@ -104,7 +104,7 @@
     v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
     v-model="paginationModel.page"
     :lastPage="pagesNumber"
-    class="q-mt-md"
+    class="bg-Grey_Lighten-6 s-border-radius-sm s-border-top-none s-border-Grey_Lighten-3"
     @update:modelValue="updatePagination"
   />
 </template>

package/src/components/__tests__/SInput.test.js

@@ -0,0 +1,42 @@
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import SInput from '../SInput.vue';
+
+installQuasarPlugin()
+
+describe('SInput.vue', () => {
+  it('mounted', () => {
+    const wrapper = mount(SInput, {
+      props: {
+        modelValue: '',
+        label: 'label',
+      },
+    });
+    expect(wrapper.classes('s-input')).toBe(true);
+  });
+  it('input 값 정상 입력하는지', async () => {
+    const inputModel = 'new value';
+    const wrapper = mount(SInput, {
+      props: {
+        modelValue: '',
+        label: 'label',
+      },
+    });
+
+    await wrapper.setProps({ modelValue: inputModel });
+    expect(wrapper.vm.model).to.equal(inputModel);
+  });
+  it('insideLabel 정상적으로 들어가는 지', async () => {
+    const insideLabel = 'insideLabel';
+    const wrapper = mount(SInput, {
+      props: {
+        modelValue: '',
+        label: 'label',
+        insideLabel,
+      },
+    });
+
+    expect(wrapper.props().insideLabel).toBe(insideLabel);
+  });
+});

package/src/components/__tests__/SInputCounter.test.js

@@ -0,0 +1,30 @@
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import SInputCounter from '../SInputCounter.vue';
+
+installQuasarPlugin()
+
+describe('SInputCounter.vue', () => {
+  it('mounted', () => {
+    const wrapper = mount(SInputCounter, {
+      props: {
+        modelValue: '',
+        label: 'label',
+      },
+    });
+    expect(wrapper.classes('s-input-counter')).toBe(true);
+  });
+  it('counter up', () => {
+    const wrapper = mount(SInputCounter, {
+      props: {
+        modelValue: 0,
+        label: 'label',
+      },
+    });
+    // TODOS: 방법을 찾아야 할 거 같음 카운터 동작 구조를 모르겠음
+  });
+  it('counter down', () => {
+    // TODOS: 방법을 찾아야 할 거 같음 카운터 동작 구조를 모르겠음
+  });
+});

package/src/components/__tests__/SInputNumber.test.js

@@ -0,0 +1,32 @@
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import SInputNumber from '../SInputNumber.vue';
+
+installQuasarPlugin()
+
+describe('SInputNumber.vue', () => {
+  it('mounted', () => {
+    const wrapper = mount(SInputNumber, {
+      props: {
+        modelValue: '',
+        label: 'label',
+      },
+    });
+    expect(wrapper.classes('s-input-number')).toBe(true);
+  });
+  it('숫자만 입력되는지', async () => {
+    const wrapper = mount(SInputNumber, {
+      props: {
+        modelValue: '',
+        label: 'label',
+      },
+    });
+
+    await wrapper.setProps({ modelValue: '10000' });
+    expect(Number(wrapper.vm.inputNumberValue)).to.equal(10000);
+
+    await wrapper.setProps({ modelValue: '가나다라' });
+    expect(Number(wrapper.vm.inputNumberValue)).toBeNaN();
+  });
+});