@wikicasa-dev/components 1.6.13 → 1.6.15

package/dist/BaseInput.js

@@ -1,15 +1,15 @@
 import './assets/BaseInput.css';
-import { defineComponent as N, mergeModels as L, useModel as O, ref as f, watch as c, useAttrs as j, openBlock as n, createElementBlock as u, normalizeClass as b, unref as s, renderSlot as p, createElementVNode as m, withModifiers as g, withKeys as D, createBlock as G, createCommentVNode as w, Fragment as I, renderList as M } from "vue";
+import { defineComponent as N, mergeModels as M, useModel as O, ref as b, watch as c, useAttrs as j, openBlock as s, createElementBlock as r, normalizeClass as p, unref as o, renderSlot as m, createElementVNode as v, withModifiers as g, withKeys as D, createBlock as G, createCommentVNode as w, Fragment as C, renderList as B } from "vue";
 import J from "./BaseFloatingLabel.js";
 import { useFloatingLabel as Q } from "./useFloatingLabel.js";
 import { _ as R } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
-const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder", "value"], W = { class: "uikit-invisible uikit-float-none uikit-mb-2 uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-transition-[max-width] uikit-duration-[50ms] uikit-ease-out" }, X = ["innerHTML"], Y = ["innerHTML"], Z = ["innerHTML"], x = {
+const W = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder", "value"], X = { class: "uikit-invisible uikit-float-none uikit-mb-2 uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-transition-[max-width] uikit-duration-[50ms] uikit-ease-out" }, Y = ["innerHTML"], Z = ["innerHTML"], U = ["innerHTML"], x = {
   key: 1,
   class: "under-label uikit-absolute uikit-text-12"
 }, _ = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "BaseInput",
