@wikicasa-dev/components 1.9.16 → 1.9.17

package/dist/AccessibleSelect.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.B43ikA_r.js";
+import { _ as f } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.BZJiuA9q.js";
 export {
   f as default
 };

package/dist/BaseAutocomplete.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.jggoW8dE.js";
+import { _ as f } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.Cvm5m3ps.js";
 export {
   f as default
 };

package/dist/BaseBreadcrumb.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/BaseBreadcrumb.vue_vue_type_script_setup_true_lang.X16QIoKI.js";
+import { _ as f } from "./chunks/BaseBreadcrumb.vue_vue_type_script_setup_true_lang.CYvEsNdp.js";
 export {
   f as default
 };

package/dist/BaseDropDown.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.ByKK5PjE.js";
+import { _ as f } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.CZLqPgDd.js";
 export {
   f as default
 };

package/dist/SelectItem.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
+import { _ as f } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.C2Kcvwa7.js";
 export {
   f as default
 };

package/dist/UIKit/BaseBreadcrumb.vue.d.ts

@@ -3,9 +3,12 @@ type BreadcrumbItemsType = {
     label: string;
     active?: boolean;
 };
+type BreadcrumbItemsTypeWithIdx = BreadcrumbItemsType & {
+    idx: number;
+};
 declare function __VLS_template(): {
     item?(_: {
-        item: BreadcrumbItemsType;
+        item: BreadcrumbItemsTypeWithIdx;
     }): any;
     separator?(_: {}): any;
 };

package/dist/UIKit/BaseDropDown.vue.d.ts

