@wikicasa-dev/components 2.2.9-alpha.30 → 2.2.9-alpha.32

package/dist/Swiper/autoplay.js

@@ -1,5 +1,5 @@
 import { Autoplay as t } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                           */
+import '../assets/swiper-thumbs.css';/* empty css                                                                           */
 export {
   t as Autoplay
 };

package/dist/Swiper/controller.js

@@ -1,5 +1,5 @@
 import { Controller as e } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                             */
+import '../assets/swiper-thumbs.css';/* empty css                                                                             */
 export {
   e as Controller
 };

package/dist/Swiper/keyboard.js

@@ -1,5 +1,5 @@
 import { Keyboard as m } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                           */
+import '../assets/swiper-thumbs.css';/* empty css                                                                           */
 export {
   m as Keyboard
 };

package/dist/Swiper/thumbs.js

@@ -1,5 +1,5 @@
 import { Thumbs as p } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                         */
+import '../assets/swiper-thumbs.css';/* empty css                                                                         */
 export {
   p as Thumbs
 };

package/dist/UIKit/AccessibleSelect.d.ts

@@ -7,13 +7,11 @@ declare const _default: <TID, TPayload>(__VLS_props: NonNullable<Awaited<typeof
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: Optional<AccessibleSelectOptions<TPayload, TID>>) => any) | undefined;
         readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
-        readonly "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
-        readonly "onUpdate:toggleDropdown"?: ((value: Optional<boolean>) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onUpdate:dropdownState" | "onUpdate:toggleDropdown" | "onUpdate:open"> & ({
+        readonly "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onUpdate:open" | "onUpdate:dropdownState"> & ({
         modelValue?: Optional<AccessibleSelectOptions<TPayload, TID>>;
         open?: boolean;
-        toggleDropdown?: Optional<boolean>;
     } & {
         label?: string;
         dropdownPosition?: "top" | "bottom";
@@ -50,7 +48,7 @@ declare const _default: <TID, TPayload>(__VLS_props: NonNullable<Awaited<typeof
     slots: {
         lefticon?(_: {}): any;
     };
-    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "update:dropdownState", args_0: boolean) => void)) & (((evt: "update:modelValue", value: Optional<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:toggleDropdown", value: Optional<boolean>) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "update:dropdownState", args_0: boolean) => void)) & (((evt: "update:modelValue", value: Optional<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -27,8 +27,8 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
         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 "onUpdate:open"?: ((value: boolean) => 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"> & ({

package/dist/UIKit/BaseAutocomplete.d.ts

@@ -6,8 +6,8 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: AccessibleSelectOptions<TPayload, TID> | undefined) => any) | undefined;
         readonly onClick?: (() => any) | undefined;
-        readonly "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
         readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
+        readonly "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
         readonly onKeydownEnterPressed?: (() => any) | undefined;
         readonly onChangedValue?: ((args_0: string) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:dropdownState" | "onKeydownEnterPressed" | "onChangedValue"> & ({
@@ -44,7 +44,7 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
             idx: number;
         }): any;
     };
-    emit: (((evt: "click") => void) & ((evt: "update:dropdownState", args_0: boolean) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "keydownEnterPressed") => void) & ((evt: "changedValue", args_0: string) => void)) & ((evt: "update:modelValue", value: AccessibleSelectOptions<TPayload, TID> | undefined) => void);
+    emit: (((evt: "click") => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "update:dropdownState", args_0: boolean) => void) & ((evt: "keydownEnterPressed") => void) & ((evt: "changedValue", args_0: string) => void)) & ((evt: "update:modelValue", value: AccessibleSelectOptions<TPayload, TID> | undefined) => void);
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/UIKit/BaseButton.d.ts

