cleek 2.1.21 → 2.2.0

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, ref, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, createCommentVNode, computed as computed$2, normalizeStyle, unref as unref$1, watch, h, createBlock, Teleport, createVNode, createTextVNode, toDisplayString, withCtx, onMounted, getCurrentInstance, withDirectives, isRef as isRef$1, vModelDynamic, Fragment, renderList, mergeProps, withKeys, withModifiers, pushScopeId, popScopeId, nextTick as nextTick$1, onBeforeUnmount, vModelRadio, vModelSelect, vModelCheckbox, vModelText } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, createCommentVNode, computed as computed$2, normalizeStyle, unref as unref$1, watch, h, createBlock, Teleport, createVNode, createTextVNode, toDisplayString, withCtx, onMounted, nextTick as nextTick$1, onBeforeUnmount, getCurrentInstance, withDirectives, isRef as isRef$1, vModelDynamic, Fragment, renderList, mergeProps, withKeys, withModifiers, pushScopeId, popScopeId, vModelRadio, vModelSelect, vModelCheckbox, vModelText } from "vue";
 var ckDropdown_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -11292,7 +11292,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
 var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-25801d7b"]]);
 var ckNotify_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$j = { class: "ck-notify__container" };
-const _hoisted_2$9 = { class: "ck-notify__title" };
+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({
@@ -11345,7 +11345,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ "background-color": globalColor.value }),
             onClick: _cache[0] || (_cache[0] = ($event) => closeNotification())
           }, [
-            createElementVNode("div", _hoisted_2$9, [
+            createElementVNode("div", _hoisted_2$8, [
               createElementVNode("div", _hoisted_3$6, [
                 createVNode(ckIcon, { icon: "times" })
               ]),
@@ -11450,16 +11450,43 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 });
 var functions = {
   getGroupClass({ group = "", groupVertical = "", groupBreak = "" } = {}) {
-    const _screenSize = "";
-    if (groupBreak && groupBreak === _screenSize)
-      return [];
     const classList2 = [];
     if (group)
       classList2.push(`ck-component__group--${group}`);
     if (groupVertical)
       classList2.push(`ck-component__group-vertical--${groupVertical}`);
+    if (groupBreak) {
+      if (groupBreak === "s") {
+        classList2.push(`ck-component__group-break--${groupBreak}`);
+      }
+    }
     return classList2;
   },
+  getGroupClassContainer({ groupBreak = "" } = "") {
+    const classList2 = [];
+    if (groupBreak) {
+      if (groupBreak === "s") {
+        classList2.push(`ck-component__group-break-container--${groupBreak}`);
+      }
+    }
+    return classList2;
+  },
+  getGroupBreakStyleContainer({ groupBreak } = {}, windowWidth) {
+    if (windowWidth <= groupBreak) {
+      return [
+        { width: "100%" }
+      ];
+    }
+  },
+  getGroupBreakStyle({ groupBreak } = {}, windowWidth) {
+    if (windowWidth <= groupBreak) {
+      return [
+        { width: "100%" },
+        { borderRadius: "4px !important" },
+        { border: "1px solid #DAE1E7 !important" }
+      ];
+    }
+  },
   isColorTemplateVariable(color) {
     if (color === "primary")
       return true;
@@ -11488,10 +11515,27 @@ var functions = {
     return true;
   },
   getCleekOptions(getCurrentInstance2) {
-    console.log("getCurrentInstance", getCurrentInstance2);
     return getCurrentInstance2().appContext.app.config.globalProperties.$cleekOptions;
   }
 };
+function useWindowWidth() {
+  const windowWidth = ref(0);
+  function handleWindowResize(event) {
+    windowWidth.value = event.currentTarget.innerWidth;
+  }
+  onMounted(() => {
+    nextTick$1(() => {
+      window.addEventListener("resize", handleWindowResize);
+    });
+    windowWidth.value = window.innerWidth;
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", handleWindowResize);
+  });
+  return {
+    windowWidth
+  };
+}
 var ckButton_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$g = ["title", "aria-label", "disabled"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
@@ -11502,18 +11546,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     color: { type: String, default: "primary" },
     align: { type: String, default: "left", validator: validators.align },
     size: { type: String, default: "m", validator: validators.size },
+    width: { type: String, default: "" },
     icon: { type: [String, Array], default: void 0 },
     iconPack: { type: String, default: void 0 },
     iconRight: { type: String, default: void 0 },
     label: { type: String, default: void 0 },
     labelAlign: { type: String, default: void 0 },
     group: { type: String, default: void 0, validator: validators.group },
-    groupBreak: { type: String, default: "s" },
+    groupBreak: { type: String, default: "" },
     groupVertical: { type: String, default: void 0, validator: validators.groupVertical }
   },
   emits: ["click"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    const { windowWidth } = useWindowWidth();
     const isMounted = ref(false);
     const computedClass = computed$2(() => {
       const classList2 = [];
@@ -11525,7 +11571,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           classList2.push(`ck-component__border-color--${props.color}`);
         }
       }
-      if (props.align !== "left") {
+      if (props.align === "center" || props.align === "right") {
         classList2.push(`ck-button__align--${props.align}`);
       }
       if (isMounted.value)
@@ -11538,6 +11584,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         classList2.push(`rs-component-size__${props.size}`);
       return classList2;
     });
+    const computedStyle = computed$2(() => {
+      const list = [];
+      list.push(functions.getGroupBreakStyle(props, windowWidth.value));
+      if (props.width)
+        list.push({ width: props.width });
+      return list;
+    });
     function onClick(event) {
       emits("click", event);
     }
@@ -11552,6 +11605,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         title: __props.title,
         "aria-label": __props.title,
         disabled: __props.disabled,
+        style: normalizeStyle(unref$1(computedStyle)),
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
       }, [
         __props.icon ? (openBlock(), createBlock(ckIcon, {
@@ -11567,11 +11621,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           icon: __props.iconRight,
           "icon-pack": __props.iconPack
         }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$g);
+      ], 14, _hoisted_1$g);
     };
   }
 });
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0641f9bc"]]);
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-69b236d6"]]);
 var ckLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$f = ["for"];
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
@@ -11601,8 +11655,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 var ckLabel = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-ef74ea02"]]);
 var ckInput_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$e = { class: "ck-input" };
