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

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v3.14.28
+ * quasar-ui-sellmate-ui-kit v3.14.30
  * (c) 2025 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */
@@ -1063,7 +1063,7 @@
 
   var _hoisted_1$p = { class: "date-picker-label" };
   var _hoisted_2$i = { class: "flex no-wrap items-center" };
-  var _hoisted_3$b = {
+  var _hoisted_3$c = {
     key: 1,
     class: "text-center text-grey_90 date-str"
   };
@@ -1172,7 +1172,7 @@
                 mask: "####-##-##",
                 class: "inner-input"
               }, null, 8, ["modelValue"]))
-            : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$b, vue.toDisplayString(_ctx.dateValue.from), 1)),
+            : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$c, vue.toDisplayString(_ctx.dateValue.from), 1)),
           _hoisted_4$8,
           (_ctx.useInput)
             ? (vue.openBlock(), vue.createBlock(_component_q_input, {
@@ -2293,7 +2293,7 @@
 
   var _hoisted_1$m = ["innerHTML"];
   var _hoisted_2$h = ["innerHTML"];
-  var _hoisted_3$a = { key: 0 };
+  var _hoisted_3$b = { key: 0 };
 
   function render$w(_ctx, _cache, $props, $setup, $data, $options) {
     var _component_s_help_message = vue.resolveComponent("s-help-message", true);
@@ -2311,7 +2311,7 @@
               innerHTML: _ctx.message[0]
             }, null, 8, _hoisted_2$h),
             (_ctx.message.length > 1)
-              ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_3$a, [
+              ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_3$b, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.message.slice(1), function (msg, idx) {
                     return (vue.openBlock(), vue.createBlock(_component_s_help_message, {
                       key: idx,
@@ -2524,7 +2524,7 @@
     key: 1,
     class: "input-addon bg-grey_10"
   };
-  var _hoisted_3$9 = {
+  var _hoisted_3$a = {
     key: 0,
     class: "self-center"
   };
@@ -2596,7 +2596,7 @@
             fn: vue.withCtx(function () { return [
               vue.renderSlot(_ctx.$slots, "beforeCounter"),
               (_ctx.maxByte)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, vue.toDisplayString(_ctx.model ? _ctx.getByte(_ctx.model) : 0) + " / " + vue.toDisplayString(_ctx.maxByte) + " byte ", 1))
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, vue.toDisplayString(_ctx.model ? _ctx.getByte(_ctx.model) : 0) + " / " + vue.toDisplayString(_ctx.maxByte) + " byte ", 1))
                 : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7, vue.toDisplayString(_ctx.model ? _ctx.getByte(_ctx.model) : 0) + " byte", 1))
             ]; }),
             key: "1"
@@ -3000,7 +3000,7 @@
     class: "pagination-last_page",
     flat: ""
   };
-  var _hoisted_3$8 = /*#__PURE__*/vue.createElementVNode("span", null, "/", -1);
+  var _hoisted_3$9 = /*#__PURE__*/vue.createElementVNode("span", null, "/", -1);
 
   function render$p(_ctx, _cache, $props, $setup, $data, $options) {
     var _component_q_btn = vue.resolveComponent("q-btn");
@@ -3062,7 +3062,7 @@
         }), 128)),
         (_ctx.perPage === 1)
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
-              _hoisted_3$8,
+              _hoisted_3$9,
               vue.createTextVNode(),
               vue.createElementVNode("span", null, vue.toDisplayString(_ctx.paginationInfo.lastPage), 1)
             ]))
@@ -4249,14 +4249,12 @@
       },
     });
 
