cleek 1.8.4 → 1.8.9

package/dist/cleek-styles/tiny-tailwind/.custom.styl

@@ -1,2 +1,6 @@
 .w-half
   width 50%
+.help-text
+  opacity 0.7
+  text-align center
+  font-style italic

package/dist/cleek.es.js

@@ -17,13 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, watch, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, mergeProps, withKeys, withModifiers, createElementVNode, pushScopeId, popScopeId, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, unref, vModelDynamic, createVNode, Fragment, renderList, vModelRadio, ref, vModelText, vModelCheckbox } from "vue";
+import { defineComponent, computed, watch, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, mergeProps, withKeys, withModifiers, createElementVNode, pushScopeId, popScopeId, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, unref, vModelDynamic, createVNode, Fragment, renderList, vModelRadio, ref, vModelSelect, vModelCheckbox, vModelText } from "vue";
 var validators = {
   size: (type) => {
     return ["", "xs", "s", "m", "l", "xl"].includes(type);
   },
   group: (type) => {
-    return ["left", "right", "center"].includes(type);
+    return ["", "left", "right", "center"].includes(type);
   },
   groupVertical: (type) => {
     return ["top", "bottom", "center"].includes(type);
@@ -11360,8 +11360,8 @@ const _sfc_main$i = {
 var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$d], ["__scopeId", "data-v-dfa2f586"]]);
 const _withScopeId$2 = (n) => (pushScopeId("data-v-64a6608c"), n = n(), popScopeId(), n);
 const _hoisted_1$f = ["disabled", "checked"];
-const _hoisted_2$8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-checkbox__element" }, null, -1));
-const _hoisted_3$6 = {
+const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-checkbox__element" }, null, -1));
+const _hoisted_3$5 = {
   key: 0,
   class: "c-Checkbox__label"
 };
@@ -11385,8 +11385,8 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
         $options.onChange($event);
       })
     }, null, 40, _hoisted_1$f),
-    _hoisted_2$8,
-    _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$6, [
+    _hoisted_2$7,
+    _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$5, [
       renderSlot(_ctx.$slots, "default", {}, void 0, true)
     ])) : createCommentVNode("", true)
   ], 16);
@@ -11557,7 +11557,7 @@ const _sfc_main$f = {
 var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$a], ["__scopeId", "data-v-4b8b9ab4"]]);
 var ckInput_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$c = { class: "ck-input" };
-const _hoisted_2$7 = ["type", "placeholder", "id", "disabled"];
+const _hoisted_2$6 = ["type", "placeholder", "id", "disabled"];
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
@@ -11593,6 +11593,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         event.target.select();
       emits("click", event);
     };
+    const onInput = (event) => {
+      emits("input", event);
+    };
     const onChange = (event) => {
       emits("change", event);
     };
@@ -11643,8 +11646,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           id: __props.label ? "ck-input" : "",
           disabled: __props.disabled,
           onChange: _cache[1] || (_cache[1] = ($event) => onChange($event)),
-          onClick: _cache[2] || (_cache[2] = ($event) => onClick($event))
-        }, null, 46, _hoisted_2$7), [
+          onInput: _cache[2] || (_cache[2] = ($event) => onInput($event)),
+          onClick: _cache[3] || (_cache[3] = ($event) => onClick($event))
+        }, null, 46, _hoisted_2$6), [
           [vModelDynamic, unref(value)]
         ]),
         __props.iconRight ? (openBlock(), createBlock(ckIcon, {
@@ -11658,15 +11662,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-36850b72"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-6ae48508"]]);
 var ckPopup_vue_vue_type_style_index_0_lang = "";
 const _hoisted_1$b = {
   key: 0,
   class: "ck-popup"
 };
