cleek 2.2.2 → 2.3.0

package/dist/cleek-styles/tiny-tailwind/flex-wrap.styl

@@ -0,0 +1,6 @@
+.flex-wrap
+  flex-wrap wrap
+.flex-wrap-reverse
+  flex-wrap wrap-reverse
+.flex-nowrap
+  flex-wrap nowrap

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

@@ -1,6 +1,7 @@
 @import './.custom';
 @import './align-items';
 @import './display';
+@import './flex-wrap';
 @import './font-weight';
 @import './justify-content';
 @import './margin';

package/dist/cleek.es.js

@@ -18,6 +18,20 @@ var __spreadValues = (a, b) => {
 };
 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, 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 defaultCleekOptions = {
+  colors: {
+    primary: "#559933",
+    secondary: "#559933",
+    success: "#559933",
+    warning: "#559933",
+    danger: "#559933",
+    dark: "#559933",
+    light: "#559933"
+  },
+  button: {
+    type: "filled"
+  }
+};
 var ckDropdown_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -11449,37 +11463,37 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 var functions = {
-  getGroupClass({ group = "", groupVertical = "", groupBreak = "" } = {}) {
+  getGroupClass({ group = "", groupVertical = "", lineBreak = "" } = {}) {
     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}`);
+    if (lineBreak) {
+      if (lineBreak === "s") {
+        classList2.push(`ck-component__line-break--${lineBreak}`);
       }
     }
     return classList2;
   },
-  getGroupClassContainer({ groupBreak = "" } = "") {
+  getGroupClassContainer({ lineBreak = "" } = "") {
     const classList2 = [];
-    if (groupBreak) {
-      if (groupBreak === "s") {
-        classList2.push(`ck-component__group-break-container--${groupBreak}`);
+    if (lineBreak) {
+      if (lineBreak === "s") {
+        classList2.push(`ck-component__line-break-container--${lineBreak}`);
       }
     }
     return classList2;
   },
-  getGroupBreakStyleContainer({ groupBreak } = {}, windowWidth) {
-    if (windowWidth <= groupBreak) {
+  getlineBreakStyleContainer({ lineBreak } = {}, windowWidth) {
+    if (windowWidth <= lineBreak) {
       return [
         { width: "100%" }
       ];
     }
   },
-  getGroupBreakStyle({ groupBreak } = {}, windowWidth) {
-    if (windowWidth <= groupBreak) {
+  getlineBreakStyle({ lineBreak } = {}, windowWidth) {
+    if (windowWidth <= lineBreak) {
       return [
         { width: "100%" },
         { borderRadius: "4px !important" },
@@ -11542,7 +11556,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     title: { type: String, default: void 0 },
     disabled: { type: Boolean, default: false },
-    type: { type: String, default: "outlined", validator: validators.buttonType },
+    type: { type: String, default: void 0, validator: validators.buttonType },
     color: { type: String, default: "primary" },
     align: { type: String, default: "left", validator: validators.align },
     size: { type: String, default: "m", validator: validators.size },
@@ -11553,19 +11567,28 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     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: "" },
+    lineBreak: { type: [String, Number], default: "" },
     groupVertical: { type: String, default: void 0, validator: validators.groupVertical }
   },
   emits: ["click"],
   setup(__props, { emit: emits }) {
     const props = __props;
     const { windowWidth } = useWindowWidth();
+    const defaultButtonType = "outlined";
+    let $cleekOptions;
     const isMounted = ref(false);
+    const realButtonType = computed$2(() => {
+      if (props.type)
+        return props.type;
+      if (!isMounted.value && $cleekOptions)
+        return $cleekOptions.button.type;
+      return defaultButtonType;
+    });
     const computedClass = computed$2(() => {
       const classList2 = [];
       classList2.push(functions.getGroupClass(props));
       if (props.color !== "primary") {
-        if (props.type === "filled") {
+        if (realButtonType.value === "filled") {
           classList2.push(`ck-component__bg-color--${props.color}`);
         } else {
           classList2.push(`ck-component__border-color--${props.color}`);
@@ -11574,21 +11597,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       if (props.align === "center" || props.align === "right") {
         classList2.push(`ck-button__align--${props.align}`);
       }
-      if (isMounted.value)
-        ;
-      let type = props.type;
-      if (!validators.buttonType(props.type))
-        type = "outlined";
-      classList2.push(`type-${type}`);
+      classList2.push(`type-${realButtonType.value}`);
       if (props.size)
         classList2.push(`rs-component-size__${props.size}`);
       return classList2;
     });
     const computedStyle = computed$2(() => {
       const list = [];
-      if (props.width && !props.groupBreak)
+      if (props.width && !props.lineBreak)
         list.push({ width: props.width });
-      list.push(functions.getGroupBreakStyle(props, windowWidth.value));
+      list.push(functions.getlineBreakStyle(props, windowWidth.value));
       return list;
     });
     function onClick(event) {
@@ -11596,7 +11614,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     }
     onMounted(() => {
       getCurrentInstance().ctx;
-      isMounted.value = true;
+      $cleekOptions = functions.getCleekOptions(getCurrentInstance);
+      setTimeout(() => {
+        isMounted.value = true;
+      }, 3e3);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
@@ -11610,22 +11631,22 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }, [
         __props.icon ? (openBlock(), createBlock(ckIcon, {
           key: 0,
-          class: "ck-button__icon-left",
+          class: normalizeClass(["ck-button__icon-left", { "just-icon": !_ctx.$slots.default }]),
           icon: __props.icon,
           "icon-pack": __props.iconPack
-        }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true),
+        }, null, 8, ["icon", "icon-pack", "class"])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         __props.iconRight ? (openBlock(), createBlock(ckIcon, {
           key: 1,
-          class: "ck-button__icon-right",
+          class: normalizeClass(["ck-button__icon-right", { "just-icon": !_ctx.$slots.default }]),
           icon: __props.iconRight,
           "icon-pack": __props.iconPack
-        }, null, 8, ["icon", "icon-pack"])) : createCommentVNode("", true)
+        }, null, 8, ["icon", "icon-pack", "class"])) : createCommentVNode("", true)
       ], 14, _hoisted_1$g);
     };
   }
 });
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0b00645e"]]);
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-73fd023c"]]);
 var ckLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$f = ["for"];
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
@@ -11669,7 +11690,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: "" },
+    lineBreak: { type: [String, Number], default: "" },
     groupVertical: { type: String, default: void 0 },
     hideBorder: { type: Boolean, default: false },
     width: { type: String, default: void 0 },
@@ -11721,14 +11742,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     });
     const computedStyle = computed$2(() => {
       const list = [];
-      list.push(functions.getGroupBreakStyleContainer(props, windowWidth.value));
+      list.push(functions.getlineBreakStyleContainer(props, windowWidth.value));
       return list;
     });
     const computedStyleInput = computed$2(() => {
       const list = [];
-      if (props.width || !props.groupBreak)
+      if (props.width || !props.lineBreak)
         list.push({ width: props.width });
-      list.push(functions.getGroupBreakStyle(props, windowWidth.value));
+      list.push(functions.getlineBreakStyle(props, windowWidth.value));
       return list;
     });
     function setFocus() {
@@ -11786,7 +11807,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-55495d02"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-77e1fa0a"]]);
 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({
@@ -13791,7 +13812,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     bgTransparent: { type: Boolean, default: false },
     disabled: { type: [Boolean, Number], default: false },
     group: { type: String, default: "" },
-    groupBreak: { type: String, default: "" },
+    lineBreak: { type: [String, Number], default: "" },
     groupVertical: { type: String, default: "" },
     label: { type: String, default: "" },
     labelAlign: { type: String, default: "" }
@@ -13830,7 +13851,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const computedStyleSelect = computed$2(() => {
       const list = [];
-      list.push(functions.getGroupBreakStyle(props, windowWidth.value));
+      list.push(functions.getlineBreakStyle(props, windowWidth.value));
       return list;
     });
     const computedClass = computed$2(() => {
@@ -13842,7 +13863,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const list = [];
       if (props.minWidth)
         list.push({ "min-width": props.minWidth });
-      list.push(functions.getGroupBreakStyleContainer(props, windowWidth.value));
+      list.push(functions.getlineBreakStyleContainer(props, windowWidth.value));
       return list;
     });
     computed$2(() => {
@@ -13940,7 +13961,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-66f00b4a"]]);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6217135d"]]);
 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"];
@@ -14055,7 +14076,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     label: { type: String, default: "" },
     labelAlign: { type: String, default: "" },
     group: { type: String, default: "" },
-    groupBreak: { type: String, default: "" },
+    lineBreak: { type: [String, Number], default: "" },
     groupVertical: { type: String, default: "" },
     sameWidthOptions: { type: Boolean, default: false }
   },
@@ -14114,7 +14135,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b49d8f8e"]]);
+var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-55ea866f"]]);
 var ckTextarea_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$1 = { class: "ck-textarea" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -16781,33 +16802,31 @@ var components = /* @__PURE__ */ Object.freeze({
   lockScroll,
   unlockScroll
 });
-function setDefaultColors(options) {
-  if (!options)
-    return;
+function setRootColors(colors) {
   var r = document.querySelector(":root");
-  const colorList = [
-    "primary",
-    "secondary",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "dark",
-    "light"
-  ];
-  if (options.colors) {
-    colorList.forEach((colorName) => {
-      const colorValue = options.colors[colorName];
-      if (colorValue)
-        r.style.setProperty(`--${colorName}`, colorValue);
-    });
+  for (const key in colors) {
+    const colorValue = colors[key];
+    r.style.setProperty(`--${key}`, colorValue);
+  }
+}
+function getCleekOptions(userOptions) {
+  console.log("userOptions", userOptions);
+  const options = defaultCleekOptions;
+  for (const category in defaultCleekOptions) {
+    if (userOptions[category]) {
+      for (const key in category) {
+        const value = userOptions[category][key];
+        if (value)
+          options[category][key] = value;
+      }
+    }
   }
+  setRootColors(options);
+  console.log("options", options);
+  return options;
 }
 const install = function installCleek(app, options) {
-  app.config.globalProperties.$cleekOptions = options;
-  console.log("arranco paquete", options);
-  setDefaultColors(options);
+  app.config.globalProperties.$cleekOptions = getCleekOptions(options);
   Object.entries(components).forEach(([componentName, component]) => {
     app.component(componentName, component);
   });