cleek 2.3.36 → 2.3.39

package/dist/cleek.es.js

@@ -39,7 +39,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1$k = { class: "ck-dropdown__popper-container" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     triggerType: { type: String, default: "click" },
     dark: { type: Boolean, default: false },
@@ -95,9 +95,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-2120e680"]]);
+var ckDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-2120e680"]]);
 var ckNavbar_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   props: {
     padding: { type: String, default: 0 },
     position: { type: String, default: "fixed" }
@@ -132,7 +132,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-5024db6a"]]);
+var ckNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-5024db6a"]]);
 /*!
  * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
@@ -16336,42 +16336,32 @@ defineComponent({
   }
 });
 var functions = {
-  getGroupClass({ group = "", groupVertical = "", lineBreak = "" } = {}) {
+  getCleekOptions(getCurrentInstance2) {
+    return getCurrentInstance2().appContext.app.config.globalProperties.$cleekOptions;
+  },
+  getGroupClass({ group = "", groupVertical = "", widthBreaks = [] } = {}, windowWidth) {
+    const componentWidth = this.getWidthByWidthBreaks(widthBreaks, windowWidth);
     const classList2 = [];
-    if (group)
+    if (group && componentWidth !== "100%")
       classList2.push(`ck-component__group--${group}`);
     if (groupVertical)
       classList2.push(`ck-component__group-vertical--${groupVertical}`);
-    if (lineBreak) {
-      if (lineBreak === "s") {
-        classList2.push(`ck-component__line-break--${lineBreak}`);
-      }
-    }
     return classList2;
   },
-  getGroupClassContainer({ lineBreak = "" } = "") {
-    const classList2 = [];
-    if (lineBreak) {
-      if (lineBreak === "s") {
-        classList2.push(`ck-component__line-break-container--${lineBreak}`);
+  getWidthByWidthBreaks(widthBreaks, windowWidth) {
+    if (widthBreaks) {
+      let realWidthBreaks = [...widthBreaks];
+      if (realWidthBreaks.length === 2 && typeof realWidthBreaks[0] === "number" && typeof realWidthBreaks[1] === "string") {
+        realWidthBreaks = [realWidthBreaks];
       }
-    }
-    return classList2;
-  },
-  getlineBreakStyleContainer({ lineBreak } = {}, windowWidth) {
-    if (windowWidth <= lineBreak) {
-      return [
-        { width: "100%" }
-      ];
-    }
-  },
-  getlineBreakStyle({ lineBreak } = {}, windowWidth) {
-    if (windowWidth <= lineBreak) {
-      return [
-        { width: "100%" },
-        { borderRadius: "4px !important" },
-        { border: "1px solid #DAE1E7 !important" }
-      ];
+      let finalWidth = 0;
+      realWidthBreaks.forEach((widthBreak) => {
+        const [windowBreak, width] = widthBreak;
+        if (windowWidth >= windowBreak) {
+          finalWidth = width;
+        }
+      });
+      return finalWidth;
     }
   },
   isColorTemplateVariable(color) {
@@ -16400,13 +16390,10 @@ var functions = {
       return false;
     }
     return true;
-  },
-  getCleekOptions(getCurrentInstance2) {
-    return getCurrentInstance2().appContext.app.config.globalProperties.$cleekOptions;
   }
 };
 var ckIcon_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   props: {
     icon: { type: [String, Array], default: "" },
     color: { type: String, default: "" },
@@ -16475,13 +16462,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-ddf67f32"]]);
+var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-ddf67f32"]]);
 var ckNotify_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$j = { class: "ck-notify__container" };
 const _hoisted_2$8 = { class: "ck-notify__title" };
 const _hoisted_3$6 = { class: "close-btn" };
 const _hoisted_4$4 = { class: "ck-notify__text" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   setup(__props, { expose }) {
     expose({
       ckNotify: ckNotify2,
@@ -16543,7 +16530,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckNotify = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-5ca55d25"]]);
+var ckNotify = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-5ca55d25"]]);
 const _hoisted_1$i = { class: "ck-tr" };
 function render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("tr", _hoisted_1$i, [
@@ -16551,8 +16538,8 @@ function render$1(_ctx, _cache) {
   ]);
 }
 var ckTr_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$k = {};
-var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", render$1], ["__scopeId", "data-v-519cf874"]]);
+const _sfc_main$l = {};
+var ckTr = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", render$1], ["__scopeId", "data-v-519cf874"]]);
 var validators = {
   size: (type) => {
     return ["", "xs", "s", "m", "l", "xl"].includes(type);
@@ -16584,7 +16571,7 @@ var validators = {
   }
 };
 var ckTd_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   props: {
     col: { type: Object, default: void 0 },
     nowrap: { type: Boolean, default: false },
@@ -16663,10 +16650,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-4077488a"]]);
+var ckTd = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4077488a"]]);
 var ckTh_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$h = { class: "ck-th" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   props: {
     align: { type: String, default: "left", validator: validators.align },
     minWidth: { type: String, default: void 0 }
@@ -16698,8 +16685,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-4b7ed390"]]);
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+var ckTh = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-4b7ed390"]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: {
     col: { type: Object, required: true }
   },
@@ -16737,7 +16724,7 @@ function useWindowWidth() {
 }
 var ckButton_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$g = ["title", "aria-label", "disabled"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     title: { type: String, default: void 0 },
     disabled: { type: Boolean, default: false },
@@ -16753,7 +16740,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     label: { type: String, default: void 0 },
     labelAlign: { type: String, default: void 0 },
     group: { type: String, default: void 0, validator: validators.group },
-    lineBreak: { type: [String, Number], default: "" },
+    widthBreaks: { type: Array, default: void 0 },
     groupVertical: { type: String, default: void 0, validator: validators.groupVertical }
   },
   emits: ["click"],
@@ -16773,32 +16760,39 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return defaultButtonType;
     });
     const computedClass = computed$2(() => {
-      const classList2 = [];
-      classList2.push(functions.getGroupClass(props));
+      const list = [];
+      list.push(functions.getGroupClass(props, windowWidth.value));
       if (props.color !== "primary") {
         if (realButtonType.value === "filled") {
-          classList2.push(`ck-component__bg-color--${props.color}`);
+          list.push(`ck-component__bg-color--${props.color}`);
         } else {
-          classList2.push(`ck-component__border-color--${props.color}`);
+          list.push(`ck-component__border-color--${props.color}`);
         }
       }
       if (props.align === "center" || props.align === "right") {
-        classList2.push(`ck-button__align--${props.align}`);
+        list.push(`ck-button__align--${props.align}`);
       }
       if (props.rounded)
         console.log("rounded");
       if (props.rounded)
-        classList2.push("rounded");
-      classList2.push(`type-${realButtonType.value}`);
+        list.push("rounded");
+      list.push(`type-${realButtonType.value}`);
       if (props.size)
-        classList2.push(`rs-component-size__${props.size}`);
-      return classList2;
+        list.push(`ck-button-size__${props.size}`);
+      return list;
     });
     const computedStyle = computed$2(() => {
       const list = [];
-      if (props.width && !props.lineBreak)
+      let isWidthDefined = false;
+      if (props.widthBreaks) {
+        const width = functions.getWidthByWidthBreaks(props.widthBreaks, windowWidth.value);
+        if (width) {
+          isWidthDefined = true;
+          list.push({ width });
+        }
+      }
+      if (props.width && !isWidthDefined)
         list.push({ width: props.width });
-      list.push(functions.getlineBreakStyle(props, windowWidth.value));
       return list;
     });
     function onClick(event) {
@@ -16835,13 +16829,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-fcccd8a0"]]);
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-6555a0e0"]]);
 var ckLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$f = ["for"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   props: {
     for: { type: String, default: "" },
-    align: { type: String, default: "" }
+    align: { type: String, default: "" },
+    size: { type: String, default: "m" }
   },
   setup(__props) {
     const props = __props;
@@ -16851,6 +16846,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       if (props.align === "center" || props.align === "right")
         align = props.align;
       list.push(`ck-align--${align}`);
+      list.push(`ck-size--${props.size}`);
       return list;
     });
     return (_ctx, _cache) => {
@@ -16863,10 +16859,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-37dee526"]]);
+var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-400ea765"]]);
 var ckInput_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$e = ["autocomplete", "type", "placeholder", "disabled"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
     type: { type: String, validator: validators.inputType, default: "text" },
@@ -16879,11 +16875,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     iconPack: { type: String, default: void 0 },
     iconRight: { type: String, default: void 0 },
     group: { type: String, default: void 0 },
-    lineBreak: { type: [String, Number], default: "" },
     groupVertical: { type: String, default: void 0 },
+    widthBreaks: { type: Array, default: void 0 },
+    size: { type: String, default: "m", validator: validators.size },
     hideBorder: { type: Boolean, default: false },
     width: { type: String, default: void 0 },
     align: { type: String, validator: validators.align, default: void 0 },
+    rounded: { type: Boolean, default: false },
     autoSelect: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "click", "input", "change"],
@@ -16900,6 +16898,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         emits("update:modelValue", val);
       }
     });
+    const realLabelAlign = computed$2(() => {
+      if (props.labelAlign)
+        return props.labelAlign;
+      if (props.align)
+        return props.align;
+      return "left";
+    });
     const onClick = (event) => {
       if (props.autoSelect)
         event.target.select();
@@ -16911,14 +16916,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const onChange2 = (event) => {
       emits("change", event);
     };
-    const computedClass = computed$2(() => {
-      const list = [];
-      list.push(functions.getGroupClassContainer(props));
-      return list;
-    });
     const computedClassInput = computed$2(() => {
       const list = [];
-      list.push(functions.getGroupClass(props));
+      list.push(functions.getGroupClass(props, windowWidth.value));
       if (props.icon)
         list.push("has-icon-left");
       if (props.iconRight)
@@ -16927,18 +16927,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         list.push(`align--${props.align}`);
       if (props.hideBorder)
         list.push("no-border");
+      if (props.rounded)
+        list.push("rounded");
+      if (props.size)
+        list.push(`ck-input-size__${props.size}`);
       return list;
     });
     const computedStyle = computed$2(() => {
       const list = [];
-      list.push(functions.getlineBreakStyleContainer(props, windowWidth.value));
-      return list;
-    });
-    const computedStyleInput = computed$2(() => {
-      const list = [];
-      if (props.width || !props.lineBreak)
-        list.push({ width: props.width });
-      list.push(functions.getlineBreakStyle(props, windowWidth.value));
+      list.push({ width: props.width });
+      if (props.widthBreaks) {
+        const width = functions.getWidthByWidthBreaks(props.widthBreaks, windowWidth.value);
+        if (width)
+          list.push({ width });
+      }
       return list;
     });
     function setFocus() {
@@ -16949,19 +16951,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ck-input", unref$1(computedClass)]),
+        class: "ck-input",
         style: normalizeStyle(unref$1(computedStyle))
       }, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
           key: 0,
-          align: __props.labelAlign,
-          for: "ck-input"
+          align: unref$1(realLabelAlign),
+          for: "ck-input",
+          size: __props.size
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(__props.label), 1)
           ]),
           _: 1
-        }, 8, ["align"])) : createCommentVNode("", true),
+        }, 8, ["align", "size"])) : createCommentVNode("", true),
         __props.icon ? (openBlock(), createBlock(ckIcon, {
           key: 1,
           class: "ck-input__icon-left",
@@ -16977,12 +16980,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: __props.type,
           placeholder: __props.placeholder,
           class: normalizeClass(unref$1(computedClassInput)),
-          style: normalizeStyle(unref$1(computedStyleInput)),
           disabled: __props.disabled,
           onChange: _cache[1] || (_cache[1] = ($event) => onChange2($event)),
           onInput: _cache[2] || (_cache[2] = ($event) => onInput($event)),
           onClick: _cache[3] || (_cache[3] = ($event) => onClick($event))
-        }, null, 46, _hoisted_1$e), [
+        }, null, 42, _hoisted_1$e), [
           [vModelDynamic, unref$1(value)]
         ]),
         __props.iconRight ? (openBlock(), createBlock(ckIcon, {
@@ -16992,14 +16994,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           icon: __props.iconRight,
           "icon-pack": __props.iconPack
         }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
-      ], 6);
+      ], 4);
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-2f390047"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-35324670"]]);
 var ckTable__headerItems_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$d = { class: "ck-table__header-items" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   props: {
     search: { type: String, default: void 0 },
     hasColumnsManager: { type: Boolean, default: false },
@@ -17093,7 +17095,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-ad4db5f6"]]);
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-ad4db5f6"]]);
 var ckTable__pagination_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$c = { class: "ck-table__pagination" };
 const _hoisted_2$7 = ["onClick"];
@@ -17172,7 +17174,7 @@ const __default__ = {
     }
   }
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   setup(__props) {
     return (_ctx, _cache) => {
       return __props.currentPage && _ctx.totalPages > 1 ? (openBlock(), createElementBlock("div", {
@@ -17221,7 +17223,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-dec8fb20"]]);
+var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-dec8fb20"]]);
 const NOOP$1 = () => {
 };
 const isArray$1 = Array.isArray;
@@ -18004,7 +18006,7 @@ const _hoisted_3$4 = {
   key: 0,
   class: "c-Checkbox__label"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean, default: false },
     label: { type: String, default: void 0 },
@@ -18061,7 +18063,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-132565da"]]);
+var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-132565da"]]);
 var ckPopup_vue_vue_type_style_index_0_lang = "";
 const _hoisted_1$a = {
   key: 0,
@@ -18084,7 +18086,7 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = /* @__PURE__ */ createTextVNode("Cancelar");
 const _hoisted_9 = /* @__PURE__ */ createTextVNode("Aceptar");
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean },
     title: { type: String, default: void 0 },
@@ -18176,7 +18178,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 var ckTable__columnsManager_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$9 = { class: "columns-manger-container" };
 const _hoisted_2$4 = { class: "columns-manger__item" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean, required: true },
     columns: { type: Object, required: true },
@@ -18216,7 +18218,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       props.columns[colName].isDisplayed = value;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         modelValue: unref$1(isActive),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef$1(isActive) ? isActive.value = $event : null),
         title: "Administrador de columnas"
