@wikicasa-dev/components 1.9.15 → 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.Cfl7RpmX.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.CYvEsNdp.js

@@ -0,0 +1,53 @@
+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 = {
+  key: 0,
+  class: "uikit-list-none"
+}, x = ["href"], B = {
+  key: 1,
+  class: "uikit-list-none",
+  "aria-hidden": "true"
+}, E = /* @__PURE__ */ u({
+  __name: "BaseBreadcrumb",
+  props: {
+    items: {}
+  },
+  setup(n) {
+    const c = d(() => {
+      let e = 0;
+      const s = [];
+      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, [
+      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
+            }, () => [
+              o("a", {
+                class: h(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
+                href: t.link
+              }, k(t.label), 11, x)
+            ])
+          ])) : (i(), r("li", B, [
+            a(e.$slots, "separator", {}, () => [
+              p(_(f), {
+                class: "-uikit-rotate-90",
+                "stroke-color": "#222",
+                width: 10,
+                height: 10
+              })
+            ])
+          ]))
+        ], 64))), 256))
+      ])
+    ]));
+  }
+});
+export {
+  E as _
+};

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.Cfl7RpmX.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.15",
+  "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/BaseBreadcrumb.vue_vue_type_script_setup_true_lang.Cfl7RpmX.js

@@ -1,54 +0,0 @@
-import { defineComponent as m, computed as d, openBlock as i, createElementBlock as r, createElementVNode as n, Fragment as l, renderList as k, renderSlot as a, normalizeClass as h, toDisplayString as p, createVNode as _, unref as b } from "vue";
-import { d as f } from "./ArrowIcon.B7Oqov4Y.js";
-import "./PharmacyIcon.qIkuSERu.js";
-const g = { "aria-label": "Breadcrumb" }, w = { class: "uikit-flex uikit-items-center uikit-gap-10px uikit-p-0" }, x = {
-  key: 0,
-  class: "uikit-list-none"
-}, y = ["href"], B = {
-  key: 1,
-  class: "uikit-list-none"
-}, E = /* @__PURE__ */ m({
-  __name: "BaseBreadcrumb",
-  props: {
-    items: {}
-  },
-  setup(o) {
-    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++;
-      return s;
-    });
-    return (e, s) => (i(), r("nav", g, [
-      n("ol", w, [
-        (i(!0), r(l, null, k(c.value, (t, u) => (i(), r(l, {
-          key: `breadcrumb_item_${u}`
-        }, [
-          t?.label ? (i(), r("li", x, [
-            a(e.$slots, "item", {
-              item: t
-            }, () => [
-              n("a", {
-                class: h(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
-                href: t.link
-              }, p(t.label), 11, y)
-            ])
-          ])) : (i(), r("li", B, [
-            a(e.$slots, "separator", {}, () => [
-              _(b(f), {
-                class: "-uikit-rotate-90",
-                "stroke-color": "#222",
-                width: 10,
-                height: 10
-              })
-            ])
-          ]))
-        ], 64))), 128))
-      ])
-    ]));
-  }
-});
-export {
-  E as _
-};

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
-};