-const _hoisted_2$8 = ["autocomplete", "type", "placeholder", "id", "disabled"];
+const _hoisted_1$e = ["autocomplete", "type", "placeholder", "disabled"];
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
@@ -11616,7 +11669,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     iconPack: { type: String, default: void 0 },
     iconRight: { type: String, default: void 0 },
     group: { type: String, default: void 0 },
-    groupBreak: { type: String, default: "s" },
+    groupBreak: { type: String, default: "" },
     groupVertical: { type: String, default: void 0 },
     hideBorder: { type: Boolean, default: false },
     width: { type: String, default: void 0 },
@@ -11626,6 +11679,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "click", "input", "change"],
   setup(__props, { expose, emit: emits }) {
     const props = __props;
+    const { windowWidth } = useWindowWidth();
     expose({ setFocus, setSelect });
     const realInput = ref(null);
     const value = computed$2({
@@ -11647,10 +11701,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const onChange = (event) => {
       emits("change", event);
     };
-    const computedStyleInput = computed$2(() => {
+    const computedClass = computed$2(() => {
       const list = [];
-      if (props.width)
-        list.push({ width: props.width });
+      list.push(functions.getGroupClassContainer(props));
       return list;
     });
     const computedClassInput = computed$2(() => {
@@ -11666,6 +11719,18 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         list.push("no-border");
       return list;
     });
+    const computedStyle = computed$2(() => {
+      const list = [];
+      list.push(functions.getGroupBreakStyleContainer(props, windowWidth.value));
+      return list;
+    });
+    const computedStyleInput = computed$2(() => {
+      const list = [];
+      list.push(functions.getGroupBreakStyle(props, windowWidth.value));
+      if (props.width)
+        list.push({ width: props.width });
+      return list;
+    });
     function setFocus() {
       realInput.value.focus();
     }
@@ -11673,7 +11738,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       realInput.value.select();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ck-input", unref$1(computedClass)]),
+        style: normalizeStyle(unref$1(computedStyle))
+      }, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
           key: 0,
           align: __props.labelAlign,
@@ -11695,17 +11763,16 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           ref_key: "realInput",
           ref: realInput,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef$1(value) ? value.value = $event : null),
-          autocomplete: __props.autocomplete,
+          autocomplete: __props.autocomplete ? "on" : "off",
           type: __props.type,
           placeholder: __props.placeholder,
           class: normalizeClass(unref$1(computedClassInput)),
           style: normalizeStyle(unref$1(computedStyleInput)),
-          id: __props.label ? "ck-input" : "",
           disabled: __props.disabled,
           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$8), [
+        }, null, 46, _hoisted_1$e), [
           [vModelDynamic, unref$1(value)]
         ]),
         __props.iconRight ? (openBlock(), createBlock(ckIcon, {
@@ -11715,11 +11782,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           icon: __props.iconRight,
           "icon-pack": __props.iconPack
         }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
-      ]);
+      ], 6);
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-6773af39"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-459e2aaf"]]);
 var ckTable__headerItems_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$d = { class: "ck-table__header-items" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
@@ -11813,7 +11880,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-5638f498"]]);
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-be0cc8e8"]]);
 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"];
@@ -13282,6 +13349,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: emits }) {
     const props = __props;
     const { qmObj: qmObj2 } = main$1;
+    const { windowWidth } = useWindowWidth();
     const IsPopupActive = ref({
       columnsManager: false
     });
@@ -13317,7 +13385,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     });
     const isMobileVisible = computed$2(() => {
-      return realWindowWidth.value <= +props.mobileMaxWidth;
+      return windowWidth.value <= +props.mobileMaxWidth;
     });
     function refreshList(pageChange = false) {
       emits("refreshList", pageChange);
@@ -13329,19 +13397,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         console.log("ERROR ck-table", "The columns list should be an object");
       }
     }