-const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
-const _hoisted_3$5 = { class: "ck-popup__slot-header" };
-const _hoisted_4$3 = {
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
+const _hoisted_3$4 = { class: "ck-popup__slot-header" };
+const _hoisted_4$2 = {
   key: 0,
   class: "ck-popup__title"
 };
@@ -11681,7 +11685,7 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = /* @__PURE__ */ createTextVNode("Cancelar");
 const _hoisted_9 = /* @__PURE__ */ createTextVNode("Aceptar");
-const __default__$3 = {
+const __default__$1 = {
   props: {
     modelValue: { type: Boolean },
     title: { type: String, default: void 0 },
@@ -11717,11 +11721,11 @@ const __default__$3 = {
     }
   }
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   setup(__props) {
     return (_ctx, _cache) => {
       return _ctx.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
-        _hoisted_2$6,
+        _hoisted_2$5,
         createElementVNode("div", {
           class: "popup-container",
           onClick: _cache[4] || (_cache[4] = ($event) => _ctx.onBgClick())
@@ -11731,8 +11735,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onClick: _cache[3] || (_cache[3] = withModifiers(() => {
             }, ["stop"]))
           }, [
-            createElementVNode("div", _hoisted_3$5, [
-              __props.title ? (openBlock(), createElementBlock("h3", _hoisted_4$3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_3$4, [
+              __props.title ? (openBlock(), createElementBlock("h3", _hoisted_4$2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "header", { class: "ml-3" }),
               !__props.notCloseBtn ? (openBlock(), createBlock(ckIcon, {
                 key: 1,
@@ -11775,9 +11779,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
 }));
 const _withScopeId$1 = (n) => (pushScopeId("data-v-73a891e8"), n = n(), popScopeId(), n);
 const _hoisted_1$a = ["onKeyup"];
-const _hoisted_2$5 = ["name", "value", "disabled"];
-const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", { class: "c-Radio__element" }, null, -1));
-const _hoisted_4$2 = {
+const _hoisted_2$4 = ["name", "value", "disabled"];
+const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("div", { class: "c-Radio__element" }, null, -1));
+const _hoisted_4$1 = {
   key: 0,
   class: "c-Radio__label"
 };
@@ -11802,11 +11806,11 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
         name: $props.name,
         value: item.value,
         disabled: $props.disabled
-      }, null, 8, _hoisted_2$5), [
+      }, null, 8, _hoisted_2$4), [
         [vModelRadio, $options.value]
       ]),
-      _hoisted_3$4,
-      item.label ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(item.label), 1)) : createCommentVNode("", true)
+      _hoisted_3$3,
+      item.label ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(item.label), 1)) : createCommentVNode("", true)
     ], 16, _hoisted_1$a);
   }), 128);
 }
