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

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

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

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

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

@@ -1,7 +1,7 @@
-import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as m, Teleport as $, createElementVNode as a, normalizeClass as s, createElementBlock as y, createCommentVNode as h, renderSlot as d, withModifiers as D, createVNode as F, unref as K, nextTick as N } from "vue";
-import { isWindows as g, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
+import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as r, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as d, createVNode as D, unref as K, nextTick as N } from "vue";
+import { isWindows as C, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
 import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
-const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
+const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -24,25 +24,25 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
     titleClasses: {}
   },
   emits: ["closed", "opened", "dialogClick"],
-  setup(e, { emit: w }) {
-    const c = w, i = n(!1), r = n(null), l = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
+  setup(e, { emit: g }) {
+    const c = g, i = n(!1), m = n(null), a = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
       t === "Escape" && o();
-    }, C = () => {
+    }, x = () => {
       document?.body.addEventListener("keydown", f);
     }, b = () => {
       document?.body.removeEventListener("keydown", f);
-    }, x = async () => {
+    }, p = async () => {
       i.value = !0, N(() => {
-        C(), g() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
+        x(), C() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
       }), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
         o();
       }, e.autoClose);
-    }, p = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !0);
     }, M = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !1);
-    }, B = async (t) => {
-      if (!r.value?.contains(t.target) && e.closeOnClickOut) {
+      a.value && a.value.contains(t.target) && (u.value = !0);
+    }, B = (t) => {
+      a.value && a.value.contains(t.target) && (u.value = !1);
+    }, L = async () => {
+      if (e.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
           return;
@@ -51,25 +51,21 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
       }
     }, o = async () => {
       i.value = !1, b(), document?.documentElement.classList.remove("uikit-no-scrolling"), navigator.userAgent.includes("Windows") ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling"), await S(() => {
-        r.value?.classList.add("uikit-hidden"), c("closed");
+        m.value?.classList.add("uikit-hidden"), c("closed");
       }, 250);
     };
-    z(() => {
-      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), g() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
+    return z(() => {
+      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), C() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
     }), H(
       () => e.showModal,
       async (t) => {
-        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await x(), !t && i.value && await o(), i.value = t;
+        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
       },
       { immediate: !0 }
-    );
-    const L = (t) => {
-      l.value === t.target && t.stopPropagation();
-    };
-    return (t, v) => (m(), O($, { to: "body" }, [
-      a("div", {
+    ), (t, v) => (r(), O($, { to: "body" }, [
+      l("div", {
         ref_key: "backdropEl",
-        ref: r,
+        ref: m,
         class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
           e.customBackdropClasses,
           {
@@ -80,11 +76,11 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
           { hide: k.value }
         ]]),
         style: { "z-index": "1062" },
-        onClick: B,
-        onMousedown: p,
-        onMouseup: M
+        onClick: L,
+        onMousedown: M,
+        onMouseup: B
       }, [
-        a("dialog", {
+        l("dialog", {
           id: e.id,
           ref: "modalDialog",
           "data-cy": e.dataCy,
@@ -98,52 +94,50 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
             `base-${e.size}`,
             e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
           ]]),
-          tabindex: "-1",
-          onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
-          onFocusin: L
+          onClick: v[0] || (v[0] = y((E) => c("dialogClick", E), ["stop"]))
         }, [
-          a("div", {
+          l("div", {
             class: s(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
           }, [
-            e.withCloseIcon ? (m(), y("button", {
+            e.withCloseIcon ? (r(), h("button", {
               key: 0,
               id: "close-icon-btn",
               "data-cy": "bbt-default-close-icon-btn",
               class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
               type: "button",
               "aria-label": "Close",
-              onClick: D(o, ["prevent", "stop"])
+              onClick: y(o, ["prevent", "stop"])
             }, [
-              F(K(V), {
+              D(K(V), {
                 class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
-                width: e.closeIcon?.size || 20,
-                height: e.closeIcon?.size || 20
+                width: e.closeIcon?.size || 30,
+                height: e.closeIcon?.size || 30
               }, null, 8, ["class", "width", "height"])
-            ], 2)) : h("", !0),
+            ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [
-              a("span", {
+              l("span", {
                 class: s(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
                 innerHTML: e.headerTitle
               }, null, 10, U)
             ])
           ], 2),
-          a("div", {
+          l("div", {
             class: s(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
           }, [
             d(t.$slots, "body", { closeModal: o })
           ], 2),
-          t.$slots.footer ? (m(), y("div", {
+          t.$slots.footer ? (r(), h("div", {
             key: 0,
             class: s(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
           }, [
             d(t.$slots, "footer", { closeModal: o })
-          ], 2)) : h("", !0),
+          ], 2)) : w("", !0),
           d(t.$slots, "fixed-bottom")
-        ], 42, P)
+        ], 10, F)
       ], 34)
     ]));
   }
 });
 export {
-  j as default
+  R as default
 };

package/dist/packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js

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