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

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

@@ -1,10 +1,10 @@
-import { defineComponent as D, mergeModels as y, useModel as p, 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({
+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,
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ y({
+  props: /* @__PURE__ */ $({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -28,174 +28,181 @@ const S = { class: "uikit-relative uikit-flex uikit-h-12 uikit-items-center" },
       default: () => ({ id: "", label: "" })
     },
     modelModifiers: {},
-    open: { type: Boolean, default: !1 },
-    openModifiers: {},
     toggleDropdown: { type: Boolean, default: void 0 },
     toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open", "update:toggleDropdown"]),
-  setup(e, { emit: T }) {
-    const L = T, k = p(e, "modelValue"), m = p(e, "open"), g = p(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__ */ $(["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;
     };
-    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": g.value,
-        "onUpdate:toggleDropdown": c[2] || (c[2] = (s) => g.value = s),
-        class: o([e.wrapperClasses]),
-        "close-when-clicked-outside": e.closeOnBodyPressed,
-        direction: e.dropdownPosition === "top" ? "up" : "down",
-        "dropdown-element": "ul",
-        "dropdown-classes": [
-          "uikit-select-dropdown uikit-z-30 uikit-mt-[7px] 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", {
+    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), {
               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", [
-                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 }
+              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
               ]]),
-              innerHTML: e.label
-            }, 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)
+              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"])
           ])
-        ]),
-        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}`,
+        ], 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}`,
             role: "option",
