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

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

@@ -1,10 +1,10 @@
-import { defineComponent as H, mergeModels as $, useModel as p, useId as I, computed as M, ref as D, watch as h, onMounted as F, onUnmounted as P, createElementBlock as u, openBlock as n, normalizeClass as a, createElementVNode as o, createCommentVNode as r, withModifiers as c, renderSlot as z, unref as b, createBlock as A, createVNode as E, Fragment as V, renderList as N } from "vue";
-import { useKeyboardController as O } from "@wikicasa-dev/vue-composables";
-import { WarningIconRounded as S, ArrowIcon as q } from "@wikicasa-dev/svg-icons";
-const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], R = ["innerHTML"], U = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, W = ["innerHTML"], G = ["data-cy"], J = ["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"], le = /* @__PURE__ */ H({
-  inheritAttrs: !1,
+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 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({
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ y({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -28,181 +28,175 @@ const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-cont
       default: () => ({ id: "", label: "" })
     },
     modelModifiers: {},
+    open: { type: Boolean, default: !1 },
+    openModifiers: {},
     toggleDropdown: { type: Boolean, default: void 0 },
     toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["click", "update:dropdownState"], ["update:modelValue", "update:toggleDropdown"]),
-  setup(e, { emit: L }) {
-    const y = L, k = p(e, "modelValue"), g = p(e, "toggleDropdown"), T = I(), l = M(() => e.namespace || T), t = D(!1), m = M(() => !!k.value.label), { activeIdx: v, selectedIdx: B } = O({
-      optionsLength: e.options.length,
-      isDropdownOpen: t
-    }), w = (i) => {
-      t.value = !1, k.value = i;
+  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);
     };
-    h(B, (i) => {
-      w(e.options[i]), t.value = !1;
-    }), h(g, (i) => {
-      i && (t.value = !t.value, g.value = !1);
-    }), h(t, (i) => {
-      y("update:dropdownState", i);
-    });
-    const C = ({ target: i }) => {
-      `${l.value}_btn` !== i.id && (t.value = !1);
-    };
-    return F(() => {
-      e.closeOnBodyPressed && document.addEventListener("click", C);
-    }), P(() => {
-      e.closeOnBodyPressed && document.removeEventListener("click", C);
-    }), (i, s) => (n(), u("div", {
-      class: a(i.$attrs.class)
-    }, [
-      o("div", {
-        class: a(["uikit-relative uikit-flex uikit-h-12 uikit-items-center", e.wrapperClasses])
-      }, [
-        e.label ? (n(), u("label", {
-          key: 0,
-          id: `${l.value}_label`,
-          class: a(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
-            m.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
-            e.labelClasses,
-            { "uikit-left-9": i.$slots.lefticon && !m.value },
-            { "uikit-left-4": !i.$slots.lefticon && !m.value }
-          ]]),
-          innerHTML: e.label
-        }, null, 10, j)) : r("", !0),
-        i.$slots.lefticon ? (n(), u("span", {
-          key: 1,
-          class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
-          onClick: s[0] || (s[0] = c((d) => t.value = !t.value, ["stop"]))
-        }, [
-          z(i.$slots, "lefticon")
-        ])) : r("", !0),
-        o("button", {
-          id: `${l.value}_btn`,
-          ref: "btnEl",
-          type: "button",
-          "data-cy": e.dataCy,
-          class: a(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
-          "aria-required": !!i.$attrs.required,
-          role: "combobox",
-          "aria-haspopup": "listbox",
-          "aria-controls": `${l.value}_dropdown`,
-          "aria-labelledby": `${l.value}_label ${l.value}_btn`,
-          "aria-expanded": t.value,
-          "aria-activedescendant": b(v) >= 0 && t.value ? `${l.value}_element_${e.options[b(v)].label}` : "",
-          "aria-invalid": e.isValid === !1,
-          "aria-describedby": e.isValid === !1 ? `${l.value}_invalid_msg` : void 0,
-          onClick: s[1] || (s[1] = (d) => {
-            t.value = !t.value, y("click", d);
-          })
-        }, [
-          o("span", {
-            class: a(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
-            innerHTML: k.value.visibleLabel || k.value.label
-          }, null, 10, R),
-          o("span", U, [
-            e.isValid == !1 ? (n(), A(b(S), {
+    return I(
+      () => H.value?.selectedIdx,
+      (i) => {
+        i === void 0 || i === -1 || (w(e.options[i]), m.value = !1);
+      }
+    ), (i, c) => (l(), a("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),
+        class: o([e.wrapperClasses]),
+        "activate-keyboard-controller": "",
+        "close-when-clicked-outside": e.closeOnBodyPressed,
+        direction: e.dropdownPosition === "top" ? "up" : "down",
+        "dropdown-element": "ul",
+        "dropdown-classes": [
+          "uikit-select-dropdown uikit-z-30 uikit-mb-0",
+          e.dropdownClasses
+        ],
+        "dropdown-attrs": {
+          role: "listbox",
+          tabindex: -1,
+          "aria-multiselectable": !1
+        }
+      }, {
+        btn_slot: x(({ toggleDropdown: s, isOpen: b, activeIdx: u }) => [
+          n("div", S, [
+            e.label ? (l(), a("label", {
               key: 0,
-              class: "uikit-mr-1",
-              width: 20,
-              height: 20,
-              "stroke-color": "#FA4F64"
-            })) : r("", !0),
-            E(b(q), {
-              class: a(["uikit-transition-transform motion-reduce:uikit-transition-none", [
-                t.value ? "uikit-rotate-180" : "",
-                e.arrowIcon?.classes
+              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", [
+                v.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
+                e.labelClasses,
+                { "uikit-left-9": i.$slots.lefticon && !v.value },
+                { "uikit-left-4": !i.$slots.lefticon && !v.value }
               ]]),
-              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, K),
-        o("fieldset", {
-          "aria-hidden": "true",
-          class: a(["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,
-            e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
-            {
-              "uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
-            },
-            { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
-          ]])
-        }, [
-          o("legend", {
-            class: a([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
-          }, [
-            e.label ? (n(), u("span", {
-              key: 0,
-              class: a(["uikit-mx-5px", [k.value.label ? "uikit-invisible" : "uikit-hidden"]]),
               innerHTML: e.label
-            }, null, 10, W)) : r("", !0)
-          ], 2)
-        ], 2),
-        o("ul", {
-          "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
-          role: "listbox",
-          tabindex: -1,
-          "aria-multiselectable": !1,
-          class: a(["uikit-absolute uikit-z-30 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
-            { "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !t.value },
-            {
-              "uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": t.value
-            },
-            { "uikit-bottom-[55px]": e.dropdownPosition === "top" },
-            { "uikit-top-[55px]": e.dropdownPosition === "bottom" },
-            e.dropdownClasses
-          ]]),
-          onClick: s[3] || (s[3] = c(() => {
-          }, ["stop"]))
-        }, [
-          (n(!0), u(V, null, N(e.options, (d, f) => (n(), u("li", {
-            id: `${l.value}_element_${e.options[f].label}`,
-            key: `${d.label}_${f}`,
+            }, null, 10, U)) : r("", !0),
+            i.$slots.lefticon ? (l(), a("span", {
+              key: 1,
+              class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+              onClick: f((d) => s(), ["stop"])
+            }, [
+              A(i.$slots, "lefticon")
+            ], 8, j)) : r("", !0),
+            n("button", {
+              id: `${t.value}_btn`,
+              ref: "btnEl",
+              type: "button",
+              "data-cy": e.dataCy,
+              class: o(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
+              "aria-required": !!i.$attrs.required,
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-controls": `${t.value}_dropdown`,
+              "aria-labelledby": `${t.value}_label ${t.value}_btn`,
+              "aria-expanded": b,
+              "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);
+              }
+            }, [
+              n("span", {
+                class: o(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
+                innerHTML: k.value?.visibleLabel || k.value?.label
+              }, null, 10, W),
+              n("span", J, [
+                e.isValid == !1 ? (l(), E(V(P), {
+                  key: 0,
+                  class: "uikit-mr-1",
+                  width: 20,
+                  height: 20,
+                  "stroke-color": "#FA4F64"
+                })) : r("", !0),
+                $(V(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", {
+              "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,
+                e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
+                {
+                  "uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
+                },
+                { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
+              ]])
+            }, [
+              n("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", {
+                  key: 0,
+                  class: o(["uikit-mx-5px", [
+                    k.value.label ? "uikit-invisible" : "uikit-hidden"
+                  ]]),
+                  innerHTML: e.label
+                }, null, 10, K)) : r("", !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}`,
             role: "option",
-            "aria-selected": b(v) === f,
-            class: a(["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: c((x) => w(d), ["stop"]),
-            onMouseover: c((x) => v.value = f, ["stop"]),
-            onBlur: s[2] || (s[2] = c(() => {
+            "aria-selected": s === d,
+            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(() => {
             }, ["stop"]))
           }, [
-            o("label", Q, [
-              o("input", {
+            n("label", Q, [
+              n("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
-                name: `${l.value}_radio`,
+                name: `${t.value}_radio`,
                 type: "radio",
-                checked: d.label === k.value.label,
-                onInput: c((x) => w(d), ["stop"])
+                checked: u.label === k.value.label,
+                onInput: f((p) => w(u), ["stop"])
               }, null, 40, X),
-              o("span", {
-                innerHTML: d.label
+              n("span", {
+                innerHTML: u.label
               }, null, 8, Y)
             ])
-          ], 42, J))), 128))
-        ], 10, G)
-      ], 2),
-      e.feedback ? (n(), u(V, { key: 0 }, [
-        e.feedback.valid ? (n(), u("span", {
+          ], 42, O))), 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", {
           key: 0,
-          id: `${l.value}_valid_msg`,
+          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 ? (n(), u("span", {
+        e.feedback.invalid ? (l(), a("span", {
           key: 1,
-          id: `${l.value}_invalid_msg`,
+          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)
-    ], 2));
+    ]));
   }
 });
 export {
-  le as default
+  ae as default
 };

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

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