-  props: /* @__PURE__ */ L({
+  props: /* @__PURE__ */ M({
     inputClass: { default: "" },
     labelText: { default: "" },
     feedback: {},
@@ -20,46 +20,52 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ L(["click", "keydownEnterPressed", "focusin", "focusout", "keydown"], ["update:modelValue"]),
-  setup(y, { expose: C, emit: E }) {
-    const t = y, o = O(y, "modelValue"), v = f(""), k = E, {
-      labelState: r,
-      handleFocusIn: B,
+  emits: /* @__PURE__ */ M(["click", "keydownEnterPressed", "focusin", "focusout", "keydown"], ["update:modelValue"]),
+  setup(y, { expose: E, emit: H }) {
+    const t = y, l = O(y, "modelValue"), h = b(""), k = H, {
+      labelState: u,
+      handleFocusIn: P,
       handleFocusOut: V,
       setInlineLabel: F,
-      setFloatingLabel: T
-    } = Q(k), l = f("text"), d = f({}), h = f(null), H = () => {
+      setFloatingLabel: L
+    } = Q(k), n = b("text"), d = b({}), f = b(null), q = () => {
       t.feedback && (d.value = t.feedback, t.feedback.valid && typeof t.feedback.valid == "string" && (d.value.valid = [t.feedback.valid]), t.feedback.invalid && typeof t.feedback.invalid == "string" && (d.value.invalid = [t.feedback.invalid]));
-    }, P = (e) => {
+    }, T = (e, i) => {
       if (!t.formatter || !t.formatter.formatFn)
-        return "";
-      const i = e.length ? t.formatter.formatFn(e) : e;
-      return v.value = i, i;
-    }, q = (e) => {
+        return h.value = e, "";
+      const a = e.length ? t.formatter.formatFn(e) : e;
+      return i ? i.value = a : h.value = a, a;
+    }, I = (e) => {
       if (!t.formatter || !t.formatter.unFormatFn)
-        return "";
+        return l.value = e, "";
       const i = t.formatter.unFormatFn(e);
-      return o.value = i, i;
+      return l.value = i, i;
     }, z = ({ target: e }) => {
-      const i = e;
-      q(i.value) || (o.value = i.value);
+      const i = e, a = I(i.value);
+      a || (l.value = i.value), T(
+        `${a}`,
+        a === l.value ? i : void 0
+      );
     }, S = () => {
-      o.value = "", F();
+      l.value = "", F();
     }, A = () => {
-      l.value === "password" ? l.value = "text" : l.value === "text" && (l.value = "password");
+      n.value === "password" ? n.value = "text" : n.value === "text" && (n.value = "password");
     };
     c(
       () => t.feedback,
       () => {
-        H();
+        q();
       },
       {
         immediate: !0
       }
     ), c(
-      o,
+      l,
       (e) => {
-        P(`${e}`) || (v.value = `${e}`), e != null && `${e}`.length > 0 && r.value !== "floating-label" ? T() : !`${e}`.length && document && document.activeElement != h.value && F();
+        T(
+          `${e}`,
+          I(`${e}`) === e ? f.value : void 0
+        ), e != null && `${e}`.length > 0 && u.value !== "floating-label" ? L() : !`${e}`.length && document && document.activeElement != f.value && F();
       },
       {
         immediate: !0
@@ -67,20 +73,20 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
     ), c(
       () => t.keepFloatingLabel,
       (e) => {
-        e ? T() : V(o.value);
+        e ? L() : V(l.value);
       }
     );
     const K = j();
-    return l.value = K.type || "text", C({
+    return n.value = K.type || "text", E({
       select: () => {
-        h.value?.select();
+        f.value?.select();
       }
-    }), (e, i) => (n(), u("div", {
-      class: b(["input-wrapper uikit-relative uikit-inline-block uikit-w-full [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px", [
+    }), (e, i) => (s(), r("div", {
+      class: p(["input-wrapper uikit-relative uikit-inline-block uikit-w-full [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px", [
         e.$attrs.class,
         { "uikit-h-12": e.labelText },
         { "floating-label": e.labelText },
-        s(r) === "floating-label" ? "floating-state" : "inline-state",
+        o(u) === "floating-label" ? "floating-state" : "inline-state",
         {
           "has-right-icon": e.$attrs["with-right-icon"] !== void 0 ? e.$attrs["with-right-icon"] : !!e.$slots.righticon
         },
@@ -90,19 +96,19 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
         { "is-invalid": e.isValid === !1, "is-valid": e.isValid }
       ]])
     }, [
-      p(e.$slots, "leftIcon", {}, void 0, !0),
-      p(e.$slots, "righticon", {
+      m(e.$slots, "leftIcon", {}, void 0, !0),
+      m(e.$slots, "righticon", {
         handleClean: S,
         handleShowPasswd: A,
-        curType: l.value
+        curType: n.value
       }, void 0, !0),
-      m("input", {
+      v("input", {
         id: e.$attrs.id,
         ref_key: "baseInputEl",
-        ref: h,
+        ref: f,
         "data-cy": e.$attrs["data-cy"],
         name: e.$attrs.name,
-        class: b(["input-element uikit-peer uikit-relative uikit-z-10 uikit-box-border uikit-block uikit-h-12 uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-xs !uikit-border-none uikit-bg-transparent uikit-bg-no-repeat uikit-px-4 uikit-pt-5px uikit-outline-0 focus:uikit-shadow-none focus:uikit-outline-none", [
+        class: p(["input-element uikit-peer uikit-relative uikit-z-10 uikit-box-border uikit-block uikit-h-12 uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-xs !uikit-border-none uikit-bg-transparent uikit-bg-no-repeat uikit-px-4 uikit-pt-5px uikit-outline-0 focus:uikit-shadow-none focus:uikit-outline-none", [
           { "uikit-text-w-secondary": e.$attrs.disabled },
           {
             "is-invalid invalid-bg !uikit-pr-9": e.isValid === !1,
@@ -120,7 +126,7 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
         disabled: e.$attrs.disabled,
         "aria-labelledby": e.$attrs.id,
         readonly: e.$attrs.readonly,
-        type: l.value,
+        type: n.value,
         pattern: e.$attrs.pattern,
         min: e.$attrs.min,
         max: e.$attrs.max,
@@ -128,17 +134,17 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
         inputmode: e.$attrs.inputmode,
         placeholder: e.$attrs.placeholder,
         onClick: i[0] || (i[0] = (a) => k("click", a)),
-        onFocusin: i[1] || (i[1] = g(() => e.labelText && s(B)(), ["stop"])),
-        onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel && s(V)(o.value), ["stop"])),
+        onFocusin: i[1] || (i[1] = g(() => e.labelText && o(P)(), ["stop"])),
+        onFocusout: i[2] || (i[2] = g((a) => e.labelText && !e.keepFloatingLabel && o(V)(l.value), ["stop"])),
         onInput: g(z, ["stop"]),
-        value: v.value,
+        value: h.value,
         onKeydown: [
           i[3] || (i[3] = D(() => k("keydownEnterPressed"), ["enter"])),
           i[4] || (i[4] = (a) => k("keydown", a))
         ]
-      }, null, 42, U),
-      m("fieldset", {
-        class: b(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-solid uikit-bg-white uikit-px-2 uikit-py-0 uikit-text-left uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus:[&.is-invalid]:uikit-border-w-danger", [
+      }, null, 42, W),
+      v("fieldset", {
+        class: p(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-solid uikit-bg-white uikit-px-2 uikit-py-0 uikit-text-left uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus:[&.is-invalid]:uikit-border-w-danger", [
           { "uikit-bg-w-cultured": e.$attrs.disabled },
           {
             "is-invalid uikit-border-w-danger": e.isValid === !1,
@@ -149,51 +155,51 @@ const U = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby
           e.$attrs["fieldset-classes"]
         ]])
       }, [
-        m("legend", W, [
-          m("span", {
-            class: b(["visible-label uikit-opacity-0", [
+        v("legend", X, [
+          v("span", {
+            class: p(["visible-label uikit-opacity-0", [
               { "uikit-mx-5px": e.labelText },
               {
-                "uikit-visible uikit-inline-block": s(r) === "floating-label"
+                "uikit-visible uikit-inline-block": o(u) === "floating-label"
               },
               {
-                "uikit-invisible uikit-hidden": s(r) === "inline-label"
+                "uikit-invisible uikit-hidden": o(u) === "inline-label"
               }
             ]]),
             innerHTML: e.labelText
-          }, null, 10, X)
+          }, null, 10, Y)
         ])
       ], 2),
-      e.labelText ? (n(), G(J, {
+      e.labelText ? (s(), G(J, {
         key: 0,
         for: e.$attrs.id,
         "label-text": e.labelText,
-        "label-state": s(r),
+        "label-state": o(u),
         "is-valid": e.isValid,
         required: e.$attrs.required,
         disabled: e.$attrs.disabled,
         "label-classes": [
-          s(r) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
+          o(u) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
           e.$attrs["label-classes"]
         ]
       }, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes"])) : w("", !0),
-      p(e.$slots, "feedback", {}, () => [
-        e.isValid === !1 ? (n(!0), u(I, { key: 0 }, M(d.value.invalid, (a, $) => (n(), u("div", {
+      m(e.$slots, "feedback", {}, () => [
+        e.isValid === !1 ? (s(!0), r(C, { key: 0 }, B(d.value.invalid, (a, $) => (s(), r("div", {
           key: `${e.$attrs.id}_invalid_${$}`,
           class: "uikit-mt-1 uikit-text-12 uikit-text-w-danger",
           innerHTML: a
-        }, null, 8, Y))), 128)) : e.isValid === !0 ? (n(!0), u(I, { key: 1 }, M(d.value.valid, (a, $) => (n(), u("div", {
+        }, null, 8, Z))), 128)) : e.isValid === !0 ? (s(!0), r(C, { key: 1 }, B(d.value.valid, (a, $) => (s(), r("div", {
           key: `${e.$attrs.id}_valid_${$}`,
           class: "uikit-mt-1 uikit-text-12 uikit-text-w-primary",
           innerHTML: a
-        }, null, 8, Z))), 128)) : w("", !0)
+        }, null, 8, U))), 128)) : w("", !0)
       ], !0),
-      e.$slots["under-label"] ? (n(), u("div", x, [
-        p(e.$slots, "under-label", {}, void 0, !0)
+      e.$slots["under-label"] ? (s(), r("div", x, [
+        m(e.$slots, "under-label", {}, void 0, !0)
       ])) : w("", !0)
     ], 2));
   }
-}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-e9e9c2ba"]]);
+}), ne = /* @__PURE__ */ R(_, [["__scopeId", "data-v-287eefaf"]]);
 export {
   ne as default
 };

package/dist/UIKit/TailwindComponents/twBtnComponent.d.ts

@@ -0,0 +1,4 @@
+export declare const twBtnComponent: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/assets/BaseInput.css

@@ -1 +1 @@
-.input-wrapper[data-v-e9e9c2ba]{--icon-default-size: 44px}.invalid-bg[data-v-e9e9c2ba]{--invalid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkE0RjY0Jz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNC41Jy8+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgZD0nTTUuOCAzLjZoLjRMNiA2LjV6Jy8+PGNpcmNsZSBjeD0nNicgY3k9JzguMicgcj0nLjYnIGZpbGw9JyNGQTRGNjQnIHN0cm9rZT0nbm9uZScvPjwvc3ZnPg==);background-image:var(--invalid-img)}.valid-bg[data-v-e9e9c2ba]{--valid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyQjVERkYnIGQ9J00yLjMgNi43My42IDQuNTNjLS40LTEuMDQuNDYtMS40IDEuMS0uOGwxLjEgMS40IDMuNC0zLjhjLjYtLjYzIDEuNi0uMjcgMS4yLjdsLTQgNC42Yy0uNDMuNS0uOC40LTEuMS4xeicvPjwvc3ZnPg==);background-image:var(--valid-img)}.invalid-bg[data-v-e9e9c2ba],.valid-bg[data-v-e9e9c2ba]{background-position:top 17px right 12px;background-size:20px}.has-right-icon[data-v-e9e9c2ba]>label.inline-label{right:var(--icon-default-size)}.has-left-icon[data-v-e9e9c2ba]>label.inline-label{left:var(--icon-default-size)}[data-v-e9e9c2ba] .text-input-icon{position:absolute;z-index:20;box-sizing:border-box;--icon-size-sm: 16px;--icon-size-md: 20px;--icon-size-lg: 25px}[data-v-e9e9c2ba] .text-input-icon.left{left:5px}[data-v-e9e9c2ba] .text-input-icon.right{right:5px}[data-v-e9e9c2ba] .text-input-icon{--icon-top: 5px;--icon-size: var(--icon-size-sm);width:var(--icon-default-size);height:var(--icon-default-size);padding:calc((var(--icon-default-size) - var(--icon-size)) / 2);top:var(--icon-top)}[data-v-e9e9c2ba] .text-input-icon.md{--icon-size: var(--icon-size-md)}[data-v-e9e9c2ba] .text-input-icon.lg{--icon-top: 0;--icon-size: var(--icon-size-lg)}.under-label[data-v-e9e9c2ba]{left:4px;font-style:italic}
+.input-wrapper[data-v-287eefaf]{--icon-default-size: 44px}.invalid-bg[data-v-287eefaf]{--invalid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkE0RjY0Jz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNC41Jy8+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgZD0nTTUuOCAzLjZoLjRMNiA2LjV6Jy8+PGNpcmNsZSBjeD0nNicgY3k9JzguMicgcj0nLjYnIGZpbGw9JyNGQTRGNjQnIHN0cm9rZT0nbm9uZScvPjwvc3ZnPg==);background-image:var(--invalid-img)}.valid-bg[data-v-287eefaf]{--valid-img: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyQjVERkYnIGQ9J00yLjMgNi43My42IDQuNTNjLS40LTEuMDQuNDYtMS40IDEuMS0uOGwxLjEgMS40IDMuNC0zLjhjLjYtLjYzIDEuNi0uMjcgMS4yLjdsLTQgNC42Yy0uNDMuNS0uOC40LTEuMS4xeicvPjwvc3ZnPg==);background-image:var(--valid-img)}.invalid-bg[data-v-287eefaf],.valid-bg[data-v-287eefaf]{background-position:top 17px right 12px;background-size:20px}.has-right-icon[data-v-287eefaf]>label.inline-label{right:var(--icon-default-size)}.has-left-icon[data-v-287eefaf]>label.inline-label{left:var(--icon-default-size)}[data-v-287eefaf] .text-input-icon{position:absolute;z-index:20;box-sizing:border-box;--icon-size-sm: 16px;--icon-size-md: 20px;--icon-size-lg: 25px}[data-v-287eefaf] .text-input-icon.left{left:5px}[data-v-287eefaf] .text-input-icon.right{right:5px}[data-v-287eefaf] .text-input-icon{--icon-top: 5px;--icon-size: var(--icon-size-sm);width:var(--icon-default-size);height:var(--icon-default-size);padding:calc((var(--icon-default-size) - var(--icon-size)) / 2);top:var(--icon-top)}[data-v-287eefaf] .text-input-icon.md{--icon-size: var(--icon-size-md)}[data-v-287eefaf] .text-input-icon.lg{--icon-top: 0;--icon-size: var(--icon-size-lg)}.under-label[data-v-287eefaf]{left:4px;font-style:italic}

package/dist/index.d.ts

@@ -37,4 +37,5 @@ import SwiperCarousel from './components/carousel/SwiperCarousel.vue';
 import SwiperSlide from './components/carousel/SwiperSlide.vue';
 import { useValidator } from './composables/useValidator';
 export type { ChartOptions, ChartData } from "chart.js";
+export { twBtnComponent } from "./UIKit/TailwindComponents/twBtnComponent";
 export { DoughnutChart, LineChart, BaseAccordion, BaseAccordionBtn, BaseAccordionContent, BaseAccordionItem, SelectItem, BaseAlert, BaseAutocomplete, BaseBadge, BaseButton, AccessibleSelect, BaseComplexToggle, BaseDropDown, BaseFloatingLabel, BaseCard, BaseIcon, BaseInput, BaseNavItem, BasePagination, BasePaper, BaseSlider, BaseTab, BaseTextarea, BaseToggle, BaseTooltip, BaseUploadFile, CheckboxBtn, CheckboxGroup, RadioButton, RadioGroup, SwiperCarousel, SwiperSlide, IntersectionObservable, IntersectionObserver, useValidator, BaseModal, BaseSnackbar, };

package/dist/index.js

@@ -1,18 +1,18 @@
 import './assets/index.css';
-import { _ as a } from "./chunks/BaseAccordion.vue_vue_type_script_setup_true_lang.CoE2D2rV.js";
+import { _ as r } from "./chunks/BaseAccordion.vue_vue_type_script_setup_true_lang.CoE2D2rV.js";
 import { _ as t } from "./chunks/BaseAccordionBtn.vue_vue_type_script_setup_true_lang.CrVwjQqr.js";
 import { _ as f } from "./chunks/BaseAccordionContent.vue_vue_type_script_setup_true_lang.8ErZghvk.js";
 import { _ as m } from "./chunks/BaseAccordionItem.vue_vue_type_script_setup_true_lang.cWFIcTGL.js";
 import { _ as l } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
 import { default as d } from "./CheckboxBtn.js";
-import { _ as n } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.DDtN9_Bg.js";
+import { _ as u } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.DDtN9_Bg.js";
 import { _ as i } from "./chunks/RadioButton.vue_vue_type_script_setup_true_lang.DR6a7QAi.js";
 import { _ as b } from "./chunks/RadioGroup.vue_vue_type_script_setup_true_lang.C-jm5z4e.js";
-import { _ as C } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.5pqk7vlZ.js";
+import { _ as g } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.5pqk7vlZ.js";
 import { _ as I } from "./chunks/BaseAlert.vue_vue_type_style_index_0_lang.BtqP_iYL.js";
 import { _ as h } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.Bl0xZfUY.js";
-import { _ as k } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
-import { _ as w } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.BrJbAMJ8.js";
+import { _ as w } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
+import { _ as v } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.BrJbAMJ8.js";
 import { _ as F } from "./chunks/BaseCard.vue_vue_type_style_index_0_lang.w5aEohzG.js";
 import { default as L } from "./BaseComplexToggle.js";
 import { _ as P } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.XCCbfFor.js";
@@ -26,27 +26,28 @@ import { default as Q } from "./BaseSlider.js";
 import { default as X } from "./BaseTab.js";
 import { default as Z } from "./BaseTextarea.js";
 import { default as ee } from "./BaseToggle.js";
-import { default as ae } from "./BaseTooltip.js";
+import { default as re } from "./BaseTooltip.js";
 import { _ as te } from "./chunks/BaseUploadFile.vue_vue_type_script_setup_true_lang.1Uo4HnFM.js";
 import { default as fe } from "./BaseModal.js";
 import { default as me } from "./BaseSnackbar.js";
 import { _ as le } from "./chunks/DoughnutChart.vue_vue_type_script_setup_true_lang.C4QPaUsI.js";
 import { _ as de } from "./chunks/LineChart.vue_vue_type_script_setup_true_lang.D1HsyTJq.js";
-import { _ as ne } from "./chunks/IntersectionObservable.vue_vue_type_script_setup_true_lang.BBMxY-re.js";
+import { _ as ue } from "./chunks/IntersectionObservable.vue_vue_type_script_setup_true_lang.BBMxY-re.js";
 import { _ as ie } from "./chunks/IntersectionObserver.vue_vue_type_script_setup_true_lang.CQHjzQc3.js";
 import { _ as be } from "./chunks/SwiperCarousel.vue_vue_type_style_index_0_lang.CBBHq8Cf.js";
-import { default as Ce } from "./SwiperSlide.js";
+import { default as ge } from "./SwiperSlide.js";
 import { useValidator as Ie } from "./useValidator.js";
+import { twBtnComponent as he } from "./twBtnComponent.js";
 export {
-  C as AccessibleSelect,
-  a as BaseAccordion,
+  g as AccessibleSelect,
+  r as BaseAccordion,
   t as BaseAccordionBtn,
   f as BaseAccordionContent,
   m as BaseAccordionItem,
   I as BaseAlert,
   h as BaseAutocomplete,
-  k as BaseBadge,
-  w as BaseButton,
+  w as BaseBadge,
+  v as BaseButton,
   F as BaseCard,
   L as BaseComplexToggle,
   P as BaseDropDown,
@@ -62,18 +63,19 @@ export {
   X as BaseTab,
   Z as BaseTextarea,
   ee as BaseToggle,
-  ae as BaseTooltip,
+  re as BaseTooltip,
   te as BaseUploadFile,
   d as CheckboxBtn,
-  n as CheckboxGroup,
+  u as CheckboxGroup,
   le as DoughnutChart,
-  ne as IntersectionObservable,
+  ue as IntersectionObservable,
   ie as IntersectionObserver,
   de as LineChart,
   i as RadioButton,
   b as RadioGroup,
   l as SelectItem,
   be as SwiperCarousel,
-  Ce as SwiperSlide,
+  ge as SwiperSlide,
+  he as twBtnComponent,
   Ie as useValidator
 };

package/dist/twBtnComponent.js

@@ -0,0 +1,318 @@
+function s(r) {
+  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
+}
+var a = {}, d = {};
+(function(r) {
+  Object.defineProperty(r, "__esModule", {
+    value: !0
+  }), Object.defineProperty(r, "default", {
+    enumerable: !0,
+    get: function() {
+      return l;
+    }
+  });
+  function o(n, t) {
+    return {
+      handler: n,
+      config: t
+    };
+  }
+  o.withOptions = function(n, t = () => ({})) {
+    const i = function(c) {
+      return {
+        __options: c,
+        handler: n(c),
+        config: t(c)
+      };
+    };
+    return i.__isOptionsFunction = !0, i.__pluginFunction = n, i.__configFunction = t, i;
+  };
+  const l = o;
+})(d);
+(function(r) {
+  Object.defineProperty(r, "__esModule", {
+    value: !0
+  }), Object.defineProperty(r, "default", {
+    enumerable: !0,
+    get: function() {
+      return n;
+    }
+  });
+  const o = /* @__PURE__ */ l(d);
+  function l(t) {
+    return t && t.__esModule ? t : {
+      default: t
+    };
+  }
+  const n = o.default;
+})(a);
+let b = a;
+var g = (b.__esModule ? b : { default: b }).default;
+const v = /* @__PURE__ */ s(g), u = v(({ addComponents: r, theme: o }) => {
+  r({
+    ".btn": {
+      "--btn-px": "25px",
+      "--btn-py": "11px",
+      "--btn-bg-color": "transparent",
+      "--btn-text-color": o("colors.w-black"),
+      "--btn-border-color": "unset",
+      "--btn-border-width": "0",
+      "--btn-border-radius": o("borderRadius.lg"),
+      "--btn-border-style": "solid",
+      "--btn-height": "42px",
+      "--btn-min-w": "90px",
+      "--btn-font-size": o("fontSize.DEFAULT"),
+      "--btn-transition": "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
+      display: "inline-block",
+      "font-size": "var(--btn-font-size)",
+      "font-weight": o("fontWeight.semibold"),
+      "white-space": "nowrap",
+      border: "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
+      "border-radius": "var(--btn-border-radius)",
+      cursor: "pointer",
+      height: "var(--btn-height)",
+      "min-width": "var(--btn-min-w)",
+      "background-color": "var(--btn-bg-color)",
+      color: "var(--btn-text-color)",
+      padding: "var(--btn-py) var(--btn-px)",
+      transition: "var(--btn-transition)",
+      "line-height": "1",
+      "-webkit-tap-highlight-color": "transparent",
+      "&:disabled": {
+        "--btn-bg-color": o("colors.w-primary"),
+        "--btn-text-color": "rgb(255 255 255 / 0.8)",
+        cursor: "not-allowed",
+        opacity: "0.5"
+      },
+      "&.btn-lg": {
+        "--btn-height": "47px",
+        "--btn-px": "28px",
+        "--btn-py": "12px",
+        "line-height": "0"
+      },
+      "&.btn-md": {
+        "--btn-height": "42px"
+      },
+      "&.btn-sm": {
+        "--btn-px": "18px",
+        "--btn-py": "8px",
+        "--btn-height": "36px"
+      },
+      "&.btn-outline": {
+        "--btn-border-width": "1px",
+        "--btn-bg-color": o("colors.white"),
+        [`@media screen and (max-width: ${o("screens.sm")})`]: {
+          "&:hover": {
+            "--btn-bg-color": o("colors.white")
+          }
+        },
+        [`@media screen and (min-width: ${o("screens.sm")})`]: {
+          "&:hover": {
+            "--btn-text-color": o("colors.white"),
+            "& svg, & img": {
+              filter: "brightness(0) invert(1)"
+            }
+          }
+        },
+        "&:active": {
+          "--btn-text-color": o("colors.white") + " !important",
+          "& svg, & img": {
+            filter: "brightness(0) invert(1)"
+          }
+        }
+      }
+    },
+    ".btn-empty": {
+      "--btn-min-w": "0"
+    },
+    ".btn-w-primary": e(
+      o("screens.sm"),
+      {
+        bgColor: o("colors.w-primary"),
+        textColor: o("colors.white"),
+        hoverBgColor: "#0057D9",
+        hoverDisabledBgColor: o("colors.w-primary")
+      },
+      {
+        mainColor: o("colors.w-primary")
+      }
+    ),
+    ".btn-light": e(o("screens.sm"), {
+      textColor: o("colors.w-primary"),
+      bgColor: o("colors.white"),
+      hoverTextColor: o("colors.w-primary"),
+      hoverBgColor: "#FAFAFA",
+      hoverDisabledBgColor: o("colors.white")
+    }),
+    ".btn-w-secondary": e(
+      o("screens.sm"),
+      {
+        bgColor: o("colors.w-secondary"),
+        textColor: o("colors.white"),
+        hoverBgColor: "#8A9DDD",
+        hoverDisabledBgColor: o("colors.w-secondary")
+      },
+      {
+        mainColor: o("colors.w-secondary"),
+        textColor: o("colors.w-black")
+      }
+    ),
+    ".btn-w-warning": e(o("screens.sm"), {
+      bgColor: o("colors.w-warning"),
+      textColor: "#2A3761",
+      hoverBgColor: "#F2C761",
+      hoverDisabledBgColor: o("colors.w-warning")
+    }),
+    ".btn-w-danger": e(
+      o("screens.sm"),
+      {
+        bgColor: o("colors.w-danger"),
+        textColor: o("colors.white"),
+        hoverBgColor: "#E0485A",
+        hoverDisabledBgColor: o("colors.w-danger")
+      },
+      {
+        mainColor: o("colors.w-danger")
+      }
+    ),
+    ".btn-multi-selection, .btn-single-selection": {
+      "&[data-active='true']": {
+        "--btn-bg-color": o("colors.w-lavender"),
+        "--btn-border-color": "#385CF6",
+        "&:hover": {
+          "--btn-text-color": o("colors.w-black")
+        }
+      }
+    },
+    ".btn-multi-selection": {
+      "--btn-py": "10px",
+      "--btn-height": "40px",
+      "font-weight": o("fontWeight.regular"),
+      "--btn-border-radius": o("borderRadius.xs"),
+      "--btn-border-color": "#EAEFFD",
+      "--btn-border-width": "1px",
+      "white-space": "normal",
+      ...e(o("screens.sm"), {
+        textColor: o("colors.w-black"),
+        bgColor: "#F5F7FA",
+        hoverBgColor: o("colors.w-lavender"),
+        hoverDisabledBgColor: o("colors.white"),
+        hoverBorderColor: "#385CF6"
+      })
+    },
+    ".btn-single-selection": {
+      "--btn-px": "16px",
+      "--btn-py": "8px",
+      "--btn-height": "40px",
+      "--btn-border-radius": "5px",
+      "font-weight": o("fontWeight.regular"),
+      ...e(o("screens.sm"), {
+        textColor: o("colors.w-black"),
+        bgColor: o("colors.white"),
+        hoverBgColor: o("colors.w-cultured"),
+        hoverDisabledBgColor: o("colors.white")
+      })
+    },
+    ".btn-facile": {
+      "--btn-facile-color": "#FF6600",
+      "--btn-facile-hover-color": "#b34700",
+      ...e(o("screens.sm"), {
+        bgColor: "var(--btn-facile-color)",
+        textColor: o("colors.white"),
+        hoverBgColor: "var(--btn-facile-hover-color)",
+        hoverTextColor: o("colors.white"),
+        hoverDisabledBgColor: "var(--btn-facile-color)"
+      })
+    },
+    ".btn-show-more": {
+      "--btn-border-radius": "0",
+      "--btn-border-color": o("colors.white"),
+      ...e(o("screens.sm"), {
+        textColor: "#2B5DFF",
+        bgColor: o("colors.white"),
+        hoverTextColor: "#3646B3",
+        hoverBgColor: o("colors.white"),
+        hoverDisabledBgColor: o("colors.white")
+      })
+    },
+    ".btn-transparent": {
+      "--border-color": "transparent",
+      "--btn-px": "0",
+      "--btn-py": "0",
+      "&:hover": {
+        "--btn-bg-color": "transparent",
+        "--border-color": "transparent"
+      },
+      "&:disabled": {
+        "--btn-bg-color": "transparent"
+      }
+    }
+  });
+}), e = (r, o, l) => ({
+  "--btn-bg-color": o.bgColor,
+  "--btn-text-color": o.textColor,
+  [`@media screen and (max-width: ${r})`]: {
+    "&:hover": {
+      "--btn-bg-color": o.hoverMobileBgColor ?? o.bgColor,
+      "--btn-text-color": o.hoverMobileTextColor ?? o.textColor
+    }
+  },
+  [`@media screen and (min-width: ${r})`]: {
+    "&:hover": {
+      "--btn-bg-color": o.hoverBgColor,
+      ...o.hoverTextColor ? { "--btn-text-color": o.hoverTextColor } : {},
+      ...o.hoverBorderColor ? { "--btn-border-color": o.hoverBorderColor } : {}
+    }
+  },
+  "&:hover": {
+    "&:disabled": {
+      "--btn-bg-color": o.hoverDisabledBgColor
+    }
+  },
+  "&:active": {
+    "--btn-bg-color": o.activeBgColor ?? o.hoverBgColor,
+    "--btn-text-color": o.activeTextColor ?? o.hoverTextColor,
+    ...o.activeBorderColor || o.hoverBorderColor ? {
+      "--btn-border-color": o.activeBorderColor ?? o.hoverBorderColor
+    } : {}
+  },
+  ...l ? {
+    "&.btn-outline": C(
+      l,
+      r
+    )
+  } : {}
+}), C = (r, o) => ({
+  "--btn-border-color": r.mainColor ?? r.borderColor,
+  "--btn-text-color": r.mainColor && !r.textColor ? r.mainColor : r.textColor,
+  //By default, the active section is the same of the hover section in desktop mode
+  "&:active": {
+    "--btn-bg-color": (r.mainColor ?? r.activeBgColor ?? r.hoverBgColor) + " !important",
+    //By default, on active the text is white
+    ...r.activeTextColor || r.hoverTextColor ? {
+      "--btn-text-color": r.activeTextColor ?? r.hoverTextColor
+    } : {}
+  },
+  "&:disabled": {
+    "&:hover": {
+      "--btn-bg-color": r.mainColor ?? r.hoverDisabledBgColor
+    }
+  },
+  [`@media screen and (max-width: ${o})`]: {
+    "&:hover": {
+      //By default, the text color is white
+      ...r.hoverMobileBgColor ? { "--btn-bg-color": r.hoverMobileBgColor } : {},
+      "--btn-text-color": r.hoverMobileTextColor ?? r.textColor
+    }
+  },
+  [`@media screen and (min-width: ${o})`]: {
+    "&:hover": {
+      "--btn-bg-color": r.mainColor ?? r.hoverBgColor,
+      //By default, the text color is white when hovering
+      ...r.hoverTextColor ? { "--btn-text-color": r.hoverTextColor } : {}
+    }
+  }
+});
+export {
+  u as twBtnComponent
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",