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

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v3.14.29
+ * quasar-ui-sellmate-ui-kit v3.14.31
  * (c) 2025 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */
@@ -642,9 +642,8 @@
         );
 
         var dateValue = vue.ref(props.modelValue);
-        var processedDateValue = vue.ref(props.modelValue);
 
-        function dateUpdate(dateVal) {
+        function dateUpdate() {
           if (props.range) {
             if (typeof dateValue.value === 'string') {
               dateValue.value = {
@@ -657,8 +656,7 @@
             }
             inputDate.value = (dateValue.value.from) + " ~ " + (dateValue.value.to);
           } else {
-            dateValue.value = dateVal.replaceAll('/', '-');
-            processedDateValue.value = dateVal;
+            dateValue.value = quasar.date.formatDate(dateValue.value, 'YYYY-MM-DD');
             inputDate.value = dateValue.value;
           }
           calendarOpen.value = false;
@@ -785,110 +783,95 @@
     var _component_q_icon = vue.resolveComponent("q-icon");
     var _component_q_input = vue.resolveComponent("q-input");
 
-    return (vue.openBlock(), vue.createBlock(_component_q_input, {
-      dense: "",
-      outlined: "",
-      class: vue.normalizeClass([{
+    return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+      vue.createTextVNode(vue.toDisplayString(_ctx.dateValue) + " ", 1),
+      vue.createVNode(_component_q_input, {
+        dense: "",
+        outlined: "",
+        class: vue.normalizeClass([{
         's-date-picker-range': _ctx.range,
         'text-grey_65 bg-grey_10': _ctx.isDisable,
         's-date-picker-inside': _ctx.insideLabel,
       }, "q-pa-none s-date-picker"]),
-      readonly: "",
-      placeholder: _ctx.dateText,
-      modelValue: _ctx.inputDate,
-      "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) { return ((_ctx.inputDate) = $event); }),
-      disable: _ctx.isDisable,
-      onClick: _ctx.openCalendar,
-      name: _ctx.name,
-      type: _ctx.type
-    }, vue.createSlots({
-      prepend: vue.withCtx(function () { return [
-        vue.createVNode(_component_q_btn, {
-          icon: _ctx.dateRangeIcon,
-          dense: "",
-          ripple: false,
-          flat: "",
-          color: "grey_90",
-          class: "q-pa-none no-hover",
-          "aria-label": "date-button"
-        }, {
-          default: vue.withCtx(function () { return [
-            vue.createVNode(_component_q_menu, {
-              modelValue: _ctx.calendarOpen,
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) { return ((_ctx.calendarOpen) = $event); }),
-              fit: "",
-              class: "date-picker-wrapper",
-              offset: [12, 12]
-            }, {
-              default: vue.withCtx(function () { return [
-                (_ctx.range)
-                  ? (vue.openBlock(), vue.createBlock(_component_q_date, {
-                      key: 0,
-                      modelValue: _ctx.dateValue,
-                      "onUpdate:modelValue": [
-                        _cache[0] || (_cache[0] = function ($event) { return ((_ctx.dateValue) = $event); }),
-                        _ctx.dateUpdate
-                      ],
-                      minimal: "",
-                      range: _ctx.range,
-                      color: "positive",
-                      class: "q-pa-none",
-                      options: _ctx.optionsFn,
-                      locale: _ctx.lang ? _ctx.locale[_ctx.lang] : {},
-                      onRangeStart: _ctx.getRangeStartDay,
-                      onRangeEnd: _ctx.resetDate
-                    }, null, 8, ["modelValue", "range", "options", "locale", "onRangeStart", "onRangeEnd", "onUpdate:modelValue"]))
-                  : (vue.openBlock(), vue.createBlock(_component_q_date, {
-                      key: 1,
-                      modelValue: _ctx.processedDateValue,
-                      "onUpdate:modelValue": [
-                        _cache[1] || (_cache[1] = function ($event) { return ((_ctx.processedDateValue) = $event); }),
-                        _ctx.dateUpdate
-                      ],
-                      minimal: "",
-                      range: _ctx.range,
-                      color: "positive",
-                      class: "q-pa-none",
-                      options: _ctx.optionsFn,
-                      locale: _ctx.lang ? _ctx.locale[_ctx.lang] : {},
-                      onRangeStart: _ctx.getRangeStartDay,
-                      onRangeEnd: _ctx.resetDate
-                    }, null, 8, ["modelValue", "range", "options", "locale", "onRangeStart", "onRangeEnd", "onUpdate:modelValue"]))
-              ]; }),
-              _: 1
-            }, 8, ["modelValue"])
-          ]; }),
-          _: 1
-        }, 8, ["icon"])
-      ]; }),
-      _: 2
-    }, [
-      (_ctx.insideLabel)
-        ? {
-            name: "before",
-            fn: vue.withCtx(function () { return [
-              vue.createElementVNode("div", _hoisted_1$q, vue.toDisplayString(_ctx.label), 1)
-            ]; }),
-            key: "0"
-          }
-        : undefined,
-      (_ctx.useDelete)
-        ? {
-            name: "append",
-            fn: vue.withCtx(function () { return [
-              vue.createVNode(_component_q_icon, {
-                name: _ctx.closeIcon,
-                size: "16px",
-                color: "grey_55",
-                class: "cursor-pointer",
-                onClick: _ctx.deleteDate,
-                "aria-label": "close-button"
-              }, null, 8, ["name", "onClick"])
+        readonly: "",
+        placeholder: _ctx.dateText,
+        modelValue: _ctx.inputDate,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) { return ((_ctx.inputDate) = $event); }),
+        disable: _ctx.isDisable,
+        onClick: _ctx.openCalendar,
+        name: _ctx.name,
+        type: _ctx.type
+      }, vue.createSlots({
+        prepend: vue.withCtx(function () { return [
+          vue.createVNode(_component_q_btn, {
+            icon: _ctx.dateRangeIcon,
+            dense: "",
+            ripple: false,
+            flat: "",
+            color: "grey_90",
+            class: "q-pa-none no-hover",
+            "aria-label": "date-button"
+          }, {
+            default: vue.withCtx(function () { return [
+              vue.createVNode(_component_q_menu, {
+                modelValue: _ctx.calendarOpen,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) { return ((_ctx.calendarOpen) = $event); }),
+                fit: "",
+                class: "date-picker-wrapper",
+                offset: [12, 12]
+              }, {
+                default: vue.withCtx(function () { return [
+                  vue.createVNode(_component_q_date, {
+                    modelValue: _ctx.dateValue,
+                    "onUpdate:modelValue": [
+                      _cache[0] || (_cache[0] = function ($event) { return ((_ctx.dateValue) = $event); }),
+                      _ctx.dateUpdate
+                    ],
+                    minimal: "",
+                    range: _ctx.range,
+                    color: "positive",
+                    class: "q-pa-none",
+                    options: _ctx.optionsFn,
+                    locale: _ctx.lang ? _ctx.locale[_ctx.lang] : {},
+                    onRangeStart: _ctx.getRangeStartDay,
+                    onRangeEnd: _ctx.resetDate
+                  }, null, 8, ["modelValue", "range", "options", "locale", "onRangeStart", "onRangeEnd", "onUpdate:modelValue"])
+                ]; }),
+                _: 1
+              }, 8, ["modelValue"])
             ]; }),
-            key: "1"
-          }
-        : undefined
-    ]), 1032, ["class", "placeholder", "modelValue", "disable", "onClick", "name", "type"]))
+            _: 1
+          }, 8, ["icon"])
+        ]; }),
+        _: 2
+      }, [
+        (_ctx.insideLabel)
+          ? {
+              name: "before",
+              fn: vue.withCtx(function () { return [
+                vue.createElementVNode("div", _hoisted_1$q, vue.toDisplayString(_ctx.label), 1)
+              ]; }),
+              key: "0"
+            }
+          : undefined,
+        (_ctx.useDelete)
+          ? {
+              name: "append",
+              fn: vue.withCtx(function () { return [
+                vue.createVNode(_component_q_icon, {
+                  name: _ctx.closeIcon,
+                  size: "16px",
+                  color: "grey_55",
+                  class: "cursor-pointer",
+                  onClick: _ctx.deleteDate,
+                  "aria-label": "close-button"
+                }, null, 8, ["name", "onClick"])
+              ]; }),
+              key: "1"
+            }
+          : undefined
+      ]), 1032, ["class", "placeholder", "modelValue", "disable", "onClick", "name", "type"])
+    ], 64))
   }
 
   var css_248z$B = ".s-date-picker {\n  height: 28px;\n}\n.s-date-picker .q-field__before {\n  padding: 0;\n}\n.s-date-picker .q-field__inner .q-field__control {\n  padding: 4px 8px !important;\n  align-items: center;\n  height: 100%;\n  align-items: center;\n}\n.s-date-picker .q-field__inner .q-field__control:after {\n  border: 1px solid #aaaaaa;\n  box-shadow: none;\n}\n.s-date-picker .q-field__inner .q-field__control:hover, .s-date-picker .q-field__inner .q-field__control:active {\n  background: #f6f6f6;\n}\n.s-date-picker .q-field__inner .q-field__control .q-field__prepend .q-icon {\n  width: 20px;\n  height: 20px;\n  color: #737373;\n}\n.s-date-picker .q-field__inner .q-field__control .q-field__prepend {\n  height: 20px;\n  padding: 0;\n}\n.s-date-picker .q-field__inner .q-field__control .q-field__prepend > div {\n  min-height: 0;\n  height: 100%;\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.s-date-picker .q-field__inner .q-field__control .q-field__prepend > div .q-btn {\n  width: 1.667em;\n  height: 1.667em;\n  min-height: 1.667em;\n}\n.s-date-picker .q-field__inner .q-field__control .q-field__prepend > div .q-btn .q-icon {\n  font-size: 1.667em;\n}\n.s-date-picker .q-field__inner .q-field__control-container {\n  height: 20px;\n}\n.s-date-picker .q-field__inner .q-field__control-container .q-field__native {\n  height: 100%;\n  line-height: 165%;\n  text-align: center;\n  padding: 0 !important;\n  font-size: 12px;\n  font-weight: 400;\n}\n.s-date-picker .q-field__inner .q-field__control-container .q-field__native input::placeholder {\n  color: #333333;\n}\n.q-field--disabled.s-date-picker {\n  color: #888888 !important;\n}\n.q-field--disabled.s-date-picker .q-field__inner {\n  color: #888888 !important;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control {\n  color: #888888 !important;\n  opacity: 1 !important;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control:after {\n  border: 1px solid #cccccc;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control .q-field__prepend {\n  opacity: 1 !important;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control .q-field__prepend .q-icon {\n  color: #888888;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control-container {\n  opacity: 1 !important;\n}\n.q-field--disabled.s-date-picker .q-field__inner .q-field__control-container .q-field__native {\n  color: #888888 !important;\n}\n.q-field--disabled.s-date-picker.q-field--float {\n  color: #888888 !important;\n  opacity: 0.9 !important;\n}\n.s-date-picker-inside {\n  width: fit-content !important;\n  height: 28px;\n}\n.s-date-picker-inside .q-field__before {\n  height: 100%;\n  line-height: 20px;\n  padding: 4px 12px;\n  border: 1px solid #aaaaaa;\n  background-color: #f6f6f6;\n  border-right: none;\n  border-radius: 2px 0 0 2px;\n}\n.s-date-picker-inside .q-field__before .date-picker-label {\n  font-size: 12px;\n  font-weight: 400;\n  color: #333333;\n}\n.s-date-picker-inside .q-field__inner .q-field__control {\n  border-radius: 0 2px 2px 0;\n}\n.s-date-picker-inside.q-field--disabled .q-field__before {\n  border: 1px solid #cccccc;\n  border-right: none;\n}\n.s-date-picker-inside.q-field--disabled .q-field__before .date-picker-label {\n  color: #888888;\n}\n.s-date-picker-range {\n  width: 226px;\n}\n.s-date-picker-range .q-field__inner .q-field__control .q-field__prepend {\n  padding: 0;\n}\n.s-date-picker-range .q-field__inner .q-field__control-container .q-field__native {\n  text-align: center;\n}\n.date-picker-wrapper.q-menu {\n  width: 290px;\n  height: 288px;\n  min-width: 0 !important;\n  min-height: 0 !important;\n}\n.date-picker-wrapper.q-menu .q-date {\n  height: 288px;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view {\n  min-height: 0 !important;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__navigation div {\n  height: 28px;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__navigation div .q-btn .q-icon {\n  font-size: 12px;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__navigation .relative-position div .q-btn--dense {\n  padding: 0 !important;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__navigation .relative-position div .q-btn--dense .q-btn__content > span {\n  font-size: 14px;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn {\n  padding: 0;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn .q-btn__content > span {\n  font-size: 14px;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn:hover .q-focus-helper {\n  background: #0075ff;\n  opacity: 1;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn:hover .q-focus-helper:before, .date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn:hover .q-focus-helper:after {\n  display: none;\n}\n.date-picker-wrapper.q-menu .q-date__main .q-date__content .q-date__view .q-date__calendar-days-container .q-date__calendar-days .q-date__calendar-item .q-btn:hover .q-btn__content > span {\n  color: white;\n}";