@@ -11881,17 +11885,10 @@ const qmStr = {
   }
 };
 var ckSelect_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$9 = {
-  class: "ck-select",
-  action: "/action_page.php",
-  method: "get"
-};
-const _hoisted_2$4 = ["id", "placeholder"];
-const _hoisted_3$3 = { id: "ck-select__list" };
-const _hoisted_4$1 = ["onClick", "value"];
+const _hoisted_1$9 = ["value"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   props: {
-    modelValue: { default: null, type: [Boolean, Number, Object, Array] },
+    modelValue: { default: null, type: [Boolean, Number, Object, Array, String] },
     prop: { type: String, default: "name" },
     autofocus: { type: Boolean, default: false },
     noDataText: { type: String, default: "No se encontr\xF3 nada" },
@@ -11915,7 +11912,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: emits }) {
     const props = __props;
     const search = ref("");
-    const lastSelectedValue = ref(null);
+    ref(null);
     const value = computed({
       get() {
         return props.modelValue;
@@ -11926,7 +11923,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         emits("update:modelValue", val);
       }
     });
-    computed(() => {
+    const filteredOptions = computed(() => {
       const list = props.options.filter((option) => {
         const name = getOptionName(option);
         return qmStr.checkContainsStr(name, search.value);
@@ -11935,10 +11932,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     const computedClass = computed(() => {
       const classList2 = [];
-      classList2.push(functions$1.getGroupClass(this));
+      classList2.push(functions$1.getGroupClass(props));
       return classList2;
     });
-    computed(() => {
+    const computedStyle = computed(() => {
       const list = [];
       if (props.minWidth)
         list.push({ "min-width": props.minWidth });
@@ -11983,28 +11980,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           return props.modelValue === null;
       }
     });
-    const onBlur = (event) => {
-      const isValid = checkOptionsIsValid(event.target.value);
-      if (!isValid)
-        event.target.value = lastSelectedValue.value;
-      lastSelectedValue.value = null;
-    };
-    const onFocus = (event) => {
-      console.log("event", event);
-      lastSelectedValue.value = search.value;
-      search.value = "";
-    };
-    const onChangeOption = (event) => {
-      console.log("option", search.value);
-      const selected = props.options.find((i) => getOptionName(i) === search.value);
-      value.value = getOptionKey(selected);
-      event.target.blur();
-    };
-    const checkOptionsIsValid = (optionName) => {
-      if (!optionName)
-        return;
-      return props.options.some((i) => getOptionName(i) === optionName);
-    };
     const getOptionKey = (option) => {
       return realReduceFunction(option);
     };
@@ -12019,46 +11994,39 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return props.reduceFunction(option);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("form", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", {
+        class: "ck-select",
+        style: normalizeStyle(unref(computedStyle))
+      }, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
           key: 0,
           align: __props.labelAlign,
-          for: "ck-select"
+          for: "ck-input"
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(__props.label), 1)
           ]),
           _: 1
         }, 8, ["align"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("input", {
-          autocomplete: "off",
-          list: "ck-select__list",
-          name: "ck-select",
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
-          id: __props.label ? "ck-select" : "",
-          placeholder: lastSelectedValue.value,
-          class: normalizeClass(unref(computedClass)),
-          onFocus: _cache[1] || (_cache[1] = ($event) => onFocus($event)),
-          onBlur: _cache[2] || (_cache[2] = ($event) => onBlur($event)),
-          onChange: _cache[3] || (_cache[3] = ($event) => onChangeOption($event))
-        }, null, 42, _hoisted_2$4), [
-          [vModelText, search.value]
-        ]),
-        createElementVNode("datalist", _hoisted_3$3, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+        withDirectives(createElementVNode("select", {
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+          class: normalizeClass(unref(computedClass))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredOptions), (option) => {
             return openBlock(), createElementBlock("option", {
-              onClick: ($event) => _ctx.onClickOption(option),
-              key: getOptionKey(option),
-              value: getOptionName(option)
-            }, null, 8, _hoisted_4$1);
+              value: getOptionKey(option),
+              key: option
+            }, toDisplayString(getOptionName(option)), 9, _hoisted_1$9);
           }), 128))
+        ], 2), [
+          [vModelSelect, unref(value)]
         ])
-      ]);
+      ], 4);
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-748b30c8"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-5251135b"), n = n(), popScopeId(), n);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a7e7777c"]]);
+const _withScopeId = (n) => (pushScopeId("data-v-4963b7ae"), n = n(), popScopeId(), n);
 const _hoisted_1$8 = ["disabled"];
 const _hoisted_2$3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-switch__slider" }, null, -1));
 const _hoisted_3$2 = {
@@ -12131,7 +12099,7 @@ const _sfc_main$a = {
     }
   }
 };
