cleek 2.0.0 → 2.0.1

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",
@@ -11363,7 +11363,7 @@ const _sfc_main$i = {
     }
   }
 };
-var ckButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", render$d], ["__scopeId", "data-v-a687842a"]]);
+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));
@@ -11371,7 +11371,7 @@ 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"])),
@@ -11431,23 +11431,10 @@ const _sfc_main$h = {
     }
   }
 };
-var ckCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$c], ["__scopeId", "data-v-69dfa524"]]);
-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 },
@@ -11462,77 +11449,92 @@ 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;
+    const imageUrl = computed(() => {
+      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.imgPath)
+        path = context.$cleekOptions.imgPath;
+      return `${path}${src}`;
+    }
+    onMounted(() => {
+      context = getCurrentInstance().ctx;
+    });
+    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-d2638d3c"]]);
+});
+var ckImg = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-66708ebe"]]);
 const _hoisted_1$d = ["for"];
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", {
@@ -15275,6 +15277,8 @@ var components = /* @__PURE__ */ Object.freeze({
   unlockScroll
 });
 function setDefaultColors(options) {
+  if (!options)
+    return;
   var r = document.querySelector(":root");
   const colorList = [
     "primary",
@@ -15296,6 +15300,7 @@ function setDefaultColors(options) {
   }
 }
 const install = function installCleek(app, options) {
+  app.config.globalProperties.$cleekOptions = options;
   console.log("arranco paquete", options);
   setDefaultColors(options);
   Object.entries(components).forEach(([componentName, component]) => {