-  var _hoisted_1$e = { class: "search-input-form-container" };
-  var _hoisted_2$a = { class: "select-search-input-form" };
-  var _hoisted_3$7 = ["placeholder"];
-  var _hoisted_4$6 = { key: 0 };
-  var _hoisted_5$6 = { key: 1 };
-  var _hoisted_6$4 = { class: "search-input-form-container" };
-  var _hoisted_7$2 = { class: "select-search-input-form" };
-  var _hoisted_8$1 = ["placeholder"];
+  var _hoisted_1$e = { class: "search-input-container" };
+  var _hoisted_2$a = ["placeholder"];
+  var _hoisted_3$8 = { key: 0 };
+  var _hoisted_4$6 = { key: 1 };
+  var _hoisted_5$6 = { class: "search-input-container" };
+  var _hoisted_6$4 = ["placeholder"];
 
   function render$j(_ctx, _cache, $props, $setup, $data, $options) {
     var _component_q_icon = vue.resolveComponent("q-icon");
@@ -4295,24 +4293,22 @@
     }, vue.createSlots({
       "before-options": vue.withCtx(function () { return [
         vue.createElementVNode("div", _hoisted_1$e, [
-          vue.createElementVNode("form", _hoisted_2$a, [
-            vue.createVNode(_component_q_icon, {
-              name: _ctx.searchIcon,
-              size: "20px"
-            }, null, 8, ["name"]),
-            vue.withDirectives(vue.createElementVNode("input", {
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return ((_ctx.search) = $event); }),
-              autofocus: "",
-              class: "select-search-input",
-              placeholder: _ctx.searchPlaceholder,
-              onInput: _cache[1] || (_cache[1] = 
-                function (data) {
-                  _ctx.onSearch(data.target.value);
-                }
-              )
-            }, null, 40, _hoisted_3$7), [
-              [vue.vModelText, _ctx.search]
-            ])
+          vue.createVNode(_component_q_icon, {
+            name: _ctx.searchIcon,
+            size: "20px"
+          }, null, 8, ["name"]),
+          vue.withDirectives(vue.createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return ((_ctx.search) = $event); }),
+            autofocus: "",
+            class: "select-search-input",
+            placeholder: _ctx.searchPlaceholder,
+            onInput: _cache[1] || (_cache[1] = 
+              function (data) {
+                _ctx.onSearch(data.target.value);
+              }
+            )
+          }, null, 40, _hoisted_2$a), [
+            [vue.vModelText, _ctx.search]
           ])
         ])
       ]; }),
@@ -4378,25 +4374,23 @@
       ];
     }),
       "no-option": vue.withCtx(function () { return [
-        vue.createElementVNode("div", _hoisted_6$4, [
-          vue.createElementVNode("form", _hoisted_7$2, [
-            vue.createVNode(_component_q_icon, {
-              name: _ctx.searchIcon,
-              size: "20px"
-            }, null, 8, ["name"]),
-            vue.withDirectives(vue.createElementVNode("input", {
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) { return ((_ctx.search) = $event); }),
-              autofocus: "",
-              class: "select-search-input",
-              placeholder: _ctx.searchPlaceholder,
-              onInput: _cache[3] || (_cache[3] = 
-                function (data) {
-                  _ctx.onSearch(data.target.value);
-                }
-              )
-            }, null, 40, _hoisted_8$1), [
-              [vue.vModelText, _ctx.search]
-            ])
+        vue.createElementVNode("div", _hoisted_5$6, [
+          vue.createVNode(_component_q_icon, {
+            name: _ctx.searchIcon,
+            size: "20px"
+          }, null, 8, ["name"]),
+          vue.withDirectives(vue.createElementVNode("input", {
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) { return ((_ctx.search) = $event); }),
+            autofocus: "",
+            class: "select-search-input",
+            placeholder: _ctx.searchPlaceholder,
+            onInput: _cache[3] || (_cache[3] = 
+              function (data) {
+                _ctx.onSearch(data.target.value);
+              }
+            )
+          }, null, 40, _hoisted_6$4), [
+            [vue.vModelText, _ctx.search]
           ])
         ]),
         vue.createVNode(_component_q_item, { class: "s-select-no-option" }, {
@@ -4421,9 +4415,9 @@
             name: "selected",
             fn: vue.withCtx(function () { return [
               (_ctx.noSelected && !_ctx.options.length)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, vue.toDisplayString(_ctx.noSelected), 1))
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, vue.toDisplayString(_ctx.noSelected), 1))
                 : (_ctx.options.length && _ctx.useAll && (_ctx.model[0] === '' || _ctx.model.includes('')))
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, vue.toDisplayString(_ctx.placeholder), 1))
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, vue.toDisplayString(_ctx.placeholder), 1))
                   : vue.createCommentVNode("", true)
             ]; }),
             key: "0"