-var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$8], ["__scopeId", "data-v-5251135b"]]);
+var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$8], ["__scopeId", "data-v-4963b7ae"]]);
 const _hoisted_1$7 = { class: "ck-switch-options__container-exterior" };
 const _hoisted_2$2 = ["onClick"];
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12282,8 +12250,7 @@ const _sfc_main$6 = {
 var ckTableTitle = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", render$4]]);
 var ckTable__headerItems_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$4 = { class: "ck-table__header-items" };
-const __default__$2 = {
-  name: "CkTableHeaderItems",
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   props: {
     search: { type: String, default: void 0 },
     hideRefreshBtn: { type: Boolean, required: true },
@@ -12292,34 +12259,37 @@ const __default__$2 = {
     itemsPerPage: { type: Number, required: true },
     listLength: { type: Number, required: true }
   },
-  emits: ["refreshList", "update:search"],
-  computed: {
-    searchLocal: {
+  emits: ["update:search", "refreshList"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const searchLocal = computed({
       get() {
-        return this.search;
+        return props.search;
       },
       set(val) {
-        this.$emit("update:search", val);
+        emits("update:search", val);
       }
-    },
-    hideSearch() {
-      return typeof this.searchLocal === "undefined";
-    },
-    itemsPerPageStart() {
-      return (this.currentPage - 1) * this.itemsPerPage + 1;
-    },
-    itemsPerPageEnd() {
-      console.log("this.currentPage", this.currentPage);
-      console.log("this.itemsPerPage", this.itemsPerPage);
-      const value = this.currentPage * this.itemsPerPage;
-      if (value > this.listLength)
-        return this.listLength;
+    });
+    const hideSearch = computed(() => {
+      return typeof searchLocal.value === "undefined";
+    });
+    const itemsPerPageStart = computed(() => {
+      return (props.currentPage - 1) * props.itemsPerPage + 1;
+    });
+    const itemsPerPageEnd = computed(() => {
+      const value = props.currentPage * props.itemsPerPage;
+      if (value > props.listLength)
+        return props.listLength;
       return value;
+    });
+    function checkRefresh() {
+      const search = searchLocal.value;
+      setTimeout(() => {
+        if (search !== searchLocal.value)
+          return;
+        emits("refreshList", false);
+      }, 1e3);
     }
-  }
-};
-const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
-  setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
         !__props.hideRefreshBtn ? (openBlock(), createBlock(ckButton, {
@@ -12330,28 +12300,28 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         })) : createCommentVNode("", true),
         !__props.hideItemsPerPage && __props.listLength ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass(["items-per-page", { "ck-component__group--left": !_ctx.hideSearch }])
-        }, toDisplayString(_ctx.itemsPerPageStart) + " - " + toDisplayString(_ctx.itemsPerPageEnd) + " de " + toDisplayString(__props.listLength), 3)) : createCommentVNode("", true),
-        !_ctx.hideSearch ? (openBlock(), createBlock(ckInput, {
+          class: normalizeClass(["items-per-page", { "ck-component__group--left": !unref(hideSearch) }])
+        }, toDisplayString(unref(itemsPerPageStart)) + " - " + toDisplayString(unref(itemsPerPageEnd)) + " de " + toDisplayString(__props.listLength), 3)) : createCommentVNode("", true),
+        !unref(hideSearch) ? (openBlock(), createBlock(ckInput, {
           key: 2,
-          modelValue: _ctx.searchLocal,
+          modelValue: unref(searchLocal),
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(searchLocal) ? searchLocal.value = $event : null),
           icon: "search",
           placeholder: "Buscar...",
           group: __props.hideItemsPerPage ? "" : "right",
-          onChange: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("refreshList", false))
+          onInput: _cache[2] || (_cache[2] = ($event) => checkRefresh())
         }, null, 8, ["modelValue", "group"])) : createCommentVNode("", true)
       ]);
     };
   }
-}));
-var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-4ce2fcee"]]);
+});
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5fa6396e"]]);
 var ckTable__pagination_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$3 = { class: "ck-table__pagination" };
 const _hoisted_2$1 = ["onClick"];
 const _hoisted_3$1 = ["onClick"];
 const itemsShowed = 5;
-const __default__$1 = {
+const __default__ = {
   name: "CkTablePagination",
   props: {
     currentPage: { type: Number, required: true },
@@ -12424,10 +12394,9 @@ const __default__$1 = {
     }
   }
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   setup(__props) {
     return (_ctx, _cache) => {
-      const _component_ck_input = resolveComponent("ck-input");
       return __props.currentPage && _ctx.totalPages > 1 ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["ck-table__pagination-container", `pagination-align--${__props.align}`])
@@ -12446,7 +12415,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               onClick: ($event) => _ctx.updateCurrentPage(num)
             }, toDisplayString(num), 9, _hoisted_2$1);
           }), 256)),