@@ -18244,7 +18246,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var TableColumnsManager = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-36d907dc"]]);
+var TableColumnsManager = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-36d907dc"]]);
 var qmApi = {};
 var qmArray = {
   arrayToText(arr, key = null) {
@@ -18534,7 +18536,7 @@ const _hoisted_3$2 = {
 const _hoisted_4$2 = { class: "ck-table__table-container" };
 const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { key: 1 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   props: {
     columns: { type: [Array, Object], required: true, default: () => [] },
     hasColumnsManager: { type: Boolean, default: false },
@@ -18659,7 +18661,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 createVNode(ckTr, null, {
                   default: withCtx(() => [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref$1(filteredColumnsList), (col) => {
-                      return openBlock(), createBlock(_sfc_main$h, {
+                      return openBlock(), createBlock(_sfc_main$i, {
                         key: col.title,
                         col
                       }, null, 8, ["col"]);
@@ -18707,10 +18709,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-6545e800"]]);
+var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-6545e800"]]);
 var ckChip_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$7 = ["color"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: {
     size: { type: String, default: "s" },
     color: { type: String, default: "primary" },
@@ -18750,7 +18752,35 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckChip = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-1e92de86"]]);
+var ckChip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-1e92de86"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  props: {
+    widthBreaks: { type: Array, default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const { windowWidth } = useWindowWidth();
+    const computedStyle = computed$2(() => {
+      const list = [];
+      if (props.widthBreaks) {
+        const width = functions.getWidthByWidthBreaks(props.widthBreaks, windowWidth.value);
+        if (width)
+          list.push({ width });
+      }
+      return list;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "ck-div",
+        style: normalizeStyle(unref$1(computedStyle)),
+        onClick: _cache[0] || (_cache[0] = ($event) => emits("click", $event))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
+  }
+});
 var globalVariables = {
   defaultFailImg: "df",
   imagesFolderPath: "",
@@ -18956,7 +18986,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     bgTransparent: { type: Boolean, default: false },
     disabled: { type: [Boolean, Number], default: false },
     group: { type: String, default: "" },
-    lineBreak: { type: [String, Number], default: "" },
+    widthBreaks: { type: Array, default: void 0 },
     groupVertical: { type: String, default: "" },
     label: { type: String, default: "" },
     labelAlign: { type: String, default: "" }
@@ -18989,25 +19019,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return list;
     });
     const computedClassSelect = computed$2(() => {
-      const classList2 = [];
-      classList2.push(functions.getGroupClass(props));
-      return classList2;
-    });
-    const computedStyleSelect = computed$2(() => {
       const list = [];
-      list.push(functions.getlineBreakStyle(props, windowWidth.value));
+      list.push(functions.getGroupClass(props, windowWidth.value));
       return list;
     });
-    const computedClass = computed$2(() => {
-      const classList2 = [];
-      classList2.push(functions.getGroupClassContainer(props));
-      return classList2;
-    });
     const computedStyle = computed$2(() => {
       const list = [];
-      if (props.minWidth)
+      let isWidthDefined = false;
+      if (props.widthBreaks) {
+        const width = functions.getWidthByWidthBreaks(props.widthBreaks, windowWidth.value);
+        if (width) {
+          list.push({ width });
+          isWidthDefined = true;
+        }
+      }
+      if (!isWidthDefined && props.minWidth) {
         list.push({ "min-width": props.minWidth });
-      list.push(functions.getlineBreakStyleContainer(props, windowWidth.value));
+      }
       return list;
     });
     computed$2(() => {
@@ -19072,7 +19100,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ck-select", unref$1(computedClass)]),
+        class: "ck-select",
         style: normalizeStyle(unref$1(computedStyle))
       }, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
@@ -19088,7 +19116,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         withDirectives(createElementVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef$1(value) ? value.value = $event : null),
           class: normalizeClass(unref$1(computedClassSelect)),
-          style: normalizeStyle(unref$1(computedStyleSelect)),
           onClick: _cache[1] || (_cache[1] = ($event) => onClick($event)),
           onChange: _cache[2] || (_cache[2] = ($event) => onChange2($event))
         }, [
@@ -19098,14 +19125,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               key: option
             }, toDisplayString(getOptionName(option)), 9, _hoisted_1$4);
           }), 128))
-        ], 38), [
+        ], 34), [
           [vModelSelect, unref$1(value)]
         ])
-      ], 6);
+      ], 4);
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-fa28183e"]]);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-93db8c36"]]);
 var ckSwitch_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId = (n) => (pushScopeId("data-v-7e2f20c4"), n = n(), popScopeId(), n);
 const _hoisted_1$3 = ["disabled"];