@@ -4432,7 +4426,7 @@
     ]), 1032, ["dropdown-icon", "modelValue", "options", "popup-content-class", "option-label", "option-value", "option-group", "onAdd", "onRemove"]))
   }
 
-  var css_248z$i = ".q-field.q-field--error.s-select-checkbox:not(:hover) .q-field__control::after, .q-field.q-field--error.s-select-checkbox:not(.q-field--focused) .q-field__control::after {\n  border-color: #fb4444 !important;\n}\n.q-field.q-field--error.s-select-checkbox:hover .q-field__control::after, .q-field.q-field--error.q-field--focused.s-select-checkbox .q-field__control::after {\n  border-color: #0075ff !important;\n}\n.s-select-checkbox .q-field__inner .q-field__control {\n  background: white;\n  padding: 0;\n  min-height: 0;\n  height: 28px;\n}\n.s-select-checkbox .q-field__inner .q-field__control:before {\n  border-color: #aaaaaa;\n}\n.s-select-checkbox .q-field__inner .q-field__control:after:not(:hover) {\n  border: 1px solid #aaaaaa;\n  box-shadow: none;\n}\n.s-select-checkbox .q-field__inner .q-field__control:hover, .s-select-checkbox .q-field__inner .q-field__control:active {\n  background: #f6f6f6;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native {\n  font-size: 12px;\n  min-height: 0;\n  padding: 4px 0 4px 12px !important;\n  color: #333333;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > span {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 28px;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > .q-placeholder {\n  min-height: 100%;\n}\n.s-select-checkbox .q-field__inner .q-field__control .q-field__append {\n  min-height: 0;\n  height: inherit;\n  padding: 8px;\n}\n.s-select-checkbox .q-field__inner .q-field__control .q-field__append .q-icon {\n  font-size: 12px;\n  color: #888888;\n  width: 1em;\n  height: 1em;\n}\n.s-select-checkbox .q-field__inner .q-field__bottom {\n  padding: 8px 0px 0px 0px;\n  font-size: 12px;\n  color: #737373;\n}\n.s-select-checkbox .q-field__inner .q-field__bottom .q-field__messages div[role=alert] {\n  color: #e30000;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control {\n  opacity: 1 !important;\n  background: #eeeeee;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control:after {\n  border: 1px solid #cccccc;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > span {\n  color: #888888;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control .q-field__append .q-icon {\n  color: #888888;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item {\n  padding: 6px 12px;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item__section .q-item__label > span {\n  font-size: 12px;\n  font-weight: 400;\n  color: #333333;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item--active {\n  color: #333333 !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused {\n  background: #0075ff;\n  color: white !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-focus-helper {\n  opacity: 0 !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-item__label > span {\n  color: white !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-checkbox .q-checkbox__inner--indet .q-checkbox__bg, .s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-checkbox .q-checkbox__inner--truthy .q-checkbox__bg {\n  border: 1px solid white !important;\n}\n.s-select-checkbox .q-field__native {\n  display: block;\n  min-height: 0;\n  height: 28px;\n  width: 100%;\n  padding: 4px 0 4px 12px !important;\n  color: #333333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.s-select-checkbox .q-field__native > span {\n  max-height: 28px;\n}\n.s-select-checkbox .q-field__native > .s-checkbox {\n  margin-right: 8px;\n}\n.custom-select-options {\n  height: 28px;\n}\n.disabled.s-select-checkbox-option {\n  border: none;\n  background: none !important;\n  color: #888888 !important;\n}\n.select-search-input-form {\n  height: 28px;\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  position: relative;\n  border-radius: 2px;\n  border: 1px solid #aaaaaa;\n  background-color: white;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  margin: 4px;\n}\n.select-search-input-form::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  border: 1px solid transparent;\n  border-radius: inherit;\n}\n.select-search-input-form:hover::after, .select-search-input-form:focus-within::after {\n  border-color: #0075ff;\n  box-shadow: 0 0 4px #0075ff;\n  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.select-search-input-form .select-search-input {\n  font-size: 12px;\n  margin-left: 8px;\n  flex-grow: 1;\n  border: none;\n  outline: none;\n}";
+  var css_248z$i = ".q-field.q-field--error.s-select-checkbox:not(:hover) .q-field__control::after, .q-field.q-field--error.s-select-checkbox:not(.q-field--focused) .q-field__control::after {\n  border-color: #fb4444 !important;\n}\n.q-field.q-field--error.s-select-checkbox:hover .q-field__control::after, .q-field.q-field--error.q-field--focused.s-select-checkbox .q-field__control::after {\n  border-color: #0075ff !important;\n}\n.s-select-checkbox .q-field__inner .q-field__control {\n  background: white;\n  padding: 0;\n  min-height: 0;\n  height: 28px;\n}\n.s-select-checkbox .q-field__inner .q-field__control:before {\n  border-color: #aaaaaa;\n}\n.s-select-checkbox .q-field__inner .q-field__control:after:not(:hover) {\n  border: 1px solid #aaaaaa;\n  box-shadow: none;\n}\n.s-select-checkbox .q-field__inner .q-field__control:hover, .s-select-checkbox .q-field__inner .q-field__control:active {\n  background: #f6f6f6;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native {\n  font-size: 12px;\n  min-height: 0;\n  padding: 4px 0 4px 12px !important;\n  color: #333333;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > span {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 28px;\n}\n.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > .q-placeholder {\n  min-height: 100%;\n}\n.s-select-checkbox .q-field__inner .q-field__control .q-field__append {\n  min-height: 0;\n  height: inherit;\n  padding: 8px;\n}\n.s-select-checkbox .q-field__inner .q-field__control .q-field__append .q-icon {\n  font-size: 12px;\n  color: #888888;\n  width: 1em;\n  height: 1em;\n}\n.s-select-checkbox .q-field__inner .q-field__bottom {\n  padding: 8px 0px 0px 0px;\n  font-size: 12px;\n  color: #737373;\n}\n.s-select-checkbox .q-field__inner .q-field__bottom .q-field__messages div[role=alert] {\n  color: #e30000;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control {\n  opacity: 1 !important;\n  background: #eeeeee;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control:after {\n  border: 1px solid #cccccc;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control-container .q-field__native > span {\n  color: #888888;\n}\n.q-field--disabled.s-select-checkbox .q-field__inner .q-field__control .q-field__append .q-icon {\n  color: #888888;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item {\n  padding: 6px 12px;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item__section .q-item__label > span {\n  font-size: 12px;\n  font-weight: 400;\n  color: #333333;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-item--active {\n  color: #333333 !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused {\n  background: #0075ff;\n  color: white !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-focus-helper {\n  opacity: 0 !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-item__label > span {\n  color: white !important;\n}\n.s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-checkbox .q-checkbox__inner--indet .q-checkbox__bg, .s-select-checkbox-opts .q-virtual-scroll__content .q-manual-focusable--focused .q-item__section .q-checkbox .q-checkbox__inner--truthy .q-checkbox__bg {\n  border: 1px solid white !important;\n}\n.s-select-checkbox .q-field__native {\n  display: block;\n  min-height: 0;\n  height: 28px;\n  width: 100%;\n  padding: 4px 0 4px 12px !important;\n  color: #333333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.s-select-checkbox .q-field__native > span {\n  max-height: 28px;\n}\n.s-select-checkbox .q-field__native > .s-checkbox {\n  margin-right: 8px;\n}\n.custom-select-options {\n  height: 28px;\n}\n.disabled.s-select-checkbox-option {\n  border: none;\n  background: none !important;\n  color: #888888 !important;\n}\n.search-input-container {\n  height: 28px;\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  position: relative;\n  border-radius: 2px;\n  border: 1px solid #aaaaaa;\n  background-color: white;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  margin: 4px;\n}\n.search-input-container::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  border: 1px solid transparent;\n  border-radius: inherit;\n}\n.search-input-container:hover::after, .search-input-container:focus-within::after {\n  border-color: #0075ff;\n  box-shadow: 0 0 4px #0075ff;\n  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.search-input-container .select-search-input {\n  font-size: 12px;\n  margin-left: 8px;\n  flex-grow: 1;\n  border: none;\n  outline: none;\n}";
   styleInject(css_248z$i);
 
   script$i.render = render$j;
