vlite3 1.1.2 → 1.1.4

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",

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

@@ -1,6 +1,7 @@
 import { ButtonProps } from '../../types';
 interface Props {
     selectedLabel?: string;
+    selectedIcon?: string;
     placeholder?: string;
     isOpen?: boolean;
     disabled?: boolean;
@@ -13,5 +14,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     disabled: boolean;
     direction: "ltr" | "rtl";
     selectedLabel: string;
+    selectedIcon: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
 export default _default;

package/components/Dropdown/DropdownTrigger.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as t, openBlock as a, createBlock as l, mergeProps as o } from "vue";
-import n from "../Button.vue.js";
-const s = /* @__PURE__ */ t({
+import { defineComponent as a, openBlock as l, createBlock as o, mergeProps as i } from "vue";
+import d from "../Button.vue.js";
+const s = /* @__PURE__ */ a({
   __name: "DropdownTrigger",
   props: {
     selectedLabel: { default: "" },
+    selectedIcon: { default: "" },
     placeholder: { default: "Select an option" },
     isOpen: { type: Boolean },
     disabled: { type: Boolean, default: !1 },
@@ -12,15 +13,18 @@ const s = /* @__PURE__ */ t({
     triggerProps: {}
   },
   setup(e) {
-    return (r, i) => (a(), l(n, o({
+    return (t, n) => (l(), o(d, i({
       text: e.selectedLabel || e.placeholder,
       iconRight: "iconamoon:arrow-down-2",
       variant: "outline",
       disabled: e.disabled,
       dir: e.direction
     }, e.triggerProps, {
-      class: ["w-full justify-between! font-normal px-2.5!", e.className]
-    }), null, 16, ["text", "disabled", "dir", "class"]));
+      icon: e.selectedIcon || e.triggerProps?.icon,
+      class: ["w-full justify-between! font-normal px-2.5!", e.className],
+      "icon-right-class": "ml-auto!",
+      "data-testid": t.$attrs["data-testid"] || "dropdown-trigger"
+    }), null, 16, ["text", "disabled", "dir", "icon", "class", "data-testid"]));
   }
 });
 export {

package/components/Dropdown/composables/useDropdownHydration.d.ts

@@ -27,6 +27,7 @@ export declare function useDropdownHydration(opts: UseDropdownHydrationOptions):
         description?: string;
         descriptionI18n?: string;
         icon?: string;
+        badge?: string;
         emoji?: string;
         disabled?: {
             valueOf: () => boolean;
@@ -67,6 +68,7 @@ export declare function useDropdownHydration(opts: UseDropdownHydrationOptions):
         description?: string;
         descriptionI18n?: string;
         icon?: string;
+        badge?: string;
         emoji?: string;
         disabled?: {
             valueOf: () => boolean;

package/components/Dropdown/composables/useDropdownSelection.d.ts

@@ -11,6 +11,7 @@ type EmitFn = (event: 'update:modelValue' | 'onSelect', ...args: any[]) => void;
 export declare function useDropdownSelection(props: UseDropdownSelectionProps, emit: EmitFn): {
     currentValue: import('vue').ComputedRef<any>;
     selectedLabel: import('vue').ComputedRef<string>;
+    selectedIcon: import('vue').ComputedRef<string>;
     selectOption: (option: IDropdownOption) => any;
 };
 export {};

package/components/Dropdown/composables/useDropdownSelection.js

@@ -1,43 +1,58 @@
-import { computed as o } from "vue";
-import { deepMerge as v } from "../../../utils/object.js";
-import { $t as V } from "../../../utils/i18n.js";
-function h(r, c) {
-  const n = o(() => r.modelValue !== void 0 ? r.modelValue : r.selected), f = (e = [], a) => {
-    for (const l of e) {
-      const u = l.labelI18n ? V(l.labelI18n) : l.label;
-      if (l.value === a) return u;
-      if (l.key && typeof a == "object" && a !== null && l.key in a) {
-        if (l.children) {
-          const t = f(l.children, a[l.key]);
-          if (t) return `${u} / ${t}`;
+import { computed as d } from "vue";
+import { deepMerge as V } from "../../../utils/object.js";
+import { $t as g } from "../../../utils/i18n.js";
+function I(r, u) {
+  const a = d(() => r.modelValue !== void 0 ? r.modelValue : r.selected), i = (l = [], t) => {
+    for (const e of l) {
+      const c = e.labelI18n ? g(e.labelI18n) : e.label;
+      if (e.value === t) return c;
+      if (e.key && typeof t == "object" && t !== null && e.key in t) {
+        if (e.children) {
+          const n = i(e.children, t[e.key]);
+          if (n) return `${c} / ${n}`;
         }
-        return l.value === a[l.key], u;
+        return e.value === t[e.key], c;
       }
     }
     return "";
-  }, i = o(() => !r.showSelectedLabel || !r.selectable || !r.options?.length ? "" : f(r.options, n.value));
+  }, f = (l = [], t) => {
+    for (const e of l) {
+      if (e.value === t) return e.icon;
+      if (e.key && typeof t == "object" && t !== null && e.key in t) {
+        if (e.children) {
+          const c = f(e.children, t[e.key]);
+          if (c) return c;
+        }
+        return e.value === t[e.key], e.icon;
+      }
+    }
+  }, y = d(() => !r.showSelectedLabel || !r.selectable || !r.options?.length ? "" : i(r.options, a.value)), b = d(() => {
+    if (r.showSelectedLabel && r.selectable && r.options?.length)
+      return f(r.options, a.value);
+  });
   return {
-    currentValue: n,
-    selectedLabel: i,
-    selectOption: (e) => {
-      if (typeof e != "string" && e?.disabled) return;
-      const a = n.value;
-      let l = e?.value ?? e?.label;
-      const u = e.data;
-      let t;
-      if (e.key && (typeof l == "object" && l !== null && e.key in l || (l = { [e.key]: l })), a && typeof a == "object" && !Array.isArray(a) && e.key) {
-        const d = e.key, y = e.value ?? e.label, b = a[d] === y;
-        if (r.toggleSelection && b) {
-          const s = { ...a };
-          return delete s[d], t = s, c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e }), t;
+    currentValue: a,
+    selectedLabel: y,
+    selectedIcon: b,
+    selectOption: (l) => {
+      if (typeof l != "string" && l?.disabled) return;
+      const t = a.value;
+      let e = l?.value ?? l?.label;
+      const c = l.data;
+      let n;
+      if (l.key && (typeof e == "object" && e !== null && l.key in e || (e = { [l.key]: e })), t && typeof t == "object" && !Array.isArray(t) && l.key) {
+        const o = l.key, k = l.value ?? l.label, v = t[o] === k;
+        if (r.toggleSelection && v) {
+          const s = { ...t };
+          return delete s[o], n = s, u("update:modelValue", n), u("onSelect", { value: n, data: c, option: l }), n;
         }
-        t = v(a, l), c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e });
+        n = V(t, e), u("update:modelValue", n), u("onSelect", { value: n, data: c, option: l });
       } else
-        r.toggleSelection && a === (e.value ?? e.label) ? (t = void 0, c("update:modelValue", void 0), c("onSelect", { value: void 0, data: u, option: e })) : (t = l, c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e }));
-      return t;
+        r.toggleSelection && t === (l.value ?? l.label) ? (n = void 0, u("update:modelValue", void 0), u("onSelect", { value: void 0, data: c, option: l })) : (n = e, u("update:modelValue", n), u("onSelect", { value: n, data: c, option: l }));
+      return n;
     }
   };
 }
 export {
-  h as useDropdownSelection
+  I as useDropdownSelection
 };