-          createVNode(_component_ck_input, {
+          createVNode(ckInput, {
             class: "ck-table__pagination-input",
             autoSelect: "",
             type: "number",
@@ -12474,7 +12443,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-49a1575a"]]);
+var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-3fc0d6c6"]]);
 var ckTable_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$2 = { class: "ck-table" };
 const _hoisted_2 = {
@@ -12488,66 +12457,53 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "ck-table__table" };
 const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { key: 1 };
-const defaultPaginationAlign = "center";
-const defaultItemsPerPage = 40;
-const __default__ = {
-  name: "CkTable",
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
     columns: { type: Array, required: true, default: () => [] },
     currentPage: { type: Number, default: 0 },
-    itemsPerPage: { type: Number, default: defaultItemsPerPage },
+    itemsPerPage: { type: Number, default: 40 },
     listLength: { type: Number, default: 0 },
-    paginationAlign: { type: String, default: defaultPaginationAlign, validator: validators.align },
+    paginationAlign: { type: String, default: "center", validator: validators.align },
     search: { type: String, default: void 0 },
     hideHeaderActions: { type: Boolean, default: false },
     hideRefreshBtn: { type: Boolean, default: false },
     hideItemsPerPage: { type: Boolean, default: false }
   },
   emits: ["refreshList", "update:search", "update:currentPage"],
-  computed: {
-    searchLocal: {
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const searchLocal = computed({
       get() {
-        return this.search;
+        return props.search;
       },
       set(val) {
-        this.$emit("update:search", val);
+        emits("update:search", val);
       }
-    },
-    currentPageLocal: {
+    });
+    const currentPageLocal = computed({
       get() {
-        return this.currentPage;
+        return props.currentPage;
       },
       set(val) {
-        console.log("val", val);
-        this.$emit("update:currentPage", val);
+        emits("update:currentPage", val);
       }
+    });
+    function refreshList(pageChange = false) {
+      emits("refreshList", pageChange);
     }
-  },
-  methods: {
-    refreshList(pageChange = false) {
-      this.$emit("refreshList", pageChange);
-    },
-    testCurrentPage(cosito) {
-      console.log("cosito", cosito);
-      this.$emit("update:currentPage", cosito);
-    }
-  }
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
-  setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
         _ctx.$slots.header || !__props.hideHeaderActions ? (openBlock(), createElementBlock("div", _hoisted_2, [
           !__props.hideHeaderActions ? (openBlock(), createBlock(TableHeaderItems, {
             key: 0,
-            search: _ctx.searchLocal,
+            search: unref(searchLocal),
             "onUpdate:search": _cache[0] || (_cache[0] = ($event) => isRef(searchLocal) ? searchLocal.value = $event : null),
             currentPage: __props.currentPage,
             itemsPerPage: __props.itemsPerPage,
             listLength: __props.listLength,
             hideRefreshBtn: __props.hideRefreshBtn,
             hideItemsPerPage: __props.hideItemsPerPage,
-            onRefreshList: _cache[1] || (_cache[1] = ($event) => _ctx.refreshList($event))
+            onRefreshList: _cache[1] || (_cache[1] = ($event) => refreshList($event))
           }, null, 8, ["search", "currentPage", "itemsPerPage", "listLength", "hideRefreshBtn", "hideItemsPerPage"])) : createCommentVNode("", true),
           _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_3, [
             renderSlot(_ctx.$slots, "header", {}, void 0, true)
@@ -12575,18 +12531,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           ])) : createCommentVNode("", true)
         ]),
         createVNode(TablePagination, {
-          currentPage: __props.currentPage,
-          "onUpdate:currentPage": _cache[2] || (_cache[2] = ($event) => _ctx.testCurrentPage($event)),
+          currentPage: unref(currentPageLocal),
+          "onUpdate:currentPage": _cache[2] || (_cache[2] = ($event) => isRef(currentPageLocal) ? currentPageLocal.value = $event : null),
           itemsPerPage: __props.itemsPerPage,
           listLength: __props.listLength,
           align: __props.paginationAlign,
-          onRefreshList: _cache[3] || (_cache[3] = ($event) => _ctx.refreshList(true))
+          onRefreshList: _cache[3] || (_cache[3] = ($event) => refreshList(true))
         }, null, 8, ["currentPage", "itemsPerPage", "listLength", "align"])
       ]);
     };
   }
-}));
-var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-98ca4d56"]]);
+});
+var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cac87456"]]);
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", {
     class: normalizeClass(["ck-td", $options.computedTdClass])
@@ -12642,7 +12598,7 @@ const _sfc_main$2 = {
     }
   }
 };
-var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", render$3], ["__scopeId", "data-v-1d7f9b49"]]);
+var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", render$3], ["__scopeId", "data-v-70c634f2"]]);
 const _hoisted_1$1 = { class: "ck-textarea" };
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_label = resolveComponent("ck-label");