@@ -4645,7 +4639,7 @@
 
   var _hoisted_1$d = { class: "search-input-form-container" };
   var _hoisted_2$9 = { class: "select-search-input-form" };
-  var _hoisted_3$6 = { key: 0 };
+  var _hoisted_3$7 = { key: 0 };
   var _hoisted_4$5 = { key: 1 };
   var _hoisted_5$5 = {
     key: 2,
@@ -4761,7 +4755,7 @@
     }),
       selected: vue.withCtx(function () { return [
         (_ctx.model.length === 0)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, vue.toDisplayString(_ctx.placeholder), 1))
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$7, vue.toDisplayString(_ctx.placeholder), 1))
           : (_ctx.isAllChecked)
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, vue.toDisplayString(_ctx.allCheckPlaceholder), 1))
             : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, vue.toDisplayString(_ctx.pureModelValue.map(function (selected) { return selected[_ctx.optionLabel]; }).join(', ')), 1))
@@ -5686,7 +5680,7 @@
 
   var script$c = vue.defineComponent({
       name: 'STable',
-      emits: ['update:page', 'update:focused', 'field-updated', 'request'],
+      emits: ['update:page', 'update:rowsPerPage', 'update:focused', 'field-updated', 'request'],
       components: {
         QTable: quasar.QTable,
         QInnerLoading: quasar.QInnerLoading,
@@ -5759,6 +5753,18 @@
           type: Boolean,
           default: false,
         },
+        usePerPageSelect: {
+          type: Boolean,
+          default: false,
+        },
+        perPageOptions: {
+          type: Array,
+          default: function () { return [
+            { label: '50개씩 보기', value: 50 },
+            { label: '100개씩 보기', value: 100 },
+            { label: '150개씩 보기', value: 150 },
+            { label: '200개씩 보기', value: 200 } ]; },
+        },
       },
       setup: function setup(props, ref$1) {
         var emit = ref$1.emit;
@@ -5783,6 +5789,11 @@
           }
         }
 
