cleek 1.8.11 → 2.0.2

package/dist/cleek-styles/clear-app.styl

@@ -0,0 +1,9 @@
+*
+  box-sizing border-box
+  margin 0
+  padding 0
+a
+  color unset
+  text-decoration unset
+ul
+  list-style-type none

package/dist/cleek-styles/cleek-mixins.styl

@@ -79,5 +79,5 @@ inline-flex-all-center()
 //   min-height rsComponentsHeight + heightDiference
 //   background-color white
 //   &:focus-within
-//     border-color $color-primary
+//     border-color var(--primary)
 //     my-box-shadow()

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

@@ -1,3 +1,4 @@
+@import './align-items';
 @import './display';
 @import './margin';
 @import './padding';

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, normalizeStyle, withCtx, createTextVNode, toDisplayString, withDirectives, isRef, unref, vModelDynamic, createVNode, Fragment, renderList, vModelRadio, ref, vModelSelect, vModelCheckbox, vModelText } from "vue";
+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";
 var validators = {
   size: (type) => {
     return ["", "xs", "s", "m", "l", "xl"].includes(type);
@@ -80,7 +80,7 @@ var functions$1 = {
 };
 var globalVariables = {
   defaultFailImg: "df",
-  imagesFolderPath: "",
+  imagesFolderPath: "asd",
   defaultImgBorderColor: "#EEEEEE"
 };
 /*!
@@ -11202,7 +11202,7 @@ defineComponent({
     };
   }
 });
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function render$d(_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]),
@@ -11278,9 +11278,9 @@ const _sfc_main$j = {
     }
   }
 };
-var ckIcon = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", render$e], ["__scopeId", "data-v-77d9963a"]]);
+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$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ck_icon = resolveComponent("ck-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -11306,7 +11306,9 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   ], 10, _hoisted_1$g);
 }
 var ckButton_vue_vue_type_style_index_0_scoped_true_lang = "";
-const defaults = { type: "outlined" };
+const defaultType = "outlined";
+const defaultColor = "primary";
+const defaultAlign = "left";
 const _sfc_main$i = {
   name: "CkButton",
   components: {
@@ -11314,9 +11316,10 @@ const _sfc_main$i = {
   },
   props: {
     title: { type: String, default: void 0 },
-    type: { type: String, default: defaults.type, validator: validators.buttonType },
-    color: { type: String, default: "" },
     disabled: { type: Boolean, default: false },
+    type: { type: String, default: defaultType, validator: validators.buttonType },
+    color: { type: String, default: defaultColor },
+    align: { type: String, default: defaultAlign, validator: validators.align },
     icon: { type: [String, Array], default: void 0 },
     iconPack: { type: String, default: void 0 },
     iconRight: { type: String, default: void 0 },
@@ -11331,13 +11334,16 @@ const _sfc_main$i = {
     computedClass() {
       const classList2 = [];
       classList2.push(functions$1.getGroupClass(this));
-      if (this.color) {
+      if (this.color !== defaultColor) {
         if (this.type === "filled") {
           classList2.push(`ck-component__bg-color--${this.color}`);
         } else {
           classList2.push(`ck-component__border-color--${this.color}`);
         }
       }
+      if (this.align !== defaultAlign) {
+        classList2.push(`ck-button__align--${this.align}`);
+      }
       if (!this.$slots.default) {
         if (this.icon || this.iconRight) {
           if (!(this.icon && this.iconRight))
@@ -11346,7 +11352,7 @@ const _sfc_main$i = {
       }
       let type = this.type;
       if (!validators.buttonType(this.type))
-        type = defaults.type;
+        type = defaultType;
       classList2.push(`type-${type}`);
       return classList2;
     }
@@ -11357,15 +11363,15 @@ const _sfc_main$i = {
     }
   }
 };
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$d], ["__scopeId", "data-v-dfa2f586"]]);
-const _withScopeId$2 = (n) => (pushScopeId("data-v-64a6608c"), n = n(), popScopeId(), n);
+var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$c], ["__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_3$5 = {
   key: 0,
   class: "c-Checkbox__label"
 };
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_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"])),
@@ -11425,23 +11431,10 @@ const _sfc_main$h = {
     }
   }
 };
-var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$c], ["__scopeId", "data-v-64a6608c"]]);
-const _hoisted_1$e = ["src"];
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["ck-img", $options.computedClass]),
-    style: normalizeStyle($options.computedStyle),
-    onClick: _cache[1] || (_cache[1] = ($event) => $options.clickImg())
-  }, [
-    createElementVNode("img", {
-      src: $options.imageUrl,
-      style: normalizeStyle($options.computedImgStyle),
-      onError: _cache[0] || (_cache[0] = ($event) => _ctx.altNeeded = true)
-    }, null, 44, _hoisted_1$e)
-  ], 6);
-}
+var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$b], ["__scopeId", "data-v-69dfa524"]]);
 var ckImg_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$g = {
+const _hoisted_1$e = ["src"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   props: {
     src: { type: String, default: "" },
     isFullPath: { type: Boolean, default: false },
@@ -11456,77 +11449,96 @@ const _sfc_main$g = {
     radius: { type: String, default: "" },
     borderColor: { type: String, default: "" }
   },
-  computed: {
-    imageUrl() {
-      if (this.isFullPath)
-        return this.src;
-      return this.getImg(this.src);
-    },
-    computedClass() {
+  setup(__props) {
+    const props = __props;
+    const altNeeded = ref(false);
+    let context;
+    let isMounted = ref(false);
+    const imageUrl = computed(() => {
+      if (!isMounted.value)
+        return "";
+      if (props.isFullPath)
+        return props.src;
+      return getImg(props.src);
+    });
+    const computedClass = computed(() => {
       const classList2 = [];
-      let { size } = this;
-      if (size === "default" && !this.sizeAbsolute && !this.width && !this.height) {
-        size = "m";
+      if (!props.size && !props.sizeAbsolute && !props.width && !props.height) {
+        props.size = "m";
       }
-      if (size)
-        classList2.push(`ck-img__size--${size}`);
-      if (this.hasBorder) {
+      if (props.size)
+        classList2.push(`ck-img__size--${props.size}`);
+      if (props.hasBorder) {
         classList2.push("ck-img__has-border");
-        if (functions$1.isColorTemplateVariable(this.realBorderColor)) {
-          classList2.push(`ck-component__border-color--${this.realBorderColor}`);
+        if (functions$1.isColorTemplateVariable(realBorderColor.value)) {
+          classList2.push(`ck-component__border-color--${realBorderColor.value}`);
         }
       }
-      if (this.zoom)
+      if (props.zoom)
         classList2.push("zoom-able");
       return classList2;
-    },
-    computedStyle() {
+    });
+    const computedStyle = computed(() => {
       const styleList = [];
-      if (this.sizeAbsolute) {
-        styleList.push({ width: this.sizeAbsolute });
-        styleList.push({ height: this.sizeAbsolute });
+      if (props.sizeAbsolute) {
+        styleList.push({ width: props.sizeAbsolute });
+        styleList.push({ height: props.sizeAbsolute });
       }
-      if (this.radius)
-        styleList.push({ "border-radius": this.radius });
-      if (this.hasBorder) {
-        if (!functions$1.isColorTemplateVariable(this.realBorderColor)) {
-          styleList.push({ "border-color": this.realBorderColor });
+      if (props.radius)
+        styleList.push({ "border-radius": props.radius });
+      if (props.hasBorder) {
+        if (!functions$1.isColorTemplateVariable(realBorderColor.value)) {
+          styleList.push({ "border-color": realBorderColor.value });
         }
       }
       return styleList;
-    },
-    computedImgStyle() {
+    });
+    const computedImgStyle = computed(() => {
       const styleList = [];
-      if (this.radius)
-        styleList.push({ "border-radius": this.radius });
-      if (this.width)
-        styleList.push({ width: this.width });
-      if (this.height)
-        styleList.push({ height: this.height });
+      if (props.radius)
+        styleList.push({ "border-radius": props.radius });
+      if (props.width)
+        styleList.push({ width: props.width });
+      if (props.height)
+        styleList.push({ height: props.height });
       return styleList;
-    },
-    realBorderColor() {
-      if (this.borderColor)
-        return this.borderColor;
+    });
+    const realBorderColor = computed(() => {
+      if (props.borderColor)
+        return props.borderColor;
       return globalVariables.defaultImgBorderColor;
-    }
-  },
-  methods: {
-    clickImg() {
-      if (this.zoom) {
-        console.log("hola");
-        this.$store.dispatch("layout/setZoomImgPath", this.imageUrl);
-        if (this.zoomTitle) {
-          return this.$store.dispatch("layout/setZoomImgTitle", this.zoomTitle);
-        }
-      }
-    },
-    getImg(src) {
-      return `${globalVariables.imagesFolderPath}${src}`;
-    }
+    });
+    function clickImg() {
+      if (props.zoom)
+        ;
+    }
+    function getImg(src) {
+      let path = "";
+      console.log("context.$cleekOptions", context.$cleekOptions);
+      if (context.$cleekOptions)
+        path = context.$cleekOptions.imgPath;
+      return `${path}${src}`;
+    }
+    onMounted(() => {
+      context = getCurrentInstance().ctx;
+      isMounted.value = true;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ck-img", unref(computedClass)]),
+        style: normalizeStyle(unref(computedStyle)),
+        onClick: _cache[1] || (_cache[1] = ($event) => clickImg())
+      }, [
+        createElementVNode("img", {
+          src: unref(imageUrl),
+          style: normalizeStyle(unref(computedImgStyle)),
+          onError: _cache[0] || (_cache[0] = ($event) => altNeeded.value = true)
+        }, null, 44, _hoisted_1$e)
+      ], 6);
+    };
   }
-};
-var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", render$b], ["__scopeId", "data-v-59a679e4"]]);
+});
+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) {
   return openBlock(), createElementBlock("label", {
@@ -11662,7 +11674,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-6ae48508"]]);
+var ckInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-61fababc"]]);
 var ckPopup_vue_vue_type_style_index_0_lang = "";
 const _hoisted_1$b = {
   key: 0,
@@ -12033,8 +12045,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-41e8ae57"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-4963b7ae"), n = n(), popScopeId(), n);
+var ckSelect = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-02fab5ba"]]);
+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_3$2 = {
@@ -12107,7 +12119,7 @@ const _sfc_main$a = {
     }
   }
 };
-var ckSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", render$8], ["__scopeId", "data-v-4963b7ae"]]);
+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) {
@@ -12185,7 +12197,7 @@ const _sfc_main$9 = {
     }
   }
 };
-var ckSwitchOptions = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$7], ["__scopeId", "data-v-61a29406"]]);
+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, [
@@ -12323,7 +12335,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5fa6396e"]]);
+var TableHeaderItems = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5c48aabc"]]);
 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"];
@@ -12451,7 +12463,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-3fc0d6c6"]]);
+var TablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7ad6042e"]]);
 var ckTable_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$2 = { class: "ck-table" };
 const _hoisted_2 = {
@@ -12647,7 +12659,7 @@ const _sfc_main$1 = {
     }
   }
 };
-var ckTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", render$2], ["__scopeId", "data-v-54574068"]]);
+var ckTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", render$2], ["__scopeId", "data-v-ec889100"]]);
 var top = "top";
 var bottom = "bottom";
 var right = "right";
@@ -15268,8 +15280,33 @@ var components = /* @__PURE__ */ Object.freeze({
   lockScroll,
   unlockScroll
 });
+function setDefaultColors(options) {
+  if (!options)
+    return;
+  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);
+    });
+  }
+}
 const install = function installCleek(app, options) {
+  app.config.globalProperties.$cleekOptions = options;
   console.log("arranco paquete", options);
+  setDefaultColors(options);
   Object.entries(components).forEach(([componentName, component]) => {
     app.component(componentName, component);
   });