@wikicasa-dev/components 2.2.8-alpha.32 → 2.2.8-alpha.4

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

@@ -1,11 +1,11 @@
-import { defineComponent as T, mergeModels as E, useId as H, useModel as D, shallowRef as x, computed as N, useTemplateRef as B, onMounted as R, onUnmounted as V, watch as l, nextTick as z, createElementBlock as U, openBlock as f, normalizeClass as i, renderSlot as I, createBlock as L, createVNode as q, unref as r, withCtx as S, createElementVNode as G, createCommentVNode as j, resolveDynamicComponent as F } from "vue";
-import J from "./BaseButton.vue.js";
-import { ArrowIcon as P } from "@wikicasa-dev/svg-icons";
-import { useKeyboardController as Q } from "@wikicasa-dev/vue-composables";
-const X = ["innerHTML"], oe = /* @__PURE__ */ T({
+import { defineComponent as L, mergeModels as b, useId as M, useModel as A, ref as h, computed as E, useTemplateRef as O, watch as d, onBeforeMount as W, onMounted as $, onUnmounted as H, createElementBlock as K, openBlock as c, withModifiers as y, normalizeClass as l, renderSlot as C, createBlock as g, createVNode as N, unref as n, withCtx as D, createElementVNode as T, createCommentVNode as V, resolveDynamicComponent as q } from "vue";
+import z from "./BaseButton.vue.js";
+import { ArrowIcon as R } from "@wikicasa-dev/svg-icons";
+import { useKeyboardController as U } from "@wikicasa-dev/vue-composables";
+const j = ["innerHTML"], X = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ E({
+  props: /* @__PURE__ */ b({
     dropdownClasses: { default: "" },
     btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
@@ -23,123 +23,105 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ T({
     dataCy: { default: "" }
   }, {
     toggleDropdown: { type: Boolean, default: void 0 },
-    toggleDropdownModifiers: {},
-    resetKeyboardController: { type: Boolean, default: !1 },
-    resetKeyboardControllerModifiers: {}
+    toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ E(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
-  setup(o, { expose: K, emit: A }) {
-    const n = o, k = H(), v = A, m = D(o, "toggleDropdown"), w = D(
-      o,
-      "resetKeyboardController"
-    );
-    let p = !1;
-    const t = x(!1), u = x([]), M = N(() => u.value.length), s = B("container"), y = B("dropdown"), { activeIdx: d, selectedIdx: a } = Q({
-      optionsLength: M,
-      isDropdownOpen: t,
-      activate: n.activateKeyboardController
-    }), O = () => {
-      t.value = !1;
-    }, b = ({ target: e }) => {
-      s.value?.contains(e) || O();
-    }, C = (e) => {
-      t.value && s.value?.contains(document.activeElement) && (console.log("DEBUG:closing dropdown", document.activeElement), e.key === "Tab" && (t.value = !1));
-    }, c = () => {
-      n.keepState === "closed" && !t.value || n.keepState === "opened" && t.value || (t.value = !t.value);
-    }, W = (e) => {
-      e != null && (d.value = e);
-    }, $ = (e) => {
-      e != null && (a.value = e);
-    }, h = () => {
-      y.value && (u.value = Array.from(y.value.children));
-    };
-    return R(() => {
-      h();
-    }), V(() => {
-      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", C));
-    }), l(w, (e) => {
-      e && (d.value = -1, a.value = -1, z(() => {
-        h(), w.value = !1;
-      }));
-    }), l(
-      () => n.openDropdown,
+  emits: /* @__PURE__ */ b(["click", "update:dropdownState"], ["update:toggleDropdown"]),
+  setup(t, { emit: B }) {
+    const i = t, f = M(), k = B, w = A(t, "toggleDropdown"), o = h(!1), r = h([]), x = E(() => r.value.length), v = O("dropdown"), { activeIdx: m, selectedIdx: u } = U({
+      optionsLength: x,
+      isDropdownOpen: o,
+      activate: i.activateKeyboardController
+    });
+    d(
+      () => i.openDropdown,
       (e) => {
-        t.value = e;
+        o.value = e;
       },
       {
         immediate: !0
       }
-    ), l(t, (e) => {
-      v("update:dropdownState", e);
-    }), l(t, (e) => {
-      !e || p || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", C), p = !0);
-    }), l(m, (e) => {
-      e && (t.value = !t.value, m.value = !1);
-    }), l(a, (e) => {
-      e !== -1 && u.value[e].querySelector("a")?.click();
-    }), K({
-      activeIdx: d,
-      selectedIdx: a,
-      getRootElement: () => s.value
-    }), (e, g) => (f(), U("div", {
-      ref: "container",
-      class: i(["uikit-relative uikit-block", e.$attrs.class])
+    ), d(o, (e) => {
+      k("update:dropdownState", e);
+    }), d(w, (e) => {
+      e && (o.value = !o.value, w.value = !1);
+    }), d(u, (e) => {
+      e !== -1 && r.value[e].querySelector("a")?.click();
+    });
+    const p = () => {
+      o.value = !1;
+    }, s = () => {
+      i.keepState === "closed" && !o.value || i.keepState === "opened" && o.value || (o.value = !o.value);
+    }, I = (e) => {
+      e != null && (m.value = e);
+    }, S = (e) => {
+      e != null && (u.value = e);
+    };
+    return W(() => {
+      i.closeWhenClickedOutside && document.body.addEventListener("click", p);
+    }), $(() => {
+      v.value && (r.value = v.value.children || []);
+    }), H(() => {
+      i.closeWhenClickedOutside && document.body.removeEventListener("click", p);
+    }), (e, a) => (c(), K("div", {
+      class: l(["uikit-relative uikit-block", e.$attrs.class]),
+      onClick: a[1] || (a[1] = y((F) => {
+        k("click"), s();
+      }, ["stop"]))
     }, [
-      I(e.$slots, "btn_slot", {
-        toggleDropdown: c,
-        isOpen: t.value
+      C(e.$slots, "btn_slot", {
+        toggleDropdown: s,
+        isOpen: o.value
       }, () => [
-        q(J, {
-          id: r(k),
+        N(z, {
+          id: n(f),
           type: "button",
-          "data-cy": o.dataCy,
-          class: i([
+          "data-cy": t.dataCy,
+          class: l([
             "!uikit-flex uikit-w-full uikit-items-center uikit-truncate",
-            o.btnClasses
+            t.btnClasses
           ]),
-          "aria-expanded": t.value,
-          "btn-class": "uikit-btn-single-selection",
-          onClick: g[0] || (g[0] = (Y) => {
-            v("click"), c();
-          })
+          "aria-expanded": o.value,
+          "btn-class": "uikit-btn-single-selection"
         }, {
-          default: S(() => [
-            G("span", {
-              class: i(["uikit-mr-5px", o.labelClasses]),
-              innerHTML: o.btnLabel
-            }, null, 10, X),
-            o.withArrowIcon ? (f(), L(r(P), {
+          default: D(() => [
+            T("span", {
+              class: l(["uikit-mr-5px", t.labelClasses]),
+              innerHTML: t.btnLabel
+            }, null, 10, j),
+            t.withArrowIcon ? (c(), g(n(R), {
               key: 0,
-              class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
-              width: o.arrowWidth,
-              height: o.arrowWidth,
-              "stroke-color": o.arrowStrokeColor
-            }, null, 8, ["class", "width", "height", "stroke-color"])) : j("", !0)
+              class: l(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", o.value ? "uikit-rotate-180" : ""]),
+              width: t.arrowWidth,
+              height: t.arrowWidth,
+              "stroke-color": t.arrowStrokeColor
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : V("", !0)
           ]),
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (f(), L(F(o.dropdownElement), {
-        id: "dropdown_" + r(k),
+      (c(), g(q(t.dropdownElement), {
+        id: "dropdown_" + n(f),
         ref: "dropdown",
-        "data-cy": o.dataCy && `${o.dataCy}_dropdown`,
-        class: i(["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
-          o.dropdownClasses,
-          t.value ? "uikit-flex" : "uikit-hidden",
-          { "uikit-bottom-[55px] uikit-rounded-xs": o.direction === "up" },
-          { "uikit-rounded-b uikit-border-t-0": o.direction === "down" },
-          { "uikit-absolute": o.isAbsolute }
+        "data-cy": t.dataCy && `${t.dataCy}_dropdown`,
+        class: l(["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
+          t.dropdownClasses,
+          o.value ? "uikit-flex" : "uikit-hidden",
+          { "uikit-bottom-[55px] uikit-rounded-xs": t.direction === "up" },
+          { "uikit-rounded-b uikit-border-t-0": t.direction === "down" },
+          { "uikit-absolute": t.isAbsolute }
         ]]),
-        "aria-hidden": !t.value
+        "aria-hidden": !o.value,
+        onClick: a[0] || (a[0] = y(() => {
+        }, ["stop"]))
       }, {
-        default: S(() => [
-          I(e.$slots, "default", {
-            isOpen: t.value,
-            toggleDropdown: c,
-            activeIdx: r(d),
-            selectedIdx: r(a),
-            setActiveIdx: W,
-            setSelectedIdx: $
+        default: D(() => [
+          C(e.$slots, "default", {
+            isOpen: o.value,
+            toggleDropdown: s,
+            activeIdx: n(m),
+            selectedIdx: n(u),
+            setActiveIdx: I,
+            setSelectedIdx: S
           })
         ]),
         _: 3
@@ -148,5 +130,5 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ T({
   }
 });
 export {
-  oe as default
+  X as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as d, createElementBlock as a, openBlock as s, withModifiers as u, normalizeClass as t, createElementVNode as r, createCommentVNode as k } from "vue";
+import { defineComponent as d, createElementBlock as a, openBlock as s, withModifiers as o, normalizeClass as t, createElementVNode as k, createCommentVNode as r } from "vue";
 const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ d({
   __name: "BaseFloatingLabel",
   props: {
@@ -11,14 +11,14 @@ const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ d({
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const o = n;
+    const u = n;
     return (i, l) => (s(), a("label", {
       for: i.$attrs.for,
-      class: t(["uikit-pointer-events-none uikit-absolute uikit-left-15px uikit-h-5", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
-      onClick: l[0] || (l[0] = u((f) => o("click"), ["stop"]))
+      class: t(["uikit-pointer-events-none uikit-absolute uikit-left-15px uikit-h-5 uikit-text-sm", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
+      onClick: l[0] || (l[0] = o((m) => u("click"), ["stop"]))
     }, [
-      r("span", {
-        class: t(["uikit-font-medium [font-size:inherit]", [
+      k("span", {
+        class: t(["uikit-text uikit-font-medium", [
           e.disabled ? "uikit-text-w-secondary" : "uikit-text-w-black",
           e.labelTextClasses
         ]]),
@@ -26,12 +26,12 @@ const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ d({
       }, null, 10, c),
       i.$attrs.required ? (s(), a("sup", {
         key: 0,
-        class: t(["uikit-absolute -uikit-top-[0.3rem] [font-size:inherit]", [
+        class: t(["uikit-absolute -uikit-top-[0.3rem] uikit-text", [
           { "uikit-text-w-secondary": e.disabled },
           { "uikit-text-w-danger": e.isValid === !1 },
           { "uikit-text-w-primary": (e.isValid || e.isValid === null) && !e.disabled }
         ]])
-      }, " *", 2)) : k("", !0)
+      }, " *", 2)) : r("", !0)
     ], 10, b));
   }
 });

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

@@ -1,7 +1,7 @@
-import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as r, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as d, createVNode as D, unref as K, nextTick as N } from "vue";
+import { defineComponent as T, ref as n, useTemplateRef as z, onUnmounted as H, watch as I, createBlock as O, openBlock as r, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as d, createVNode as D, unref as K, nextTick as N } from "vue";
 import { isWindows as C, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
 import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
-const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
+const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ T({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -11,7 +11,6 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
     customModalHeaderClasses: {},
     customModalBodyClasses: {},
     customModalFooterClasses: {},
-    closeIcon: {},
     withCloseIcon: { type: Boolean, default: !0 },
     showModal: { type: Boolean, default: !0 },
     headerTitle: { default: "" },
@@ -25,7 +24,7 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
   },
   emits: ["closed", "opened", "dialogClick"],
   setup(e, { emit: g }) {
-    const c = g, i = n(!1), m = n(null), a = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
+    const c = g, i = n(!1), m = n(null), a = z("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
       t === "Escape" && o();
     }, x = () => {
       document?.body.addEventListener("keydown", f);
@@ -54,9 +53,9 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
         m.value?.classList.add("uikit-hidden"), c("closed");
       }, 250);
     };
-    return z(() => {
+    return H(() => {
       b(), document?.documentElement.classList.remove("uikit-no-scrolling"), C() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
-    }), H(
+    }), I(
       () => e.showModal,
       async (t) => {
         !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
@@ -103,16 +102,16 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
               key: 0,
               id: "close-icon-btn",
               "data-cy": "bbt-default-close-icon-btn",
-              class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
+              class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent", e.closeIconBtnClasses]),
               type: "button",
               "aria-label": "Close",
               onClick: y(o, ["prevent", "stop"])
             }, [
               D(K(V), {
-                class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
-                width: e.closeIcon?.size || 30,
-                height: e.closeIcon?.size || 30
-              }, null, 8, ["class", "width", "height"])
+                class: "bbt-close-icon uikit-box-border uikit-p-5px",
+                width: 30,
+                height: 30
+              })
             ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [
               l("span", {

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

@@ -14,7 +14,7 @@ const N = ["for"], j = /* @__PURE__ */ m({
     label: { default: "" },
     modelValue: { type: Boolean, default: !1 }
   },
-  emits: ["click", "update:modelValue", "change"],
+  emits: ["click", "change", "update:modelValue"],
   setup(e, { emit: r }) {
     const l = f(), d = h(() => `${e.id ?? l}`), a = r;
     b(
@@ -31,7 +31,7 @@ const N = ["for"], j = /* @__PURE__ */ m({
       }), a("update:modelValue", t));
     };
     return (t, o) => (u(), C("label", {
-      class: "uikit-checkbox-btn uikit-flex uikit-items-center uikit-gap-[12px]",
+      class: "uikit-flex uikit-items-center uikit-gap-[12px] uikit-text-16",
       for: d.value,
       onClick: o[0] || (o[0] = (s) => a("click", s))
     }, [
@@ -40,7 +40,7 @@ const N = ["for"], j = /* @__PURE__ */ m({
         "model-value": e.modelValue,
         "data-cy": e.dataCy,
         disabled: e.disabled,
-        class: y(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
+        class: y(["data-[state='unchecked']:uikit-border-w-lightgray uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid", [
           {
             "uikit-bg-white": !e.modelValue,
             "uikit-bg-w-primary": e.modelValue

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

@@ -1,8 +1,7 @@
-import { defineComponent as p, ref as v, computed as h, watch as D, renderSlot as b, createElementVNode as E, normalizeClass as $, createElementBlock as B, createCommentVNode as A, openBlock as g, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
-import { stringToHyphened as L, isArrNullOrEmpty as G } from "@wikicasa-dev/utilities";
-import N from "./CheckboxBtn.vue.js";
-import '../../../../../assets/CheckboxBtn.css';/* empty css                 */
-const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
+import { defineComponent as x, ref as p, computed as h, watch as v, renderSlot as b, createElementVNode as D, normalizeClass as E, createElementBlock as $, createCommentVNode as B, openBlock as g, Fragment as A, renderList as I, createBlock as R, unref as K } from "vue";
+import { stringToHyphened as V, isArrNullOrEmpty as L } from "@wikicasa-dev/utilities";
+import G from "./CheckboxBtn.vue.js";
+const N = ["id", "data-cy"], O = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "CheckboxGroup",
   props: {
@@ -15,38 +14,36 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
     autoCheckResetAll: { type: Boolean, default: !1 },
     autoCheckResetEmpty: { type: Boolean, default: !1 },
     manualToggleResetButton: { type: Boolean, default: !1 },
-    getKey: { type: Function, default: (a) => typeof a == "string" || typeof a == "number" ? `${a}` : `${a.id}` },
+    getKey: { type: Function, default: (t) => typeof t == "string" || typeof t == "number" ? `${t}` : `${t.id}` },
     groupId: { default: "" },
     dataCy: { default: "" }
   },
   emits: ["resetted", "update:modelValue", "checkedGroup"],
-  setup(a, { emit: C }) {
-    const o = a, s = C, l = v(
-      /* @__PURE__ */ new Map()
-    ), r = h(() => {
+  setup(t, { emit: C }) {
+    const o = t, s = C, l = p(/* @__PURE__ */ new Map()), r = h(() => {
       for (const e of o.checkboxData)
         if (e.reset) return e;
       return null;
     }), y = h(() => o.checkboxData.length), f = h(() => {
       let e = 0;
-      return l.value.forEach((t) => {
-        t.checked && e++;
+      return l.value.forEach((a) => {
+        a.checked && e++;
       }), e;
     });
     (() => {
       const e = [];
-      for (const t of o.checkboxData)
-        l.value.set(`${t.id}`, {
-          ...t,
-          checked: !!t.checked
-        }), t.checked && e.push(t);
+      for (const a of o.checkboxData)
+        a.checked = !!a.checked, l.value.set(
+          `${a.id}`,
+          a
+        ), a.checked && e.push(a);
       s("update:modelValue", e);
     })();
-    const u = (e, t) => {
+    const u = (e, a) => {
       const c = l.value.get(e);
       if (c) {
-        if (t) {
-          l.value.set(e, { ...c, ...t });
+        if (a) {
+          l.value.set(e, { ...c, ...a });
           return;
         }
         l.value.set(e, { ...c, checked: !c.checked });
@@ -58,55 +55,55 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
     }, m = () => {
       k(), s("update:modelValue", []), s("resetted");
     }, d = (e) => l.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
-      if (G(o.checkboxData)) return;
-      const t = l.value.get(e.id);
-      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 === y.value - 1 && l.value.forEach((n) => {
+      if (L(o.checkboxData)) return;
+      const a = l.value.get(e.id);
+      a?.reset && e.checked ? k() : r.value && !a?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === y.value - 1 && l.value.forEach((n) => {
         n.checked = !!n.reset;
-      }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
+      }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !a?.reset) && u(o.getKey(r.value), { checked: !0 });
       const c = [];
       l.value.forEach((n) => {
         n.checked && c.push(n);
       }), s("update:modelValue", c), s("checkedGroup", o.groupId);
     };
-    return D(
+    return v(
       () => o.reset,
       (e) => {
         e && m();
       }
-    ), (e, t) => b(e.$slots, "default", {
+    ), (e, a) => b(e.$slots, "default", {
       isActive: d,
       handleChange: i,
-      checkboxesData: a.checkboxData
+      checkboxesData: t.checkboxData
     }, () => [
-      E("div", {
-        id: a.groupId,
-        class: $(["checkbox-group-container", e.$attrs.class || ""]),
-        "data-cy": a.dataCy
+      D("div", {
+        id: t.groupId,
+        class: E(["checkbox-group-container", e.$attrs.class || ""]),
+        "data-cy": t.dataCy
       }, [
         b(e.$slots, "checkbox_elements", {
           isActive: d,
           handleChange: i,
-          checkboxesData: a.checkboxData,
+          checkboxesData: t.checkboxData,
           reset: m
         }, () => [
-          a.checkboxData ? (g(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (g(), K(N, {
-            id: a.getKey(c),
+          t.checkboxData ? (g(!0), $(A, { key: 0 }, I(t.checkboxData, (c, n) => (g(), R(G, {
+            id: t.getKey(c),
             key: n,
-            "data-cy": c.dataCy ?? `checkbox_${V(L)(`${c.label}`)}`,
+            "data-cy": c.dataCy ?? `checkbox_${K(V)(`${c.label}`)}`,
             label: c.label,
-            inline: a.formCheckInline,
+            inline: t.formCheckInline,
             "model-value": d(c),
             "container-class": [
-              a.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
-              a.checkboxContainerClasses
+              t.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
+              t.checkboxContainerClasses
             ],
-            onChange: t[0] || (t[0] = (x) => i(x))
-          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : A("", !0)
+            onChange: i
+          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : B("", !0)
         ])
-      ], 10, T)
+      ], 10, N)
     ]);
   }
 });
 export {
-  j as default
+  O as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.2.8-alpha.32",
+  "version": "2.2.8-alpha.4",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,7 +44,7 @@
     "vue": "^3.5.0",
     "date-fns": "^4.0.0",
     "@wikicasa-dev/svg-icons": "^1.2.24",
-    "@wikicasa-dev/vue-composables": "^0.0.27",
+    "@wikicasa-dev/vue-composables": "^0.0.25",
     "@wikicasa-dev/types": "^2.4.0",
     "@wikicasa-dev/utilities": "^1.2.0"
   },
@@ -64,7 +64,7 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@wikicasa-dev/svg-icons": "1.2.24",
-    "@wikicasa-dev/vue-composables": "0.0.27",
+    "@wikicasa-dev/vue-composables": "0.0.25",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
     "@wikicasa-dev/types": "2.4.6",
     "@wikicasa-dev/utilities": "1.2.0",

package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts

@@ -1,53 +0,0 @@
-import { AccessibleSelectOptions } from '../AccessibleSelect';
-import { ClassTypeProp } from '../types';
-import { Nullable } from '@wikicasa-dev/types';
-export interface ClearableAutocompleteProps<TID extends string | number | undefined, TPayload> {
-    dataCy?: string;
-    placeholder?: string;
-    enableKeyboardController?: boolean;
-    triggerWrapperClasses?: ClassTypeProp;
-    inputWrapperClasses?: ClassTypeProp;
-    inputClasses?: ClassTypeProp;
-    dropdownClasses?: ClassTypeProp;
-    clearButton?: {
-        classes?: ClassTypeProp;
-        /** Space between the input element and the clear button */
-        offset?: number;
-    };
-    keepState?: Nullable<"closed" | "open">;
-    onInputChangeCb: (v: string) => Promise<AccessibleSelectOptions<TPayload, TID>[]>;
-    onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>;
-}
-declare const _default: <TID extends string | number | undefined, TPayload>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => any) | undefined;
-        readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
-        readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:inputValue"?: ((args_0: string) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onUpdate:inputValue"> & ({
-        open?: boolean;
-        modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
-    } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{
-        select: () => void;
-        getRootElement: () => HTMLDivElement | null | undefined;
-    }>): void;
-    attrs: any;
-    slots: {
-        'left-icon'?(_: {}): any;
-        'clear-icon'?(_: {}): any;
-        'right-icon'?(_: {}): any;
-        'option-content'?(_: {
-            option: AccessibleSelectOptions<TPayload, TID>;
-            idx: number;
-        }): any;
-    };
-    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
-}>) => import('vue').VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/UIKit/Autocomplete/ClearableAutocomplete.js

@@ -1,5 +0,0 @@
-import o from "../../packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
-import '../../assets/ClearableAutocomplete.css';/* empty css                                                                          */
-export {
-  o as default
-};

package/dist/assets/CheckboxBtn.css

@@ -1 +0,0 @@
-.uikit-checkbox-btn{--font-size: 16px;font-size:var(--font-size)}

package/dist/assets/ClearableAutocomplete.css

@@ -1 +0,0 @@
-.uikit-clearable-autocomplete{--input-padding: 0;--input-margin: 0}.uikit-clearable-autocomplete input{margin:var(--input-margin);padding:var(--input-padding)}.uikit-clearable-autocomplete .uikit-clear-btn{--bg-color: transparent;background-color:var(--bg-color)}