+        function updateRowsPerPage(value) {
+          emit('update:rowsPerPage', value);
+          updatePagination(1);
+        }
+
         var sTableRef = vue.ref(null);
         var ref$2 =
           useNavigator(props, attrs, emit);
@@ -5912,6 +5923,7 @@
               Math.ceil(props.rows.length / paginationModel.value.rowsPerPage); }
           ),
           updatePagination: updatePagination,
+          updateRowsPerPage: updateRowsPerPage,
         };
       },
     });
@@ -5921,6 +5933,10 @@
     key: 1,
     class: "s-table-edited-td"
   };
+  var _hoisted_3$6 = {
+    key: 0,
+    class: "bg-grey_05 s-border-radius-sm s-border-top-none s-border-grey_30 s-pagination-wrapper relative-position"
+  };
 
   function render$d(_ctx, _cache, $props, $setup, $data, $options) {
     var _component_q_inner_loading = vue.resolveComponent("q-inner-loading");
@@ -5929,6 +5945,7 @@
     var _component_q_td = vue.resolveComponent("q-td");
     var _component_q_table = vue.resolveComponent("q-table");
     var _component_s_pagination = vue.resolveComponent("s-pagination");
+    var _component_s_select = vue.resolveComponent("s-select");
 
     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
       vue.createVNode(_component_q_table, vue.mergeProps({
@@ -6040,21 +6057,35 @@
         })
       ]), 1040, ["columns", "rows", "pagination", "no-data-label", "class", "onSelection"]),
       (_ctx.paginationModel.rowsPerPage !== 0 && ((!_ctx.hideBottom && _ctx.pagesNumber > 1) || _ctx.showBottom))
