@wikicasa-dev/components 2.1.4-alpha.1 → 2.1.4-alpha.10

package/dist/packages/components/lib/UIKit/AccessibleSelect.vue.js

@@ -36,27 +36,27 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
     toggleDropdownModifiers: {}
   }),
   emits: /* @__PURE__ */ $(["click", "update:dropdownState"], ["update:modelValue", "update:toggleDropdown"]),
-  setup(u, { emit: B }) {
-    const h = B, k = M(u, "modelValue"), y = M(u, "toggleDropdown"), H = A(), t = V(() => u.namespace || H), i = L(!1), I = L(null), f = V(() => !!k.value.label), { activeIdx: v, selectedIdx: D } = q({
-      optionsLength: u.options.length,
+  setup(r, { emit: B }) {
+    const h = B, k = M(r, "modelValue"), g = M(r, "toggleDropdown"), H = A(), t = V(() => r.namespace || H), i = L(!1), I = L(null), f = V(() => !!k.value.label), { activeIdx: v, selectedIdx: D } = q({
+      optionsLength: r.options.length,
       isDropdownOpen: i
     }), m = (e) => {
       i.value = !1, k.value = e;
     };
     w(D, (e) => {
-      m(u.options[e]), i.value = !1;
-    }), w(y, (e) => {
-      e && (i.value = !i.value, y.value = !1);
+      m(r.options[e]), i.value = !1;
+    }), w(g, (e) => {
+      e && (i.value = !i.value, g.value = !1);
     }), w(i, (e) => {
       h("update:dropdownState", e);
     });
-    const g = ({ target: e }) => {
+    const y = ({ target: e }) => {
       `${t.value}_btn` !== e.id && (i.value = !1);
     };
     return E(() => {
-      u.closeOnBodyPressed && document.addEventListener("click", g);
+      r.closeOnBodyPressed && document.addEventListener("click", y);
     }), P(() => {
-      u.closeOnBodyPressed && document.removeEventListener("click", g);
+      r.closeOnBodyPressed && document.removeEventListener("click", y);
     }), (e, n) => (a(), s("div", {
       class: l(e.$attrs.class)
     }, [
@@ -77,7 +77,7 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
         e.$slots.lefticon ? (a(), s("span", {
           key: 1,
           class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
-          onClick: n[0] || (n[0] = p((r) => i.value = !i.value, ["stop"]))
+          onClick: n[0] || (n[0] = p((u) => i.value = !i.value, ["stop"]))
         }, [
           z(e.$slots, "lefticon")
         ])) : d("", !0),
@@ -97,8 +97,8 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
           "aria-activedescendant": b(v) >= 0 && i.value ? `${t.value}_element_${e.options[b(v)].label}` : "",
           "aria-invalid": e.isValid === !1,
           "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
-          onClick: n[1] || (n[1] = (r) => {
-            i.value = !i.value, h("click", r);
+          onClick: n[1] || (n[1] = (u) => {
+            i.value = !i.value, h("click", u);
           })
         }, [
           o("span", {
@@ -128,9 +128,9 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
           "aria-hidden": "true",
           class: l(["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-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
             e.fieldsetClasses,
-            e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-lightgray",
+            e.isValid ? "uikit-border-w-pink" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-lightgray",
             {
-              "peer-aria-invalid:uikit-border-w-danger uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary": e.border
+              "peer-aria-invalid:uikit-border-w-danger uikit-border uikit-border-solid peer-focus:uikit-border-w-pink peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-pink": e.border
             },
             { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
           ]])
@@ -162,13 +162,13 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
           onClick: n[3] || (n[3] = p(() => {
           }, ["stop"]))
         }, [
-          (a(!0), s(T, null, S(e.options, (r, c) => (a(), s("li", {
+          (a(!0), s(T, null, S(e.options, (u, c) => (a(), s("li", {
             id: `${t.value}_element_${e.options[c].label}`,
-            key: `${r.label}_${c}`,
+            key: `${u.label}_${c}`,
             role: "option",
             "aria-selected": b(v) === c,
             class: l(["uikit-px-20px uikit-m-1 uikit-cursor-pointer uikit-py-xs uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.dropdownItemClasses]),
-            onClick: p((C) => m(r), ["stop"]),
+            onClick: p((C) => m(u), ["stop"]),
             onMouseover: p((C) => v.value = c, ["stop"]),
             onBlur: n[2] || (n[2] = p(() => {
             }, ["stop"]))
@@ -179,11 +179,11 @@ const R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-cont
                 class: "uikit-m-0 uikit-appearance-none",
                 name: `${t.value}_radio`,
                 type: "radio",
-                checked: r.label === k.value.label,
-                onInput: p((C) => m(r), ["stop"])
+                checked: u.label === k.value.label,
+                onInput: p((C) => m(u), ["stop"])
               }, null, 40, Z),
               o("span", {
-                innerHTML: r.label
+                innerHTML: u.label
               }, null, 8, x)
             ])
           ], 42, X))), 128))

package/dist/packages/components/lib/UIKit/BaseBadge.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as a, createElementBlock as t, openBlock as u, normalizeClass as r, renderSlot as d } from "vue";
+import { defineComponent as a, createElementBlock as t, openBlock as u, normalizeClass as d, renderSlot as r } from "vue";
 const l = /* @__PURE__ */ a({
   __name: "BaseBadge",
   props: {
@@ -25,11 +25,11 @@ const l = /* @__PURE__ */ a({
       /**
        * @deprecated Old style
        */
-      "primary-sm": "uikit-badge-w-primary-sm",
+      "primary-sm": "uikit-badge-w-pink-sm",
       /**
        * @deprecated Old style
        */
-      "dark-primary": "uikit-badge-w-dark-primary",
+      "dark-primary": "uikit-badge-w-darkblue",
       /**
        * @deprecated Old style
        */
@@ -43,9 +43,9 @@ const l = /* @__PURE__ */ a({
       discount: "uikit-badge-discount"
     };
     return (i, s) => (u(), t("span", {
-      class: r(["uikit-badge uikit-rounded-2xs uikit-px-xs uikit-py-2xs uikit-text uikit-font-medium uikit-shadow-sm", e[i.badgeClass]])
+      class: d(["uikit-badge uikit-rounded-2xs uikit-px-xs uikit-py-2xs uikit-text uikit-font-medium uikit-shadow-sm", e[i.badgeClass]])
     }, [
-      d(i.$slots, "default")
+      r(i.$slots, "default")
     ], 2));
   }
 });

package/dist/packages/components/lib/UIKit/BaseBanner.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, createElementBlock as m, openBlock as e, normalizeClass as k, createElementVNode as n, renderSlot as o, createVNode as t, createBlock as s, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as a } from "vue";
+import { defineComponent as d, createElementBlock as k, openBlock as e, normalizeClass as m, createElementVNode as a, renderSlot as o, createVNode as t, createBlock as s, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as n } from "vue";
 import c from "./BaseBanner/Background/BaseBannerBgElement1.vue.js";
 import b from "./BaseBanner/Background/BaseBannerBgElement2.vue.js";
 import h from "./BaseBanner/Background/BaseBannerBgElement3.vue.js";
@@ -15,30 +15,30 @@ const f = ["aria-label"], g = { class: "uikit-relative uikit-z-[2]" }, v = { cla
     bannerClass: {}
   },
   setup(C) {
-    return (i, w) => (e(), m("section", {
+    return (i, _) => (e(), k("section", {
       "aria-label": i.ariaLabel,
-      class: k([
+      class: m([
         "uikit-relative uikit-overflow-hidden uikit-rounded-xs uikit-p-md uikit-text-white sm:uikit-p-lg",
-        i.bannerClass === "secondary" ? "uikit-bg-w-blue" : "uikit-bg-w-primary"
+        i.bannerClass === "secondary" ? "uikit-bg-w-blue" : "uikit-bg-w-pink"
       ])
     }, [
-      n("div", g, [
+      a("div", g, [
         o(i.$slots, "title", {}, () => [
           (e(), s(r(i.headerTag || "h2"), { class: "uikit-m-0 uikit-text-20 max-sm:uikit-mb-xs" }, {
             default: l(() => [
-              u(a(i.title), 1)
+              u(n(i.title), 1)
             ]),
             _: 1
           }))
         ]),
         o(i.$slots, "description", {}, () => [
-          n("p", v, a(i.description), 1)
+          a("p", v, n(i.description), 1)
         ])
       ]),
       o(i.$slots, "cta", {}, () => [
-        (e(), s(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-w-ternary uikit-relative uikit-z-[2]" }, {
+        (e(), s(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-ternary uikit-relative uikit-z-[2]" }, {
           default: l(() => [
-            u(a(i.ctaLabel), 1)
+            u(n(i.ctaLabel), 1)
           ]),
           _: 1
         }))

package/dist/packages/components/lib/UIKit/BaseButton.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as f, ref as c, computed as s, createElementBlock as v, openBlock as g, withModifiers as l, normalizeStyle as w, normalizeClass as B, renderSlot as r, createVNode as h } from "vue";
-import C from "../../../../UIKit/StaticSpinner.js";
+import { defineComponent as f, ref as v, computed as s, createElementBlock as c, openBlock as g, withModifiers as l, normalizeStyle as B, normalizeClass as h, renderSlot as r, createVNode as C } from "vue";
+import w from "../../../../UIKit/StaticSpinner.js";
 const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ f({
   __name: "BaseButton",
   props: {
@@ -19,12 +19,12 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
   emits: ["mouseover", "mouseout", "click"],
   setup(a, { emit: u }) {
     const n = u, d = {
-      primary: "uikit-btn-w-primary",
-      secondary: "uikit-btn-w-secondary",
-      ternary: "uikit-btn-w-ternary",
-      quaternary: "uikit-btn-w-quaternary",
-      warning: "uikit-btn-w-warning",
-      danger: "uikit-btn-w-danger",
+      primary: "uikit-btn-primary",
+      secondary: "uikit-btn-secondary",
+      ternary: "uikit-btn-ternary",
+      quaternary: "uikit-btn-quaternary",
+      warning: "uikit-btn-warning",
+      danger: "uikit-btn-danger",
       transparent: "uikit-btn-transparent",
       light: "uikit-btn-light",
       "show-more": "uikit-btn-show-more",
@@ -34,19 +34,19 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     }, k = {
       sm: "uikit-btn-sm",
       lg: "uikit-btn-lg"
-    }, o = c(!1), b = s(
-      () => k[a.size] || "uikit-btn-md"
+    }, o = v(!1), b = s(
+      () => k[a.size]
     ), m = s(() => a.outlined ? "uikit-btn-outline" : ""), p = () => {
       o.value = !0;
     }, y = () => {
       o.value = !1;
     };
-    return (t, e) => (g(), v("button", {
+    return (t, e) => (g(), c("button", {
       id: t.$attrs.id,
       "data-cy": t.dataCy,
       type: t.type,
-      class: B([
-        "uikit-shadow-surface uikit-btn",
+      class: h([
+        "uikit-btn",
         {
           "uikit-btn-empty": !t.withMinWidth,
           "active uikit-font-medium": t.keepActive,
@@ -57,7 +57,7 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
         m.value,
         { "uikit-btn-rounded": t.rounded }
       ]),
-      style: w(t.$attrs.style),
+      style: B(t.$attrs.style),
       "data-active": t.keepActive,
       disabled: t.isLoading || t.disabled,
       "aria-label": t.ariaLabel,
@@ -71,7 +71,7 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
       onClick: e[2] || (e[2] = (i) => n("click", i))
     }, [
       t.isLoading ? r(t.$slots, "spinner", { key: 1 }, () => [
-        h(C, {
+        C(w, {
           "stroke-color": t.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
       ]) : r(t.$slots, "default", {

package/dist/packages/components/lib/UIKit/BaseFloatingLabel.vue.js

@@ -10,23 +10,23 @@ const k = ["for"], b = ["innerHTML"], C = /* @__PURE__ */ o({
     labelTextClasses: {}
   },
   emits: ["click"],
-  setup(m, { emit: a }) {
+  setup(p, { emit: a }) {
     const n = a;
     return (e, t) => (s(), i("label", {
       for: e.$attrs.for,
       class: l(["uikit-floating-label uikit-h-5 uikit-pointer-events-none uikit-absolute uikit-left-sm uikit-text-16 uikit-text-w-gray", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
-      onClick: t[0] || (t[0] = r((p) => n("click"), ["stop"]))
+      onClick: t[0] || (t[0] = r((f) => n("click"), ["stop"]))
     }, [
       d("span", {
         class: l([{ "uikit-text-w-secondary": e.disabled }, e.labelTextClasses]),
         innerHTML: e.labelText
       }, null, 10, b),
-      e.$attrs.required ? (s(), i("sup", {
+      e.$attrs.required ? (s(), i("span", {
         key: 0,
         class: l(["uikit-absolute -uikit-top-[0.3rem]", [
           { "uikit-text-w-secondary": e.disabled },
           { "uikit-text-w-red": e.isValid === !1 },
-          { "uikit-text-w-primary": (e.isValid || e.isValid === null) && !e.disabled }
+          { "uikit-text-w-pink": (e.isValid || e.isValid === null) && !e.disabled }
         ]])
       }, " *", 2)) : u("", !0)
     ], 10, k));

package/dist/packages/components/lib/UIKit/BaseInput.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as A, mergeModels as L, useModel as N, ref as v, useAttrs as O, useId as j, computed as D, watch as p, createElementBlock as o, openBlock as s, normalizeClass as T, unref as k, renderSlot as m, createElementVNode as G, createBlock as J, createCommentVNode as h, withKeys as Q, withModifiers as w, Fragment as B, renderList as E } from "vue";
+import { defineComponent as A, mergeModels as L, useModel as N, ref as v, useAttrs as O, useId as j, computed as D, watch as p, createElementBlock as o, openBlock as s, normalizeClass as T, unref as k, renderSlot as m, createElementVNode as G, createBlock as J, createCommentVNode as h, withKeys as Q, withModifiers as g, Fragment as B, renderList as E } from "vue";
 import W from "./BaseFloatingLabel.vue.js";
 import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
 import { useFloatingLabel as X } from "../../../../composables/useFloatingLabel.js";
@@ -31,7 +31,7 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
     const u = N(l, "modelValue"), i = v(""), d = H, {
       labelState: c,
       handleFocusIn: P,
-      handleFocusOut: g,
+      handleFocusOut: w,
       setInlineLabel: $,
       setFloatingLabel: V
     } = X(), I = O(), q = j(), r = D(() => I.id || q), n = v("text"), f = v({}), b = v(null), K = () => {
@@ -80,7 +80,7 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
     ), p(
       () => l.keepFloatingLabel,
       (e) => {
-        e ? V() : g(u.value);
+        e ? V() : w(u.value);
       }
     ), n.value = I.type || "text", M({
       select: () => {
@@ -112,7 +112,7 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
         ref: b,
         "data-cy": e.dataCy,
         name: e.$attrs.name,
-        class: T(["input-element disabled:uikit-text-w-secondary uikit-peer uikit-relative uikit-box-border uikit-block uikit-h-[56px] uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-2xs uikit-border uikit-border-solid uikit-bg-white uikit-px-sm uikit-pb-0 uikit-pt-md uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue disabled:uikit-bg-w-cultured data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
+        class: T(["input-element disabled:uikit-text-w-secondary uikit-peer uikit-relative uikit-box-border uikit-block uikit-h-[56px] uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-pb-0 uikit-pt-md uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue disabled:uikit-bg-w-cultured data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
           {
             "is-invalid": e.isValid === !1,
             "is-valid": e.isValid
@@ -133,19 +133,19 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
         placeholder: e.$attrs.placeholder,
         value: i.value,
         onClick: a[0] || (a[0] = (t) => d("click", t)),
-        onFocusin: a[1] || (a[1] = w(
+        onFocusin: a[1] || (a[1] = g(
           (t) => {
             d("focusin", t), e.labelText && k(P)();
           },
           ["stop"]
         )),
-        onFocusout: a[2] || (a[2] = w(
+        onFocusout: a[2] || (a[2] = g(
           (t) => {
-            d("focusout", t), e.labelText && !e.keepFloatingLabel && k(g)(i.value);
+            d("focusout", t), e.labelText && !e.keepFloatingLabel && k(w)(i.value);
           },
           ["stop"]
         )),
-        onInput: w(R, ["stop"]),
+        onInput: g(R, ["stop"]),
         onKeydown: [
           a[3] || (a[3] = Q(() => d("keydownEnterPressed"), ["enter"])),
           a[4] || (a[4] = (t) => d("keydown", t))

package/dist/packages/components/lib/UIKit/{NativeSelect.vue.js → BaseSelect.vue.js}

@@ -1,6 +1,6 @@
-import { defineComponent as x, mergeModels as u, useCssVars as C, computed as v, useModel as w, useId as y, watch as S, createElementBlock as a, openBlock as d, createCommentVNode as V, createElementVNode as O, normalizeClass as c, unref as m, toDisplayString as p, Fragment as z, renderList as E } from "vue";
-const B = { class: "select-wrapper" }, D = ["for"], M = ["id"], N = ["data-idx", "selected"], I = /* @__PURE__ */ x({
-  __name: "NativeSelect",
+import { defineComponent as x, mergeModels as u, useCssVars as w, computed as C, useModel as v, useId as y, watch as S, createElementBlock as a, openBlock as d, createCommentVNode as V, createElementVNode as O, normalizeClass as c, unref as m, toDisplayString as p, Fragment as z, renderList as B } from "vue";
+const E = { class: "select-wrapper" }, D = ["for"], M = ["id"], T = ["data-idx", "selected"], N = /* @__PURE__ */ x({
+  __name: "BaseSelect",
   props: /* @__PURE__ */ u({
     labelText: { default: "" },
     options: { default: () => [] },
@@ -18,10 +18,10 @@ const B = { class: "select-wrapper" }, D = ["for"], M = ["id"], N = ["data-idx",
   }),
   emits: /* @__PURE__ */ u(["change"], ["update:modelValue"]),
   setup(o, { emit: f }) {
-    C((e) => ({
-      f3734614: k.value
+    w((e) => ({
+      "7c189782": b.value
     }));
-    const s = w(o, "modelValue"), b = f, n = y(), k = v(() => `${o.arrowSize}px`), g = ({ target: e }) => {
+    const s = v(o, "modelValue"), k = f, n = y(), b = C(() => `${o.arrowSize}px`), g = ({ target: e }) => {
       const i = (e.selectedOptions?.[0]).dataset.idx;
       if (i === void 0) return;
       const h = o.options[i];
@@ -36,7 +36,7 @@ const B = { class: "select-wrapper" }, D = ["for"], M = ["id"], N = ["data-idx",
         t && (s.value = t);
       },
       { immediate: !0 }
-    ), (e, t) => (d(), a("div", B, [
+    ), (e, t) => (d(), a("div", E, [
       e.labelText ? (d(), a("label", {
         key: 0,
         for: m(n),
@@ -44,22 +44,22 @@ const B = { class: "select-wrapper" }, D = ["for"], M = ["id"], N = ["data-idx",
       }, p(e.labelText), 11, D)) : V("", !0),
       O("select", {
         id: m(n),
-        class: c(["uikit-cursor-pointer uikit-bg-white uikit-pr-xl uikit-text-16 uikit-font-regular", {
+        class: c(["uikit-w-full uikit-cursor-pointer uikit-bg-white uikit-pr-xl uikit-text-16 uikit-font-regular", {
           "uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-py-md uikit-pl-sm": e.border
         }]),
         onChange: t[0] || (t[0] = (l) => {
-          b("change", l), g(l);
+          k("change", l), g(l);
         })
       }, [
-        (d(!0), a(z, null, E(e.options, (l, i) => (d(), a("option", {
+        (d(!0), a(z, null, B(e.options, (l, i) => (d(), a("option", {
           key: `option-${i}`,
           "data-idx": i,
           selected: r(l, s.value)
-        }, p(l.label), 9, N))), 128))
+        }, p(l.label), 9, T))), 128))
       ], 42, M)
     ]));
   }
 });
 export {
-  I as default
+  N as default
 };

package/dist/packages/components/lib/UIKit/BaseTextarea.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as T, mergeModels as n, useModel as g, ref as C, watch as h, createElementBlock as f, openBlock as b, normalizeClass as r, createElementVNode as v, createCommentVNode as L, unref as o, createVNode as x, withModifiers as u, nextTick as F } from "vue";
+import { defineComponent as $, mergeModels as n, useModel as T, ref as h, watch as C, createElementBlock as f, openBlock as b, normalizeClass as r, createElementVNode as v, createCommentVNode as L, unref as o, createVNode as x, withModifiers as u, nextTick as F } from "vue";
 import M from "./BaseFloatingLabel.vue.js";
 import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
 import { useFloatingLabel as E } from "../../../../composables/useFloatingLabel.js";
-const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelledby", "readonly", "value"], B = ["innerHTML"], q = "peer-data-[validation='invalid']/fieldset:uikit-text-w-red peer-data-[validation='valid']/fieldset:uikit-text-w-blue", S = /* @__PURE__ */ T({
+const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelledby", "readonly", "value"], B = ["innerHTML"], q = "peer-data-[validation='invalid']/fieldset:uikit-text-w-red peer-data-[validation='valid']/fieldset:uikit-text-w-blue", S = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "BaseTextarea",
   props: /* @__PURE__ */ n({
@@ -17,21 +17,21 @@ const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelle
   }),
   emits: /* @__PURE__ */ n(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
   setup(k, { expose: m, emit: p }) {
-    const t = g(k, "modelValue"), s = p, {
+    const t = T(k, "modelValue"), s = p, {
       labelState: d,
       handleFocusIn: c,
       handleFocusOut: w,
       setFloatingLabel: y,
       setInlineLabel: V
-    } = E(), a = C(null);
-    h(
+    } = E(), a = h(null);
+    C(
       t,
       (e) => {
         `${e}`.length && d.value !== "floating-label" ? y() : !e?.length && d.value !== "inline-label" && document.activeElement !== a.value && V();
       },
       { immediate: !0 }
     );
-    const $ = ({ target: e }) => {
+    const g = ({ target: e }) => {
       t.value = e.value;
     };
     return m({
@@ -59,7 +59,7 @@ const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelle
           ref_key: "textarea",
           ref: a,
           "data-cy": e.$attrs["data-cy"],
-          class: r(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-min-h-[130px] uikit-min-w-[343px] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-2xs uikit-border uikit-border-solid uikit-bg-white uikit-px-sm uikit-py-lg uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
+          class: r(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-min-h-[130px] uikit-min-w-[343px] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-py-lg uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
             { "is-invalid": e.isValid === !1 },
             { "is-valid": e.isValid },
             { "uikit-resize-none": !e.resize },
@@ -82,7 +82,7 @@ const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelle
             },
             ["stop"]
           )),
-          onInput: u($, ["stop"]),
+          onInput: u(g, ["stop"]),
           onKeydown: i[2] || (i[2] = u((l) => s("keydown", l), ["stop"])),
           onClick: i[3] || (i[3] = (l) => s("click", l)),
           value: t.value

package/dist/packages/components/lib/UIKit/BaseUploadFile.vue.js

@@ -29,7 +29,7 @@ const h = ["for"], k = ["id", "multiple", "accept"], B = /* @__PURE__ */ p({
       class: s(["base-upload-file-wrapper uikit-relative", [e.$attrs.class]])
     }, [
       i("label", {
-        class: s(["uikit-btn uikit-btn-w-ternary", e.labelClasses]),
+        class: s(["uikit-btn uikit-btn-ternary", e.labelClasses]),
         for: e.id
       }, [
         i("input", {

package/dist/packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js

@@ -19,7 +19,7 @@ const N = ["for"], q = /* @__PURE__ */ m({
   },
   emits: ["click", "change", "update:modelValue"],
   setup(t, { emit: r }) {
-    const i = f(), d = h(() => `${t.id || i}`), a = r;
+    const i = f(), d = h(() => `${t.id ?? i}`), a = r;
     b(
       () => t.checked,
       (e) => {

package/dist/packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js

@@ -13,15 +13,13 @@ const w = ["id", "data-cy"], F = /* @__PURE__ */ x({
     autoCheckResetAll: { type: Boolean, default: !1 },
     autoCheckResetEmpty: { type: Boolean, default: !1 },
     manualToggleResetButton: { type: Boolean, default: !1 },
-    getKey: { type: Function, default() {
-      return (n) => typeof n == "string" || typeof n == "number" ? `${n}` : `${n.id}`;
-    } },
+    getKey: { type: Function, default: (n) => typeof n == "string" || typeof n == "number" ? `${n}` : `${n.id}` },
     groupId: { default: "" },
     dataCy: { default: "" }
   },
   emits: ["resetted", "update:modelValue", "checkedGroup"],
   setup(n, { emit: g }) {
-    const C = (e = "") => !e || !e.trim() ? "" : (e = e.trim(), e.replace(" ", "-").toLowerCase()), y = (e) => !e?.length, o = n, r = g, c = D(/* @__PURE__ */ new Map()), s = h(() => {
+    const C = (e = "") => !e || !e.trim() ? "" : (e = e.trim(), e.replace(" ", "-").toLowerCase()), y = (e) => !e?.length, o = n, s = g, c = D(/* @__PURE__ */ new Map()), r = h(() => {
       for (const e of o.checkboxData)
         if (e.reset) return e;
       return null;
@@ -38,7 +36,7 @@ const w = ["id", "data-cy"], F = /* @__PURE__ */ x({
           `${t.id}`,
           t
         ), t.checked && e.push(t);
-      r("update:modelValue", e);
+      s("update:modelValue", e);
     })();
     const u = (e, t) => {
       const a = c.value.get(e);
@@ -54,17 +52,17 @@ const w = ["id", "data-cy"], F = /* @__PURE__ */ x({
         e.checked = !1;
       });
     }, p = () => {
-      k(), r("update:modelValue", []), r("resetted");
+      k(), s("update:modelValue", []), s("resetted");
     }, d = (e) => c.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
       if (y(o.checkboxData)) return;
       const t = c.value.get(e.id);
-      t?.reset && e.checked ? k() : s.value && !t?.reset && u(o.getKey(s.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && s.value && f.value === v.value - 1 && c.value.forEach((l) => {
+      t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === v.value - 1 && c.value.forEach((l) => {
         l.checked = !!l.reset;
-      }), o.autoCheckResetEmpty && s.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(s.value), { checked: !0 });
+      }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
       const a = [];
       c.value.forEach((l) => {
         l.checked && a.push(l);
-      }), r("update:modelValue", a), r("checkedGroup", o.groupId);
+      }), s("update:modelValue", a), s("checkedGroup", o.groupId);
     };
     return E(
       () => o.reset,

package/dist/packages/components/lib/UIKit/DatePicker.vue.js

@@ -2,8 +2,8 @@ import { defineComponent as N, ref as T, watch as V, computed as x, createBlock
 import { ArrowIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
 import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 import j from "@vuepic/vue-datepicker";
-import y from "./NativeSelect.vue.js";
-import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';import '../../../../assets/node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.16_typescript@5.8.3_/node_modules/@vuepic/vue-datepicker/dist/main.css';import '../../../../assets/packages/components/lib/UIKit/NativeSelect.css';/* empty css                  */
+import y from "./BaseSelect.vue.js";
+import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';import '../../../../assets/node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.16_typescript@5.8.3_/node_modules/@vuepic/vue-datepicker/dist/main.css';import '../../../../assets/packages/components/lib/UIKit/BaseSelect.css';/* empty css                */
 /* empty css                                                                                                                                          */
 import z from "./BaseButton.vue.js";
 import R from "./BaseInput.vue.js";

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.1.4-alpha.1",
+  "version": "2.1.4-alpha.10",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "plugins"
   ],
   "sideEffects": [
     "**/*.css"
@@ -28,6 +29,9 @@
     "./chart/*": {
       "import": "./dist/chart/*.js",
       "types": "./dist/chart/*.d.ts"
+    },
+    "./plugins/*": {
+      "import": "./plugins/*.ts"
     }
   },
   "repository": {