quasar-ui-sellmate-ui-kit 3.14.29 → 3.14.31

package/package.json

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

package/src/components/SSelectSearchCheckbox.vue

@@ -27,21 +27,19 @@
   >
     <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
     <template #before-options>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
+      <div class="search-input-container">
+        <q-icon :name="searchIcon" size="20px" />
+        <input
+          v-model="search"
+          autofocus
+          class="select-search-input"
+          :placeholder="searchPlaceholder"
+          @input="
+            data => {
+              onSearch(data.target.value);
+            }
+          "
+        />
       </div>
     </template>
     <template #option="{ itemProps, opt, selected, toggleOption }">
@@ -73,21 +71,19 @@
       </div>
     </template>
     <template #no-option>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
+      <div class="search-input-container">
+        <q-icon :name="searchIcon" size="20px" />
+        <input
+          v-model="search"
+          autofocus
+          class="select-search-input"
+          :placeholder="searchPlaceholder"
+          @input="
+            data => {
+              onSearch(data.target.value);
+            }
+          "
+        />
       </div>
       <q-item class="s-select-no-option">
         <q-item-section class="text-grey">{{ noData }}</q-item-section>
@@ -314,7 +310,7 @@
     color: $grey_65 !important;
   }
 
-  .select-search-input-form {
+  .search-input-container {
     height: 28px;
     display: flex;
     align-items: center;

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>