-        ? (vue.openBlock(), vue.createBlock(_component_s_pagination, {
-            key: 0,
-            modelValue: _ctx.paginationModel.page,
-            "onUpdate:modelValue": [
-              _cache[3] || (_cache[3] = function ($event) { return ((_ctx.paginationModel.page) = $event); }),
-              _ctx.updatePagination
-            ],
-            lastPage: _ctx.pagesNumber,
-            class: "bg-grey_05 s-border-radius-sm s-border-top-none s-border-grey_30"
-          }, null, 8, ["modelValue", "lastPage", "onUpdate:modelValue"]))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [
+            vue.createVNode(_component_s_pagination, {
+              modelValue: _ctx.paginationModel.page,
+              "onUpdate:modelValue": [
+                _cache[3] || (_cache[3] = function ($event) { return ((_ctx.paginationModel.page) = $event); }),
+                _ctx.updatePagination
+              ],
+              lastPage: _ctx.pagesNumber
+            }, null, 8, ["modelValue", "lastPage", "onUpdate:modelValue"]),
+            (_ctx.usePerPageSelect)
+              ? (vue.openBlock(), vue.createBlock(_component_s_select, {
+                  key: 0,
+                  options: _ctx.perPageOptions,
+                  modelValue: _ctx.paginationModel.rowsPerPage,
+                  "onUpdate:modelValue": [
+                    _cache[4] || (_cache[4] = function ($event) { return ((_ctx.paginationModel.rowsPerPage) = $event); }),
+                    _ctx.updateRowsPerPage
+                  ],
+                  "emit-value": "",
+                  "map-options": "",
+                  class: "absolute s-width-120 rows-per-page"
+                }, null, 8, ["options", "modelValue", "onUpdate:modelValue"]))
+              : vue.createCommentVNode("", true)
+          ]))
         : vue.createCommentVNode("", true)
     ], 64))
   }
 
