cleek 2.4.17 → 2.4.18

package/dist/cleek.es.js

@@ -2901,6 +2901,11 @@ const cleekOptions = {
   img: {
     basePath: ""
   },
+  popup: {
+    textColor: "",
+    headerAlign: "",
+    headerColor: ""
+  },
   styles: {
     layout: "base",
     borderColor: "#dae1e7"
@@ -22254,22 +22259,21 @@ const _hoisted_1$c = {
   class: "ck-popup"
 };
 const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("div", { class: "blackout" }, null, -1);
-const _hoisted_3$5 = { class: "ck-popup__slot-header" };
-const _hoisted_4$5 = {
+const _hoisted_3$5 = {
   key: 0,
   class: "ck-popup__title"
 };
-const _hoisted_5$2 = { class: "ck-popup__slot-body" };
-const _hoisted_6$2 = {
+const _hoisted_4$5 = { class: "ck-popup__slot-body" };
+const _hoisted_5$2 = {
   key: 0,
   class: "ck-popup__slot-footer"
 };
-const _hoisted_7 = {
+const _hoisted_6$2 = {
   key: 0,
   class: "ck-popup-slot-footer__confirm-buttons"
 };
-const _hoisted_8 = /* @__PURE__ */ createTextVNode("Cancelar");
-const _hoisted_9 = /* @__PURE__ */ createTextVNode("Aceptar");
+const _hoisted_7 = /* @__PURE__ */ createTextVNode("Cancelar");
+const _hoisted_8 = /* @__PURE__ */ createTextVNode("Aceptar");
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean },
@@ -22280,11 +22284,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     notCloseByBg: { type: Boolean },
     preventCloseOnCancel: { type: Boolean },
     width: null,
-    maxWidth: null
+    maxWidth: null,
+    layout: null,
+    textColor: null,
+    headerColor: null,
+    headerAlign: null
   },
   emits: ["update:modelValue", "cancel", "accept"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    let cleekOptions2 = ref();
     const isActive = computed$2({
       get() {
         return props.modelValue;
@@ -22293,12 +22302,51 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         emits("update:modelValue", val);
       }
     });
+    const computedClassContent = computed$2(() => {
+      var _a, _b;
+      const list = [];
+      const layout = props.layout || ((_a = cleekOptions2.value) == null ? void 0 : _a.styles.layout);
+      if (layout)
+        list.push(layout);
+      const textColor = props.textColor || ((_b = cleekOptions2.value) == null ? void 0 : _b.popup.textColor);
+      if (textColor && hooks8.isColorTemplateVariable(textColor)) {
+        list.push(`ck-component__color--${textColor}`);
+      }
+      return list;
+    });
     const computedStyleContent = computed$2(() => {
+      var _a;
       const list = [];
       if (props.maxWidth)
         list.push({ maxWidth: props.maxWidth });
       if (props.width)
         list.push({ width: props.width });
+      const textColor = props.textColor || ((_a = cleekOptions2.value) == null ? void 0 : _a.popup.textColor);
+      if (textColor && !hooks8.isColorTemplateVariable(textColor)) {
+        list.push(`ck-component__color--${textColor}`);
+        list.push({ color: textColor });
+      }
+      return list;
+    });
+    const computedStyleHeader = computed$2(() => {
+      var _a;
+      const list = [];
+      const headerColor = props.headerColor || ((_a = cleekOptions2.value) == null ? void 0 : _a.popup.headerColor);
+      if (headerColor && !hooks8.isColorTemplateVariable(headerColor)) {
+        list.push({ backgroundColor: headerColor });
+      }
+      return list;
+    });
+    const computedClassHeader = computed$2(() => {
+      var _a, _b;
+      const list = [];
+      const headerAlign = props.headerAlign || ((_a = cleekOptions2.value) == null ? void 0 : _a.popup.headerAlign);
+      if (headerAlign)
+        list.push(`header-align--${headerAlign}`);
+      const headerColor = props.headerColor || ((_b = cleekOptions2.value) == null ? void 0 : _b.popup.headerColor);
+      if (headerColor && hooks8.isColorTemplateVariable(headerColor)) {
+        list.push(`ck-component__bg-color--${headerColor}`);
+      }
       return list;
     });
     function onCancel() {
@@ -22314,6 +22362,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         return;
       isActive.value = false;
     }
+    onMounted(() => {
+      cleekOptions2.value = hooks8.getCleekOptions(getCurrentInstance);
+    });
     return (_ctx, _cache) => {
       return unref$1(isActive) ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
         _hoisted_2$8,
@@ -22322,27 +22373,30 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           onClick: _cache[4] || (_cache[4] = ($event) => onBgClick())
         }, [
           createElementVNode("div", {
-            class: "ck-popup__content",
+            class: normalizeClass(["ck-popup__content", unref$1(computedClassContent)]),
             onClick: _cache[3] || (_cache[3] = withModifiers(() => {
             }, ["stop"])),
             style: normalizeStyle(unref$1(computedStyleContent))
           }, [
-            createElementVNode("div", _hoisted_3$5, [
-              __props.title ? (openBlock(), createElementBlock("h3", _hoisted_4$5, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(["ck-popup__slot-header", unref$1(computedClassHeader)]),
+              style: normalizeStyle(unref$1(computedStyleHeader))
+            }, [
+              __props.title ? (openBlock(), createElementBlock("h3", _hoisted_3$5, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "header"),
               !(__props.notCloseBtn || __props.notClose) ? (openBlock(), createBlock(CkIcon, {
                 key: 1,
-                class: "close",
+                class: "icon-close",
                 icon: "times",
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               })) : createCommentVNode("", true)
-            ]),
-            createElementVNode("div", _hoisted_5$2, [
+            ], 6),
+            createElementVNode("div", _hoisted_4$5, [
               renderSlot(_ctx.$slots, "default")
             ]),
-            _ctx.$slots.footer || __props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+            _ctx.$slots.footer || __props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
               renderSlot(_ctx.$slots, "footer"),
-              __props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              __props.confirmButtons ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
                 createVNode(CkButton, {
                   class: "cancel-button",
                   onClick: _cache[1] || (_cache[1] = ($event) => onCancel()),
@@ -22350,7 +22404,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   type: "flat"
                 }, {
                   default: withCtx(() => [
-                    _hoisted_8
+                    _hoisted_7
                   ]),
                   _: 1
                 }),
@@ -22358,13 +22412,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   onClick: _cache[2] || (_cache[2] = ($event) => onAccept())
                 }, {
                   default: withCtx(() => [
-                    _hoisted_9
+                    _hoisted_8
                   ]),
                   _: 1
                 })
               ])) : createCommentVNode("", true)
             ])) : createCommentVNode("", true)
-          ], 4)
+          ], 6)
         ])
       ])) : createCommentVNode("", true);
     };