vlite3 0.1.0 → 0.1.2

package/components/Dropdown/DropdownGroupedLayout.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DropdownGroupedLayout.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,35 @@
+import { IDropdownOption } from '../../types';
+interface Props {
+    option: IDropdownOption;
+    selected?: boolean;
+    focused?: boolean;
+    selectable?: boolean;
+    index?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            option: IDropdownOption;
+            index: number;
+            selected: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (option: IDropdownOption) => any;
+    mouseenter: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (option: IDropdownOption) => any;
+    onMouseenter?: (index: number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Dropdown/DropdownItem.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent as f, openBlock as t, createElementBlock as i, normalizeClass as x, renderSlot as b, normalizeProps as y, guardReactiveProps as k, createBlock as s, createCommentVNode as n, createElementVNode as c, toDisplayString as a } from "vue";
+import d from "../Icon.vue.js";
+const h = ["data-disabled"], v = { class: "flex flex-col flex-1 min-w-0" }, g = { class: "flex items-center justify-between gap-2" }, p = { class: "truncate font-medium" }, w = {
+  key: 0,
+  class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
+}, B = {
+  key: 0,
+  class: "text-[10px] text-muted-foreground truncate opacity-70"
+}, z = /* @__PURE__ */ f({
+  __name: "DropdownItem",
+  props: {
+    option: {},
+    selected: { type: Boolean },
+    focused: { type: Boolean },
+    selectable: { type: Boolean },
+    index: {}
+  },
+  emits: ["click", "mouseenter"],
+  setup(e, { emit: r }) {
+    const u = r;
+    return (l, o) => (t(), i("div", {
+      "data-dropdown-item": "",
+      class: x(["relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50", [
+        e.selectable && e.selected && !e.option.children ? "bg-accent" : "",
+        e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+        e.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      ]]),
+      "data-disabled": e.option.disabled ? !0 : void 0,
+      onClick: o[0] || (o[0] = (m) => u("click", e.option)),
+      onMouseenter: o[1] || (o[1] = (m) => l.$emit("mouseenter", e.index ?? -1))
+    }, [
+      b(l.$slots, "default", y(k({ option: e.option, index: e.index, selected: e.selected })), () => [
+        e.option.icon ? (t(), s(d, {
+          key: 0,
+          icon: e.option.icon,
+          class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
+        }, null, 8, ["icon"])) : n("", !0),
+        c("div", v, [
+          c("div", g, [
+            c("span", p, a(e.option.label), 1),
+            e.option.subtitle ? (t(), i("span", w, a(e.option.subtitle), 1)) : n("", !0)
+          ]),
+          e.option.description ? (t(), i("span", B, a(e.option.description), 1)) : n("", !0)
+        ]),
+        e.selectable && e.selected ? (t(), s(d, {
+          key: 1,
+          icon: "lucide:check",
+          class: "ml-2 h-4 w-4 shrink-0 text-primary"
+        })) : n("", !0)
+      ])
+    ], 42, h));
+  }
+});
+export {
+  z as default
+};

package/components/Dropdown/DropdownItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DropdownItem.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,73 @@
+import { IDropdownOptions, IDropdownOption } from '../../types';
+interface Props {
+    options?: IDropdownOptions;
+    cachedOptions?: IDropdownOptions;
+    selected?: any;
+    selectedIndex?: number | null;
+    class?: string;
+    maxHeight?: string;
+    nestedPosition?: any;
+    nestedOffset?: [number, number];
+    selectable?: boolean;
+    layout?: 'default' | 'grouped';
+    columns?: number | string;
+    loading?: boolean;
+    hasMore?: boolean;
+    searchable?: boolean;
+    remote?: boolean;
+    direction?: 'ltr' | 'rtl';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        item?(_: {
+            option: IDropdownOption;
+            index: number;
+            selected: boolean;
+        }): any;
+        menu?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    search: (query: string) => any;
+    select: (option: IDropdownOption) => any;
+    close: () => any;
+    "load-more": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSearch?: (query: string) => any;
+    onSelect?: (option: IDropdownOption) => any;
+    onClose?: () => any;
+    "onLoad-more"?: () => any;
+}>, {
+    class: string;
+    loading: boolean;
+    direction: "ltr" | "rtl";
+    options: IDropdownOptions;
+    selectable: boolean;
+    columns: number | string;
+    selectedIndex: number | null;
+    maxHeight: string;
+    layout: "default" | "grouped";
+    hasMore: boolean;
+    searchable: boolean;
+    remote: boolean;
+    nestedPosition: any;
+    nestedOffset: [number, number];
+    cachedOptions: IDropdownOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Dropdown/DropdownMenu.vue.js

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

package/components/Dropdown/DropdownMenu.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DropdownMenu.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,15 @@
+interface Props {
+    selectedLabel?: string;
+    placeholder?: string;
+    isOpen?: boolean;
+    disabled?: boolean;
+    className?: string;
+    direction?: 'ltr' | 'rtl';
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    placeholder: string;
+    direction: "ltr" | "rtl";
+    selectedLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+export default _default;

package/components/Dropdown/DropdownTrigger.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent as a, openBlock as l, createBlock as t, normalizeClass as o } from "vue";
+import n from "../Button.vue.js";
+const s = /* @__PURE__ */ a({
+  __name: "DropdownTrigger",
+  props: {
+    selectedLabel: { default: "" },
+    placeholder: { default: "Select an option" },
+    isOpen: { type: Boolean },
+    disabled: { type: Boolean, default: !1 },
+    className: {},
+    direction: { default: "ltr" }
+  },
+  setup(e) {
+    return (i, d) => (l(), t(n, {
+      text: e.selectedLabel || e.placeholder,
+      iconRight: "iconamoon:arrow-down-2",
+      variant: "outline",
+      disabled: e.disabled,
+      dir: e.direction,
+      class: o(["w-full justify-between! font-normal", e.className])
+    }, null, 8, ["text", "disabled", "dir", "class"]));
+  }
+});
+export {
+  s as default
+};

package/components/Dropdown/DropdownTrigger.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DropdownTrigger.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,5 @@
+import { IDropdownOption, IDropdownOptions } from '../../../types';
+export declare function useDropdownIds(): {
+    getMenuId: (option: IDropdownOption) => string;
+    getAllRecursiveIds: (options?: IDropdownOptions) => string[];
+};

package/components/Dropdown/composables/useDropdownIds.js

@@ -0,0 +1,20 @@
+function d() {
+  const r = (e) => e.key ? `nested-${e.key}` : `nested-${e.label ? e.label.replace(/\s+/g, "-").toLowerCase() : "menu"}`, c = (e = []) => {
+    const n = [];
+    return e.forEach((s) => {
+      if (s.children?.length) {
+        const l = r(s);
+        n.push(`#${l}`);
+        const t = c(s.children);
+        n.push(...t);
+      }
+    }), n;
+  };
+  return {
+    getMenuId: r,
+    getAllRecursiveIds: c
+  };
+}
+export {
+  d as useDropdownIds
+};

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

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+import { IDropdownOption, IDropdownOptions } from '../../../types';
+interface UseDropdownNavigationProps {
+    options: Ref<IDropdownOptions>;
+    searchQuery: Ref<string>;
+    containerRef: Ref<HTMLElement | null>;
+    emit: (event: 'select' | 'close', ...args: any[]) => void;
+    handleSelect: (option: IDropdownOption, index: number) => void;
+}
+export declare function useDropdownNavigation(props: UseDropdownNavigationProps): {
+    focusedIndex: Ref<number, number>;
+    isKeyboardMode: Ref<boolean, boolean>;
+    filteredOptions: import('vue').ComputedRef<IDropdownOption[]>;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleMouseMove: () => void;
+    onMouseEnterItem: (index: number) => void;
+    scrollToIndex: (index: number) => void;
+};
+export {};

package/components/Dropdown/composables/useDropdownNavigation.js

@@ -0,0 +1,49 @@
+import { ref as s, computed as i } from "vue";
+function h(a) {
+  const t = s(-1), l = s(!1), u = i(() => {
+    const e = a.options.value;
+    if (!a.searchQuery.value) return e;
+    const o = a.searchQuery.value.toLowerCase();
+    return e.filter((n) => n.label.toLowerCase().includes(o));
+  }), r = (e) => {
+    if (!a.containerRef.value || e < 0) return;
+    const n = a.containerRef.value.querySelectorAll("[data-dropdown-item]")[e];
+    n && n.scrollIntoView({ block: "nearest" });
+  };
+  return {
+    focusedIndex: t,
+    isKeyboardMode: l,
+    filteredOptions: u,
+    handleKeyDown: (e) => {
+      const o = u.value;
+      if (o.length !== 0)
+        switch (["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && (l.value = !0), e.key) {
+          case "ArrowDown":
+            e.preventDefault(), e.stopPropagation(), t.value < o.length - 1 ? t.value++ : t.value = 0, r(t.value);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), e.stopPropagation(), t.value > 0 ? t.value-- : (t.value, t.value = o.length - 1), r(t.value);
+            break;
+          case "Enter":
+            if (e.preventDefault(), e.stopPropagation(), t.value >= 0 && t.value < o.length) {
+              const n = o[t.value];
+              n.children || a.handleSelect(n, t.value);
+            }
+            break;
+          case "Escape":
+            e.preventDefault(), e.stopPropagation(), a.emit("close");
+            break;
+        }
+    },
+    handleMouseMove: () => {
+      l.value && (l.value = !1);
+    },
+    onMouseEnterItem: (e) => {
+      t.value = e;
+    },
+    scrollToIndex: r
+  };
+}
+export {
+  h as useDropdownNavigation
+};

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

@@ -0,0 +1,16 @@
+import { IDropdownOption, IDropdownOptions } from '../../../types';
+interface UseDropdownSelectionProps {
+    modelValue: any;
+    selected?: any;
+    toggleSelection?: boolean;
+    showSelectedLabel?: boolean;
+    selectable?: boolean;
+    options?: IDropdownOptions;
+}
+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>;
+    selectOption: (option: IDropdownOption) => void;
+};
+export {};

package/components/Dropdown/composables/useDropdownSelection.js

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

package/components/Dropdown/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Dropdown } from './Dropdown.vue';
+export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownTrigger } from './DropdownTrigger.vue';
+export { default as DropdownItem } from './DropdownItem.vue';
+export * from './composables/useDropdownSelection';
+export * from './composables/useDropdownIds';