vlite3 1.1.2 → 1.1.5

package/components/Dropdown/Dropdown.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as ne, ref as i, computed as c, inject as oe, onMounted as ae, onUnmounted as ie, watch as P, provide as V, reactive as se, toRefs as re, openBlock as x, createElementBlock as R, normalizeStyle as de, createVNode as M, unref as g, withCtx as f, renderSlot as m, createCommentVNode as z, createBlock as ue, normalizeClass as ce, createSlots as fe, normalizeProps as E, guardReactiveProps as j } from "vue";
-import me from "v-tooltip-lite";
+import { defineComponent as oe, ref as i, computed as f, inject as ae, onMounted as ie, onUnmounted as se, watch as P, provide as R, reactive as re, toRefs as de, openBlock as x, createElementBlock as z, normalizeStyle as ue, createVNode as M, unref as u, withCtx as m, renderSlot as v, createCommentVNode as E, createBlock as ce, normalizeClass as fe, createSlots as me, normalizeProps as j, guardReactiveProps as U } from "vue";
+import ve from "v-tooltip-lite";
 import "v-tooltip-lite/style.css";
-import ve from "./DropdownMenu.vue.js";
-import he from "./DropdownTrigger.vue.js";
-import pe from "../ConfirmationModal.vue.js";
-import { useDropdownIds as ge } from "./composables/useDropdownIds.js";
-import { useDropdownSelection as ye } from "./composables/useDropdownSelection.js";
-import { useDropdownHydration as be } from "./composables/useDropdownHydration.js";
-const Ce = {
+import he from "./DropdownMenu.vue.js";
+import ye from "./DropdownTrigger.vue.js";
+import ge from "../ConfirmationModal.vue.js";
+import { useDropdownIds as pe } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as be } from "./composables/useDropdownSelection.js";
+import { useDropdownHydration as Ce } from "./composables/useDropdownHydration.js";
+const Oe = {
   key: 0,
   tabindex: "0"
-}, Me = /* @__PURE__ */ ne({
+}, Ne = /* @__PURE__ */ oe({
   __name: "Dropdown",
   props: {
     selected: {},
@@ -34,6 +34,7 @@ const Ce = {
     nestedPosition: {},
     nestedOffset: {},
     showSelectedLabel: { type: Boolean, default: !0 },
+    showSelectedIcon: { type: Boolean, default: !1 },
     selectable: { type: Boolean, default: !0 },
     doubleConfirmation: { type: Boolean, default: !1 },
     layout: { default: "default" },
@@ -47,101 +48,102 @@ const Ce = {
     triggerProps: {},
     direction: { default: "ltr" },
     isNested: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
   },
   emits: ["onSelect", "update:modelValue", "onOpen", "onClose", "update:isOpen", "load-more", "search"],
-  setup(l, { emit: U }) {
-    const o = l, v = U, y = i(!1), h = i(null), r = i({
+  setup(t, { emit: q }) {
+    const l = t, h = q, p = i(!1), y = i(null), r = i({
       title: "Confirm Selection",
       description: "Are you sure you want to select this option?",
       confirmText: "Confirm",
       cancelText: "Cancel",
       variant: "primary"
-    }), q = c(() => o.position ? o.position : o.direction === "rtl" ? "bottom-end" : "bottom-start"), F = c(() => o.nestedPosition ? o.nestedPosition : o.direction === "rtl" ? "left-start" : "right-start"), b = i(o.isOpen || !1), C = i(0), G = `dropdown-${Math.random().toString(36).substring(2, 9)}`, $ = c(() => o.menuId || G), p = i([]), s = oe("dropdown-context", null), J = (e) => {
-      p.value.includes(e) || p.value.push(e), s?.registerChildId?.(e);
-    }, K = (e) => {
-      p.value = p.value.filter((n) => n !== e), s?.unregisterChildId?.(e);
+    }), F = f(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), G = f(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), b = i(l.isOpen || !1), C = i(0), J = `dropdown-${Math.random().toString(36).substring(2, 9)}`, w = f(() => l.menuId || J), g = i([]), s = ae("dropdown-context", null), K = (e) => {
+      g.value.includes(e) || g.value.push(e), s?.registerChildId?.(e);
+    }, Q = (e) => {
+      g.value = g.value.filter((o) => o !== e), s?.unregisterChildId?.(e);
     };
-    ae(() => {
-      s?.registerChildId && s.registerChildId(`#${$.value}`);
-    }), ie(() => {
-      s?.unregisterChildId && s.unregisterChildId(`#${$.value}`);
+    ie(() => {
+      s?.registerChildId && s.registerChildId(`#${w.value}`);
+    }), se(() => {
+      s?.unregisterChildId && s.unregisterChildId(`#${w.value}`);
     }), P(
-      () => o.isOpen,
+      () => l.isOpen,
       (e) => {
         if (e !== void 0) {
-          if (o.disabled && e) return;
+          if ((l.disabled || l.readonly) && e) return;
           b.value = e;
         }
       }
     );
     const N = (e) => {
-      if (o.disabled) {
-        b.value = !1, v("update:isOpen", !1);
+      if (l.disabled || l.readonly) {
+        b.value = !1, h("update:isOpen", !1);
         return;
       }
-      b.value = e, v("update:isOpen", e), v(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
+      b.value = e, h("update:isOpen", e), h(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
     }, O = () => {
       N(!1);
-    }, Q = (e) => {
+    }, W = (e) => {
       e ? C.value++ : C.value = Math.max(0, C.value - 1);
     };
-    V("dropdown-context", {
+    R("dropdown-context", {
       close: O,
       onChildToggle: (e) => {
-        Q(e), s?.onChildToggle?.(e);
+        W(e), s?.onChildToggle?.(e);
       },
-      registerChildId: J,
-      unregisterChildId: K
-    }), V("modal-context", null);
-    const w = c(() => o.options ? o.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), S = i([]), A = i(!1), k = i(!1);
+      registerChildId: K,
+      unregisterChildId: Q
+    }), R("modal-context", null);
+    const I = f(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), S = i([]), A = i(!1), $ = i(!1);
     P(
-      w,
+      I,
       (e) => {
         if (e) {
-          if (o.remote) {
-            const n = [...S.value];
-            e.forEach((t) => {
-              n.some((a) => a.value !== void 0 && t.value !== void 0 ? typeof a.value == "object" && a.key && t.key ? a.key === t.key && a.value[a.key] === t.value[t.key] : a.value === t.value : a.label === t.label) || n.push(t);
-            }), S.value = n;
+          if (l.remote) {
+            const o = [...S.value];
+            e.forEach((n) => {
+              o.some((a) => a.value !== void 0 && n.value !== void 0 ? typeof a.value == "object" && a.key && n.key ? a.key === n.key && a.value[a.key] === n.value[n.key] : a.value === n.value : a.label === n.label) || o.push(n);
+            }), S.value = o;
           } else
             S.value = e;
           !A.value && e.length > 0 && (A.value = !0, setTimeout(() => {
-            k.value = !0, H(T.value);
+            $.value = !0, H(B.value);
           }, 10));
         }
       },
       { immediate: !0 }
     );
-    const u = c(() => {
-      const e = [...S.value], n = new Set(e.map((t) => t.value ?? t.label));
-      return I.value.forEach((t, d) => {
-        n.has(d) || (e.unshift(t), n.add(d));
+    const c = f(() => {
+      const e = [...S.value], o = new Set(e.map((n) => n.value ?? n.label));
+      return k.value.forEach((n, d) => {
+        o.has(d) || (e.unshift(n), o.add(d));
       }), e;
-    }), { selectedBuffer: I, isHydrating: W, hydrateSelected: H } = be({
-      fetchSelected: o.fetchSelected,
-      getAvailableOptions: () => u.value,
-      isReady: () => k.value
-    }), { getAllRecursiveIds: X } = ge(), Y = se({
-      ...re(o),
-      options: u
-    }), { currentValue: T, selectedLabel: D, selectOption: Z } = ye(
-      Y,
-      v
-    ), _ = c(() => {
-      const e = o.ignoreClickOutside || [], n = X(u.value);
-      return [.../* @__PURE__ */ new Set([...e, ...n, ...p.value])];
+    }), { selectedBuffer: k, isHydrating: X, hydrateSelected: H } = Ce({
+      fetchSelected: l.fetchSelected,
+      getAvailableOptions: () => c.value,
+      isReady: () => $.value
+    }), { getAllRecursiveIds: Y } = pe(), Z = re({
+      ...de(l),
+      options: c
+    }), { currentValue: B, selectedLabel: D, selectedIcon: L, selectOption: _ } = be(
+      Z,
+      h
+    ), ee = f(() => {
+      const e = l.ignoreClickOutside || [], o = Y(c.value);
+      return [.../* @__PURE__ */ new Set([...e, ...o, ...g.value])];
     });
     P(
-      () => T.value,
+      () => B.value,
       (e) => {
-        k.value && H(e);
+        $.value && H(e);
       },
       { deep: !0 }
     );
-    const ee = (e) => {
-      if (o.disabled || e.disabled) return;
-      o.doubleConfirmation || !!e.confirmation ? (h.value = e, typeof e.confirmation == "object" ? r.value = {
+    const te = (e) => {
+      if (l.disabled || l.readonly || e.disabled) return;
+      l.doubleConfirmation || !!e.confirmation ? (y.value = e, typeof e.confirmation == "object" ? r.value = {
         title: e.confirmation.title || "Confirm Selection",
         description: e.confirmation.description || "Are you sure you want to select this option?",
         confirmText: e.confirmation.confirmText || "Confirm",
@@ -153,136 +155,138 @@ const Ce = {
         confirmText: "Confirm",
         cancelText: "Cancel",
         variant: "primary"
-      }, y.value = !0, O()) : (L(e), o.closeOnSelect && O());
-    }, L = (e) => {
-      if (o.disabled || e.disabled) return;
-      const n = e.value ?? e.label;
-      I.value.has(n) || I.value.set(n, e);
-      const t = Z(e);
-      if (!o.isNested) {
+      }, p.value = !0, O()) : (V(e), l.closeOnSelect && O());
+    }, V = (e) => {
+      if (l.disabled || l.readonly || e.disabled) return;
+      const o = e.value ?? e.label;
+      k.value.has(o) || k.value.set(o, e);
+      const n = _(e);
+      if (!l.isNested) {
         const d = e._originalOption || e, a = d.value ?? d.label;
-        (e._path || [d]).forEach((B) => {
-          typeof B.onSelect == "function" && B.onSelect({
+        (e._path || [d]).forEach((T) => {
+          typeof T.onSelect == "function" && T.onSelect({
             value: a,
-            option: B,
-            data: u.value || [],
-            values: t
+            option: T,
+            data: c.value || [],
+            values: n
           });
         });
       }
-    }, te = () => {
-      h.value && (L(h.value), h.value = null, y.value = !1);
     }, le = () => {
-      h.value = null, y.value = !1;
+      y.value && (V(y.value), y.value = null, p.value = !1);
+    }, ne = () => {
+      y.value = null, p.value = !1;
     };
-    return (e, n) => (x(), R("div", {
+    return (e, o) => (x(), z("div", {
       class: "relative inline-block text-left",
-      style: de({ direction: l.direction })
+      style: ue({ direction: t.direction })
     }, [
-      M(g(me), {
+      M(u(ve), {
         content: "",
         trigger: "click",
         arrow: !1,
-        teleport: l.teleport,
-        offset: l.offset,
-        placement: q.value,
+        teleport: t.teleport,
+        offset: t.offset,
+        placement: F.value,
         isOpen: b.value,
         keepAlive: C.value > 0,
-        menuId: $.value,
-        ignoreClickOutside: _.value,
+        menuId: w.value,
+        ignoreClickOutside: ee.value,
         class: "w-full",
-        className: "dropdown " + (l.className || ""),
-        onOnShow: n[2] || (n[2] = (t) => e.$emit("onOpen")),
-        onOnHide: n[3] || (n[3] = (t) => e.$emit("onClose")),
+        className: "dropdown " + (t.className || ""),
+        onOnShow: o[2] || (o[2] = (n) => e.$emit("onOpen")),
+        onOnHide: o[3] || (o[3] = (n) => e.$emit("onClose")),
         "onUpdate:isOpen": N,
         triggerClass: "w-full",
         styles: { padding: "0" }
       }, {
-        trigger: f(({ isOpen: t }) => [
-          m(e.$slots, "trigger", E(j({ selectedLabel: g(D), isOpen: t })), () => [
-            M(he, {
-              "selected-label": g(D),
-              "is-open": t,
-              direction: l.direction,
-              disabled: l.disabled,
-              triggerProps: l.triggerProps,
+        trigger: m(({ isOpen: n }) => [
+          v(e.$slots, "trigger", j(U({ selectedLabel: u(D), selectedIcon: t.showSelectedIcon ? u(L) : void 0, isOpen: n })), () => [
+            M(ye, {
+              "selected-label": u(D),
+              "selected-icon": t.showSelectedIcon ? u(L) : void 0,
+              "is-open": n,
+              direction: t.direction,
+              disabled: t.disabled,
+              readonly: t.readonly,
+              triggerProps: t.triggerProps,
               class: "w-full"
-            }, null, 8, ["selected-label", "is-open", "direction", "disabled", "triggerProps"])
+            }, null, 8, ["selected-label", "selected-icon", "is-open", "direction", "disabled", "readonly", "triggerProps"])
           ])
         ]),
-        default: f(() => [
-          e.$slots?.default ? (x(), R("span", Ce, [
-            m(e.$slots, "default")
-          ])) : z("", !0),
-          !l.disabled && (w.value.length || u.value.length || e.$slots.menu || e.$slots.item || l.remote || l.searchable) ? (x(), ue(ve, {
+        default: m(() => [
+          e.$slots?.default ? (x(), z("span", Oe, [
+            v(e.$slots, "default")
+          ])) : E("", !0),
+          !(t.disabled || t.readonly) && (I.value.length || c.value.length || e.$slots.menu || e.$slots.item || t.remote || t.searchable) ? (x(), ce(he, {
             key: 1,
-            options: w.value,
-            cachedOptions: u.value,
-            class: ce(l.className),
-            selected: g(T),
-            selectedIndex: l.selectedIndex,
-            maxHeight: l.maxHeight,
-            nestedPosition: F.value,
-            nestedOffset: l.nestedOffset,
-            selectable: l.selectable,
-            direction: l.direction,
-            layout: l.layout,
-            columns: l.columns,
-            loading: l.loading || g(W),
-            hasMore: l.hasMore,
-            searchable: l.searchable,
-            remote: l.remote,
-            debounceTime: l.debounceTime,
-            onSelect: ee,
+            options: I.value,
+            cachedOptions: c.value,
+            class: fe(t.className),
+            selected: u(B),
+            selectedIndex: t.selectedIndex,
+            maxHeight: t.maxHeight,
+            nestedPosition: G.value,
+            nestedOffset: t.nestedOffset,
+            selectable: t.selectable,
+            direction: t.direction,
+            layout: t.layout,
+            columns: t.columns,
+            loading: t.loading || u(X),
+            hasMore: t.hasMore,
+            searchable: t.searchable,
+            remote: t.remote,
+            debounceTime: t.debounceTime,
+            onSelect: te,
             onClose: O,
-            onLoadMore: n[0] || (n[0] = (t) => e.$emit("load-more")),
-            onSearch: n[1] || (n[1] = (t) => e.$emit("search", t))
-          }, fe({ _: 2 }, [
+            onLoadMore: o[0] || (o[0] = (n) => e.$emit("load-more")),
+            onSearch: o[1] || (o[1] = (n) => e.$emit("search", n))
+          }, me({ _: 2 }, [
             e.$slots.menu ? {
               name: "menu",
-              fn: f(() => [
-                m(e.$slots, "menu")
+              fn: m(() => [
+                v(e.$slots, "menu")
               ]),
               key: "0"
             } : void 0,
             e.$slots.item ? {
               name: "item",
-              fn: f((t) => [
-                m(e.$slots, "item", E(j(t)))
+              fn: m((n) => [
+                v(e.$slots, "item", j(U(n)))
               ]),
               key: "1"
             } : void 0,
             e.$slots.header ? {
               name: "header",
-              fn: f(() => [
-                m(e.$slots, "header")
+              fn: m(() => [
+                v(e.$slots, "header")
               ]),
               key: "2"
             } : void 0,
             e.$slots.footer ? {
               name: "footer",
-              fn: f(() => [
-                m(e.$slots, "footer")
+              fn: m(() => [
+                v(e.$slots, "footer")
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : z("", !0)
+          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : E("", !0)
         ]),
         _: 3
       }, 8, ["teleport", "offset", "placement", "isOpen", "keepAlive", "menuId", "ignoreClickOutside", "className"]),
-      M(pe, {
-        show: y.value,
+      M(ge, {
+        show: p.value,
         title: r.value.title,
         description: r.value.description,
         "confirm-text": r.value.confirmText,
         "cancel-text": r.value.cancelText,
         variant: r.value.variant,
-        onConfirm: te,
-        onCancel: le
+        onConfirm: le,
+        onCancel: ne
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"])
     ], 4));
   }
 });
 export {
-  Me as default
+  Ne as default
 };

package/components/Dropdown/DropdownBooleanItem.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as r, computed as d, openBlock as a, createElementBlock as u, withModifiers as p, normalizeClass as f, createElementVNode as l, createBlock as g, createCommentVNode as v, toDisplayString as h, createVNode as x } from "vue";
-import b from "../Switch.vue.js";
+import { defineComponent as m, computed as d, openBlock as a, createElementBlock as u, withModifiers as p, normalizeClass as f, createElementVNode as l, createBlock as g, createCommentVNode as h, toDisplayString as v, createVNode as b } from "vue";
+import x from "../Switch.vue.js";
 import y from "../Icon.vue.js";
 import { $t as k } from "../../utils/i18n.js";
-const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "truncate font-medium" }, N = /* @__PURE__ */ r({
+const w = ["data-testid"], B = { class: "flex items-center gap-2 flex-1 min-w-0" }, $ = { class: "truncate font-medium" }, z = /* @__PURE__ */ m({
   __name: "DropdownBooleanItem",
   props: {
     option: {},
@@ -11,36 +11,37 @@ const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "tru
   },
   emits: ["change"],
   setup(e, { emit: c }) {
-    const o = e, s = c, m = d(
+    const o = e, s = c, r = d(
       () => o.option.labelI18n ? k(o.option.labelI18n) : o.option.label
-    ), t = (n) => {
-      s("change", n, o.option);
+    ), n = (t) => {
+      s("change", t, o.option);
     };
-    return (n, i) => (a(), u("div", {
+    return (t, i) => (a(), u("div", {
       tabindex: "0",
       "data-dropdown-item": "",
       class: f(["relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", [
         e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
       ]]),
-      onClick: i[0] || (i[0] = p((j) => t(!e.value), ["stop"]))
+      "data-testid": t.$attrs["data-testid"] || `dropdown-item-bool-${e.option.key || e.option.label}`.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
+      onClick: i[0] || (i[0] = p((j) => n(!e.value), ["stop"]))
     }, [
-      l("div", w, [
+      l("div", B, [
         e.option.icon || e.option.emoji ? (a(), g(y, {
           key: 0,
           icon: e.option.icon,
           emoji: e.option.emoji,
           class: "h-4 w-4 shrink-0 opacity-70"
-        }, null, 8, ["icon", "emoji"])) : v("", !0),
-        l("span", B, h(m.value), 1)
+        }, null, 8, ["icon", "emoji"])) : h("", !0),
+        l("span", $, v(r.value), 1)
       ]),
-      x(b, {
+      b(x, {
         "model-value": e.value,
         class: "ml-3 shrink-0 scale-75 origin-right",
-        "onUpdate:modelValue": t
+        "onUpdate:modelValue": n
       }, null, 8, ["model-value"])
-    ], 2));
+    ], 10, w));
   }
 });
 export {
-  N as default
+  z as default
 };

package/components/Dropdown/DropdownItem.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as g, computed as s, openBlock as n, createElementBlock as l, withKeys as k, withModifiers as w, normalizeClass as h, renderSlot as I, normalizeProps as $, guardReactiveProps as B, createBlock as p, createCommentVNode as i, createElementVNode as c, toDisplayString as a } from "vue";
+import { defineComponent as g, computed as a, openBlock as n, createElementBlock as s, withKeys as w, withModifiers as k, normalizeClass as h, renderSlot as $, normalizeProps as I, guardReactiveProps as B, createBlock as p, createCommentVNode as i, createElementVNode as c, toDisplayString as d } from "vue";
 import v from "../Icon.vue.js";
-import { $t as d } from "../../utils/i18n.js";
-const j = ["tabindex", "data-disabled"], C = { class: "flex flex-col flex-1 min-w-0" }, D = { class: "flex items-center justify-between gap-2" }, S = { class: "truncate font-medium" }, z = {
+import { $t as r } from "../../utils/i18n.js";
+const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-col flex-1 min-w-0" }, S = { class: "flex items-center justify-between gap-2" }, z = { class: "truncate font-medium" }, D = {
   key: 0,
   class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
 }, E = {
   key: 0,
   class: "text-[10px] text-muted-foreground truncate opacity-70"
-}, P = /* @__PURE__ */ g({
+}, N = /* @__PURE__ */ g({
   __name: "DropdownItem",
   props: {
     option: {},
@@ -18,14 +18,14 @@ const j = ["tabindex", "data-disabled"], C = { class: "flex flex-col flex-1 min-
   },
   emits: ["click", "mouseenter"],
   setup(e, { emit: x }) {
-    const t = e, r = x, y = s(
-      () => t.option.labelI18n ? d(t.option.labelI18n) : t.option.label
-    ), u = s(
-      () => t.option.subtitleI18n ? d(t.option.subtitleI18n) : t.option.subtitle
-    ), m = s(
-      () => t.option.descriptionI18n ? d(t.option.descriptionI18n) : t.option.description
+    const t = e, u = x, y = a(
+      () => t.option.labelI18n ? r(t.option.labelI18n) : t.option.label
+    ), m = a(
+      () => t.option.subtitleI18n ? r(t.option.subtitleI18n) : t.option.subtitle
+    ), f = a(
+      () => t.option.descriptionI18n ? r(t.option.descriptionI18n) : t.option.description
     );
-    return (f, o) => (n(), l("div", {
+    return (l, o) => (n(), s("div", {
       tabindex: e.option.disabled ? -1 : 0,
       "data-dropdown-item": "",
       class: h(["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1 data-disabled:pointer-events-none data-disabled:opacity-50", [
@@ -35,11 +35,12 @@ const j = ["tabindex", "data-disabled"], C = { class: "flex flex-col flex-1 min-
         e.option.class || ""
       ]]),
       "data-disabled": e.option.disabled ? !0 : void 0,
-      onClick: o[0] || (o[0] = (b) => r("click", e.option)),
-      onKeydown: o[1] || (o[1] = k(w((b) => r("click", e.option), ["prevent"]), ["enter"])),
-      onMouseenter: o[2] || (o[2] = (b) => f.$emit("mouseenter", e.index ?? -1))
+      "data-testid": l.$attrs["data-testid"] || (e.option.value ? `dropdown-item-${e.option.value}` : `dropdown-item-${e.option.label}`).toString().toLowerCase().replace(/[^a-z0-9]+/g, "-"),
+      onClick: o[0] || (o[0] = (b) => u("click", e.option)),
+      onKeydown: o[1] || (o[1] = w(k((b) => u("click", e.option), ["prevent"]), ["enter"])),
+      onMouseenter: o[2] || (o[2] = (b) => l.$emit("mouseenter", e.index ?? -1))
     }, [
-      I(f.$slots, "default", $(B({ option: e.option, index: e.index, selected: e.selected })), () => [
+      $(l.$slots, "default", I(B({ option: e.option, index: e.index, selected: e.selected })), () => [
         e.option.icon || e.option.emoji ? (n(), p(v, {
           key: 0,
           icon: e.option.icon,
@@ -47,11 +48,11 @@ const j = ["tabindex", "data-disabled"], C = { class: "flex flex-col flex-1 min-
           class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
         }, null, 8, ["icon", "emoji"])) : i("", !0),
         c("div", C, [
-          c("div", D, [
-            c("span", S, a(y.value), 1),
-            u.value ? (n(), l("span", z, a(u.value), 1)) : i("", !0)
+          c("div", S, [
+            c("span", z, d(y.value), 1),
+            m.value ? (n(), s("span", D, d(m.value), 1)) : i("", !0)
           ]),
-          m.value ? (n(), l("span", E, a(m.value), 1)) : i("", !0)
+          f.value ? (n(), s("span", E, d(f.value), 1)) : i("", !0)
         ]),
         e.selectable && e.selected ? (n(), p(v, {
           key: 1,
@@ -63,5 +64,5 @@ const j = ["tabindex", "data-disabled"], C = { class: "flex flex-col flex-1 min-
   }
 });
 export {
-  P as default
+  N as default
 };

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,7 +1,7 @@
 import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-d555d458"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-77113fbb"]]);
 export {
   m as default
 };

package/components/Dropdown/DropdownMenu.vue2.js

@@ -21,7 +21,7 @@ const ve = ["dir"], ye = {
 }, we = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, xe = ["onMouseenter"], pe = { class: "flex items-center flex-1 min-w-0" }, Se = { class: "truncate" }, Oe = {
+}, pe = ["onMouseenter"], xe = { class: "flex items-center flex-1 min-w-0" }, Se = { class: "truncate" }, Oe = {
   key: 3,
   class: "flex justify-center py-2"
 }, _e = {
@@ -70,11 +70,11 @@ const ve = ["dir"], ye = {
       e.disabled || f("select", e);
     }, {
       focusedIndex: y,
-      isKeyboardMode: x,
+      isKeyboardMode: p,
       filteredOptions: F,
       handleKeyDown: M,
       handleMouseMove: B,
-      onMouseEnterItem: p,
+      onMouseEnterItem: x,
       scrollToIndex: K
     } = fe({
       options: u,
@@ -140,7 +140,8 @@ const ve = ["dir"], ye = {
           "input-class": "-ml-1",
           variant: "transparent",
           "icon-class": "h-3.5! w-3.5!",
-          "show-clear-button": !1
+          "show-clear-button": !1,
+          "data-testid": "dropdown-search-input"
         }, null, 8, ["modelValue", "placeholder"])
       ])) : d("", !0),
       e.$slots.header ? (o(), i("div", ge, [
@@ -174,9 +175,9 @@ const ve = ["dir"], ye = {
             key: 1,
             option: l,
             value: G(l),
-            focused: r(x) && r(y) === n,
+            focused: r(p) && r(y) === n,
             onChange: J,
-            onMouseenter: (c) => r(p)(n)
+            onMouseenter: (c) => r(x)(n)
           }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(he, {
             key: 2,
             "is-nested": !0,
@@ -198,13 +199,13 @@ const ve = ["dir"], ye = {
                 tabindex: 0,
                 "data-dropdown-item": "",
                 class: E(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
-                  r(x) && r(y) === n ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                  r(p) && r(y) === n ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : "",
                   l.triggerClass || l.class || ""
                 ]]),
-                onMouseenter: (c) => r(p)(n)
+                onMouseenter: (c) => r(x)(n)
               }, [
-                S("div", pe, [
+                S("div", xe, [
                   l.icon || l.emoji ? (o(), m(O, {
                     key: 0,
                     icon: l.icon,
@@ -218,7 +219,7 @@ const ve = ["dir"], ye = {
                   icon: a.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
                 }, null, 8, ["icon"])) : d("", !0)
-              ], 42, xe)
+              ], 42, pe)
             ]),
             _: 2
           }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), m(ce, {
@@ -226,10 +227,10 @@ const ve = ["dir"], ye = {
             option: l,
             index: n,
             selected: q(l),
-            focused: r(x) && r(y) === n,
+            focused: r(p) && r(y) === n,
             selectable: a.selectable,
             onClick: (c) => w(l),
-            onMouseenter: (c) => r(p)(n)
+            onMouseenter: (c) => r(x)(n)
           }, ne({ _: 2 }, [
             e.$slots.item ? {
               name: "default",