cleek 2.0.2 → 2.0.6

package/dist/cleek.es.js

@@ -17,7 +17,7 @@ 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, ref, onMounted, getCurrentInstance, unref, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, vModelDynamic, createVNode, Fragment, renderList, vModelRadio, vModelSelect, vModelCheckbox, vModelText } from "vue";
+import { defineComponent, computed, watch, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, mergeProps, withKeys, withModifiers, createElementVNode, pushScopeId, popScopeId, unref, normalizeStyle, ref, getCurrentInstance, onMounted, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, vModelDynamic, createVNode, Fragment, renderList, vModelRadio, vModelSelect, vModelCheckbox, vModelText } from "vue";
 var validators = {
   size: (type) => {
     return ["", "xs", "s", "m", "l", "xl"].includes(type);
@@ -74,13 +74,18 @@ var functions$1 = {
       return true;
     return false;
   },
-  isTableColumnsVisible(col) {
-    return !col.isHidden;
+  isColumnDisplayed(column) {
+    if (column.isDisplayed === false)
+      return false;
+    return true;
+  },
+  getCleekOptions(getCurrentInstance2) {
+    return getCurrentInstance2().appContext.app.config.globalProperties.$cleekOptions;
   }
 };
 var globalVariables = {
   defaultFailImg: "df",
-  imagesFolderPath: "asd",
+  imagesFolderPath: "",
   defaultImgBorderColor: "#EEEEEE"
 };
 /*!
@@ -11202,7 +11207,7 @@ defineComponent({
     };
   }
 });
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["ck-icon", $options.computedClass]),
@@ -11231,7 +11236,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$j = {
+const _sfc_main$l = {
   name: "CkIcon",
   components: {
     FontAwesomeIcon
@@ -11278,9 +11283,9 @@ const _sfc_main$j = {
     }
   }
 };
-var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", render$d], ["__scopeId", "data-v-77d9963a"]]);
-const _hoisted_1$g = ["title", "aria-label", "disabled"];
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", render$b], ["__scopeId", "data-v-77d9963a"]]);
+const _hoisted_1$i = ["title", "aria-label", "disabled"];
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_icon = resolveComponent("ck-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -11303,13 +11308,13 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
       icon: $props.iconRight,
       "icon-pack": $props.iconPack
     }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
-  ], 10, _hoisted_1$g);
+  ], 10, _hoisted_1$i);
 }
 var ckButton_vue_vue_type_style_index_0_scoped_true_lang = "";
 const defaultType = "outlined";
 const defaultColor = "primary";
 const defaultAlign = "left";
-const _sfc_main$i = {
+const _sfc_main$k = {
   name: "CkButton",
   components: {
     ckIcon
@@ -11363,15 +11368,15 @@ const _sfc_main$i = {
     }
   }
 };
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$c], ["__scopeId", "data-v-a687842a"]]);
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", render$a], ["__scopeId", "data-v-a687842a"]]);
 const _withScopeId$2 = (n) => (pushScopeId("data-v-69dfa524"), n = n(), popScopeId(), n);
-const _hoisted_1$f = ["disabled", "checked"];
-const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-checkbox__element" }, null, -1));
+const _hoisted_1$h = ["disabled", "checked"];
+const _hoisted_2$8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-checkbox__element" }, null, -1));
 const _hoisted_3$5 = {
   key: 0,
   class: "c-Checkbox__label"
 };
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", mergeProps({ class: "ck-checkbox" }, $options.checkboxAttributes, {
     onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {
     }, ["prevent"]), ["space"])),
@@ -11390,15 +11395,15 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
         $options.value = $event.target.checked;
         $options.onChange($event);
       })
-    }, null, 40, _hoisted_1$f),
-    _hoisted_2$7,
+    }, null, 40, _hoisted_1$h),
+    _hoisted_2$8,
     _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$5, [
       renderSlot(_ctx.$slots, "default", {}, void 0, true)
     ])) : createCommentVNode("", true)
   ], 16);
 }
 var ckCheckbox_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$h = {
+const _sfc_main$j = {
   name: "CkCheckbox",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -11431,14 +11436,58 @@ const _sfc_main$h = {
     }
   }
 };
-var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$b], ["__scopeId", "data-v-69dfa524"]]);
+var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", render$9], ["__scopeId", "data-v-69dfa524"]]);
+var ckChip_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$g = ["color"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  props: {
+    size: { type: String, default: "s" },
+    color: { type: String, default: "primary" },
+    textColor: { type: String, default: void 0 },
+    icon: { type: String, default: void 0 },
+    iconPack: { type: String, default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const computedClass = computed(() => {
+      return [
+        `size-${props.size}`,
+        `ck-component__bg-color--${props.color}`
+      ];
+    });
+    const computedStyle = computed(() => {
+      const list = [];
+      if (props.color)
+        ;
+      return list;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ck-chip", unref(computedClass)]),
+        color: __props.color,
+        style: normalizeStyle(unref(computedStyle)),
+        onClick: _cache[0] || (_cache[0] = ($event) => emits("click", $event))
+      }, [
+        __props.icon ? (openBlock(), createBlock(ckIcon, {
+          key: 0,
+          icon: __props.icon,
+          "icon-pack": __props.iconPack
+        }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 14, _hoisted_1$g);
+    };
+  }
+});
+var ckChip = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-73ff343b"]]);
 var ckImg_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$e = ["src"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = ["src", "alt"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     src: { type: String, default: "" },
     isFullPath: { type: Boolean, default: false },
     failImgSrc: { type: String, default: "" },
+    alt: { type: String, default: "" },
     size: { type: String, default: "", validator: validators.size },
     sizeAbsolute: { type: String, default: "" },
     width: { type: String, default: "" },
@@ -11452,7 +11501,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const altNeeded = ref(false);
-    let context;
     let isMounted = ref(false);
     const imageUrl = computed(() => {
       if (!isMounted.value)
@@ -11463,11 +11511,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     });
     const computedClass = computed(() => {
       const classList2 = [];
-      if (!props.size && !props.sizeAbsolute && !props.width && !props.height) {
-        props.size = "m";
+      let size = props.size;
+      if (!size && !props.sizeAbsolute && !props.width && !props.height) {
+        size = "m";
       }
-      if (props.size)
-        classList2.push(`ck-img__size--${props.size}`);
+      if (size)
+        classList2.push(`ck-img__size--${size}`);
       if (props.hasBorder) {
         classList2.push("ck-img__has-border");
         if (functions$1.isColorTemplateVariable(realBorderColor.value)) {
@@ -11514,13 +11563,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }
     function getImg(src) {
       let path = "";
-      console.log("context.$cleekOptions", context.$cleekOptions);
-      if (context.$cleekOptions)
-        path = context.$cleekOptions.imgPath;
+      const $cleekOptions = functions$1.getCleekOptions(getCurrentInstance);
+      if ($cleekOptions) {
+        if ($cleekOptions.imgPath)
+          path = $cleekOptions.imgPath;
+      }
       return `${path}${src}`;
     }
     onMounted(() => {
-      context = getCurrentInstance().ctx;
+      getCurrentInstance().ctx;
       isMounted.value = true;
     });
     return (_ctx, _cache) => {
@@ -11532,24 +11583,25 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         createElementVNode("img", {
           src: unref(imageUrl),
           style: normalizeStyle(unref(computedImgStyle)),
+          alt: __props.alt,
           onError: _cache[0] || (_cache[0] = ($event) => altNeeded.value = true)
-        }, null, 44, _hoisted_1$e)
+        }, null, 44, _hoisted_1$f)
       ], 6);
     };
   }
 });
-var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-78f4ca32"]]);
-const _hoisted_1$d = ["for"];
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-53d78f2e"]]);
+const _hoisted_1$e = ["for"];
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", {
     class: normalizeClass(["ck-label", $options.computedClass]),
     for: $props.for
   }, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ], 10, _hoisted_1$d);
+  ], 10, _hoisted_1$e);
 }
 var ckLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$f = {
+const _sfc_main$g = {
   name: "CkLabel",
   props: {
     for: { type: String, default: "" },
@@ -11566,11 +11618,11 @@ const _sfc_main$f = {
     }
   }
 };
-var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", render$a], ["__scopeId", "data-v-4b8b9ab4"]]);
+var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$8], ["__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$6 = ["type", "placeholder", "id", "disabled"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = { class: "ck-input" };
+const _hoisted_2$7 = ["type", "placeholder", "id", "disabled"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
     type: { type: String, validator: validators.inputType, default: "text" },
@@ -11631,7 +11683,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return list;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
           key: 0,
           align: __props.labelAlign,
@@ -11660,7 +11712,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           onChange: _cache[1] || (_cache[1] = ($event) => onChange($event)),
           onInput: _cache[2] || (_cache[2] = ($event) => onInput($event)),
           onClick: _cache[3] || (_cache[3] = ($event) => onClick($event))
-        }, null, 46, _hoisted_2$6), [
+        }, null, 46, _hoisted_2$7), [
           [vModelDynamic, unref(value)]
         ]),
         __props.iconRight ? (openBlock(), createBlock(ckIcon, {
@@ -11674,13 +11726,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-61fababc"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-61fababc"]]);
 var ckPopup_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "ck-popup"
 };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
+const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
 const _hoisted_3$4 = { class: "ck-popup__slot-header" };
 const _hoisted_4$2 = {
   key: 0,
@@ -11733,11 +11785,11 @@ const __default__$1 = {
     }
   }
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   setup(__props) {
     return (_ctx, _cache) => {
-      return _ctx.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
-        _hoisted_2$5,
+      return _ctx.value ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+        _hoisted_2$6,
         createElementVNode("div", {
           class: "popup-container",
           onClick: _cache[4] || (_cache[4] = ($event) => _ctx.onBgClick())
@@ -11790,14 +11842,14 @@ 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$4 = ["name", "value", "disabled"];
+const _hoisted_1$b = ["onKeyup"];
+const _hoisted_2$5 = ["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"
 };
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (item, index) => {
     return openBlock(), createElementBlock("label", mergeProps({
       key: `radio-${index}`,
@@ -11818,16 +11870,16 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
         name: $props.name,
         value: item.value,
         disabled: $props.disabled
-      }, null, 8, _hoisted_2$4), [
+      }, null, 8, _hoisted_2$5), [
         [vModelRadio, $options.value]
       ]),
       _hoisted_3$3,
       item.label ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(item.label), 1)) : createCommentVNode("", true)
-    ], 16, _hoisted_1$a);
+    ], 16, _hoisted_1$b);
   }), 128);
 }
 var ckRadio_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$c = {
+const _sfc_main$d = {
   name: "CkRadio",
   props: {
     modelValue: { type: String, default: void 0 },
@@ -11859,7 +11911,100 @@ const _sfc_main$c = {
     }
   }
 };
-var ckRadio = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", render$9], ["__scopeId", "data-v-73a891e8"]]);
+var ckRadio = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", render$7], ["__scopeId", "data-v-73a891e8"]]);
+var qmApi = {};
+var qmArray = {
+  arrayToText(arr, key = null) {
+    let msg = "";
+    for (let index = 0; index < arr.length; index++) {
+      if (index) {
+        if (index === arr.length - 1) {
+          msg += " y ";
+        } else {
+          msg += ", ";
+        }
+      }
+      let word;
+      if (key) {
+        word = arr[index][key];
+      } else {
+        word = arr[index];
+      }
+      msg += `"${word}"`;
+    }
+    return msg;
+  },
+  getRandomElementOfArray(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  },
+  hexToRGBA(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    if (alpha)
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    return `rgb(${r}, ${g}, ${b})`;
+  },
+  removeOfArray(list, findFunction) {
+    if (!list || !findFunction)
+      return;
+    const index = list.findIndex(findFunction);
+    if (index === -1)
+      return;
+    list.splice(index, 1);
+  },
+  removeOfArrayById(list, id) {
+    const index = list.findIndex((i) => i.id === id);
+    if (index === -1)
+      return;
+    list.splice(index, 1);
+  },
+  replaceInList(arr, NewItem, prop = "id") {
+    if (!NewItem)
+      return;
+    const index = arr.findIndex((i) => i[prop] === NewItem[prop]);
+    if (index !== -1)
+      arr.splice(index, 1, NewItem);
+  },
+  sort(arr, keys) {
+    if (typeof keys === "string")
+      keys = [keys];
+    if (keys.length === 2) {
+      if (keys[1] === "DESC" || keys[1] === "ASC") {
+        keys = [keys];
+      }
+    }
+    const finalKeys = [];
+    keys.forEach((key) => {
+      if (typeof key === "string")
+        key = [key];
+      if (typeof key[1] === "undefined")
+        key[1] = "ASC";
+      finalKeys.push(key);
+    });
+    return arr.sort((a, b) => {
+      let value = 0;
+      finalKeys.forEach(([key, order2]) => {
+        if (!value) {
+          const mult = order2 === "DESC" ? -1 : 1;
+          if (a[key] < b[key])
+            value = -1 * mult;
+          if (a[key] > b[key])
+            value = 1 * mult;
+        }
+      });
+      return value;
+    });
+  }
+};
+var qmAudio = {
+  reproduceAudio(path) {
+    if (path) {
+      const audio = new Audio(path);
+      audio.play();
+    }
+  }
+};
 const qmStr = {
   capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
@@ -11877,6 +12022,15 @@ const qmStr = {
     str = str.toLowerCase();
     return str;
   },
+  getRandomStr(length = 10) {
+    let result = "";
+    const characters = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  },
   padZeros(num, size = 2) {
     return `000000000${num}`.substr(-size);
   },
@@ -11896,9 +12050,146 @@ const qmStr = {
     return joinArray;
   }
 };
+var qmNum = {
+  getRandomInt(min2, max2) {
+    min2 = Math.ceil(min2);
+    max2 = Math.floor(max2);
+    return Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
+  },
+  setPrice(num, { precision = 2 } = {}) {
+    if (!num)
+      return 0;
+    return +parseFloat(num).toFixed(precision);
+  },
+  presentNum(num, forceDecimal = false) {
+    num = +num;
+    let finalInt = "0";
+    let decimal = "00";
+    const isNegative = num < 0;
+    const isValidNum = !(!num || !+num);
+    if (isValidNum) {
+      num = parseFloat(Math.abs(num)).toFixed(2);
+      decimal = num.substring(num.length - 2, num.length);
+      const int = num.substring(0, num.length - 3);
+      const reversedInt = qmStr.reverseString(int);
+      let reversedRealInt = "";
+      for (let i = 0; i < reversedInt.length; i++) {
+        reversedRealInt += reversedInt.charAt(i);
+        if (i + 1 >= reversedInt.length)
+          continue;
+        if ((i + 1) % 3)
+          continue;
+        reversedRealInt += ".";
+      }
+      finalInt = qmStr.reverseString(reversedRealInt);
+    }
+    let finalValue = finalInt;
+    if (isNegative)
+      finalValue = `-${finalValue}`;
+    if (forceDecimal || +decimal) {
+      finalValue = `${finalValue},${decimal}`;
+    }
+    return finalValue;
+  },
+  removeNoNumber(str, isFloat = false) {
+    let newStr = "";
+    str = str.toString();
+    for (let i = 0; i < str.length; i++) {
+      if (str[i] == parseInt(str[i], 10)) {
+        newStr += str[i];
+      } else if (isFloat && str[i] == "," || isFloat && str[i] == ".") {
+        newStr += ".";
+        isFloat = false;
+      }
+    }
+    return newStr;
+  },
+  showPrice(num, Extra = { hideIcon: false, currency: "$" }) {
+    if (Extra.hideIcon !== true)
+      Extra.hideIcon = false;
+    let presentedNum = this.presentNum(num, true);
+    const isNegative = presentedNum[0] === "-";
+    if (isNegative)
+      presentedNum = presentedNum.substring(1, presentedNum.length);
+    if (!Extra.hideIcon)
+      presentedNum = `${Extra.currency}${presentedNum}`;
+    if (isNegative)
+      presentedNum = `- ${presentedNum}`;
+    return presentedNum;
+  },
+  simplifyNum(num) {
+    if (!(num % 1))
+      return Math.floor(num);
+    return this.presentNum(num);
+  }
+};
+function getKeyValue(obj, key) {
+  return obj[key];
+}
+function setKeyValue(obj, key, value) {
+  obj[key] = value;
+}
+var qmObj = {
+  addEmptyOptionToList(optionsList, { prop = "name", title = "Todos", noneId = 0 } = {}) {
+    const noneOption = {
+      id: noneId,
+      [prop]: title
+    };
+    const newList = [...optionsList];
+    newList.unshift(noneOption);
+    return newList;
+  },
+  copyAvaibleFields(ObjEditable, ObjToCopy) {
+    for (const key in ObjEditable) {
+      if (typeof getKeyValue(ObjToCopy, key) !== "undefined") {
+        setKeyValue(ObjEditable, key, getKeyValue(ObjToCopy, key));
+      }
+    }
+  },
+  isArray(obj) {
+    return obj.constructor === Array;
+  },
+  objsAreTheSame(obj1, obj2) {
+    for (const key in obj1) {
+      if (getKeyValue(obj1, key) != getKeyValue(obj2, key))
+        return false;
+    }
+    for (const key in obj2) {
+      if (getKeyValue(obj1, key) != getKeyValue(obj2, key))
+        return false;
+    }
+    return true;
+  },
+  qoIsObjEmpty(obj = {}) {
+    return obj && Object.keys(obj).length === 0 && Object.getPrototypeOf(obj) === Object.prototype;
+  }
+};
+var main$1 = {
+  qmApi,
+  qmArray,
+  qmAudio,
+  qmNum,
+  qmObj,
+  qmStr
+};
+var App;
+(function(App2) {
+  class SomeClass {
+    getName() {
+      return "name";
+    }
+  }
+  App2.SomeClass = SomeClass;
+  class OtherClass {
+    getName() {
+      return "name";
+    }
+  }
+  App2.OtherClass = OtherClass;
+})(App || (App = {}));
 var ckSelect_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$9 = ["value"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = ["value"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { default: null, type: [Boolean, Number, Object, Array, String] },
     prop: { type: String, default: "name" },
@@ -11923,6 +12214,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "click", "change"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    const { qmStr: qmStr2 } = main$1;
     const search = ref("");
     ref(null);
     const value = computed({
@@ -11938,7 +12230,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const filteredOptions = computed(() => {
       const list = props.options.filter((option) => {
         const name = getOptionName(option);
-        return qmStr.checkContainsStr(name, search.value);
+        return qmStr2.checkContainsStr(name, search.value);
       });
       return list;
     });
@@ -12036,7 +12328,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             return openBlock(), createElementBlock("option", {
               value: getOptionKey(option),
               key: option
-            }, toDisplayString(getOptionName(option)), 9, _hoisted_1$9);
+            }, toDisplayString(getOptionName(option)), 9, _hoisted_1$a);
           }), 128))
         ], 34), [
           [vModelSelect, unref(value)]
@@ -12045,15 +12337,15 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-02fab5ba"]]);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-31af160a"]]);
 const _withScopeId = (n) => (pushScopeId("data-v-022b9f3c"), 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_1$9 = ["disabled"];
+const _hoisted_2$4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "ck-switch__slider" }, null, -1));
 const _hoisted_3$2 = {
   key: 0,
   class: "ck-switch__content"
 };
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", mergeProps({ class: "ck-switch" }, $options.computedAttributes, {
     class: $options.computedClass,
     onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
@@ -12070,17 +12362,17 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.value = $event),
       disabled: $props.disabled,
       onClick: _cache[1] || (_cache[1] = ($event) => $options.onTrigger())
-    }, null, 8, _hoisted_1$8), [
+    }, null, 8, _hoisted_1$9), [
       [vModelCheckbox, $options.value]
     ]),
-    _hoisted_2$3,
+    _hoisted_2$4,
     _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$2, [
       renderSlot(_ctx.$slots, "default", {}, void 0, true)
     ])) : createCommentVNode("", true)
   ], 16);
 }
 var ckSwitch_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$a = {
+const _sfc_main$b = {
   name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -12119,12 +12411,12 @@ const _sfc_main$a = {
     }
   }
 };
-var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$8], ["__scopeId", "data-v-022b9f3c"]]);
-const _hoisted_1$7 = { class: "ck-switch-options__container-exterior" };
-const _hoisted_2$2 = ["onClick"];
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", render$6], ["__scopeId", "data-v-022b9f3c"]]);
+const _hoisted_1$8 = { class: "ck-switch-options__container-exterior" };
+const _hoisted_2$3 = ["onClick"];
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_label = resolveComponent("ck-label");
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     $props.label ? (openBlock(), createBlock(_component_ck_label, {
       key: 0,
       align: $props.labelAlign
@@ -12143,13 +12435,13 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
           key: `ck-switch-options${index}`,
           style: normalizeStyle($options.computedItemStyle),
           onClick: ($event) => $options.selectedOption = $options.getOptionValue(Option)
-        }, toDisplayString(Option[$props.prop]), 15, _hoisted_2$2);
+        }, toDisplayString(Option[$props.prop]), 15, _hoisted_2$3);
       }), 128))
     ], 2)
   ]);
 }
 var ckSwitchOptions_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$9 = {
+const _sfc_main$a = {
   components: {
     ckLabel
   },
@@ -12197,19 +12489,19 @@ const _sfc_main$9 = {
     }
   }
 };
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$7], ["__scopeId", "data-v-f0c51430"]]);
-const _hoisted_1$6 = { class: "ck-tr" };
-function render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("tr", _hoisted_1$6, [
+var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$5], ["__scopeId", "data-v-f0c51430"]]);
+const _hoisted_1$7 = { class: "ck-tr" };
+function render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("tr", _hoisted_1$7, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
 var ckTr_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$8 = {};
-var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", render$6], ["__scopeId", "data-v-1dd12190"]]);
-const _hoisted_1$5 = { class: "ck-th" };
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("th", _hoisted_1$5, [
+const _sfc_main$9 = {};
+var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$4], ["__scopeId", "data-v-1dd12190"]]);
+const _hoisted_1$6 = { class: "ck-th" };
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("th", _hoisted_1$6, [
     createElementVNode("span", {
       class: normalizeClass($options.computedSpanClass),
       style: normalizeStyle($options.computedStyle)
@@ -12219,7 +12511,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var ckTh_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$7 = {
+const _sfc_main$8 = {
   props: {
     align: { type: String, default: "center", validator: validators.align },
     minWidth: { type: String, default: void 0 }
@@ -12240,46 +12532,38 @@ const _sfc_main$7 = {
     }
   }
 };
-var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", render$5], ["__scopeId", "data-v-e9943550"]]);
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ck_th = resolveComponent("ck-th");
-  return $options.isVisible ? (openBlock(), createBlock(_component_ck_th, {
-    key: 0,
-    align: $props.col.align,
-    "min-width": $props.col.minWidth
-  }, {
-    default: withCtx(() => [
-      createTextVNode(toDisplayString($props.col.title), 1)
-    ]),
-    _: 1
-  }, 8, ["align", "min-width"])) : createCommentVNode("", true);
-}
-const _sfc_main$6 = {
-  components: {
-    ckTh
-  },
+var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", render$3], ["__scopeId", "data-v-e9943550"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   props: {
     col: { type: Object, required: true }
   },
-  computed: {
-    isVisible() {
-      return functions$1.isTableColumnsVisible(this.col);
-    }
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(ckTh, {
+        align: __props.col.align,
+        "min-width": __props.col.minWidth
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(__props.col.title), 1)
+        ]),
+        _: 1
+      }, 8, ["align", "min-width"]);
+    };
   }
-};
-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 _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "ck-table__header-items" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   props: {
     search: { type: String, default: void 0 },
+    hasColumnsManager: { type: Boolean, default: false },
     hideRefreshBtn: { type: Boolean, required: true },
     hideItemsPerPage: { type: Boolean, required: true },
     currentPage: { type: Number, required: true },
     itemsPerPage: { type: Number, required: true },
     listLength: { type: Number, required: true }
   },
-  emits: ["update:search", "refreshList"],
+  emits: ["update:search", "refreshList", "openColumnsManager"],
   setup(__props, { emit: emits }) {
     const props = __props;
     const searchLocal = computed({
@@ -12302,6 +12586,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return props.listLength;
       return value;
     });
+    const itemsPerPageIsVisible = computed(() => {
+      return !props.hideItemsPerPage && props.listLength;
+    });
+    const searchGroupValue = computed(() => {
+      if (itemsPerPageIsVisible.value && props.hasColumnsManager) {
+        return "center";
+      }
+      if (itemsPerPageIsVisible.value)
+        return "right";
+      if (props.hasColumnsManager)
+        return "left";
+      return "";
+    });
     function checkRefresh() {
       const search = searchLocal.value;
       setTimeout(() => {
@@ -12311,14 +12608,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }, 1e3);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         !__props.hideRefreshBtn ? (openBlock(), createBlock(ckButton, {
           key: 0,
           type: "flat",
           icon: "redo-alt",
+          title: "Recargar lista",
           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("refreshList", false))
         })) : createCommentVNode("", true),
-        !__props.hideItemsPerPage && __props.listLength ? (openBlock(), createElementBlock("div", {
+        unref(itemsPerPageIsVisible) ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["items-per-page", { "ck-component__group--left": !unref(hideSearch) }])
         }, toDisplayString(unref(itemsPerPageStart)) + " - " + toDisplayString(unref(itemsPerPageEnd)) + " de " + toDisplayString(__props.listLength), 3)) : createCommentVNode("", true),
@@ -12328,17 +12626,25 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(searchLocal) ? searchLocal.value = $event : null),
           icon: "search",
           placeholder: "Buscar...",
-          group: __props.hideItemsPerPage ? "" : "right",
+          group: unref(searchGroupValue),
           onInput: _cache[2] || (_cache[2] = ($event) => checkRefresh())
-        }, null, 8, ["modelValue", "group"])) : createCommentVNode("", true)
+        }, null, 8, ["modelValue", "group"])) : createCommentVNode("", true),
+        __props.hasColumnsManager ? (openBlock(), createBlock(ckButton, {
+          key: 3,
+          icon: "columns",
+          type: "filled",
+          title: "Administrador de columnas",
+          group: unref(itemsPerPageIsVisible) || !unref(hideSearch) ? "right" : "",
+          onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("openColumnsManager"))
+        }, null, 8, ["group"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5c48aabc"]]);
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-38244f67"]]);
 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_1$4 = { class: "ck-table__pagination" };
+const _hoisted_2$2 = ["onClick"];
 const _hoisted_3$1 = ["onClick"];
 const itemsShowed = 5;
 const __default__ = {
@@ -12414,14 +12720,14 @@ const __default__ = {
     }
   }
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   setup(__props) {
     return (_ctx, _cache) => {
       return __props.currentPage && _ctx.totalPages > 1 ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["ck-table__pagination-container", `pagination-align--${__props.align}`])
       }, [
-        createElementVNode("div", _hoisted_1$3, [
+        createElementVNode("div", _hoisted_1$4, [
           _ctx.hasArrowLeft ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "ck-table__pagination--arrow-left",
@@ -12433,7 +12739,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             return openBlock(), createElementBlock("div", {
               class: "ck-table__pagination-item pagination-item__left",
               onClick: ($event) => _ctx.updateCurrentPage(num)
-            }, toDisplayString(num), 9, _hoisted_2$1);
+            }, toDisplayString(num), 9, _hoisted_2$2);
           }), 256)),
           createVNode(ckInput, {
             class: "ck-table__pagination-input",
@@ -12463,7 +12769,79 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7ad6042e"]]);
+var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7ad6042e"]]);
+var ckTable__columnsManager_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$3 = { class: "columns-manger-container" };
+const _hoisted_2$1 = { class: "columns-manger__item" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  props: {
+    modelValue: { type: Boolean, required: true },
+    columns: { type: Object, required: true },
+    columnsArray: { type: Array, required: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    let columnsCheckable = ref([]);
+    const isActive = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(val) {
+        emits("update:modelValue", val);
+      }
+    });
+    watch(() => isActive.value, (val) => {
+      if (!val)
+        return;
+      setColumnsCheckable();
+    });
+    function setColumnsCheckable() {
+      console.log("hoola");
+      const list = [];
+      props.columnsArray.forEach((col) => {
+        if (functions$1)
+          list.push({
+            name: col.name,
+            title: col.title,
+            value: functions$1.isColumnDisplayed(col)
+          });
+      });
+      columnsCheckable.value = list;
+    }
+    function setColumnDisplayValue(colName, value) {
+      props.columns[colName].isDisplayed = value;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$e, {
+        modelValue: unref(isActive),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isActive) ? isActive.value = $event : null),
+        title: "Administrador de columnas"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columnsCheckable), (col) => {
+              return openBlock(), createElementBlock("div", _hoisted_2$1, [
+                createVNode(ckCheckbox, {
+                  modelValue: col.value,
+                  "onUpdate:modelValue": ($event) => col.value = $event,
+                  onChange: ($event) => setColumnDisplayValue(col.name, col.value)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(col.title), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue", "onChange"])
+              ]);
+            }), 256))
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+var TableColumnsManager = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6ae82d89"]]);
 var ckTable_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$2 = { class: "ck-table" };
 const _hoisted_2 = {
@@ -12479,7 +12857,8 @@ const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { key: 1 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
-    columns: { type: Array, required: true, default: () => [] },
+    columns: { type: [Array, Object], required: true, default: () => [] },
+    hasColumnsManager: { type: Boolean, default: false },
     currentPage: { type: Number, default: 0 },
     itemsPerPage: { type: Number, default: 40 },
     listLength: { type: Number, default: 0 },
@@ -12492,6 +12871,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   emits: ["refreshList", "update:search", "update:currentPage"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    const { qmObj: qmObj2 } = main$1;
+    const IsPopupActive = ref({
+      columnsManager: false
+    });
+    const columnsAreObj = computed(() => !qmObj2.isArray(props.columns));
+    const columnsArray = computed(() => {
+      if (!columnsAreObj.value)
+        return props.columns;
+      const arr = Object.values(props.columns);
+      const keys = Object.keys(props.columns);
+      arr.forEach((col, index) => {
+        const key = keys[index];
+        col.name = key;
+      });
+      return arr;
+    });
+    const filteredColumnsList = computed(() => {
+      return columnsArray.value.filter(functions$1.isColumnDisplayed);
+    });
     const searchLocal = computed({
       get() {
         return props.search;
@@ -12511,114 +12909,150 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     function refreshList(pageChange = false) {
       emits("refreshList", pageChange);
     }
+    function openColumnsManager() {
+      if (columnsAreObj.value) {
+        IsPopupActive.value.columnsManager = true;
+      } else {
+        console.log("ERROR ck-table", "The columns list should be an object");
+      }
+    }
     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: 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) => 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)
-          ])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        createElementVNode("table", _hoisted_4, [
-          __props.columns.length ? (openBlock(), createElementBlock("thead", _hoisted_5, [
-            createVNode(ckTr, null, {
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
-                  return openBlock(), createBlock(ckTableTitle, {
-                    key: col.title,
-                    col
-                  }, null, 8, ["col"]);
-                }), 128))
-              ]),
-              _: 1
-            })
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.hasColumnsManager && unref(columnsAreObj) ? (openBlock(), createBlock(TableColumnsManager, {
+          key: 0,
+          modelValue: IsPopupActive.value.columnsManager,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => IsPopupActive.value.columnsManager = $event),
+          columnsArray: unref(columnsArray),
+          columns: __props.columns
+        }, null, 8, ["modelValue", "columnsArray", "columns"])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_1$2, [
+          _ctx.$slots.header || !__props.hideHeaderActions ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            !__props.hideHeaderActions ? (openBlock(), createBlock(TableHeaderItems, {
+              key: 0,
+              search: unref(searchLocal),
+              "onUpdate:search": _cache[1] || (_cache[1] = ($event) => isRef(searchLocal) ? searchLocal.value = $event : null),
+              currentPage: __props.currentPage,
+              hasColumnsManager: __props.hasColumnsManager,
+              itemsPerPage: __props.itemsPerPage,
+              listLength: __props.listLength,
+              hideRefreshBtn: __props.hideRefreshBtn,
+              hideItemsPerPage: __props.hideItemsPerPage,
+              onRefreshList: _cache[2] || (_cache[2] = ($event) => refreshList($event)),
+              onOpenColumnsManager: _cache[3] || (_cache[3] = ($event) => openColumnsManager())
+            }, null, 8, ["search", "currentPage", "hasColumnsManager", "itemsPerPage", "listLength", "hideRefreshBtn", "hideItemsPerPage"])) : createCommentVNode("", true),
+            _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "header", {}, void 0, true)
+            ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          createElementVNode("tbody", null, [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          createElementVNode("table", _hoisted_4, [
+            unref(filteredColumnsList).length ? (openBlock(), createElementBlock("thead", _hoisted_5, [
+              createVNode(ckTr, null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredColumnsList), (col) => {
+                    return openBlock(), createBlock(_sfc_main$7, {
+                      key: col.title,
+                      col
+                    }, null, 8, ["col"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true),
+            createElementVNode("tbody", null, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _ctx.$slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_6, [
+              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+            ])) : createCommentVNode("", true)
           ]),
-          _ctx.$slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_6, [
-            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(TablePagination, {
-          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) => refreshList(true))
-        }, null, 8, ["currentPage", "itemsPerPage", "listLength", "align"])
-      ]);
+          createVNode(TablePagination, {
+            currentPage: unref(currentPageLocal),
+            "onUpdate:currentPage": _cache[4] || (_cache[4] = ($event) => isRef(currentPageLocal) ? currentPageLocal.value = $event : null),
+            itemsPerPage: __props.itemsPerPage,
+            listLength: __props.listLength,
+            align: __props.paginationAlign,
+            onRefreshList: _cache[5] || (_cache[5] = ($event) => refreshList(true))
+          }, null, 8, ["currentPage", "itemsPerPage", "listLength", "align"])
+        ])
+      ], 64);
     };
   }
 });
-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])
-  }, [
-    createElementVNode("span", {
-      class: normalizeClass($options.computedSpanClass),
-      style: normalizeStyle($options.computedStyle)
-    }, [
-      renderSlot(_ctx.$slots, "default", {}, void 0, true)
-    ], 6)
-  ], 2);
-}
+var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4abe8990"]]);
 var ckTd_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$2 = {
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   props: {
+    col: { type: Object, default: void 0 },
     wrap: { type: Boolean, default: false },
     block: { type: Boolean, default: false },
     autoWidth: { type: Boolean, default: false },
-    align: { type: String, default: "center", validator: validators.align },
+    align: { type: String, default: void 0, validator: validators.align },
     fixedWidth: { type: String, default: "" },
     minWidth: { type: String, default: "" },
     maxWidth: { type: String, default: "" },
     maxHeight: { type: String, default: "" }
   },
-  computed: {
-    computedTdClass() {
-      return {
-        "auto-width": this.autoWidth
-      };
-    },
-    computedSpanClass() {
+  setup(__props) {
+    const props = __props;
+    const computedTdClass = computed(() => {
       return {
-        block: this.block,
-        "wrap-text": this.wrap,
-        "align-center": this.align !== "left" && this.align !== "right",
-        "align-left": this.align === "left",
-        "align-right": this.align === "right"
+        "auto-width": props.autoWidth
       };
-    },
-    computedStyle() {
+    });
+    const computedSpanClass = computed(() => {
+      const list = [];
+      let align;
+      if (props.col)
+        align = props.col.align;
+      if (props.align)
+        align = props.align;
+      if (align) {
+        if (align === "center")
+          list.push("align-center");
+        if (align === "right")
+          list.push("align-right");
+      }
+      if (props.block)
+        list.push("block");
+      if (props.block)
+        list.push("wrap-text");
+      return list;
+    });
+    const computedStyle = computed(() => {
       const list = {};
-      if (this.minWidth)
-        list["min-width"] = this.minWidth;
-      if (this.fixedWidth)
-        list["min-width"] = this.fixedWidth;
-      if (this.maxWidth)
-        list["max-width"] = this.maxWidth;
-      if (this.fixedWidth)
-        list["max-width"] = this.fixedWidth;
-      if (this.maxHeight)
-        list["max-height"] = this.maxHeight;
+      if (props.minWidth)
+        list["min-width"] = props.minWidth;
+      if (props.fixedWidth)
+        list["min-width"] = props.fixedWidth;
+      if (props.maxWidth)
+        list["max-width"] = props.maxWidth;
+      if (props.fixedWidth)
+        list["max-width"] = props.fixedWidth;
+      if (props.maxHeight)
+        list["max-height"] = props.maxHeight;
       return list;
-    }
+    });
+    const isColumnDisplayed = computed(() => {
+      if (!props.col)
+        return true;
+      return functions$1.isColumnDisplayed(props.col);
+    });
+    return (_ctx, _cache) => {
+      return unref(isColumnDisplayed) ? (openBlock(), createElementBlock("td", {
+        key: 0,
+        class: normalizeClass(["ck-td", unref(computedTdClass)])
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(unref(computedSpanClass)),
+          style: normalizeStyle(unref(computedStyle))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 6)
+      ], 2)) : createCommentVNode("", true);
+    };
   }
-};
-var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", render$3], ["__scopeId", "data-v-70c634f2"]]);
+});
+var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c34b91ca"]]);
 const _hoisted_1$1 = { class: "ck-textarea" };
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_label = resolveComponent("ck-label");
@@ -15260,11 +15694,12 @@ var components = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   ckButton,
   ckCheckbox,
+  ckChip,
   ckIcon,
   ckImg,
   ckInput,
   ckLabel,
-  ckPopup: _sfc_main$d,
+  ckPopup: _sfc_main$e,
   ckRadio,
   ckSelect,
   ckSwitch,
@@ -15311,4 +15746,4 @@ const install = function installCleek(app, options) {
     app.component(componentName, component);
   });
 };
-export { events as EVENTS, mitt as EventBus, ckButton, ckCheckbox, ckIcon, ckImg, ckInput, ckLabel, _sfc_main$d as ckPopup, ckRadio, ckSelect, ckSwitch, ckSwitchOptions, ckTable, ckTd, ckTextarea, ckTh, ckTooltip, ckTr, install as default, lockScroll, unlockScroll };
+export { events as EVENTS, mitt as EventBus, ckButton, ckCheckbox, ckChip, ckIcon, ckImg, ckInput, ckLabel, _sfc_main$e as ckPopup, ckRadio, ckSelect, ckSwitch, ckSwitchOptions, ckTable, ckTd, ckTextarea, ckTh, ckTooltip, ckTr, install as default, lockScroll, unlockScroll };