vlite3 0.4.8 → 0.5.2

package/components/Dropdown/DropdownBooleanItem.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as m, computed as d, openBlock as l, createElementBlock as u, withModifiers as p, normalizeClass as f, createElementVNode as a, createBlock as g, createCommentVNode as v, toDisplayString as h, createVNode as x } from "vue";
+import { defineComponent as r, computed as d, openBlock as l, createElementBlock as u, withModifiers as p, normalizeClass as f, createElementVNode as a, createBlock as g, createCommentVNode as v, toDisplayString as h, createVNode as x } from "vue";
 import y from "../Switch.vue.js";
 import b 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" }, D = /* @__PURE__ */ m({
+const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "truncate font-medium" }, N = /* @__PURE__ */ r({
   __name: "DropdownBooleanItem",
   props: {
     option: {},
@@ -11,7 +11,7 @@ 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, r = d(() => o.option.labelI18n ? k(o.option.labelI18n) : o.option.label), t = (n) => {
+    const o = e, s = c, m = d(() => o.option.labelI18n ? k(o.option.labelI18n) : o.option.label), t = (n) => {
       s("change", n, o.option);
     };
     return (n, i) => (l(), u("div", {
@@ -19,15 +19,16 @@ const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "tru
       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((C) => t(!e.value), ["stop"]))
+      onClick: i[0] || (i[0] = p((j) => t(!e.value), ["stop"]))
     }, [
       a("div", w, [
-        e.option.icon ? (l(), g(b, {
+        e.option.icon || e.option.emoji ? (l(), g(b, {
           key: 0,
           icon: e.option.icon,
+          emoji: e.option.emoji,
           class: "h-4 w-4 shrink-0 opacity-70"
-        }, null, 8, ["icon"])) : v("", !0),
-        a("span", B, h(r.value), 1)
+        }, null, 8, ["icon", "emoji"])) : v("", !0),
+        a("span", B, h(m.value), 1)
       ]),
       x(y, {
         "model-value": e.value,
@@ -38,5 +39,5 @@ const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "tru
   }
 });
 export {
-  D as default
+  N as default
 };

package/components/Dropdown/DropdownGroupedLayout.vue.d.ts

@@ -14,8 +14,8 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onSelect?: (option: IDropdownOption) => any;
     onMouseenter?: (payload: any) => any;
 }>, {
-    options: IDropdownOptions;
     selectable: boolean;
+    options: IDropdownOptions;
     columns: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Dropdown/DropdownGroupedLayout.vue.js

@@ -1,14 +1,14 @@
-import { defineComponent as _, computed as C, openBlock as t, createElementBlock as c, normalizeStyle as $, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as h, toDisplayString as w, createBlock as d, createCommentVNode as f, createVNode as B } from "vue";
-import N from "../Icon.vue.js";
+import { defineComponent as _, computed as C, openBlock as l, createElementBlock as c, normalizeStyle as $, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as h, toDisplayString as j, createBlock as u, createCommentVNode as f, createVNode as w } from "vue";
+import B from "../Icon.vue.js";
 import y from "./DropdownItem.vue.js";
-import { $t as S } from "../../utils/i18n.js";
-const L = { class: "font-semibold text-sm text-foreground" }, V = { class: "flex flex-col space-y-1" }, z = {
+import { $t as N } from "../../utils/i18n.js";
+const S = { class: "font-semibold text-sm text-foreground" }, L = { class: "flex flex-col space-y-1" }, V = {
   key: 0,
   class: "flex flex-col space-y-1 ml-3 pl-3 border-l border-border mt-0.5 mb-1.5"
-}, A = {
+}, z = {
   key: 1,
   class: "px-2 text-xs text-muted-foreground italic"
-}, F = /* @__PURE__ */ _({
+}, q = /* @__PURE__ */ _({
   __name: "DropdownGroupedLayout",
   props: {
     options: { default: () => [] },
@@ -19,56 +19,57 @@ const L = { class: "font-semibold text-sm text-foreground" }, V = { class: "flex
     headerClass: {}
   },
   emits: ["select", "mouseenter"],
-  setup(o, { emit: D }) {
-    const l = o, k = C(() => {
-      const e = l.columns;
+  setup(r, { emit: A }) {
+    const s = r, k = C(() => {
+      const e = s.columns;
       return typeof e == "number" ? { gridTemplateColumns: `repeat(${e}, minmax(0, 1fr))` } : { gridTemplateColumns: e };
-    }), u = (e) => l.selected ? Array.isArray(l.selected) ? l.selected.includes(e.value) : typeof l.selected == "object" && l.selected !== null && e.key && e.key in l.selected ? l.selected[e.key] === e.value : l.selected === e.value : !1, b = (e) => e.labelI18n ? S(e.labelI18n) : e.label;
-    return (e, E) => (t(), c("div", {
+    }), d = (e) => s.selected ? Array.isArray(s.selected) ? s.selected.includes(e.value) : typeof s.selected == "object" && s.selected !== null && e.key && e.key in s.selected ? s.selected[e.key] === e.value : s.selected === e.value : !1, b = (e) => e.labelI18n ? N(e.labelI18n) : e.label;
+    return (e, D) => (l(), c("div", {
       class: "grid gap-6 p-4",
       style: $(k.value)
     }, [
-      (t(!0), c(a, null, i(o.options, (s, p) => (t(), c("div", {
-        key: s.key || s.value || p,
+      (l(!0), c(a, null, i(r.options, (t, x) => (l(), c("div", {
+        key: t.key || t.value || x,
         class: "flex flex-col space-y-2 min-w-[150px]"
       }, [
         m("div", {
-          class: h(["flex items-center gap-2 px-2 py-1 mb-1", o.headerClass])
+          class: h(["flex items-center gap-2 px-2 py-1 mb-1", r.headerClass])
         }, [
-          m("span", L, w(b(s)), 1),
-          s.icon ? (t(), d(N, {
+          m("span", S, j(b(t)), 1),
+          t.icon || t.emoji ? (l(), u(B, {
             key: 0,
-            icon: s.icon,
+            icon: t.icon,
+            emoji: t.emoji,
             class: "w-4 h-4 text-muted-foreground"
-          }, null, 8, ["icon"])) : f("", !0)
+          }, null, 8, ["icon", "emoji"])) : f("", !0)
         ], 2),
-        m("div", V, [
-          s.children && s.children.length ? (t(!0), c(a, { key: 0 }, i(s.children, (n, x) => (t(), c(a, {
-            key: n.key || n.value || x
+        m("div", L, [
+          t.children && t.children.length ? (l(!0), c(a, { key: 0 }, i(t.children, (n, p) => (l(), c(a, {
+            key: n.key || n.value || p
           }, [
-            B(y, {
+            w(y, {
               option: n,
-              selected: u(n),
-              selectable: o.selectable,
+              selected: d(n),
+              selectable: r.selectable,
               class: "w-full",
-              onClick: (r) => e.$emit("select", n)
+              onClick: (o) => e.$emit("select", n)
             }, null, 8, ["option", "selected", "selectable", "onClick"]),
-            n.children && n.children.length ? (t(), c("div", z, [
-              (t(!0), c(a, null, i(n.children, (r, v) => (t(), d(y, {
-                key: r.key || r.value || v,
-                option: r,
-                selected: u(r),
-                selectable: o.selectable,
+            n.children && n.children.length ? (l(), c("div", V, [
+              (l(!0), c(a, null, i(n.children, (o, v) => (l(), u(y, {
+                key: o.key || o.value || v,
+                option: o,
+                selected: d(o),
+                selectable: r.selectable,
                 class: "w-full text-xs",
-                onClick: (G) => e.$emit("select", r)
+                onClick: (E) => e.$emit("select", o)
               }, null, 8, ["option", "selected", "selectable", "onClick"]))), 128))
             ])) : f("", !0)
-          ], 64))), 128)) : (t(), c("div", A, "No items"))
+          ], 64))), 128)) : (l(), c("div", z, "No items"))
         ])
       ]))), 128))
     ], 4));
   }
 });
 export {
-  F as default
+  q as default
 };

package/components/Dropdown/DropdownItem.vue.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, computed as l, openBlock as o, createElementBlock as s, normalizeClass as h, renderSlot as g, normalizeProps as w, guardReactiveProps as I, createBlock as p, createCommentVNode as i, createElementVNode as a, toDisplayString as c } from "vue";
 import f from "../Icon.vue.js";
 import { $t as d } from "../../utils/i18n.js";
-const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, C = { class: "flex items-center justify-between gap-2" }, D = { class: "truncate font-medium" }, S = {
+const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, j = { class: "flex items-center justify-between gap-2" }, C = { class: "truncate font-medium" }, D = {
   key: 0,
   class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
-}, z = {
+}, S = {
   key: 0,
   class: "text-[10px] text-muted-foreground truncate opacity-70"
-}, V = /* @__PURE__ */ k({
+}, P = /* @__PURE__ */ k({
   __name: "DropdownItem",
   props: {
     option: {},
@@ -31,17 +31,18 @@ const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, C =
       onMouseenter: n[1] || (n[1] = (v) => m.$emit("mouseenter", e.index ?? -1))
     }, [
       g(m.$slots, "default", w(I({ option: e.option, index: e.index, selected: e.selected })), () => [
-        e.option.icon ? (o(), p(f, {
+        e.option.icon || e.option.emoji ? (o(), p(f, {
           key: 0,
           icon: e.option.icon,
+          emoji: e.option.emoji,
           class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-        }, null, 8, ["icon"])) : i("", !0),
+        }, null, 8, ["icon", "emoji"])) : i("", !0),
         a("div", $, [
-          a("div", C, [
-            a("span", D, c(y.value), 1),
-            r.value ? (o(), s("span", S, c(r.value), 1)) : i("", !0)
+          a("div", j, [
+            a("span", C, c(y.value), 1),
+            r.value ? (o(), s("span", D, c(r.value), 1)) : i("", !0)
           ]),
-          u.value ? (o(), s("span", z, c(u.value), 1)) : i("", !0)
+          u.value ? (o(), s("span", S, c(u.value), 1)) : i("", !0)
         ]),
         e.selectable && e.selected ? (o(), p(f, {
           key: 1,
@@ -53,5 +54,5 @@ const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, C =
   }
 });
 export {
-  V as default
+  P as default
 };

package/components/Dropdown/DropdownMenu.vue.d.ts

@@ -1,6 +1,6 @@
 import { IDropdownOptions, IDropdownOption } from '../../types';
 interface Props {
-    options?: IDropdownOptions;
+    options?: (IDropdownOption | string | number)[];
     cachedOptions?: IDropdownOptions;
     selected?: any;
     selectedIndex?: number | null;
@@ -15,6 +15,7 @@ interface Props {
     hasMore?: boolean;
     searchable?: boolean;
     remote?: boolean;
+    debounceTime?: number;
     direction?: 'ltr' | 'rtl';
 }
 declare function __VLS_template(): {
@@ -48,9 +49,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }>, {
     class: string;
     loading: boolean;
-    direction: "ltr" | "rtl";
-    options: IDropdownOptions;
     selectable: boolean;
+    options: (IDropdownOption | string | number)[];
     columns: number | string;
     selectedIndex: number | null;
     maxHeight: string;
@@ -58,6 +58,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     hasMore: boolean;
     searchable: boolean;
     remote: boolean;
+    debounceTime: number;
+    direction: "ltr" | "rtl";
     nestedPosition: any;
     nestedOffset: [number, number];
     cachedOptions: IDropdownOptions;

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,31 +1,31 @@
-import { defineComponent as Y, defineAsyncComponent as Z, ref as C, computed as v, watch as T, toRef as ee, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as c, createVNode as x, createCommentVNode as i, renderSlot as g, unref as n, normalizeStyle as se, normalizeClass as D, toDisplayString as E, createBlock as m, Fragment as N, renderList as oe, withCtx as V, createElementVNode as S, createSlots as ne, mergeProps as re, nextTick as de } from "vue";
-import $ from "../Icon.vue.js";
-import ce from "../Input.vue.js";
-import ae from "./DropdownItem.vue.js";
+import { defineComponent as Z, defineAsyncComponent as ee, ref as j, computed as h, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as d, createVNode as S, createCommentVNode as u, renderSlot as b, unref as o, normalizeStyle as se, normalizeClass as _, toDisplayString as D, createBlock as v, Fragment as E, renderList as ne, withCtx as N, createElementVNode as $, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
+import I from "../Icon.vue.js";
+import de from "../Input.vue.js";
+import ce from "./DropdownItem.vue.js";
 import ie from "./DropdownBooleanItem.vue.js";
 import ue from "./DropdownGroupedLayout.vue.js";
 import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
 import { useDropdownIds as me } from "./composables/useDropdownIds.js";
-import { $t as I } from "../../utils/i18n.js";
-const he = ["dir"], ye = {
+import { $t as M } from "../../utils/i18n.js";
+const he = ["dir"], ve = {
   key: 0,
-  class: "bg-body border-b mb-1 z-10 rounded-t-md shrink-0"
-}, ve = {
+  class: "bg-body border-b z-10 rounded-t-md shrink-0"
+}, ye = {
   key: 1,
   class: "shrink-0"
 }, ge = {
   key: 0,
   class: "px-2 py-6 text-center text-sm text-muted-foreground"
-}, ke = {
+}, be = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, be = ["onMouseenter"], we = { class: "flex items-center gap-2 flex-1 min-w-0" }, pe = { class: "truncate" }, xe = {
+}, ke = ["onMouseenter"], we = { class: "flex items-center gap-2 flex-1 min-w-0" }, pe = { class: "truncate" }, xe = {
   key: 3,
   class: "flex justify-center py-2"
 }, Se = {
   key: 3,
-  class: "shrink-0 border-t mt-1 pt-1"
-}, Ne = /* @__PURE__ */ Y({
+  class: "shrink-0"
+}, De = /* @__PURE__ */ Z({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -43,47 +43,47 @@ const he = ["dir"], ye = {
     hasMore: { type: Boolean, default: !1 },
     searchable: { type: Boolean, default: !0 },
     remote: { type: Boolean, default: !1 },
+    debounceTime: { default: 300 },
     direction: { default: "ltr" }
   },
   emits: ["select", "close", "load-more", "search"],
-  setup(r, { emit: j }) {
-    const P = Z(() => import("./Dropdown.vue2.js")), t = r, u = j, M = C(null), f = C(""), { getMenuId: _, getAllRecursiveIds: H } = me(), R = v(() => {
-      const e = I("vlite.dropdown.empty");
+  setup(r, { emit: V }) {
+    const P = ee(() => import("./Dropdown.vue2.js")), t = r, f = V, O = j(null), m = j(""), { getMenuId: z, getAllRecursiveIds: H } = me(), A = h(() => {
+      const e = M("vlite.dropdown.empty");
       return e !== "vlite.dropdown.empty" ? e : "No options found";
-    }), z = v(() => {
-      const e = I("vlite.dropdown.search");
+    }), L = h(() => {
+      const e = M("vlite.dropdown.search");
       return e !== "vlite.dropdown.search" ? e : "Search...";
-    }), A = v(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
+    }), c = h(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), R = h(() => t.remote ? t.searchable : t.searchable && (c.value.length || 0) > 9);
     let k = null;
-    T(f, (e) => {
+    T(m, (e) => {
       t.remote && (k && clearTimeout(k), k = setTimeout(() => {
-        e && u("search", e);
-      }, 100));
+        e !== void 0 && f("search", e);
+      }, t.debounceTime));
     });
-    const L = (e) => {
+    const F = (e) => {
       const s = e.target;
-      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && u("load-more");
-    }, b = (e, s) => {
-      e.disabled || u("select", e);
+      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && f("load-more");
+    }, w = (e, s) => {
+      e.disabled || f("select", e);
     }, {
-      focusedIndex: h,
-      isKeyboardMode: w,
-      filteredOptions: F,
-      // rename
-      handleKeyDown: O,
-      handleMouseMove: B,
-      onMouseEnterItem: p,
-      scrollToIndex: K
+      focusedIndex: y,
+      isKeyboardMode: p,
+      filteredOptions: K,
+      handleKeyDown: B,
+      handleMouseMove: C,
+      onMouseEnterItem: x,
+      scrollToIndex: U
     } = fe({
-      options: ee(t, "options"),
-      searchQuery: f,
-      containerRef: M,
-      emit: (e, ...s) => u(e, ...s),
-      handleSelect: (e, s) => b(e)
-    }), y = v(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : F.value), U = (e) => {
+      options: c,
+      searchQuery: m,
+      containerRef: O,
+      emit: (e, ...s) => f(e, ...s),
+      handleSelect: (e, s) => w(e)
+    }), g = h(() => t.remote ? m.value ? c.value : t.cachedOptions.length ? t.cachedOptions : c.value : K.value), q = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
-    }, q = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, G = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], J = (e, s) => {
+    }, G = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, J = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], Q = (e, s) => {
       if (!s.key) return;
       const l = {
         label: s.label,
@@ -91,155 +91,158 @@ const he = ["dir"], ye = {
         key: s.key,
         data: s.data
       };
-      u("select", l);
-    }, Q = (e, s) => {
+      f("select", l);
+    }, W = (e, s) => {
       let l = s.value;
       e.key && (l = { [e.key]: l });
-      const d = {
+      const a = {
         label: e.label,
         value: l,
         data: s.data,
         key: e.key
       };
-      u("select", d);
-    }, W = async () => {
-      await de();
+      f("select", a);
+    }, X = async () => {
+      await ae();
       let e = -1;
-      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = t.options.findIndex((s) => s.value === t.selected)), e !== -1 && K(e));
+      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = c.value.findIndex((s) => s.value === t.selected)), e !== -1 && U(e));
     };
     T(
-      () => y.value,
+      () => g.value,
       () => {
-        h.value = -1;
+        y.value = -1;
       }
     ), te(() => {
-      W(), window.addEventListener("keydown", O);
+      X(), window.addEventListener("keydown", B);
     }), le(() => {
-      window.removeEventListener("keydown", O);
+      window.removeEventListener("keydown", B);
     });
-    const X = (e) => e.labelI18n ? I(e.labelI18n) : e.label;
-    return (e, s) => (o(), c("div", {
+    const Y = (e) => e.labelI18n ? M(e.labelI18n) : e.label;
+    return (e, s) => (n(), d("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
       dir: r.direction
     }, [
-      A.value ? (o(), c("div", ye, [
-        x(ce, {
-          modelValue: f.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (l) => f.value = l),
-          placeholder: z.value,
+      R.value ? (n(), d("div", ve, [
+        S(de, {
+          modelValue: m.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (l) => m.value = l),
+          placeholder: L.value,
           icon: "lucide:search",
           size: "sm",
           class: "font-medium!",
+          "input-class": "-ml-1",
           variant: "transparent",
+          "icon-class": "h-3.5! w-3.5!",
           "show-clear-button": !1
         }, null, 8, ["modelValue", "placeholder"])
-      ])) : i("", !0),
-      e.$slots.header ? (o(), c("div", ve, [
-        g(e.$slots, "header")
-      ])) : i("", !0),
-      t?.options.length > 0 || e.$slots.menu ? (o(), c("div", {
+      ])) : u("", !0),
+      e.$slots.header ? (n(), d("div", ye, [
+        b(e.$slots, "header")
+      ])) : u("", !0),
+      c.value.length > 0 || e.$slots.menu ? (n(), d("div", {
         key: 2,
         ref_key: "containerRef",
-        ref: M,
+        ref: O,
         tabindex: "0",
         role: "menu",
-        class: D([
+        class: _([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1",
           t.class
         ]),
         style: se({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => n(B) && n(B)(...l)),
-        onScroll: L
+        (...l) => o(C) && o(C)(...l)),
+        onScroll: F
       }, [
-        y.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", ge, E(R.value), 1)) : i("", !0),
-        r.layout === "grouped" ? (o(), m(ue, {
+        g.value.length === 0 && c.value.length > 0 && !r.loading ? (n(), d("div", ge, D(A.value), 1)) : u("", !0),
+        r.layout === "grouped" ? (n(), v(ue, {
           key: 1,
-          options: y.value,
+          options: g.value,
           selected: r.selected,
           selectable: r.selectable,
           columns: r.columns,
-          onSelect: b
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(N, { key: 2 }, oe(y.value, (l, d) => (o(), c(N, { key: d }, [
-          l.label === "---" ? (o(), c("div", ke)) : l.data?.isBoolean ? (o(), m(ie, {
+          onSelect: w
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (n(!0), d(E, { key: 2 }, ne(g.value, (l, a) => (n(), d(E, { key: a }, [
+          l.label === "---" ? (n(), d("div", be)) : l.data?.isBoolean ? (n(), v(ie, {
             key: 1,
             option: l,
-            value: G(l),
-            focused: n(w) && n(h) === d,
-            onChange: J,
-            onMouseenter: (a) => n(p)(d)
-          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(P), {
+            value: J(l),
+            focused: o(p) && o(y) === a,
+            onChange: Q,
+            onMouseenter: (i) => o(x)(a)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (n(), v(o(P), {
             key: 2,
             position: l.position || t.nestedPosition,
             offset: l.offset || t.nestedOffset,
             class: "w-full",
             options: l.children,
-            selected: U(l),
-            menuId: n(_)(l),
+            selected: q(l),
+            menuId: o(z)(l),
             nestedPosition: t.nestedPosition,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
-            ignoreClickOutside: n(H)(l.children),
+            ignoreClickOutside: o(H)(l.children),
             direction: r.direction,
-            onOnSelect: (a) => Q(l, a)
+            onOnSelect: (i) => W(l, i)
           }, {
-            trigger: V(() => [
-              S("div", {
+            trigger: N(() => [
+              $("div", {
                 "data-dropdown-item": "",
-                class: D(["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", [
-                  n(w) && n(h) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                class: _(["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", [
+                  o(p) && o(y) === a ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : ""
                 ]]),
-                onMouseenter: (a) => n(p)(d)
+                onMouseenter: (i) => o(x)(a)
               }, [
-                S("div", we, [
-                  l.icon ? (o(), m($, {
+                $("div", we, [
+                  l.icon || l.emoji ? (n(), v(I, {
                     key: 0,
                     icon: l.icon,
+                    emoji: l.emoji,
                     class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-                  }, null, 8, ["icon"])) : i("", !0),
-                  S("span", pe, E(X(l)), 1)
+                  }, null, 8, ["icon", "emoji"])) : u("", !0),
+                  $("span", pe, D(Y(l)), 1)
                 ]),
-                x($, {
+                S(I, {
                   icon: r.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
                 }, null, 8, ["icon"])
-              ], 42, be)
+              ], 42, ke)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), m(ae, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (n(), v(ce, {
             key: 3,
             option: l,
-            index: d,
-            selected: q(l),
-            focused: n(w) && n(h) === d,
+            index: a,
+            selected: G(l),
+            focused: o(p) && o(y) === a,
             selectable: r.selectable,
-            onClick: (a) => b(l),
-            onMouseenter: (a) => n(p)(d)
-          }, ne({ _: 2 }, [
+            onClick: (i) => w(l),
+            onMouseenter: (i) => o(x)(a)
+          }, oe({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
-              fn: V((a) => [
-                g(e.$slots, "item", re({ ref_for: !0 }, a))
+              fn: N((i) => [
+                b(e.$slots, "item", re({ ref_for: !0 }, i))
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        r.loading ? (o(), c("div", xe, [
-          x($, {
+        r.loading ? (n(), d("div", xe, [
+          S(I, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
-        ])) : i("", !0),
-        g(e.$slots, "menu")
-      ], 38)) : i("", !0),
-      e.$slots.footer ? (o(), c("div", Se, [
-        g(e.$slots, "footer")
-      ])) : i("", !0)
+        ])) : u("", !0),
+        b(e.$slots, "menu")
+      ], 38)) : u("", !0),
+      e.$slots.footer ? (n(), d("div", Se, [
+        b(e.$slots, "footer")
+      ])) : u("", !0)
     ], 8, he));
   }
 });
 export {
-  Ne as default
+  De as default
 };

package/components/Dropdown/DropdownTrigger.vue.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from '../../types';
 interface Props {
     selectedLabel?: string;
     placeholder?: string;
@@ -5,6 +6,7 @@ interface Props {
     disabled?: boolean;
     className?: string;
     direction?: 'ltr' | 'rtl';
+    triggerProps?: ButtonProps;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     disabled: boolean;