@@ -19,9 +19,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
 }, {
     getRootElement: () => HTMLButtonElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (e: Event) => any;
-    mouseover: (e: Event) => any;
-    mouseout: (e: Event) => any;
+    click: (e: MouseEvent) => any;
+    mouseover: (e: MouseEvent) => any;
+    mouseout: (e: MouseEvent) => any;
+    keydown: (e: KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<{
     btnClass?: ButtonType;
     outlined?: boolean;
@@ -38,9 +39,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     dataCy?: string;
     type?: "button" | "submit" | "reset" | undefined;
 }> & Readonly<{
-    onClick?: ((e: Event) => any) | undefined;
-    onMouseover?: ((e: Event) => any) | undefined;
-    onMouseout?: ((e: Event) => any) | undefined;
+    onClick?: ((e: MouseEvent) => any) | undefined;
+    onMouseover?: ((e: MouseEvent) => any) | undefined;
+    onMouseout?: ((e: MouseEvent) => any) | undefined;
+    onKeydown?: ((e: KeyboardEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     buttonEl: HTMLButtonElement;
 }, HTMLButtonElement>, {

package/dist/UIKit/BaseDropDown.d.ts

@@ -1,4 +1,4 @@
-import { Nullable, Optional } from '@wikicasa-dev/types';
+import { Nullable } from '@wikicasa-dev/types';
 import { ClassTypeProp } from './types';
 type __VLS_Props = {
     dropdownAttrs?: Record<string, unknown>;
@@ -11,10 +11,6 @@ type __VLS_Props = {
     arrowWidth?: number;
     arrowStrokeColor?: `#${string}`;
     isAbsolute?: boolean;
-    /**
-     * @deprecated Use v-model:toggleDropdown instead
-     */
-    openDropdown?: boolean;
     closeWhenClickedOutside?: boolean;
     dropdownElement?: "div" | "ul" | "ol";
     keepState?: "opened" | "closed" | "";
@@ -29,7 +25,6 @@ type __VLS_Props = {
     dataCy?: string;
 };
 type __VLS_PublicProps = {
-    "toggleDropdown"?: Optional<boolean>;
     "resetKeyboardController"?: boolean;
     "open"?: boolean;
 } & __VLS_Props;
@@ -64,20 +59,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     getContentElement: () => HTMLElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => any;
-    "update:dropdownState": (args_0: boolean) => any;
-    "update:toggleDropdown": (value: Optional<boolean>) => any;
     "update:resetKeyboardController": (value: boolean) => any;
     "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClick?: (() => any) | undefined;
-    "onUpdate:dropdownState"?: ((args_0: boolean) => any) | undefined;
-    "onUpdate:toggleDropdown"?: ((value: Optional<boolean>) => any) | undefined;
     "onUpdate:resetKeyboardController"?: ((value: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     arrowWidth: number;
     dataCy: string;
     labelClasses: string | Record<string, boolean> | import('./types').ClassType[] | import('./types').ClassType[] | null;
+    closeKeys: false | string[];
     dropdownClasses: string | Record<string, boolean> | import('./types').ClassType[] | import('./types').ClassType[] | null;
     btnClasses: string;
     withArrowIcon: boolean;
@@ -85,12 +77,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     direction: "up" | "down";
     arrowStrokeColor: `#${string}`;
     isAbsolute: boolean;
-    openDropdown: boolean;
     closeWhenClickedOutside: boolean;
     dropdownElement: "div" | "ul" | "ol";
     keepState: "opened" | "closed" | "";
     activateKeyboardController: boolean;
-    closeKeys: false | string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     container: HTMLDivElement;
     dropdown: unknown;

package/dist/UIKit/BaseInput.d.ts

@@ -43,17 +43,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | undefined) => any;
     click: (args_0: MouseEvent) => any;
+    keydown: (args_0: KeyboardEvent) => any;
     focusin: () => any;
     focusout: () => any;
-    keydown: (args_0: KeyboardEvent) => any;
     keyup: (args_0: KeyboardEvent) => any;
     keydownEnterPressed: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
     onClick?: ((args_0: MouseEvent) => any) | undefined;
+    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
     onFocusin?: (() => any) | undefined;
     onFocusout?: (() => any) | undefined;
-    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
     onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
     onKeydownEnterPressed?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/UIKit/BaseTextarea.d.ts

@@ -17,15 +17,15 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
     click: (args_0: MouseEvent) => any;
+    keydown: (args_0: KeyboardEvent) => any;
     focusin: () => any;
     focusout: () => any;
-    keydown: (args_0: KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     onClick?: ((args_0: MouseEvent) => any) | undefined;
+    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
     onFocusin?: (() => any) | undefined;
     onFocusout?: (() => any) | undefined;
-    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     textarea: HTMLTextAreaElement;
 }, any>;

package/dist/composables/mock.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+interface KeyboardControllerProps {
+    optionsLength: Ref<number> | number;
+    isDropdownOpen?: Ref<boolean>;
+    disableSpaceHandler?: boolean;
+    activate?: boolean;
+    /**
+     * If true, the listener will be initialized on the document element
+     */
+    global?: boolean;
+    /**
+     * List of keys that will close the dropdown.
+     * For the full list of keys, see
+     * @link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+     * @default "Escape" and "Enter"
+     */
+    closeKeys?: string[];
+}
+export declare const useKeyboardController: (props: KeyboardControllerProps) => {
+    activeIdx: Ref<number, number>;
+    selectedIdx: Ref<number, number>;
+    $reset: () => void;
+    onKeyDownHandler: (e: KeyboardEvent) => void;
+};
+export {};

package/dist/composables/mock.js

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

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

@@ -1,8 +1,8 @@
-import { defineComponent as D, mergeModels as y, useModel as g, useId as F, useTemplateRef as z, computed as C, watch as I, createElementBlock as a, openBlock as l, createVNode as $, createCommentVNode as r, normalizeClass as o, withCtx as x, Fragment as M, renderList as N, withModifiers as f, createElementVNode as n, renderSlot as A, createBlock as E, unref as V } from "vue";
-import { WarningIconRounded as P, ArrowIcon as R } from "@wikicasa-dev/svg-icons";
+import { defineComponent as B, mergeModels as y, useModel as p, useId as F, useTemplateRef as I, computed as C, watch as z, createElementBlock as n, openBlock as a, createVNode as $, createCommentVNode as d, normalizeClass as o, withCtx as x, Fragment as g, renderList as E, withModifiers as f, createElementVNode as s, renderSlot as N, createBlock as P, unref as M } from "vue";
+import { WarningIconRounded as A, ArrowIcon as R } from "@wikicasa-dev/svg-icons";
 import q from "./BaseDropDown.vue.js";
 import '../../../../assets/BaseDropDown.css';/* empty css                  */
-const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, U = ["id", "innerHTML"], j = ["onClick"], G = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "onClick"], W = ["innerHTML"], J = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, K = ["innerHTML"], O = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, X = ["name", "checked", "onInput"], Y = ["innerHTML"], Z = ["id", "arial-live", "innerHTML"], _ = ["id", "arial-live", "innerHTML"], ae = /* @__PURE__ */ D({
+const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" }, j = ["id", "innerHTML"], K = ["onClick"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "onClick"], W = ["innerHTML"], D = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, G = ["innerHTML"], J = ["id", "aria-selected", "onClick", "onMouseover"], O = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, Q = ["name", "checked", "onInput"], X = ["innerHTML"], Y = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], le = /* @__PURE__ */ B({
   __name: "AccessibleSelect",
   props: /* @__PURE__ */ y({
     label: { default: "" },
@@ -29,27 +29,23 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
     },
     modelModifiers: {},
     open: { type: Boolean, default: !1 },
-    openModifiers: {},
-    toggleDropdown: { type: Boolean, default: void 0 },
-    toggleDropdownModifiers: {}
+    openModifiers: {}
   }),
-  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open", "update:toggleDropdown"]),
-  setup(e, { emit: T }) {
-    const L = T, k = g(e, "modelValue"), m = g(e, "open"), h = g(e, "toggleDropdown"), B = F(), H = z("dropdownRef"), t = C(() => e.namespace || B), v = C(() => !!k.value.label), w = (i) => {
-      m.value = !1, k.value = i, console.log("DEBUG:handleChange", i);
+  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
+  setup(e, { emit: V }) {
+    const T = V, r = p(e, "modelValue"), m = p(e, "open"), L = F(), H = I("dropdownRef"), t = C(() => e.namespace || L), v = C(() => !!r.value.label), w = (i) => {
+      m.value = !1, r.value = i;
     };
-    return I(
+    return z(
       () => H.value?.selectedIdx,
       (i) => {
         i === void 0 || i === -1 || (w(e.options[i]), m.value = !1);
       }
-    ), (i, c) => (l(), a("div", null, [
+    ), (i, k) => (a(), n("div", null, [
       $(q, {
         ref: "dropdownRef",
         open: m.value,
-        "onUpdate:open": c[1] || (c[1] = (s) => m.value = s),
-        "toggle-dropdown": h.value,
-        "onUpdate:toggleDropdown": c[2] || (c[2] = (s) => h.value = s),
+        "onUpdate:open": k[2] || (k[2] = (c) => m.value = c),
         class: o([e.wrapperClasses]),
         "activate-keyboard-controller": "",
         "close-when-clicked-outside": e.closeOnBodyPressed,
@@ -65,9 +61,9 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
           "aria-multiselectable": !1
         }
       }, {
-        btn_slot: x(({ toggleDropdown: s, isOpen: b, activeIdx: u }) => [
-          n("div", S, [
-            e.label ? (l(), a("label", {
+        btn_slot: x(({ toggleDropdown: c, isOpen: b, activeIdx: u }) => [
+          s("div", S, [
+            e.label ? (a(), n("label", {
               key: 0,
               id: `${t.value}_label`,
               class: o(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
@@ -77,15 +73,15 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
                 { "uikit-left-4": !i.$slots.lefticon && !v.value }
               ]]),
               innerHTML: e.label
-            }, null, 10, U)) : r("", !0),
-            i.$slots.lefticon ? (l(), a("span", {
+            }, null, 10, j)) : d("", !0),
+            i.$slots.lefticon ? (a(), n("span", {
               key: 1,
               class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
-              onClick: f((d) => s(), ["stop"])
+              onClick: f((l) => c(), ["stop"])
             }, [
-              A(i.$slots, "lefticon")
-            ], 8, j)) : r("", !0),
-            n("button", {
+              N(i.$slots, "lefticon")
+            ], 8, K)) : d("", !0),
+            s("button", {
               id: `${t.value}_btn`,
               ref: "btnEl",
               type: "button",
@@ -100,31 +96,34 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
               "aria-activedescendant": u >= 0 && b ? `${t.value}_element_${e.options[u].label}` : "",
               "aria-invalid": e.isValid === !1,
               "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
-              onClick: (d) => {
-                s(), L("click", d);
-              }
+              onClick: (l) => {
+                c(), T("click", l);
+              },
+              onKeydown: k[0] || (k[0] = (l) => {
+                ["Enter", "Enter"].includes(l.key) && l.stopPropagation();
+              })
             }, [
-              n("span", {
+              s("span", {
                 class: o(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
-                innerHTML: k.value?.visibleLabel || k.value?.label
+                innerHTML: r.value?.visibleLabel || r.value?.label
               }, null, 10, W),
-              n("span", J, [
-                e.isValid == !1 ? (l(), E(V(P), {
+              s("span", D, [
+                e.isValid == !1 ? (a(), P(M(A), {
                   key: 0,
                   class: "uikit-mr-1",
                   width: 20,
                   height: 20,
                   "stroke-color": "#FA4F64"
-                })) : r("", !0),
-                $(V(R), {
+                })) : d("", !0),
+                $(M(R), {
                   class: o(["uikit-transition-transform motion-reduce:uikit-transition-none", [b ? "uikit-rotate-180" : "", e.arrowIcon?.classes]]),
                   width: e.arrowIcon?.width ?? 18,
                   height: e.arrowIcon?.height ?? 18,
                   "stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : e.arrowIcon?.strokeColor ?? "#222"
                 }, null, 8, ["class", "width", "height", "stroke-color"])
               ])
-            ], 10, G),
-            n("fieldset", {
+            ], 42, U),
+            s("fieldset", {
               "aria-hidden": "true",
               class: o(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
                 e.fieldsetClasses,
@@ -135,68 +134,68 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
                 { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
               ]])
             }, [
-              n("legend", {
+              s("legend", {
                 class: o([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
               }, [
-                e.label ? (l(), a("span", {
+                e.label ? (a(), n("span", {
                   key: 0,
                   class: o(["uikit-mx-5px", [
-                    k.value.label ? "uikit-invisible" : "uikit-hidden"
+                    r.value.label ? "uikit-invisible" : "uikit-hidden"
                   ]]),
                   innerHTML: e.label
-                }, null, 10, K)) : r("", !0)
+                }, null, 10, G)) : d("", !0)
               ], 2)
             ], 2)
           ])
         ]),
-        default: x(({ activeIdx: s, setActiveIdx: b }) => [
-          (l(!0), a(M, null, N(e.options, (u, d) => (l(), a("li", {
-            id: `${t.value}_element_${e.options[d].label}`,
-            key: `${u.label}_${d}`,
+        default: x(({ activeIdx: c, setActiveIdx: b }) => [
+          (a(!0), n(g, null, E(e.options, (u, l) => (a(), n("li", {
+            id: `${t.value}_element_${e.options[l].label}`,
+            key: `${u.label}_${l}`,
             role: "option",
-            "aria-selected": s === d,
+            "aria-selected": c === l,
             class: o(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.dropdownItemClasses]),
-            onClick: f((p) => w(u), ["stop"]),
-            onMouseover: f((p) => b(d), ["stop"]),
-            onBlur: c[0] || (c[0] = f(() => {
+            onClick: f((h) => w(u), ["stop"]),
+            onMouseover: f((h) => b(l), ["stop"]),
+            onBlur: k[1] || (k[1] = f(() => {
             }, ["stop"]))
           }, [
-            n("label", Q, [
-              n("input", {
+            s("label", O, [
+              s("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
                 name: `${t.value}_radio`,
                 type: "radio",
-                checked: u.label === k.value.label,
-                onInput: f((p) => w(u), ["stop"])
-              }, null, 40, X),
-              n("span", {
+                checked: u.label === r.value.label,
+                onInput: f((h) => w(u), ["stop"])
+              }, null, 40, Q),
+              s("span", {
                 innerHTML: u.label
-              }, null, 8, Y)
+              }, null, 8, X)
             ])
-          ], 42, O))), 128))
+          ], 42, J))), 128))
         ]),
         _: 3
-      }, 8, ["open", "toggle-dropdown", "class", "close-when-clicked-outside", "direction", "dropdown-classes"]),
-      e.feedback ? (l(), a(M, { key: 0 }, [
-        e.feedback.valid ? (l(), a("span", {
+      }, 8, ["open", "class", "close-when-clicked-outside", "direction", "dropdown-classes"]),
+      e.feedback ? (a(), n(g, { key: 0 }, [
+        e.feedback.valid ? (a(), n("span", {
           key: 0,
           id: `${t.value}_valid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12",
           innerHTML: e.isValid ? e.feedback.valid : ""
-        }, null, 8, Z)) : r("", !0),
-        e.feedback.invalid ? (l(), a("span", {
+        }, null, 8, Y)) : d("", !0),
+        e.feedback.invalid ? (a(), n("span", {
           key: 1,
           id: `${t.value}_invalid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
           innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
-        }, null, 8, _)) : r("", !0)
-      ], 64)) : r("", !0)
+        }, null, 8, Z)) : d("", !0)
+      ], 64)) : d("", !0)
     ]));
   }
 });
 export {
-  ae as default
+  le as default
 };

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

@@ -83,12 +83,12 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
       "data-cy": t.dataCy,
       "dropdown-element": "ul",
       "dropdown-classes": ["uikit-z-30", t.dropdownClasses],
-      "open-dropdown": r.value,
       "keep-state": !a.value.length || t.keepState === "closed" ? "closed" : "opened",
       "activate-keyboard-controller": t.enableKeyboardController,
       "reset-keyboard-controller": y.value,
       "onUpdate:resetKeyboardController": e[5] || (e[5] = (n) => y.value = n),
-      "onUpdate:dropdownState": e[6] || (e[6] = (n) => r.value = n)
+      open: r.value,
+      "onUpdate:open": e[6] || (e[6] = (n) => r.value = n)
     }, {
       btn_slot: S(() => [
         s("div", {
@@ -179,7 +179,7 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
         }, 1032, ["active", "onClick", "onMouseover"]))), 128))
       ]),
       _: 3
-    }, 8, ["data-cy", "dropdown-classes", "open-dropdown", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller"]));
+    }, 8, ["data-cy", "dropdown-classes", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller", "open"]));
   }
 });
 export {

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

@@ -30,13 +30,13 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ $(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
-  setup(t, { expose: S, emit: V }) {
-    const u = F(t, "modelValue"), r = V, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), B = k(() => a.value.length);
+  setup(t, { expose: V, emit: B }) {
+    const u = F(t, "modelValue"), r = B, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), S = k(() => a.value.length);
     L(() => {
       v.value = q({ delay: 300 }, t.onInputChangeCb);
     });
     const { activeIdx: m, selectedIdx: h } = J({
-      optionsLength: B,
+      optionsLength: S,
       isDropdownOpen: n,
       disableSpaceHandler: !0
     }), O = k(() => {
@@ -103,7 +103,7 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
       }
     ), f(n, (e) => {
       r("update:dropdownState", e);
-    }), S({
+    }), V({
       select: () => {
         C.value?.select();
       }
@@ -126,7 +126,7 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
       "keep-state": !a.value.length || t.keepState === "closed" ? "closed" : "opened",
       "close-when-clicked-outside": t.closeDropdownOnBodyPressed,
       "activate-keyboard-controller": !1,
-      "onUpdate:dropdownState": l[3] || (l[3] = (o) => n.value = o),
+      "onUpdate:open": l[3] || (l[3] = (o) => n.value = o),
       onClick: l[4] || (l[4] = (o) => {
         r("click"), E();
       })

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 { defineComponent as v, useTemplateRef as c, shallowRef as B, computed as l, createElementBlock as C, openBlock as w, withModifiers as s, normalizeStyle as M, 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({
+const S = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], A = /* @__PURE__ */ v({
   __name: "BaseButton",
   props: {
     btnClass: { default: "uikit-btn-w-primary" },
@@ -15,18 +15,18 @@ const w = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     dataCy: {},
     type: {}
   },
-  emits: ["mouseover", "mouseout", "click"],
+  emits: ["mouseover", "mouseout", "click", "keydown"],
   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;
+    const o = r, m = c("buttonEl"), a = B(!1), y = l(() => e.size ? `uikit-btn-${e.size}` : ""), k = l(() => e.outlined ? "uikit-btn-outline" : ""), b = () => {
+      a.value = !0;
+    }, f = () => {
+      a.value = !1;
     };
     return d({
       getRootElement: () => m.value
-    }), (o, t) => (M(), C("button", {
+    }), (n, t) => (w(), C("button", {
       ref: "buttonEl",
-      id: o.$attrs.id,
+      id: n.$attrs.id,
       "data-cy": e.dataCy,
       type: e.type,
       class: z([
@@ -37,31 +37,32 @@ 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
+        y.value,
+        k.value
       ]),
-      style: h(o.$attrs.style),
+      style: M(n.$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);
+        b(), o("mouseover", i);
       }, ["stop"])),
       onMouseout: t[1] || (t[1] = s((i) => {
-        k(), a("mouseout", i);
+        f(), o("mouseout", i);
       }, ["stop"])),
-      onClick: t[2] || (t[2] = (i) => a("click", i))
+      onClick: t[2] || (t[2] = (i) => o("click", i)),
+      onKeydown: t[3] || (t[3] = (i) => o("keydown", i))
     }, [
-      e.isLoading ? u(o.$slots, "spinner", { key: 1 }, () => [
+      e.isLoading ? u(n.$slots, "spinner", { key: 1 }, () => [
         L(g, {
           "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : u(o.$slots, "default", {
+      ]) : u(n.$slots, "default", {
         key: 0,
-        hover: l.value
+        hover: a.value
       })
-    ], 46, w));
+    ], 46, S));
   }
 });
 export {

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

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

package/package.json

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