@wikicasa-dev/components 2.2.9-alpha.17 → 2.2.9-alpha.2

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

@@ -15,23 +15,20 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
         offset?: number;
     };
     keepState?: Nullable<"closed" | "open">;
-    disableCb?: boolean;
     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 onInput?: ((args_0: InputEvent) => 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"?: ((value: string) => any) | undefined;
         readonly onInputClick?: ((args_0: MouseEvent) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onInput" | "onKeydown" | "onUpdate:open" | "onUpdate:inputValue" | "onInputClick"> & ({
+        readonly "onUpdate:inputValue"?: ((args_0: string) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onInputClick" | "onUpdate:inputValue"> & ({
         open?: boolean;
         modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
-        inputValue?: string;
     } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         getRootElement: () => HTMLDivElement | null | undefined;
@@ -48,7 +45,7 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
             idx: number;
         }): any;
     };
-    emit: (((evt: "input", args_0: InputEvent) => void) & ((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:inputValue", value: string) => void));
+    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => 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>;
 };

package/dist/UIKit/BaseButton.d.ts

@@ -16,9 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     title?: string;
     dataCy?: string;
     type?: "button" | "submit" | "reset" | undefined;
-}, {
-    getRootElement: () => HTMLButtonElement | null;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (e: Event) => any;
     mouseover: (e: Event) => any;
     mouseout: (e: Event) => any;
@@ -41,9 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     onClick?: ((e: Event) => any) | undefined;
     onMouseover?: ((e: Event) => any) | undefined;
     onMouseout?: ((e: Event) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    buttonEl: HTMLButtonElement;
-}, HTMLButtonElement>, {
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>, {
     default?(_: {
         hover: boolean;
     }): any;

package/dist/UIKit/BaseDropDown.d.ts

@@ -51,7 +51,6 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     activeIdx: import('vue').Ref<number, number>;
     selectedIdx: import('vue').Ref<number, number>;
     getRootElement: () => HTMLDivElement | null;
-    getContentElement: () => HTMLElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => any;
     "update:toggleDropdown": (value: Optional<boolean>) => any;

package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as D, mergeModels as $, useModel as b, useId as N, useTemplateRef as y, shallowRef as d, onBeforeMount as A, watch as w, nextTick as H, createBlock as F, openBlock as h, withCtx as g, createElementBlock as P, Fragment as X, renderList as j, renderSlot as f, createElementVNode as u, normalizeClass as v, withDirectives as O, unref as q, vModelText as G, toDisplayString as J, withModifiers as Q, normalizeStyle as Y, createTextVNode as Z, vShow as _ } from "vue";
-import ee from "../BaseDropDown.vue.js";
+import { defineComponent as L, mergeModels as M, useModel as V, useTemplateRef as m, shallowRef as p, onBeforeMount as W, watch as b, nextTick as I, createBlock as F, openBlock as C, withCtx as y, createElementBlock as N, Fragment as A, renderList as H, renderSlot as c, createElementVNode as u, normalizeClass as f, withDirectives as $, vModelText as G, toDisplayString as P, withModifiers as X, normalizeStyle as j, createTextVNode as q, vShow as J } from "vue";
+import Q from "../BaseDropDown.vue.js";
 import '../../../../../assets/BaseDropDown.css';/* empty css                   */
-import te from "../BaseSelect/SelectItem.vue.js";
-import { debounce as le } from "@wikicasa-dev/utilities";
-const ne = ["id", "data-cy", "placeholder"], oe = ["innerHTML"], pe = /* @__PURE__ */ D({
+import Y from "../BaseSelect/SelectItem.vue.js";
+import { debounce as Z } from "@wikicasa-dev/utilities";
+const _ = ["readonly", "placeholder"], ee = ["innerHTML"], ue = /* @__PURE__ */ L({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ M({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -15,159 +15,148 @@ const ne = ["id", "data-cy", "placeholder"], oe = ["innerHTML"], pe = /* @__PURE
     dropdownClasses: {},
     clearButton: {},
     keepState: {},
-    disableCb: { type: Boolean, default: !1 },
     onInputChangeCb: { type: Function },
     onOptionSelectedCb: { type: [Function, null] }
   }, {
     open: { type: Boolean, default: !1 },
     openModifiers: {},
     modelValue: { default: null },
-    modelModifiers: {},
-    inputValue: {
-      default: ""
-    },
-    inputValueModifiers: {}
+    modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
-  setup(l, { expose: R, emit: x }) {
-    const s = b(l, "open"), i = b(l, "modelValue"), o = b(l, "inputValue");
-    o.value = o.value ?? i.value?.label ?? "";
-    const p = x, E = N(), k = y("inputRef"), c = d(0), m = d(!1), C = d(!!i.value?.label), S = d(null), a = d([]), T = y("dropdownRef"), B = y("hiddenSpan"), I = () => {
-      o.value = "", i.value = null;
+  emits: /* @__PURE__ */ M(["click", "inputClick", "update:inputValue", "keydown"], ["update:open", "update:modelValue"]),
+  setup(o, { expose: E, emit: O }) {
+    const s = V(o, "open"), a = V(o, "modelValue"), r = O, w = m("inputRef"), n = p(a.value?.label || ""), v = p(0), k = p(!1), g = p(null), i = p([]), h = m("dropdownRef"), S = m("hiddenSpan"), R = () => {
+      n.value = "", a.value = null, r("update:inputValue", "");
     }, U = async (t) => {
-      if (!t) {
-        a.value = [], s.value = !1;
+      if (r("update:inputValue", t), !t) {
+        i.value = [], s.value = !1;
         return;
       }
-      l.disableCb || (a.value = await S.value?.(t) || [], m.value = !0, s.value = !!a.value.length);
-    }, M = (t = -1) => {
-      const e = a.value[t];
-      !e || e.id === i.value?.id || (l.onOptionSelectedCb?.(e), o.value = e.label, s.value = !1, i.value = e, C.value = !0, a.value = []);
+      i.value = await g.value?.(t) || [], k.value = !0, s.value = !!i.value.length;
+    }, T = (t = -1) => {
+      const e = i.value[t];
+      !e || e.id === a.value?.id || (o.onOptionSelectedCb?.(e), n.value = e.label, s.value = !1, a.value = e, i.value = []);
+    }, x = () => {
+      w.value?.select();
     }, z = () => {
-      k.value?.select();
-    }, K = () => {
-      k.value?.focus();
+      w.value?.focus();
     };
-    return A(() => {
-      S.value = le({ delay: 300 }, l.onInputChangeCb);
-    }), w(
-      [o, () => B.value],
-      ([, t]) => {
-        t && H(() => {
-          if (!t) return;
-          const e = t.offsetWidth;
-          e !== c.value && (c.value = e);
+    return W(() => {
+      g.value = Z({ delay: 300 }, o.onInputChangeCb);
+    }), b(
+      [n, () => S.value],
+      ([t, e]) => {
+        e && I(() => {
+          if (!e) return;
+          const l = e.offsetWidth;
+          l !== v.value && (console.log("DEBUG:updating icon positioning", {
+            curInputValue: t
+          }), v.value = l);
         });
       },
       { immediate: !0 }
-    ), w(
-      () => T.value?.selectedIdx,
+    ), b(
+      () => h.value?.selectedIdx,
       (t) => {
         const e = t ?? -1;
-        e !== -1 && M(e);
+        e !== -1 && T(e);
       }
-    ), w(
-      i,
+    ), b(
+      a,
       (t, e) => {
-        t === e || t?.label === o.value || (o.value = t?.label || "");
+        t === e || t?.label === n.value || (n.value = t?.label || "");
       },
       { immediate: !0 }
-    ), R({
-      getRootElement: () => T.value?.getRootElement(),
-      select: z,
-      focus: K
-    }), (t, e) => (h(), F(ee, {
+    ), E({
+      getRootElement: () => h.value?.getRootElement(),
+      select: x,
+      focus: z
+    }), (t, e) => (C(), F(Q, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
-      "data-cy": l.dataCy,
+      "data-cy": o.dataCy,
       "dropdown-element": "ul",
-      "dropdown-classes": ["uikit-z-30", l.dropdownClasses],
+      "dropdown-classes": ["uikit-z-30", o.dropdownClasses],
       "open-dropdown": s.value,
-      "keep-state": !a.value.length || l.keepState === "closed" ? "closed" : "opened",
-      "activate-keyboard-controller": l.enableKeyboardController,
-      "reset-keyboard-controller": m.value,
-      "onUpdate:resetKeyboardController": e[5] || (e[5] = (n) => m.value = n),
-      "onUpdate:dropdownState": e[6] || (e[6] = (n) => s.value = n)
+      "keep-state": !i.value.length || o.keepState === "closed" ? "closed" : "opened",
+      "activate-keyboard-controller": o.enableKeyboardController,
+      "reset-keyboard-controller": k.value,
+      "onUpdate:resetKeyboardController": e[4] || (e[4] = (l) => k.value = l),
+      "onUpdate:dropdownState": e[5] || (e[5] = (l) => s.value = l)
     }, {
-      btn_slot: g(() => [
+      btn_slot: y(() => [
         u("div", {
-          class: v(["uikit-text-16", l.triggerWrapperClasses]),
-          onClick: e[4] || (e[4] = (n) => p("click", n))
+          class: f(["uikit-text-16", o.triggerWrapperClasses]),
+          onClick: e[3] || (e[3] = (l) => r("click", l))
         }, [
-          f(t.$slots, "left-icon"),
+          c(t.$slots, "left-icon"),
           u("div", {
-            class: v(["uikit-relative", l.inputWrapperClasses])
+            class: f(["uikit-relative", o.inputWrapperClasses])
           }, [
-            O(u("input", {
+            $(u("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
-                e[0] || (e[0] = (n) => o.value = n),
+                e[0] || (e[0] = (l) => n.value = l),
                 U
               ],
-              id: q(E),
-              "data-cy": l.dataCy ? `ac_input_${l.dataCy}` : "",
+              readonly: !!a.value?.label,
               type: "text",
               autocomplete: "off",
-              class: v(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
+              class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", o.inputClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               },
-              placeholder: l.placeholder,
-              onKeydown: e[1] || (e[1] = (n) => p("keydown", n)),
-              onInput: e[2] || (e[2] = (n) => {
-                p("input", n), C.value = !1;
-              }),
-              onClick: e[3] || (e[3] = (n) => {
-                p("inputClick", n), k.value?.select();
-              })
-            }, null, 42, ne), [
-              [G, o.value]
+              placeholder: o.placeholder,
+              onKeydown: e[1] || (e[1] = (l) => r("keydown", l)),
+              onClick: e[2] || (e[2] = (l) => r("inputClick", l))
+            }, null, 42, _), [
+              [G, n.value]
             ]),
             u("span", {
               ref_key: "hiddenSpan",
-              ref: B,
+              ref: S,
               class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, J(o.value), 513),
-            O(u("button", {
+            }, P(n.value), 513),
+            $(u("button", {
               type: "button",
-              class: v(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
+              class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", o.clearButton?.classes]),
               "aria-label": "Clear input",
-              style: Y({
-                left: `${c.value + (l.clearButton?.offset || 10)}px`
+              style: j({
+                left: `${v.value + (o.clearButton?.offset || 10)}px`
               }),
-              onClick: Q(I, ["stop"])
+              onClick: X(R, ["stop"])
             }, [
-              f(t.$slots, "clear-icon", {}, () => [
-                e[7] || (e[7] = Z("X", -1))
+              c(t.$slots, "clear-icon", {}, () => [
+                e[6] || (e[6] = q("X", -1))
               ])
             ], 6), [
-              [_, C.value && c.value]
+              [J, a.value?.label]
             ])
           ], 2),
-          f(t.$slots, "right-icon")
+          c(t.$slots, "right-icon")
         ], 2)
       ]),
-      default: g(({ activeIdx: n, setActiveIdx: L }) => [
-        (h(!0), P(X, null, j(a.value, (V, r) => (h(), F(te, {
-          key: r,
-          active: n === r,
+      default: y(({ activeIdx: l, setActiveIdx: D }) => [
+        (C(!0), N(A, null, H(i.value, (B, d) => (C(), F(Y, {
+          key: d,
+          active: l === d,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (W) => M(r),
-          onMouseover: (W) => L(r)
+          onClick: (K) => T(d),
+          onMouseover: (K) => D(d)
         }, {
-          default: g(() => [
-            f(t.$slots, "option-content", {
-              option: V,
-              idx: r
+          default: y(() => [
+            c(t.$slots, "option-content", {
+              option: B,
+              idx: d
             }, () => [
               u("span", {
-                innerHTML: V.label
-              }, null, 8, oe)
+                innerHTML: B.label
+              }, null, 8, ee)
             ])
           ]),
           _: 2
@@ -178,5 +167,5 @@ const ne = ["id", "data-cy", "placeholder"], oe = ["innerHTML"], pe = /* @__PURE
   }
 });
 export {
-  pe as default
+  ue as default
 };

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

@@ -1,6 +1,6 @@
-import { defineComponent as y, useTemplateRef as v, shallowRef as B, computed as n, createElementBlock as C, openBlock as M, withModifiers as s, normalizeStyle as h, normalizeClass as z, renderSlot as u, createVNode as L } from "vue";
-import g from "../../../../UIKit/StaticSpinner.js";
-const w = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], A = /* @__PURE__ */ y({
+import { defineComponent as c, ref as b, computed as l, createElementBlock as f, openBlock as v, withModifiers as s, normalizeStyle as B, normalizeClass as C, renderSlot as u, createVNode as M } from "vue";
+import z from "../../../../UIKit/StaticSpinner.js";
+const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], $ = /* @__PURE__ */ c({
   __name: "BaseButton",
   props: {
     btnClass: { default: "uikit-btn-w-primary" },
@@ -16,20 +16,17 @@ const w = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     type: {}
   },
   emits: ["mouseover", "mouseout", "click"],
-  setup(e, { expose: d, emit: r }) {
-    const a = r, m = v("buttonEl"), l = B(!1), b = n(() => e.size ? `uikit-btn-${e.size}` : ""), c = n(() => e.outlined ? "uikit-btn-outline" : ""), f = () => {
-      l.value = !0;
-    }, k = () => {
-      l.value = !1;
+  setup(e, { emit: d }) {
+    const o = d, n = b(!1), r = l(() => e.size ? `uikit-btn-${e.size}` : ""), m = l(() => e.outlined ? "uikit-btn-outline" : ""), k = () => {
+      n.value = !0;
+    }, y = () => {
+      n.value = !1;
     };
-    return d({
-      getRootElement: () => m.value
-    }), (o, t) => (M(), C("button", {
-      ref: "buttonEl",
-      id: o.$attrs.id,
+    return (a, t) => (v(), f("button", {
+      id: a.$attrs.id,
       "data-cy": e.dataCy,
       type: e.type,
-      class: z([
+      class: C([
         "uikit-btn",
         {
           "uikit-btn-empty": !e.withMinWidth,
@@ -37,33 +34,33 @@ const w = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
           "uikit-flex uikit-items-center uikit-justify-center": e.isLoading
         },
         e.btnClass,
-        b.value,
-        c.value
+        r.value,
+        m.value
       ]),
-      style: h(o.$attrs.style),
+      style: B(a.$attrs.style),
       "data-active": e.keepActive,
       disabled: e.isLoading || e.disabled,
       "aria-label": e.ariaLabel,
       title: e.title,
       onMouseover: t[0] || (t[0] = s((i) => {
-        f(), a("mouseover", i);
+        k(), o("mouseover", i);
       }, ["stop"])),
       onMouseout: t[1] || (t[1] = s((i) => {
-        k(), a("mouseout", i);
+        y(), o("mouseout", i);
       }, ["stop"])),
-      onClick: t[2] || (t[2] = (i) => a("click", i))
+      onClick: t[2] || (t[2] = (i) => o("click", i))
     }, [
-      e.isLoading ? u(o.$slots, "spinner", { key: 1 }, () => [
-        L(g, {
+      e.isLoading ? u(a.$slots, "spinner", { key: 1 }, () => [
+        M(z, {
           "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : u(o.$slots, "default", {
+      ]) : u(a.$slots, "default", {
         key: 0,
-        hover: l.value
+        hover: n.value
       })
-    ], 46, w));
+    ], 46, L));
   }
 });
 export {
-  A as default
+  $ as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as N, mergeModels as D, useId as R, useModel as E, shallowRef as x, computed as V, useTemplateRef as I, onMounted as z, onUnmounted as q, watch as l, nextTick as U, createElementBlock as j, openBlock as k, normalizeClass as i, renderSlot as K, createBlock as B, createVNode as F, unref as r, withCtx as L, createElementVNode as G, createCommentVNode as J, resolveDynamicComponent as P } from "vue";
+import { defineComponent as N, mergeModels as D, useId as R, useModel as E, shallowRef as x, computed as V, useTemplateRef as I, onMounted as z, onUnmounted as q, watch as l, nextTick as U, createElementBlock as j, openBlock as f, normalizeClass as i, renderSlot as K, createBlock as B, createVNode as F, unref as r, withCtx as L, createElementVNode as G, createCommentVNode as J, resolveDynamicComponent as P } from "vue";
 import Q from "./BaseButton.vue.js";
 import { ArrowIcon as X } from "@wikicasa-dev/svg-icons";
 import { useKeyboardController as Y } from "@wikicasa-dev/vue-composables";
@@ -29,12 +29,12 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
   }),
   emits: /* @__PURE__ */ D(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
   setup(o, { expose: S, emit: A }) {
-    const n = o, v = R(), w = A, m = E(o, "toggleDropdown"), p = E(
+    const n = o, k = R(), v = A, w = E(o, "toggleDropdown"), m = E(
       o,
       "resetKeyboardController"
     );
-    let y = !1;
-    const t = x(!1), u = x([]), M = V(() => u.value.length), s = I("container"), c = I("dropdown"), { activeIdx: d, selectedIdx: a, onKeyDownHandler: O } = Y({
+    let p = !1;
+    const t = x(!1), u = x([]), M = V(() => u.value.length), s = I("container"), y = I("dropdown"), { activeIdx: d, selectedIdx: a, onKeyDownHandler: O } = Y({
       optionsLength: M,
       isDropdownOpen: t,
       global: !1
@@ -42,26 +42,26 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
       t.value = !1;
     }, b = ({ target: e }) => {
       s.value?.contains(e) || W();
-    }, C = (e) => {
+    }, h = (e) => {
       t.value && s.value?.contains(document.activeElement) && e.key === "Tab" && (t.value = !1);
     }, $ = (e) => {
       n.activateKeyboardController && O(e);
-    }, f = () => {
+    }, c = () => {
       n.keepState === "closed" && !t.value || n.keepState === "opened" && t.value || (t.value = !t.value);
     }, T = (e) => {
       e != null && (d.value = e);
     }, H = (e) => {
       e != null && (a.value = e);
-    }, h = () => {
-      c.value && (u.value = Array.from(c.value.children));
+    }, C = () => {
+      y.value && (u.value = Array.from(y.value.children));
     };
     return z(() => {
-      h();
+      C();
     }), q(() => {
-      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", C));
-    }), l(p, (e) => {
+      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", h));
+    }), l(m, (e) => {
       e && (d.value = -1, a.value = -1, U(() => {
-        h(), p.value = !1;
+        C(), m.value = !1;
       }));
     }), l(
       () => n.openDropdown,
@@ -72,29 +72,28 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
         immediate: !0
       }
     ), l(t, (e) => {
-      w("update:dropdownState", e);
+      v("update:dropdownState", e);
     }), l(t, (e) => {
-      !e || y || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", C), y = !0);
-    }), l(m, (e) => {
-      e && (t.value = !t.value, m.value = !1);
+      !e || p || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", h), p = !0);
+    }), l(w, (e) => {
+      e && (t.value = !t.value, w.value = !1);
     }), l(a, (e) => {
       e !== -1 && u.value[e].querySelector("a")?.click();
     }), S({
       activeIdx: d,
       selectedIdx: a,
-      getRootElement: () => s.value,
-      getContentElement: () => c.value
-    }), (e, g) => (k(), j("div", {
+      getRootElement: () => s.value
+    }), (e, g) => (f(), j("div", {
       ref: "container",
       class: i(["uikit-relative uikit-block", e.$attrs.class]),
       onKeydown: $
     }, [
       K(e.$slots, "btn_slot", {
-        toggleDropdown: f,
+        toggleDropdown: c,
         isOpen: t.value
       }, () => [
         F(Q, {
-          id: r(v),
+          id: r(k),
           type: "button",
           "data-cy": o.dataCy,
           class: i([
@@ -104,7 +103,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
           "aria-expanded": t.value,
           "btn-class": "uikit-btn-single-selection",
           onClick: g[0] || (g[0] = (_) => {
-            w("click"), f();
+            v("click"), c();
           })
         }, {
           default: L(() => [
@@ -112,7 +111,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
               class: i(["uikit-mr-5px", o.labelClasses]),
               innerHTML: o.btnLabel
             }, null, 10, Z),
-            o.withArrowIcon ? (k(), B(r(X), {
+            o.withArrowIcon ? (f(), B(r(X), {
               key: 0,
               class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
               width: o.arrowWidth,
@@ -123,8 +122,8 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (k(), B(P(o.dropdownElement), {
-        id: "dropdown_" + r(v),
+      (f(), B(P(o.dropdownElement), {
+        id: "dropdown_" + r(k),
         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", [
@@ -139,7 +138,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
         default: L(() => [
           K(e.$slots, "default", {
             isOpen: t.value,
-            toggleDropdown: f,
+            toggleDropdown: c,
             activeIdx: r(d),
             selectedIdx: r(a),
             setActiveIdx: T,

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

@@ -110,8 +110,8 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
             }, [
               D(K(V), {
                 class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
-                width: e.closeIcon?.size || 20,
-                height: e.closeIcon?.size || 20
+                width: e.closeIcon?.size || 30,
+                height: e.closeIcon?.size || 30
               }, null, 8, ["class", "width", "height"])
             ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [

package/dist/packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as u, useTemplateRef as c, watch as d, nextTick as m, createElementBlock as r, openBlock as f, normalizeClass as v, renderSlot as k, createElementVNode as x } from "vue";
-const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u({
+import { defineComponent as u, useTemplateRef as r, watch as m, nextTick as c, createElementBlock as d, openBlock as f, normalizeClass as k, renderSlot as v, createElementVNode as x } from "vue";
+const p = ["tabindex"], b = ["innerHTML"], $ = /* @__PURE__ */ u({
   __name: "SelectItem",
   props: {
     label: { default: "" },
@@ -7,34 +7,33 @@ const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u(
     idx: { default: -1 }
   },
   emits: ["click", "mouseover"],
-  setup(t, { emit: o }) {
-    const a = o, i = t, n = c("liItem");
-    return d(
-      () => i.active,
+  setup(l, { emit: a }) {
+    const n = a, t = l, o = r("liItem");
+    return m(
+      () => t.active,
       (e) => {
-        e && m(() => {
-          n.value && n.value.focus();
+        e && c(() => {
+          o.value && o.value.focus();
         });
       },
       { immediate: !0 }
-    ), (e, l) => (f(), r("li", {
+    ), (e, i) => (f(), d("li", {
       ref: "liItem",
-      class: v(["uikit-list-none uikit-text-w-black", [
-        { "active uikit-bg-w-cultured": t.active },
+      class: k(["uikit-list-none uikit-text-w-black", [
+        { "active uikit-bg-w-cultured": l.active },
         "uikit-outline-none",
         e.$attrs.class
       ]]),
-      "data-active": t.active,
       tabindex: e.$attrs.tabindex ?? -1,
-      onClick: l[0] || (l[0] = (s) => a("click", i.idx)),
-      onMouseover: l[1] || (l[1] = (s) => a("mouseover", i.idx))
+      onClick: i[0] || (i[0] = (s) => n("click", t.idx)),
+      onMouseover: i[1] || (i[1] = (s) => n("mouseover", t.idx))
     }, [
-      k(e.$slots, "default", { itemIdx: t.idx }, () => [
+      v(e.$slots, "default", { itemIdx: l.idx }, () => [
         x("span", {
-          innerHTML: i.label
-        }, null, 8, p)
+          innerHTML: t.label
+        }, null, 8, b)
       ])
-    ], 42, b));
+    ], 42, p));
   }
 });
 export {

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

@@ -1,8 +1,8 @@
-import { defineComponent as v, ref as D, computed as h, watch as E, renderSlot as b, createElementVNode as $, normalizeClass as g, createElementBlock as B, createCommentVNode as A, openBlock as C, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
+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__ */ v({
+const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "CheckboxGroup",
   props: {
@@ -20,14 +20,14 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
     dataCy: { default: "" }
   },
   emits: ["resetted", "update:modelValue", "checkedGroup"],
-  setup(a, { emit: y }) {
-    const o = a, s = y, l = D(
+  setup(a, { emit: C }) {
+    const o = a, s = C, l = v(
       /* @__PURE__ */ new Map()
     ), r = h(() => {
       for (const e of o.checkboxData)
         if (e.reset) return e;
       return null;
-    }), x = h(() => o.checkboxData.length), f = h(() => {
+    }), y = h(() => o.checkboxData.length), f = h(() => {
       let e = 0;
       return l.value.forEach((t) => {
         t.checked && e++;
@@ -60,7 +60,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
     }, 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 === x.value - 1 && l.value.forEach((n) => {
+      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) => {
         n.checked = !!n.reset;
       }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
       const c = [];
@@ -68,7 +68,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
         n.checked && c.push(n);
       }), s("update:modelValue", c), s("checkedGroup", o.groupId);
     };
-    return E(
+    return D(
       () => o.reset,
       (e) => {
         e && m();
@@ -78,9 +78,9 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
       handleChange: i,
       checkboxesData: a.checkboxData
     }, () => [
-      $("div", {
+      E("div", {
         id: a.groupId,
-        class: g(["checkbox-group-container", e.$attrs.class || ""]),
+        class: $(["checkbox-group-container", e.$attrs.class || ""]),
         "data-cy": a.dataCy
       }, [
         b(e.$slots, "checkbox_elements", {
@@ -89,19 +89,19 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
           checkboxesData: a.checkboxData,
           reset: m
         }, () => [
-          a.checkboxData ? (C(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (C(), K(N, {
+          a.checkboxData ? (g(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (g(), K(N, {
             id: a.getKey(c),
             key: n,
             "data-cy": c.dataCy ?? `checkbox_${V(L)(`${c.label}`)}`,
             label: c.label,
             inline: a.formCheckInline,
             "model-value": d(c),
-            class: g([
+            "container-class": [
               a.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
               a.checkboxContainerClasses
-            ]),
-            onChange: t[0] || (t[0] = (p) => i(p))
-          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "class"]))), 128)) : A("", !0)
+            ],
+            onChange: t[0] || (t[0] = (x) => i(x))
+          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : A("", !0)
         ])
       ], 10, T)
     ]);

package/package.json

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