-            "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((h) => w(u), ["stop"]),
-            onMouseover: f((h) => b(d), ["stop"]),
-            onBlur: c[0] || (c[0] = f(() => {
+            "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(() => {
             }, ["stop"]))
           }, [
-            n("label", Q, [
-              n("input", {
+            o("label", Q, [
+              o("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
-                name: `${t.value}_radio`,
+                name: `${l.value}_radio`,
                 type: "radio",
-                checked: u.label === k.value.label,
-                onInput: f((h) => w(u), ["stop"])
+                checked: d.label === k.value.label,
+                onInput: c((x) => w(d), ["stop"])
               }, null, 40, X),
-              n("span", {
-                innerHTML: u.label
+              o("span", {
+                innerHTML: d.label
               }, null, 8, Y)
             ])
-          ], 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", {
+          ], 42, J))), 128))
+        ], 10, G)
+      ], 2),
+      e.feedback ? (n(), u(V, { key: 0 }, [
+        e.feedback.valid ? (n(), u("span", {
           key: 0,
-          id: `${t.value}_valid_msg`,
+          id: `${l.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", {
+        e.feedback.invalid ? (n(), u("span", {
           key: 1,
-          id: `${t.value}_invalid_msg`,
+          id: `${l.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 {
-  ae as default
+  le as default
 };

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

@@ -1,178 +1,162 @@
-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 { 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 '../../../../../assets/BaseDropDown.css';/* empty css                   */
-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({
+import Y from "../BaseSelect/SelectItem.vue.js";
+import { debounce as Z } from "@wikicasa-dev/utilities";
+const _ = ["readonly", "placeholder"], ee = ["innerHTML"], ue = /* @__PURE__ */ L({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ M({
     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: {},
-    inputValue: {
-      default: ""
-    },
-    inputValueModifiers: {}
+    modelModifiers: {}
   }),
-  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;
+  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;
         return;
       }
-      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();
+      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();
     };
-    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 = $);
+    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);
         });
       },
       { immediate: !0 }
-    ), T(
-      () => M.value?.selectedIdx,
-      (l) => {
-        const e = l ?? -1;
-        e !== -1 && R(e);
+    ), b(
+      () => h.value?.selectedIdx,
+      (t) => {
+        const e = t ?? -1;
+        e !== -1 && T(e);
       }
-    ), T(
-      u,
-      (l, e) => {
-        l === e || l?.label === o.value || (o.value = l?.label || "");
+    ), b(
+      a,
+      (t, e) => {
+        t === e || t?.label === n.value || (n.value = t?.label || "");
       },
       { immediate: !0 }
-    ), U({
-      getRootElement: () => M.value?.getRootElement(),
-      select: N,
-      focus: A
-    }), (l, e) => (g(), V(oe, {
+    ), E({
+      getRootElement: () => h.value?.getRootElement(),
+      select: x,
+      focus: z
+    }), (t, e) => (C(), F(Q, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
-      "data-cy": t.dataCy,
+      "data-cy": o.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)
+      "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)
     }, {
-      btn_slot: S(() => [
-        s("div", {
-          class: f(["uikit-text-16", t.triggerWrapperClasses]),
-          onClick: e[4] || (e[4] = (n) => p("click", n))
+      btn_slot: y(() => [
+        u("div", {
+          class: v(["uikit-text-16", o.triggerWrapperClasses]),
+          onClick: e[3] || (e[3] = (l) => r("click", l))
         }, [
-          C(l.$slots, "left-icon"),
-          s("div", {
-            ref: "inputWrapperRef",
-            class: f(["uikit-relative", t.inputWrapperClasses])
+          f(t.$slots, "left-icon"),
+          u("div", {
+            class: v(["uikit-relative", o.inputWrapperClasses])
           }, [
-            W(s("input", {
+            $(u("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
-                e[0] || (e[0] = (n) => o.value = n),
-                K
+                e[0] || (e[0] = (l) => n.value = l),
+                U
               ],
-              id: Y(I),
-              "data-cy": t.dataCy ? `ac_input_${t.dataCy}` : "",
+              readonly: !!a.value?.label,
               type: "text",
               autocomplete: "off",
-              class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", t.inputClasses]),
+              class: v(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", o.inputClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               },
-              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]
+              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]
             ]),
-            s("span", {
+            u("span", {
               ref_key: "hiddenSpan",
-              ref: F,
-              class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre", t.hiddenTextClasses]),
+              ref: S,
+              class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, _(o.value), 3),
-            W(s("button", {
-              ref: "clearButtonRef",
+            }, P(n.value), 513),
+            $(u("button", {
               type: "button",
-              class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", t.clearButton?.classes]),
+              class: v(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", o.clearButton?.classes]),
               "aria-label": "Clear input",
-              style: 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"
+              style: j({
+                left: `${c.value + (o.clearButton?.offset || 10)}px`
               }),
-              onClick: ee(D, ["stop"])
+              onClick: X(R, ["stop"])
             }, [
-              C(l.$slots, "clear-icon", {}, () => [
-                e[7] || (e[7] = le("X", -1))
+              f(t.$slots, "clear-icon", {}, () => [
+                e[6] || (e[6] = q("X", -1))
               ])
             ], 6), [
-              [ne, k.value && v.value]
+              [J, a.value?.label && c.value]
             ])
           ], 2),
-          C(l.$slots, "right-icon")
+          f(t.$slots, "right-icon")
         ], 2)
       ]),
-      default: S(({ activeIdx: n, setActiveIdx: h }) => [
-        (g(!0), G(J, null, Q(a.value, (m, i) => (g(), V(ae, {
-          key: i,
-          active: n === i,
+      default: y(({ activeIdx: l, setActiveIdx: D }) => [
+        (C(!0), N(A, null, H(i.value, (B, d) => (C(), F(Y, {
+          key: d,
+          active: l === d,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (w) => R(i),
-          onMouseover: (w) => h(i)
+          onClick: (K) => T(d),
+          onMouseover: (K) => D(d)
         }, {
-          default: S(() => [
-            C(l.$slots, "option-content", {
-              option: m,
-              idx: i
+          default: y(() => [
+            f(t.$slots, "option-content", {
+              option: B,
+              idx: d
             }, () => [
-              s("span", {
-                innerHTML: m.label
-              }, null, 8, se)
+              u("span", {
+                innerHTML: B.label
+              }, null, 8, ee)
             ])
           ]),
           _: 2
@@ -183,5 +167,5 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
   }
 });
 export {
-  ke as default
+  ue as default
 };