@@ -1,3 +1,5 @@
+import { ClassType } from '@wikicasa-dev/types';
+
 declare function __VLS_template(): {
     btn_slot?(_: {
         toggleDropdown: () => void;
@@ -6,18 +8,16 @@ declare function __VLS_template(): {
     default?(_: {
         isOpen: boolean;
         toggleDropdown: () => void;
+        activeIdx: number;
+        selectedIdx: number;
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string;
-    dropdownClasses?: string | string[] | (Record<string, boolean> | string)[];
-    containerDropdownClasses?: string;
-    iconName?: string;
-    iconClasses?: string;
+    dropdownClasses?: ClassType;
     btnClasses?: string;
     withArrowIcon?: boolean;
     btnLabel?: string;
-    labelClasses?: string;
+    labelClasses?: ClassType;
     direction?: "up" | "down";
     arrowWidth?: number;
     isAbsolute?: boolean;
@@ -25,12 +25,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     closeWhenClickedOutside?: boolean;
     dropdownElement?: "div" | "ul" | "ol";
     keepState?: "opened" | "closed" | "";
+    activateKeyboardController?: boolean;
 }>, {
-    id: string;
-    containerDropdownClasses: string;
     dropdownClasses: string;
-    iconClasses: string;
-    iconName: string;
     btnClasses: string;
     btnLabel: string;
     labelClasses: string;
@@ -42,19 +39,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     closeWhenClickedOutside: boolean;
     dropdownElement: string;
     keepState: string;
+    activateKeyboardController: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => void;
     "update:dropdownState": (args_0: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string;
-    dropdownClasses?: string | string[] | (Record<string, boolean> | string)[];
-    containerDropdownClasses?: string;
-    iconName?: string;
-    iconClasses?: string;
+    dropdownClasses?: ClassType;
     btnClasses?: string;
     withArrowIcon?: boolean;
     btnLabel?: string;
-    labelClasses?: string;
+    labelClasses?: ClassType;
     direction?: "up" | "down";
     arrowWidth?: number;
     isAbsolute?: boolean;
@@ -62,12 +56,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     closeWhenClickedOutside?: boolean;
     dropdownElement?: "div" | "ul" | "ol";
     keepState?: "opened" | "closed" | "";
+    activateKeyboardController?: boolean;
 }>, {
-    id: string;
-    containerDropdownClasses: string;
     dropdownClasses: string;
-    iconClasses: string;
-    iconName: string;
     btnClasses: string;
     btnLabel: string;
     labelClasses: string;
@@ -79,17 +70,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     closeWhenClickedOutside: boolean;
     dropdownElement: string;
     keepState: string;
+    activateKeyboardController: boolean;
 }>>> & Readonly<{
     onClick?: (() => any) | undefined;
     "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
 }>, {
-    id: string;
     direction: "up" | "down";
-    labelClasses: string;
-    iconName: string;
-    dropdownClasses: string | string[] | (Record<string, boolean> | string)[];
-    containerDropdownClasses: string;
-    iconClasses: string;
+    labelClasses: ClassType;
+    dropdownClasses: ClassType;
     btnClasses: string;
     withArrowIcon: boolean;
     btnLabel: string;
@@ -99,6 +87,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     closeWhenClickedOutside: boolean;
     dropdownElement: "div" | "ul" | "ol";
     keepState: "opened" | "closed" | "";
+    activateKeyboardController: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/chunks/{AccessibleSelect.vue_vue_type_script_setup_true_lang.B43ikA_r.js → AccessibleSelect.vue_vue_type_script_setup_true_lang.BZJiuA9q.js}

@@ -1,5 +1,5 @@
-import { h as f, defineComponent as B, ref as w, computed as H, watch as T, onMounted as C, onUnmounted as F, openBlock as a, createElementBlock as s, normalizeClass as l, createElementVNode as o, createCommentVNode as u, withModifiers as k, renderSlot as z, unref as b, createBlock as E, createVNode as P, Fragment as g, renderList as A } from "vue";
-import { Y as O } from "./useKeyboardController.lxE4H7Vf.js";
+import { h as f, defineComponent as B, ref as w, computed as H, watch as T, onMounted as C, onUnmounted as F, openBlock as a, createElementBlock as s, normalizeClass as l, createElementVNode as o, createCommentVNode as u, withModifiers as k, renderSlot as z, unref as b, createBlock as A, createVNode as E, Fragment as g, renderList as P } from "vue";
+import { A as O } from "./useKeyboardController.CXrrg8Zt.js";
 import { d as q } from "./ArrowIcon.B7Oqov4Y.js";
 import { o as N } from "./PharmacyIcon.qIkuSERu.js";
 const j = (d, { attrs: p }) => {
@@ -36,7 +36,7 @@ const j = (d, { attrs: p }) => {
       })
     ]
   );
-}, D = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, S = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], Y = ["innerHTML"], G = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, I = ["innerHTML"], J = ["data-cy"], K = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, R = ["name", "checked", "onInput"], W = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], ti = /* @__PURE__ */ B({
+}, D = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, S = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], G = ["innerHTML"], I = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, J = ["innerHTML"], K = ["data-cy"], Q = ["id", "aria-selected", "onClick", "onMouseover"], R = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, W = ["name", "checked", "onInput"], X = ["innerHTML"], Y = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], ti = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "AccessibleSelect",
   props: {
@@ -117,15 +117,15 @@ const j = (d, { attrs: p }) => {
           o("span", {
             class: l(["uikit-pointer-events-none uikit-mt-1", i.$attrs["btn-text-classes"]]),
             innerHTML: i.modelValue.visibleLabel || i.modelValue.label
-          }, null, 10, Y),
-          o("span", G, [
-            t.isValid == !1 ? (a(), E(b(j), {
+          }, null, 10, G),
+          o("span", I, [
+            t.isValid == !1 ? (a(), A(b(j), {
               key: 0,
               class: "uikit-mr-1",
               width: 20,
               height: 20
             })) : u("", !0),
-            P(b(q), {
+            E(b(q), {
               class: l(["uikit-transition-transform motion-reduce:uikit-transition-none", e.value ? "uikit-rotate-180" : ""]),
               width: 18,
               height: 18,
@@ -151,7 +151,7 @@ const j = (d, { attrs: p }) => {
               key: 0,
               class: l(["uikit-mx-5px", [i.modelValue.label ? "uikit-invisible" : "uikit-hidden"]]),
               innerHTML: i.label
-            }, null, 10, I)) : u("", !0)
+            }, null, 10, J)) : u("", !0)
           ], 2)
         ], 2),
         o("ul", {
@@ -171,7 +171,7 @@ const j = (d, { attrs: p }) => {
           onClick: n[3] || (n[3] = k(() => {
           }, ["stop"]))
         }, [
-          (a(!0), s(g, null, A(i.options, (r, m) => (a(), s("li", {
+          (a(!0), s(g, null, P(i.options, (r, m) => (a(), s("li", {
             id: `${i.namespace}_element_${i.options[m].label}`,
             key: `${r.label}_${m}`,
             role: "option",
@@ -182,7 +182,7 @@ const j = (d, { attrs: p }) => {
             onBlur: n[2] || (n[2] = k(() => {
             }, ["stop"]))
           }, [
-            o("label", Q, [
+            o("label", R, [
               o("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
@@ -190,13 +190,13 @@ const j = (d, { attrs: p }) => {
                 type: "radio",
                 checked: r.label === i.modelValue.label,
                 onInput: k((y) => h(r), ["stop"])
-              }, null, 40, R),
+              }, null, 40, W),
               o("span", {
                 innerHTML: r.label
-              }, null, 8, W)
+              }, null, 8, X)
             ])
-          ], 42, K))), 128))
-        ], 10, J)
+          ], 42, Q))), 128))
+        ], 10, K)
       ]),
       i.feedback ? (a(), s(g, { key: 0 }, [
         i.feedback.valid ? (a(), s("span", {
@@ -205,7 +205,7 @@ const j = (d, { attrs: p }) => {
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12",
           innerHTML: i.isValid ? i.feedback.valid : ""
-        }, null, 8, X)) : u("", !0),
+        }, null, 8, Y)) : u("", !0),
         i.feedback.invalid ? (a(), s("span", {
           key: 1,
           id: `${i.namespace}_invalid_msg`,

package/dist/chunks/{BaseAutocomplete.vue_vue_type_script_setup_true_lang.jggoW8dE.js → BaseAutocomplete.vue_vue_type_script_setup_true_lang.Cvm5m3ps.js}

@@ -1,24 +1,24 @@
-import { defineComponent as L, mergeModels as B, useModel as H, ref as s, computed as k, onBeforeMount as z, watch as f, openBlock as y, createBlock as S, normalizeClass as A, withCtx as c, createVNode as K, renderSlot as V, createElementBlock as N, Fragment as U, renderList as F, unref as W, createElementVNode as Y } from "vue";
-import j from "../BaseInput.js";
-import { _ as q } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.ByKK5PjE.js";
+import { defineComponent as L, mergeModels as S, useModel as H, ref as s, computed as k, onBeforeMount as z, watch as f, openBlock as y, createBlock as V, normalizeClass as A, withCtx as c, createVNode as K, renderSlot as B, createElementBlock as N, Fragment as U, renderList as F, unref as W, createElementVNode as j } from "vue";
+import q from "../BaseInput.js";
+import { _ as G } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.CZLqPgDd.js";
 import "./types-B0dZ7OiV.D29wNgoj.js";
-import { _ as G } from "./SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
-import { Y as J } from "./useKeyboardController.lxE4H7Vf.js";
-function Q(r, m) {
-  return (...v) => new Promise((l, d) => {
+import { _ as J } from "./SelectItem.vue_vue_type_script_setup_true_lang.C2Kcvwa7.js";
+import { A as Q } from "./useKeyboardController.CXrrg8Zt.js";
+function R(r, v) {
+  return (...m) => new Promise((l, d) => {
     r.id && clearTimeout(r.id), r.id = setTimeout(() => {
       try {
-        const a = m(...v);
-        l(a);
-      } catch (a) {
-        d(a);
+        const i = v(...m);
+        l(i);
+      } catch (i) {
+        d(i);
       }
     }, r.delay);
   });
 }
-const R = ["innerHTML"], oe = /* @__PURE__ */ L({
+const X = ["innerHTML"], oe = /* @__PURE__ */ L({
   __name: "BaseAutocomplete",
-  props: /* @__PURE__ */ B({
+  props: /* @__PURE__ */ S({
     border: { type: Boolean, default: !0 },
     isValid: { default: null },
     theme: { default: "" },
@@ -38,13 +38,13 @@ const R = ["innerHTML"], oe = /* @__PURE__ */ L({
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ B(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
-  setup(r, { expose: m, emit: v }) {
-    const l = r, d = H(r, "modelValue"), a = v, u = s(""), n = s([]), h = s(null), p = s(!1), o = s(!1), g = s(null), O = k(() => n.value.length);
+  emits: /* @__PURE__ */ S(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
+  setup(r, { expose: v, emit: m }) {
+    const l = r, d = H(r, "modelValue"), i = m, u = s(""), n = s([]), h = s(null), p = s(!1), o = s(!1), g = s(null), O = k(() => n.value.length);
     z(() => {
-      h.value = Q({ delay: 300 }, l.onInputChangeCb);
+      h.value = R({ delay: 300 }, l.onInputChangeCb);
     });
-    const { activeIdx: w, selectedIdx: C } = J({
+    const { activeIdx: w, selectedIdx: C } = Q({
       optionsLength: O,
       isDropdownOpen: o,
       disableSpaceHandler: !0
@@ -83,7 +83,7 @@ const R = ["innerHTML"], oe = /* @__PURE__ */ L({
           return "";
       }
     }), D = async (e) => {
-      if (console.log("BaseAutocomplete", { v: e }), u.value !== e && (a("changedValue", e), u.value = e, !!l.onInputChangeCb)) {
+      if (u.value !== e && (i("changedValue", e), u.value = e, !!l.onInputChangeCb)) {
         if (!e || p.value) {
           n.value = [], p.value = !1, C.value = -1, w.value = -1, d.value && (d.value.label = ""), o.value = !1, await h.value(null);
           return;
@@ -111,12 +111,12 @@ const R = ["innerHTML"], oe = /* @__PURE__ */ L({
         e === "closed" ? (o.value = !1, l.cleanupOnClose && (n.value = [])) : e === "open" && n.value.length && (o.value = !0);
       }
     ), f(o, (e) => {
-      a("update:dropdownState", e);
-    }), m({
+      i("update:dropdownState", e);
+    }), v({
       select: () => {
         g.value?.select();
       }
-    }), (e, t) => (y(), S(q, {
+    }), (e, t) => (y(), V(G, {
       class: A(e.$attrs["root-classes"]),
       "data-cy": `ac_${e.$attrs.id}`,
       "dropdown-element": "ul",
@@ -133,14 +133,15 @@ const R = ["innerHTML"], oe = /* @__PURE__ */ L({
       ],
       "open-dropdown": o.value,
       "keep-state": !n.value.length || l.keepState === "closed" ? "closed" : "opened",
-      "onUpdate:dropdownState": t[3] || (t[3] = (i) => o.value = i),
-      onClick: t[4] || (t[4] = (i) => {
-        a("click"), E();
+      "onUpdate:dropdownState": t[3] || (t[3] = (a) => o.value = a),
+      onClick: t[4] || (t[4] = (a) => {
+        i("click"), E();
       }),
-      "close-when-clicked-outside": e.closeDropdownOnBodyPressed
+      "close-when-clicked-outside": e.closeDropdownOnBodyPressed,
+      "activate-keyboard-controller": !1
     }, {
       btn_slot: c(() => [
-        K(j, {
+        K(q, {
           id: `ac_input_${e.$attrs.id}`,
           ref_key: "baseInput",
           ref: g,
@@ -158,31 +159,31 @@ const R = ["innerHTML"], oe = /* @__PURE__ */ L({
             "!uikit-ml-0 !uikit-w-full"
           ],
           "fieldset-classes": [I.value, e.$attrs["fieldset-classes"]],
-          "onUpdate:modelValue": t[0] || (t[0] = (i) => D(i === void 0 ? "" : `${i}`)),
-          onKeydown: t[1] || (t[1] = (i) => a("keydown", i)),
-          onKeydownEnterPressed: t[2] || (t[2] = () => a("keydownEnterPressed"))
+          "onUpdate:modelValue": t[0] || (t[0] = (a) => D(a === void 0 ? "" : `${a}`)),
+          onKeydown: t[1] || (t[1] = (a) => i("keydown", a)),
+          onKeydownEnterPressed: t[2] || (t[2] = () => i("keydownEnterPressed"))
         }, {
           leftIcon: c(() => [
-            V(e.$slots, "lefticon")
+            B(e.$slots, "lefticon")
           ]),
-          righticon: c(({ handleClean: i }) => [
-            V(e.$slots, "righticon", { handleClean: i })
+          righticon: c(({ handleClean: a }) => [
+            B(e.$slots, "righticon", { handleClean: a })
           ]),
           _: 3
         }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
       ]),
       default: c(() => [
-        (y(!0), N(U, null, F(n.value, (i, b) => (y(), S(G, {
+        (y(!0), N(U, null, F(n.value, (a, b) => (y(), V(J, {
           key: b,
           active: W(w) === b,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (T) => $(i, b),
+          onClick: (T) => $(a, b),
           onMouseover: (T) => w.value = b
         }, {
           default: c(() => [
-            Y("span", {
-              innerHTML: i.label
-            }, null, 8, R)
+            j("span", {
+              innerHTML: a.label
+            }, null, 8, X)
           ]),
           _: 2
         }, 1032, ["active", "onClick", "onMouseover"]))), 128))

package/dist/chunks/{BaseBreadcrumb.vue_vue_type_script_setup_true_lang.X16QIoKI.js → BaseBreadcrumb.vue_vue_type_script_setup_true_lang.CYvEsNdp.js}

@@ -1,4 +1,4 @@
-import { defineComponent as u, computed as m, openBlock as i, createElementBlock as r, createElementVNode as n, Fragment as l, renderList as d, renderSlot as a, normalizeClass as k, toDisplayString as h, createVNode as p, unref as _ } from "vue";
+import { defineComponent as u, computed as d, openBlock as i, createElementBlock as r, createElementVNode as o, Fragment as l, renderList as m, renderSlot as a, normalizeClass as h, toDisplayString as k, createVNode as p, unref as _ } from "vue";
 import { d as f } from "./ArrowIcon.B7Oqov4Y.js";
 import "./PharmacyIcon.qIkuSERu.js";
 const b = { "aria-label": "Breadcrumb" }, g = { class: "uikit-flex uikit-items-center uikit-gap-10px uikit-p-0" }, w = {
@@ -6,31 +6,32 @@ const b = { "aria-label": "Breadcrumb" }, g = { class: "uikit-flex uikit-items-c
   class: "uikit-list-none"
 }, x = ["href"], B = {
   key: 1,
-  class: "uikit-list-none"
+  class: "uikit-list-none",
+  "aria-hidden": "true"
 }, E = /* @__PURE__ */ u({
   __name: "BaseBreadcrumb",
   props: {
     items: {}
   },
-  setup(o) {
-    const c = m(() => {
+  setup(n) {
+    const c = d(() => {
       let e = 0;
       const s = [];
-      for (; e < o.items.length; )
-        s.push(o.items[e]), e < o.items.length - 1 && s.push({ arrowIcon: !0 }), e++;
+      for (; e < n.items.length; )
+        s.push({ ...n.items[e], idx: e }), e < n.items.length - 1 && s.push({ arrowIcon: !0 }), e++;
       return s;
     });
     return (e, s) => (i(), r("nav", b, [
-      n("ol", g, [
-        (i(!0), r(l, null, d(c.value, (t) => (i(), r(l, null, [
+      o("ol", g, [
+        (i(!0), r(l, null, m(c.value, (t) => (i(), r(l, null, [
           t?.label ? (i(), r("li", w, [
             a(e.$slots, "item", {
               item: t
             }, () => [
-              n("a", {
-                class: k(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
+              o("a", {
+                class: h(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
                 href: t.link
-              }, h(t.label), 11, x)
+              }, k(t.label), 11, x)
             ])
           ])) : (i(), r("li", B, [
             a(e.$slots, "separator", {}, () => [

package/dist/chunks/{BaseDropDown.vue_vue_type_script_setup_true_lang.ByKK5PjE.js → BaseDropDown.vue_vue_type_script_setup_true_lang.CZLqPgDd.js}

@@ -1,16 +1,13 @@
-import { defineComponent as w, ref as b, watch as r, onBeforeMount as h, onUnmounted as v, openBlock as l, createElementBlock as C, normalizeClass as i, withModifiers as u, renderSlot as c, createVNode as y, withCtx as p, createElementVNode as g, createBlock as k, unref as $, createCommentVNode as B, resolveDynamicComponent as D } from "vue";
-import { _ as E } from "./BaseButton.vue_vue_type_script_setup_true_lang.dlLTK59i.js";
-import { d as L } from "./ArrowIcon.B7Oqov4Y.js";
+import { defineComponent as $, useId as D, ref as m, computed as L, useTemplateRef as I, watch as s, onBeforeMount as S, onMounted as A, onUnmounted as E, openBlock as u, createElementBlock as O, normalizeClass as i, withModifiers as w, renderSlot as v, createVNode as W, unref as a, withCtx as b, createElementVNode as M, createBlock as h, createCommentVNode as H, resolveDynamicComponent as N } from "vue";
+import { _ as T } from "./BaseButton.vue_vue_type_script_setup_true_lang.dlLTK59i.js";
+import { d as V } from "./ArrowIcon.B7Oqov4Y.js";
 import "./PharmacyIcon.qIkuSERu.js";
-const S = ["innerHTML"], H = /* @__PURE__ */ w({
+import { A as K } from "./useKeyboardController.CXrrg8Zt.js";
+const q = ["innerHTML"], G = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "BaseDropDown",
   props: {
-    id: { default: "" },
     dropdownClasses: { default: "" },
-    containerDropdownClasses: { default: "" },
-    iconName: { default: "" },
-    iconClasses: { default: "" },
     btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
     btnLabel: { default: "" },
@@ -21,12 +18,17 @@ const S = ["innerHTML"], H = /* @__PURE__ */ w({
     openDropdown: { type: Boolean, default: !1 },
     closeWhenClickedOutside: { type: Boolean, default: !0 },
     dropdownElement: { default: "div" },
-    keepState: { default: "" }
+    keepState: { default: "" },
+    activateKeyboardController: { type: Boolean, default: !0 }
   },
   emits: ["click", "update:dropdownState"],
-  setup(f, { emit: m }) {
-    const o = f, s = m, t = b(!1);
-    r(
+  setup(y, { emit: C }) {
+    const o = y, c = D(), p = C, t = m(!1), l = m([]), g = L(() => l.value.length), d = I("dropdown"), { activeIdx: B, selectedIdx: k } = K({
+      optionsLength: g,
+      isDropdownOpen: t,
+      activate: o.activateKeyboardController
+    });
+    s(
       () => o.openDropdown,
       (e) => {
         t.value = e;
@@ -34,30 +36,34 @@ const S = ["innerHTML"], H = /* @__PURE__ */ w({
       {
         immediate: !0
       }
-    ), r(t, (e) => {
-      s("update:dropdownState", e);
+    ), s(t, (e) => {
+      p("update:dropdownState", e);
+    }), s(k, (e) => {
+      e !== -1 && l.value[e].querySelector("a")?.click();
     });
-    const d = () => {
+    const f = () => {
       t.value = !1;
-    }, n = () => {
+    }, r = () => {
       o.keepState === "closed" && !t.value || o.keepState === "opened" && t.value || (t.value = !t.value);
     };
-    return h(() => {
-      o.closeWhenClickedOutside && document && document.body.addEventListener("click", d);
-    }), v(() => {
-      o.closeWhenClickedOutside && document && document.body.removeEventListener("click", d);
-    }), (e, a) => (l(), C("div", {
+    return S(() => {
+      o.closeWhenClickedOutside && document && document.body.addEventListener("click", f);
+    }), A(() => {
+      d.value && (l.value = d.value.children || []);
+    }), E(() => {
+      o.closeWhenClickedOutside && document && document.body.removeEventListener("click", f);
+    }), (e, n) => (u(), O("div", {
       class: i(["uikit-relative uikit-block", e.$attrs.class]),
-      onClick: a[1] || (a[1] = u((W) => {
-        s("click"), n();
+      onClick: n[1] || (n[1] = w((z) => {
+        p("click"), r();
       }, ["stop"]))
     }, [
-      c(e.$slots, "btn_slot", {
-        toggleDropdown: n,
+      v(e.$slots, "btn_slot", {
+        toggleDropdown: r,
         isOpen: t.value
       }, () => [
-        y(E, {
-          id: e.id,
+        W(T, {
+          id: a(c),
           type: "button",
           "data-cy": e.$attrs["data-cy"],
           class: i([
@@ -65,29 +71,28 @@ const S = ["innerHTML"], H = /* @__PURE__ */ w({
             e.btnClasses
           ]),
           "aria-expanded": t.value,
-          "btn-class": "uikit-btn-single-selection",
-          "icon-class": e.iconClasses,
-          "icon-name": e.iconName
+          "btn-class": "uikit-btn-single-selection"
         }, {
-          default: p(() => [
-            g("span", {
+          default: b(() => [
+            M("span", {
               class: i(["uikit-mr-5px", e.labelClasses]),
               innerHTML: e.btnLabel
-            }, null, 10, S),
-            e.withArrowIcon ? (l(), k($(L), {
+            }, null, 10, q),
+            e.withArrowIcon ? (u(), h(a(V), {
               key: 0,
               class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
               width: e.arrowWidth,
               height: e.arrowWidth,
               "stroke-color": e.$attrs["arrow-stroke-color"]
-            }, null, 8, ["class", "width", "height", "stroke-color"])) : B("", !0)
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : H("", !0)
           ]),
           _: 1
-        }, 8, ["id", "data-cy", "class", "aria-expanded", "icon-class", "icon-name"])
+        }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (l(), k(D(e.dropdownElement), {
-        id: "dropdown_" + e.id,
-        ref: "dropdown",
+      (u(), h(N(e.dropdownElement), {
+        id: "dropdown_" + a(c),
+        ref_key: "dropdown",
+        ref: d,
         "data-cy": e.$attrs["data-cy"] && `${e.$attrs["data-cy"]}_dropdown`,
         class: i(["uikit-max-h-[220px] uikit-w-full uikit-min-w-[90px] uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-border-w-lavender uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
           e.dropdownClasses,
@@ -96,20 +101,23 @@ const S = ["innerHTML"], H = /* @__PURE__ */ w({
           { "uikit-rounded-b uikit-border-t-0": e.direction === "down" },
           { "uikit-absolute": e.isAbsolute }
         ]]),
-        onClick: a[0] || (a[0] = u(() => {
+        "aria-hidden": !t.value,
+        onClick: n[0] || (n[0] = w(() => {
         }, ["stop"]))
       }, {
-        default: p(() => [
-          c(e.$slots, "default", {
+        default: b(() => [
+          v(e.$slots, "default", {
             isOpen: t.value,
-            toggleDropdown: n
+            toggleDropdown: r,
+            activeIdx: a(B),
+            selectedIdx: a(k)
           })
         ]),
         _: 3
-      }, 8, ["id", "data-cy", "class"]))
+      }, 8, ["id", "data-cy", "class", "aria-hidden"]))
     ], 2));
   }
 });
 export {
-  H as _
+  G as _
 };

package/dist/chunks/{SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js → SelectItem.vue_vue_type_script_setup_true_lang.C2Kcvwa7.js}

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

package/dist/chunks/useKeyboardController.CXrrg8Zt.js

@@ -0,0 +1,44 @@
+import { ref as f, onMounted as w, onUnmounted as E, unref as x } from "vue";
+const D = (o) => {
+  const { isDropdownOpen: a, disableSpaceHandler: m } = o, n = f(-1), t = f(-1);
+  if (!(o.activate === void 0 || o.activate))
+    return { activeIdx: n, selectedIdx: t };
+  const l = (e) => {
+    const v = "ArrowUp", d = "ArrowDown", i = "Enter", c = "Escape", u = " ", s = "PageUp", y = "Home", k = "PageDown", p = "End";
+    if (!a.value || ![
+      v,
+      d,
+      i,
+      c,
+      u,
+      s,
+      y,
+      k,
+      p
+    ].includes(e.key))
+      return;
+    const r = x(o.optionsLength);
+    if (e.key === v)
+      n.value = n.value === 0 ? r - 1 : n.value - 1;
+    else if (e.key === d)
+      n.value = (n.value + 1) % r;
+    else if (e.key === i || e.key === u) {
+      if (e.key === u && m)
+        return;
+      t.value = n.value, a.value = !1;
+    } else
+      e.key === c ? (n.value = t.value, a.value = !1) : e.key === s || e.key === y ? n.value = 0 : (e.key === k || e.key === p) && (n.value = r - 1);
+    e.stopPropagation(), e.preventDefault();
+  };
+  return w(() => {
+    document && document.addEventListener("keydown", l);
+  }), E(() => {
+    document && document.removeEventListener("keydown", l);
+  }), {
+    activeIdx: n,
+    selectedIdx: t
+  };
+};
+export {
+  D as A
+};

package/dist/index.js

@@ -2,21 +2,21 @@ import { _ as r } from "./chunks/BaseAccordion.vue_vue_type_script_setup_true_la
 import { _ as t } from "./chunks/BaseAccordionBtn.vue_vue_type_script_setup_true_lang.2iAIiz6F.js";
 import { _ as f } from "./chunks/BaseAccordionContent.vue_vue_type_script_setup_true_lang.8ErZghvk.js";
 import { _ as m } from "./chunks/BaseAccordionItem.vue_vue_type_script_setup_true_lang.CR-nWss7.js";
-import { _ as l } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
+import { _ as l } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.C2Kcvwa7.js";
 import { default as d } from "./CheckboxBtn.js";
 import { _ as i } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.hSeL05pn.js";
 import { _ } from "./chunks/BaseTab.vue_vue_type_script_setup_true_lang.Cu67jd8K.js";
 import { _ as S } from "./chunks/BaseTabView.vue_vue_type_script_setup_true_lang.DSlvTOkB.js";
 import { _ as g } from "./chunks/RadioButton.vue_vue_type_script_setup_true_lang.DR6a7QAi.js";
 import { _ as h } from "./chunks/RadioGroup.vue_vue_type_script_setup_true_lang.BYlMCUWP.js";
-import { _ as I } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.B43ikA_r.js";
+import { _ as I } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.BZJiuA9q.js";
 import { _ as w } from "./chunks/BaseAlert.vue_vue_type_style_index_0_lang.BtqP_iYL.js";
-import { _ as k } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.jggoW8dE.js";
+import { _ as k } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.Cvm5m3ps.js";
 import { _ as D } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
 import { _ as G } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.dlLTK59i.js";
 import { default as O } from "./BaseCard.js";
 import { default as R } from "./BaseComplexToggle.js";
-import { _ as N } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.ByKK5PjE.js";
+import { _ as N } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.CZLqPgDd.js";
 import { default as j } from "./BaseFloatingLabel.js";
 import { default as y } from "./BaseIcon.js";
 import { default as E } from "./BaseInput.js";
@@ -40,7 +40,7 @@ import { _ as Ie } from "./chunks/IntersectionObserver.vue_vue_type_script_setup
 import { S as we } from "./chunks/SwiperCarousel.BV6QiwmC.js";
 import { default as ke } from "./SwiperSlide.js";
 import { useValidator as De } from "./useValidator.js";
-import { _ as Ge } from "./chunks/BaseBreadcrumb.vue_vue_type_script_setup_true_lang.X16QIoKI.js";
+import { _ as Ge } from "./chunks/BaseBreadcrumb.vue_vue_type_script_setup_true_lang.CYvEsNdp.js";
 import './assets/index.css';export {
   I as AccessibleSelect,
   r as BaseAccordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "1.9.16",
+  "version": "1.9.17",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,7 +33,7 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^3.6.0",
     "swiper": "^11.1.14",
-    "vue": "^3.5.12",
+    "vue": "3.5.12",
     "vue-chartjs": "^5.3.1",
     "vue-router": "^4.4.5"
   },
@@ -46,7 +46,7 @@
     "@wikicasa-dev/tailwind-plugins": "^0.0.2",
     "@wikicasa-dev/types": "^1.5.52",
     "@wikicasa-dev/utilities": "^1.0.22",
-    "@wikicasa-dev/vue-composables": "^0.0.4",
+    "@wikicasa-dev/vue-composables": "0.0.10",
     "autoprefixer": "^10.4.20",
     "chromatic": "^11.12.5",
     "eslint": "^8.57.1",

package/dist/chunks/useKeyboardController.lxE4H7Vf.js

@@ -1,41 +0,0 @@
-import { ref as f, onMounted as w, onUnmounted as E, unref as g } from "vue";
-const x = (r) => {
-  const { isDropdownOpen: o, disableSpaceHandler: m } = r, n = f(-1), t = f(-1), l = (e) => {
-    const v = "ArrowUp", d = "ArrowDown", s = "Enter", i = "Escape", u = " ", c = "PageUp", y = "Home", k = "PageDown", p = "End";
-    if (!o.value || ![
-      v,
-      d,
-      s,
-      i,
-      u,
-      c,
-      y,
-      k,
-      p
-    ].includes(e.key))
-      return;
-    const a = g(r.optionsLength);
-    if (e.key === v)
-      n.value = n.value === 0 ? a - 1 : n.value - 1;
-    else if (e.key === d)
-      n.value = (n.value + 1) % a;
-    else if (e.key === s || e.key === u) {
-      if (e.key === u && m)
-        return;
-      t.value = n.value, o.value = !1;
-    } else
-      e.key === i ? (n.value = t.value, o.value = !1) : e.key === c || e.key === y ? n.value = 0 : (e.key === k || e.key === p) && (n.value = a - 1);
-    e.stopPropagation(), e.preventDefault();
-  };
-  return w(() => {
-    document && document.addEventListener("keydown", l);
-  }), E(() => {
-    document && document.removeEventListener("keydown", l);
-  }), {
-    activeIdx: n,
-    selectedIdx: t
-  };
-};
-export {
-  x as Y
-};