@@ -19221,12 +19248,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     labelAlign: { type: String, default: "" },
     group: { type: String, default: "" },
     lineBreak: { type: [String, Number], default: "" },
+    widthBreaks: { type: Array, default: void 0 },
     groupVertical: { type: String, default: "" },
     sameWidthOptions: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    const { windowWidth } = useWindowWidth();
     const selectedOption = computed$2({
       get() {
         return props.modelValue;
@@ -19237,9 +19266,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     const computedClass = computed$2(() => {
-      const classList2 = [];
-      classList2.push(functions.getGroupClass(props));
-      return classList2;
+      const list = [];
+      list.push(functions.getGroupClass(props, windowWidth.value));
+      return list;
     });
     const computedItemStyle = computed$2(() => {
       const list = [];
@@ -19279,7 +19308,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-55ea866f"]]);
+var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f6a5151e"]]);
 var ckTextarea_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$1 = { class: "ck-textarea" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -21940,11 +21969,12 @@ var components = /* @__PURE__ */ Object.freeze({
   ckButton,
   ckCheckbox,
   ckChip,
+  ckDiv: _sfc_main$7,
   ckIcon,
   ckImg,
   ckInput,
   ckLabel,
-  ckPopup: _sfc_main$a,
+  ckPopup: _sfc_main$b,
   ckRadio,
   ckSelect,
   ckSwitch,
@@ -21984,4 +22014,4 @@ const install = function installCleek(app, options) {
     app.component(componentName, component);
   });
 };
-export { events as EVENTS, mitt as EventBus, ckButton, ckCheckbox, ckChip, ckDropdown, ckIcon, ckImg, ckInput, ckLabel, ckNavbar, ckNotify, _sfc_main$a 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, _sfc_main$7 as ckDiv, ckDropdown, ckIcon, ckImg, ckInput, ckLabel, ckNavbar, ckNotify, _sfc_main$b as ckPopup, ckRadio, ckSelect, ckSwitch, ckSwitchOptions, ckTable, ckTd, ckTextarea, ckTh, ckTooltip, ckTr, install as default, lockScroll, unlockScroll };