@@ -1063,7 +1046,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 +1155,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 +2276,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 +2294,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 +2507,7 @@
     key: 1,
     class: "input-addon bg-grey_10"
   };
-  var _hoisted_3$9 = {
+  var _hoisted_3$a = {
     key: 0,
     class: "self-center"
   };
@@ -2596,7 +2579,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 +2983,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 +3045,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)
             ]))
@@ -4251,7 +4234,7 @@
 
   var _hoisted_1$e = { class: "search-input-container" };
   var _hoisted_2$a = ["placeholder"];
-  var _hoisted_3$7 = { key: 0 };
+  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"];
@@ -4415,7 +4398,7 @@
             name: "selected",
             fn: vue.withCtx(function () { return [
               (_ctx.noSelected && !_ctx.options.length)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$7, 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_4$6, vue.toDisplayString(_ctx.placeholder), 1))
                   : vue.createCommentVNode("", true)
@@ -4639,7 +4622,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,
@@ -4755,7 +4738,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))
@@ -5680,7 +5663,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,
@@ -5753,6 +5736,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;
@@ -5777,6 +5772,11 @@
           }
         }
 
+        function updateRowsPerPage(value) {
+          emit('update:rowsPerPage', value);
+          updatePagination(1);
+        }
+
         var sTableRef = vue.ref(null);
         var ref$2 =
           useNavigator(props, attrs, emit);
@@ -5906,6 +5906,7 @@
               Math.ceil(props.rows.length / paginationModel.value.rowsPerPage); }
           ),
           updatePagination: updatePagination,
+          updateRowsPerPage: updateRowsPerPage,
         };
       },
     });
@@ -5915,6 +5916,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");
@@ -5923,6 +5928,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({
@@ -6034,21 +6040,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;
@@ -8967,7 +8987,7 @@
 
   /* eslint-disable no-multiple-empty-lines */
 
-  var version = '3.14.29';
+  var version = '3.14.31';
 
   function install(app) {
     app.component('s-badge', script$2);