quasar-ui-sellmate-ui-kit 3.14.30 → 3.14.32

package/package.json

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

package/src/components/SDatePicker.vue

@@ -1,4 +1,5 @@
 <template>
+  {{ dateValue }}
   <q-input
     dense
     outlined
@@ -33,7 +34,6 @@
       >
         <q-menu v-model="calendarOpen" fit class="date-picker-wrapper" :offset="[12, 12]">
           <q-date
-            v-if="range"
             v-model="dateValue"
             minimal
             :range="range"
@@ -45,19 +45,6 @@
             @range-end="resetDate"
             @update:modelValue="dateUpdate"
           />
-          <q-date
-            v-else
-            v-model="processedDateValue"
-            minimal
-            :range="range"
-            color="positive"
-            class="q-pa-none"
-            :options="optionsFn"
-            :locale="lang ? locale[lang] : {}"
-            @range-start="getRangeStartDay"
-            @range-end="resetDate"
-            @update:modelValue="dateUpdate"
-          />
         </q-menu>
       </q-btn>
     </template>
@@ -147,9 +134,8 @@
       );
 
       const dateValue = ref(props.modelValue);
-      const processedDateValue = ref(props.modelValue);
 
-      function dateUpdate(dateVal) {
+      function dateUpdate() {
         if (props.range) {
           if (typeof dateValue.value === 'string') {
             dateValue.value = {
@@ -162,8 +148,7 @@
           }
           inputDate.value = `${dateValue.value.from} ~ ${dateValue.value.to}`;
         } else {
-          dateValue.value = dateVal.replaceAll('/', '-');
-          processedDateValue.value = dateVal;
+          dateValue.value = date.formatDate(dateValue.value, 'YYYY-MM-DD');
           inputDate.value = dateValue.value;
         }
         calendarOpen.value = false;

package/src/components/STable.vue

@@ -76,13 +76,25 @@
       <slot :name="slotName" :key="`slot-${index}`" v-bind="data"> </slot>
     </template>
   </q-table>
-  <s-pagination
+  <div
     v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
-    v-model="paginationModel.page"
-    :lastPage="pagesNumber"
-    class="bg-grey_05 s-border-radius-sm s-border-top-none s-border-grey_30"
-    @update:modelValue="updatePagination"
-  />
+    class="bg-grey_05 s-border-radius-sm s-border-top-none s-border-grey_30 s-pagination-wrapper relative-position"
+  >
+    <s-pagination
+      v-model="paginationModel.page"
+      :lastPage="pagesNumber"
+      @update:model-value="updatePagination"
+    />
+    <s-select
+      v-if="usePerPageSelect"
+      :options="perPageOptions"
+      v-model="paginationModel.rowsPerPage"
+      emit-value
+      map-options
+      class="absolute s-width-120 rows-per-page"
+      @update:model-value="updateRowsPerPage"
+    />
+  </div>
 </template>
 
 <script>
@@ -93,7 +105,7 @@
 
   export default defineComponent({
     name: 'STable',
-    emits: ['update:page', 'update:focused', 'field-updated', 'request'],
+    emits: ['update:page', 'update:rowsPerPage', 'update:focused', 'field-updated', 'request'],
     components: {
       QTable,
       QInnerLoading,
@@ -166,6 +178,19 @@
         type: Boolean,
         default: false,
       },
+      usePerPageSelect: {
+        type: Boolean,
+        default: false,
+      },
+      perPageOptions: {
+        type: Array,
+        default: () => [
+          { label: '50개씩 보기', value: 50 },
+          { label: '100개씩 보기', value: 100 },
+          { label: '150개씩 보기', value: 150 },
+          { label: '200개씩 보기', value: 200 },
+        ],
+      },
     },
     setup(props, { emit, attrs }) {
       const tablePagination = ref(props.pagination);
@@ -187,6 +212,11 @@
         }
       }
 
+      function updateRowsPerPage(value) {
+        emit('update:rowsPerPage', value);
+        updatePagination(1);
+      }
+
       const sTableRef = ref(null);
       const { focusCell, isFocused, editing, inputRef, inputData, closeInput, editIcon } =
         useNavigator(props, attrs, emit);
@@ -316,6 +346,7 @@
             Math.ceil(props.rows.length / paginationModel.value.rowsPerPage),
         ),
         updatePagination,
+        updateRowsPerPage,
       };
     },
   });
@@ -576,4 +607,9 @@
       pointer-events: none;
     }
   }
+  .rows-per-page {
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 </style>