-    const realWindowWidth = ref(0);
-    function handleWindowResize(event) {
-      realWindowWidth.value = event.currentTarget.innerWidth;
-    }
-    onMounted(() => {
-      nextTick$1(() => {
-        window.addEventListener("resize", handleWindowResize);
-      });
-      realWindowWidth.value = window.innerWidth;
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", handleWindowResize);
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         __props.hasColumnsManager && unref$1(columnsAreObj) ? (openBlock(), createBlock(TableColumnsManager, {
@@ -13411,7 +13466,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-6ea45185"]]);
+var ckTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-79775e25"]]);
 var ckTd_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: {
@@ -13742,9 +13797,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     labelAlign: { type: String, default: "" }
   },
   emits: ["update:modelValue", "click", "change"],
-  setup(__props, { emit: emits }) {
+  setup(__props, { expose, emit: emits }) {
     const props = __props;
     const { qmStr: qmStr2 } = main$1;
+    const { windowWidth } = useWindowWidth();
+    expose({
+      setFocus
+    });
     const search = ref("");
     ref(null);
     const value = computed$2({
@@ -13764,15 +13823,26 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       });
       return list;
     });
-    const computedClass = computed$2(() => {
+    const computedClassSelect = computed$2(() => {
       const classList2 = [];
       classList2.push(functions.getGroupClass(props));
       return classList2;
     });
+    const computedStyleSelect = computed$2(() => {
+      const list = [];
+      list.push(functions.getGroupBreakStyle(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)
         list.push({ "min-width": props.minWidth });
+      list.push(functions.getGroupBreakStyleContainer(props, windowWidth.value));
       return list;
     });
     computed$2(() => {
@@ -13817,25 +13887,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     function onClick(event) {
       emits("click", event);
     }
-    const onChange = (event) => {
+    function onChange(event) {
       emits("change", event);
-    };
-    const getOptionKey = (option) => {
+    }
+    function getOptionKey(option) {
       return realReduceFunction(option);
-    };
-    const getOptionName = (option) => {
+    }
+    function getOptionName(option) {
       if (!props.prop)
         return option;
       return option[props.prop];
-    };
-    const realReduceFunction = (option) => {
+    }
+    function realReduceFunction(option) {
       if (props.notReduce)
         return option;
       return props.reduceFunction(option);
-    };
+    }
+    function setFocus() {
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "ck-select",
+        class: normalizeClass(["ck-select", unref$1(computedClass)]),
         style: normalizeStyle(unref$1(computedStyle))
       }, [
         __props.label ? (openBlock(), createBlock(ckLabel, {
@@ -13850,7 +13922,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }, 8, ["align"])) : createCommentVNode("", true),
         withDirectives(createElementVNode("select", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef$1(value) ? value.value = $event : null),
-          class: normalizeClass(unref$1(computedClass)),
+          class: normalizeClass(unref$1(computedClassSelect)),
+          style: normalizeStyle(unref$1(computedStyleSelect)),
           onClick: _cache[1] || (_cache[1] = ($event) => onClick($event)),
           onChange: _cache[2] || (_cache[2] = ($event) => onChange($event))
         }, [
@@ -13860,14 +13933,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               key: option
             }, toDisplayString(getOptionName(option)), 9, _hoisted_1$4);
           }), 128))
-        ], 34), [
+        ], 38), [
           [vModelSelect, unref$1(value)]
         ])
-      ], 4);
+      ], 6);
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-31af160a"]]);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-66f00b4a"]]);
 var ckSwitch_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId = (n) => (pushScopeId("data-v-b6a4dfaa"), n = n(), popScopeId(), n);
 const _hoisted_1$3 = ["disabled"];
@@ -13982,7 +14055,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     label: { type: String, default: "" },
     labelAlign: { type: String, default: "" },
     group: { type: String, default: "" },
-    groupBreak: { type: String, default: "s" },
+    groupBreak: { type: String, default: "" },
     groupVertical: { type: String, default: "" },
     sameWidthOptions: { type: Boolean, default: false }
   },
@@ -14041,7 +14114,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2c3e07c8"]]);
+var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b49d8f8e"]]);
 var ckTextarea_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$1 = { class: "ck-textarea" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({