-  var css_248z$c = ".s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner {\n  min-width: 0;\n  width: 16px;\n  height: 16px;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg {\n  border: 1px solid #888888;\n  width: 16px;\n  height: 16px;\n  padding: 0 2.5px;\n  background: white;\n  top: 0;\n  left: 0;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg .q-checkbox__svg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg .q-checkbox__svg {\n  width: 11.43px !important;\n  margin: auto;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet, .s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy {\n  color: #0075ff !important;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet .q-checkbox__bg, .s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy .q-checkbox__bg {\n  border: none;\n  background: #0075ff;\n}\n.s-table {\n  border-radius: 8px !important;\n  border: 1px solid #e1e1e1;\n}\n.s-table__hover .q-table__middle .q-table tr:hover td {\n  background-color: #f9f9f9 !important;\n}\n.s-table .q-table__middle .q-table {\n  table-layout: fixed;\n}\n.s-table .q-table__middle .q-table tr th,\n.s-table .q-table__middle .q-table tr td {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n}\n.s-table .q-table__middle .q-table thead {\n  background: #f5faff;\n  min-height: 0;\n}\n.s-table .q-table__middle .q-table thead tr {\n  height: 36px;\n  color: #222222;\n}\n.s-table .q-table__middle .q-table thead tr th {\n  padding: 0 16px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.s-table .q-table__middle .q-table thead tr th .sort-icon {\n  color: #aaaaaa;\n  font-size: 16px;\n  opacity: 1;\n  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.s-table .q-table__middle .q-table thead tr th .sort-icon.desc-sort {\n  transform: rotate(180deg);\n}\n.s-table .q-table__middle .q-table thead tr th.sortable > .q-table__sort-icon {\n  color: #aaaaaa;\n  font-size: 16px;\n  opacity: 1;\n}\n.s-table .q-table__middle .q-table tbody tr {\n  min-height: 0px;\n  color: #222222;\n}\n.s-table .q-table__middle .q-table tbody tr td {\n  min-width: 40px;\n  padding: 0 16px;\n  font-size: 12px;\n}\n.s-table .q-table__middle .q-table tbody tr td:before {\n  background: none;\n}\n.s-table .q-table__middle .q-table tbody tr td::after {\n  background: none;\n}\n.s-table .q-table__middle .q-table tbody tr td .s-table-edited-td {\n  display: inline-flex;\n  align-items: center;\n}\n.s-table .q-table__middle .q-table tbody tr .focused {\n  border: 1px solid #0075ff !important;\n}\n.s-table .q-table__middle .q-table tbody tr:last-child > td {\n  border-bottom-width: 1px;\n}\n.s-table .q-table__bottom {\n  min-height: 0;\n  padding: 0;\n  border: none;\n}\n.s-table .q-table__bottom--nodata {\n  height: 240px;\n  color: #888888;\n  font-size: 12px;\n  line-height: 165%;\n  display: block;\n  padding-top: 80px;\n}\n.s-select-table .q-table__middle .q-table thead tr th:first-of-type {\n  min-width: 52px !important;\n  width: 52px !important;\n  max-width: 52px !important;\n  padding: 0 8px 0 24px;\n  line-height: 100%;\n  text-align: left;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type {\n  padding: 0 8px 0 24px;\n  line-height: 100%;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:after {\n  background: none;\n}\n.resizable-table .q-table__middle .q-table thead tr th {\n  position: relative;\n}\n.s-select-table.resizable-table .q-table__middle .q-table thead tr th:first-of-type > .resizable-right {\n  display: none;\n}\n.sticky-column-table .q-table__middle .q-table tr th.sticky-cell {\n  position: sticky;\n  z-index: 102;\n  background-color: #f5faff;\n}\n.sticky-column-table .q-table__middle .q-table tr td.sticky-cell {\n  position: sticky;\n  z-index: 101;\n  background-color: white;\n}\n.sticky-header .q-table__middle .q-table thead tr th {\n  background: #f5faff;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n.before-search .q-table__middle .q-table thead {\n  opacity: 0.4;\n}\n.sticky-cell.left.sticky-shadow-left {\n  overflow: visible !important;\n}\n.sticky-cell.left.sticky-shadow-left:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 100%;\n  right: -20px;\n  width: 20px;\n  height: 100%;\n  z-index: 101 !important;\n  box-shadow: inset 12px 0 20px -25px;\n  opacity: 1;\n  pointer-events: none;\n}\n.sticky-cell.right.sticky-shadow-right {\n  overflow: visible !important;\n}\n.sticky-cell.right.sticky-shadow-right:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -20px;\n  width: 20px;\n  height: 100%;\n  z-index: 101 !important;\n  box-shadow: inset -12px 0 20px -25px;\n  opacity: 1;\n  pointer-events: none;\n}";
+  var css_248z$c = ".s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner {\n  min-width: 0;\n  width: 16px;\n  height: 16px;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg {\n  border: 1px solid #888888;\n  width: 16px;\n  height: 16px;\n  padding: 0 2.5px;\n  background: white;\n  top: 0;\n  left: 0;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg .q-checkbox__svg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner .q-checkbox__bg .q-checkbox__svg {\n  width: 11.43px !important;\n  margin: auto;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet, .s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy {\n  color: #0075ff !important;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--indet .q-checkbox__bg, .s-select-table .q-table__middle .q-table tbody tr td:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy .q-checkbox__bg, .s-select-table .q-table__middle .q-table thead tr th:first-of-type > .q-checkbox:not(.s-checkbox) .q-checkbox__inner--truthy .q-checkbox__bg {\n  border: none;\n  background: #0075ff;\n}\n.s-table {\n  border-radius: 8px !important;\n  border: 1px solid #e1e1e1;\n}\n.s-table__hover .q-table__middle .q-table tr:hover td {\n  background-color: #f9f9f9 !important;\n}\n.s-table .q-table__middle .q-table {\n  table-layout: fixed;\n}\n.s-table .q-table__middle .q-table tr th,\n.s-table .q-table__middle .q-table tr td {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n}\n.s-table .q-table__middle .q-table thead {\n  background: #f5faff;\n  min-height: 0;\n}\n.s-table .q-table__middle .q-table thead tr {\n  height: 36px;\n  color: #222222;\n}\n.s-table .q-table__middle .q-table thead tr th {\n  padding: 0 16px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.s-table .q-table__middle .q-table thead tr th .sort-icon {\n  color: #aaaaaa;\n  font-size: 16px;\n  opacity: 1;\n  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.s-table .q-table__middle .q-table thead tr th .sort-icon.desc-sort {\n  transform: rotate(180deg);\n}\n.s-table .q-table__middle .q-table thead tr th.sortable > .q-table__sort-icon {\n  color: #aaaaaa;\n  font-size: 16px;\n  opacity: 1;\n}\n.s-table .q-table__middle .q-table tbody tr {\n  min-height: 0px;\n  color: #222222;\n}\n.s-table .q-table__middle .q-table tbody tr td {\n  min-width: 40px;\n  padding: 0 16px;\n  font-size: 12px;\n}\n.s-table .q-table__middle .q-table tbody tr td:before {\n  background: none;\n}\n.s-table .q-table__middle .q-table tbody tr td::after {\n  background: none;\n}\n.s-table .q-table__middle .q-table tbody tr td .s-table-edited-td {\n  display: inline-flex;\n  align-items: center;\n}\n.s-table .q-table__middle .q-table tbody tr .focused {\n  border: 1px solid #0075ff !important;\n}\n.s-table .q-table__middle .q-table tbody tr:last-child > td {\n  border-bottom-width: 1px;\n}\n.s-table .q-table__bottom {\n  min-height: 0;\n  padding: 0;\n  border: none;\n}\n.s-table .q-table__bottom--nodata {\n  height: 240px;\n  color: #888888;\n  font-size: 12px;\n  line-height: 165%;\n  display: block;\n  padding-top: 80px;\n}\n.s-select-table .q-table__middle .q-table thead tr th:first-of-type {\n  min-width: 52px !important;\n  width: 52px !important;\n  max-width: 52px !important;\n  padding: 0 8px 0 24px;\n  line-height: 100%;\n  text-align: left;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:first-of-type {\n  padding: 0 8px 0 24px;\n  line-height: 100%;\n}\n.s-select-table .q-table__middle .q-table tbody tr td:after {\n  background: none;\n}\n.resizable-table .q-table__middle .q-table thead tr th {\n  position: relative;\n}\n.s-select-table.resizable-table .q-table__middle .q-table thead tr th:first-of-type > .resizable-right {\n  display: none;\n}\n.sticky-column-table .q-table__middle .q-table tr th.sticky-cell {\n  position: sticky;\n  z-index: 102;\n  background-color: #f5faff;\n}\n.sticky-column-table .q-table__middle .q-table tr td.sticky-cell {\n  position: sticky;\n  z-index: 101;\n  background-color: white;\n}\n.sticky-header .q-table__middle .q-table thead tr th {\n  background: #f5faff;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n.before-search .q-table__middle .q-table thead {\n  opacity: 0.4;\n}\n.sticky-cell.left.sticky-shadow-left {\n  overflow: visible !important;\n}\n.sticky-cell.left.sticky-shadow-left:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 100%;\n  right: -20px;\n  width: 20px;\n  height: 100%;\n  z-index: 101 !important;\n  box-shadow: inset 12px 0 20px -25px;\n  opacity: 1;\n  pointer-events: none;\n}\n.sticky-cell.right.sticky-shadow-right {\n  overflow: visible !important;\n}\n.sticky-cell.right.sticky-shadow-right:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -20px;\n  width: 20px;\n  height: 100%;\n  z-index: 101 !important;\n  box-shadow: inset -12px 0 20px -25px;\n  opacity: 1;\n  pointer-events: none;\n}\n.rows-per-page {\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n}";
   styleInject(css_248z$c);
 
   script$c.render = render$d;
@@ -8973,7 +9004,7 @@
 
   /* eslint-disable no-multiple-empty-lines */
 
-  var version = '3.14.28';
+  var version = '3.14.30';
 
   function install(app) {
     app.component('s-badge', script$2);