vlite3 0.1.0 → 0.1.2

package/components/DataTable/types.d.ts

@@ -0,0 +1,75 @@
+export interface PaginationConfig {
+    page: number;
+    limit: number;
+}
+export interface SortConfig {
+    field: string;
+    order: 'asc' | 'desc' | '';
+}
+export interface TableState {
+    pagination: PaginationConfig;
+    sorting: SortConfig;
+    search: string;
+}
+export interface FilterConfig {
+    search: string;
+    sorting: SortConfig;
+    [key: string]: any;
+}
+export interface TableFilter {
+    pagination: PaginationConfig;
+    filter: FilterConfig;
+}
+export interface TableHeader {
+    field: string;
+    title: string;
+    width?: string;
+    minWidth?: string;
+    sortable?: boolean;
+    hideOnMobile?: boolean;
+    align?: 'left' | 'center' | 'right';
+    format?: (value: any, row?: any) => string;
+    class?: string | ((value: any, row?: any) => string);
+    capitalize?: boolean;
+    addStatusColor?: boolean;
+    type?: 'text' | 'price' | 'date' | 'number';
+}
+export interface PageInfo {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    itemsPerPage?: number;
+}
+export interface DataTableProps {
+    rows: any[];
+    selectedRows?: any[];
+    search?: string;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    headers: TableHeader[];
+    keyField?: string;
+    loading?: boolean;
+    selectable?: boolean;
+    emptyMessage?: string;
+    emptyIcon?: string;
+    showPagination?: boolean;
+    pageInfo?: PageInfo;
+    itemsPerPage?: number;
+    itemsPerPageOptions?: number[];
+    showItemsPerPage?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    compact?: boolean;
+    tableClass?: string;
+    class?: string;
+}
+export interface SelectionState {
+    selected: any[];
+    all: boolean;
+    indeterminate: boolean;
+}
+export interface RowClickPayload {
+    row: any;
+    index: number;
+}

package/components/DatePicker.vue.d.ts

@@ -0,0 +1,44 @@
+import { DatePickerMode } from 'v-datepicker-lite/types';
+import { ButtonSize, ButtonVariant } from '../types';
+type __VLS_Props = {
+    placeholder?: string;
+    modelValue?: any;
+    value?: any;
+    mode: DatePickerMode;
+    minDate?: string;
+    icon?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    btnProps?: any;
+    teleport?: boolean;
+    minuteInterval?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            value: any;
+            displayValue: string;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onChange: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    teleport: boolean;
+    minuteInterval: number;
+}, {}, {}, {}, 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/DatePicker.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as v, computed as r, openBlock as h, createBlock as g, unref as u, withCtx as m, createElementVNode as p, createVNode as c, renderSlot as V, mergeProps as w } from "vue";
+import D from "./Button.vue.js";
+import y from "./Dropdown/Dropdown.vue.js";
+import "@iconify/vue";
+import C from "v-datepicker-lite";
+import "v-datepicker-lite/style.css";
+const P = { class: "min-w-[300px] overflow-hidden" }, N = /* @__PURE__ */ v({
+  __name: "DatePicker",
+  props: {
+    placeholder: {},
+    modelValue: {},
+    value: {},
+    mode: {},
+    minDate: {},
+    icon: {},
+    size: {},
+    variant: {},
+    btnProps: {},
+    teleport: { type: Boolean, default: !0 },
+    minuteInterval: { default: 5 }
+  },
+  emits: ["update:modelValue", "onChange"],
+  setup(t, { emit: d }) {
+    const n = t, i = d, a = r({
+      get: () => n.modelValue ?? n.value,
+      set: (e) => {
+        i("update:modelValue", e), i("onChange", e);
+      }
+    }), s = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, l = r(() => {
+      if (!a.value) return "";
+      try {
+        const e = new Date(a.value);
+        if (isNaN(e.getTime())) return String(a.value);
+        const o = n.mode === "dateTime" && s(a.value);
+        return e.toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+          ...o ? { hour: "2-digit", minute: "2-digit" } : {}
+        });
+      } catch {
+        return String(a.value);
+      }
+    }), f = (e) => {
+      a.value = e;
+    };
+    return (e, o) => (h(), g(u(y), {
+      position: "bottom-start",
+      class: "w-full",
+      teleport: t.teleport
+    }, {
+      trigger: m(() => [
+        V(e.$slots, "default", {
+          value: a.value,
+          displayValue: l.value
+        }, () => [
+          c(D, w({
+            text: l.value || t.placeholder || "Select date",
+            variant: t.variant || "outline",
+            size: t.size || "md",
+            icon: t.icon || "lucide:calendar"
+          }, t.btnProps, { class: "w-full" }), null, 16, ["text", "variant", "size", "icon"])
+        ])
+      ]),
+      default: m(() => [
+        p("div", P, [
+          c(u(C), {
+            value: a.value,
+            mode: t.mode,
+            "min-date": t.minDate,
+            class: "w-full",
+            minuteInterval: t.minuteInterval,
+            timeFormat: "12h",
+            onChange: f
+          }, null, 8, ["value", "mode", "min-date", "minuteInterval"])
+        ])
+      ]),
+      _: 3
+    }, 8, ["teleport"]));
+  }
+});
+export {
+  N as default
+};

package/components/DatePicker.vue2.js

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

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

@@ -0,0 +1,105 @@
+import { IDropdownOptions, IDropdownOption } from '../../types/styles';
+import { TooltTipPlacement } from 'v-tooltip-lite/types';
+type __VLS_Props = {
+    selected?: any;
+    modelValue?: any;
+    className?: string;
+    emptyMessage?: string;
+    position?: TooltTipPlacement;
+    closeOnSelect?: boolean;
+    toggleSelection?: boolean;
+    options?: IDropdownOptions;
+    canCloseOutside?: boolean;
+    caret?: boolean;
+    offset?: [number, number];
+    isOpen?: boolean;
+    teleport?: boolean;
+    selectedIndex?: number | null;
+    maxHeight?: string;
+    width?: string;
+    ignoreClickOutside?: string[];
+    menuId?: string;
+    nestedPosition?: TooltTipPlacement;
+    nestedOffset?: [number, number];
+    showSelectedLabel?: boolean;
+    selectable?: boolean;
+    doubleConfirmation?: 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: {
+        trigger?(_: {
+            selectedLabel: string;
+            isOpen: boolean;
+        }): any;
+        default?(_: {}): any;
+        menu?(_: {}): any;
+        item?(_: {
+            option: IDropdownOption;
+            index: number;
+            selected: boolean;
+        }): any;
+        header?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    search: (query: string) => any;
+    onSelect: (payload: {
+        value: any;
+        data?: any;
+    }) => any;
+    "update:modelValue": (value: any) => any;
+    onClose: () => any;
+    onOpen: () => any;
+    "update:isOpen": (value: boolean) => any;
+    "load-more": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: (query: string) => any;
+    onOnSelect?: (payload: {
+        value: any;
+        data?: any;
+    }) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
+    onOnClose?: () => any;
+    onOnOpen?: () => any;
+    "onUpdate:isOpen"?: (value: boolean) => any;
+    "onLoad-more"?: () => any;
+}>, {
+    isOpen: boolean;
+    loading: boolean;
+    direction: "ltr" | "rtl";
+    selectable: boolean;
+    columns: number | string;
+    canCloseOutside: boolean;
+    closeOnSelect: boolean;
+    toggleSelection: boolean;
+    emptyMessage: string;
+    offset: [number, number];
+    teleport: boolean;
+    selectedIndex: number | null;
+    maxHeight: string;
+    showSelectedLabel: boolean;
+    doubleConfirmation: boolean;
+    layout: "default" | "grouped";
+    hasMore: boolean;
+    searchable: boolean;
+    remote: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/Dropdown.vue.js

@@ -0,0 +1,206 @@
+import { defineComponent as z, ref as d, computed as C, watch as $, reactive as D, toRefs as R, openBlock as S, createElementBlock as j, normalizeStyle as E, createVNode as h, unref as v, withCtx as r, renderSlot as c, createBlock as U, normalizeClass as q, createSlots as F, normalizeProps as k, guardReactiveProps as w, createCommentVNode as G } from "vue";
+import J from "v-tooltip-lite";
+import "v-tooltip-lite/style.css";
+import K from "./DropdownMenu.vue.js";
+import Q from "./DropdownTrigger.vue.js";
+import W from "../ConfirmationModal.vue.js";
+import { useDropdownIds as X } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as Y } from "./composables/useDropdownSelection.js";
+const se = /* @__PURE__ */ z({
+  __name: "Dropdown",
+  props: {
+    selected: {},
+    modelValue: {},
+    className: {},
+    emptyMessage: { default: "No options found" },
+    position: {},
+    closeOnSelect: { type: Boolean, default: !0 },
+    toggleSelection: { type: Boolean, default: !0 },
+    options: {},
+    canCloseOutside: { type: Boolean, default: !0 },
+    caret: { type: Boolean },
+    offset: { default: () => [0, 8] },
+    isOpen: { type: Boolean, default: void 0 },
+    teleport: { type: Boolean, default: !0 },
+    selectedIndex: { default: null },
+    maxHeight: { default: "300px" },
+    width: {},
+    ignoreClickOutside: {},
+    menuId: {},
+    nestedPosition: {},
+    nestedOffset: {},
+    showSelectedLabel: { type: Boolean, default: !0 },
+    selectable: { type: Boolean, default: !0 },
+    doubleConfirmation: { type: Boolean, default: !1 },
+    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: ["onSelect", "update:modelValue", "onOpen", "onClose", "update:isOpen", "load-more", "search"],
+  setup(t, { emit: B }) {
+    const l = t, f = B, m = d(!1), u = d(null), a = d({
+      title: "Confirm Selection",
+      description: "Are you sure you want to select this option?",
+      confirmText: "Confirm",
+      cancelText: "Cancel",
+      variant: "primary"
+    }), I = C(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), T = C(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), p = d(l.isOpen || !1);
+    $(
+      () => l.isOpen,
+      (e) => {
+        e !== void 0 && (p.value = e);
+      }
+    );
+    const O = (e) => {
+      p.value = e, f("update:isOpen", e), f(e ? "onOpen" : "onClose");
+    }, s = d([]);
+    $(
+      () => l.options,
+      (e) => {
+        if (e)
+          if (l.remote) {
+            const n = [...s.value];
+            e.forEach((o) => {
+              n.some((i) => i.value !== void 0 && o.value !== void 0 ? typeof i.value == "object" && i.key && o.key ? i.key === o.key && i.value[i.key] === o.value[o.key] : i.value === o.value : i.label === o.label) || n.push(o);
+            }), s.value = n;
+          } else
+            s.value = e;
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const { getAllRecursiveIds: P } = X(), N = D({
+      ...R(l),
+      options: s
+    }), { currentValue: x, selectedLabel: g, selectOption: M } = Y(
+      N,
+      // Cast to any to satisfy strict prop types if needed, or define interface
+      f
+    ), H = C(() => {
+      const e = l.ignoreClickOutside || [], n = P(s.value);
+      return [.../* @__PURE__ */ new Set([...e, ...n])];
+    }), L = (e) => {
+      l.doubleConfirmation || !!e.confirmation ? (u.value = e, typeof e.confirmation == "object" ? a.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",
+        cancelText: e.confirmation.cancelText || "Cancel",
+        variant: e.confirmation.variant || "primary"
+      } : a.value = {
+        title: "Confirm Selection",
+        description: `Are you sure you want to select "${e.label}"?`,
+        confirmText: "Confirm",
+        cancelText: "Cancel",
+        variant: "primary"
+      }, m.value = !0, y()) : (b(e), l.closeOnSelect && y());
+    }, b = (e) => {
+      M(e);
+    }, A = () => {
+      u.value && (b(u.value), u.value = null, m.value = !1);
+    }, V = () => {
+      u.value = null, m.value = !1;
+    }, y = () => {
+      O(!1);
+    };
+    return (e, n) => (S(), j("div", {
+      class: "relative inline-block text-left",
+      style: E({ direction: t.direction })
+    }, [
+      h(v(J), {
+        content: "",
+        trigger: "click",
+        arrow: !1,
+        teleport: t.teleport,
+        offset: t.offset,
+        placement: I.value,
+        isOpen: p.value,
+        menuId: t.menuId,
+        ignoreClickOutside: H.value,
+        class: "w-full",
+        className: "dropdown " + (t.className || ""),
+        onOnShow: n[2] || (n[2] = (o) => e.$emit("onOpen")),
+        onOnHide: n[3] || (n[3] = (o) => e.$emit("onClose")),
+        "onUpdate:isOpen": O,
+        triggerClass: "w-full",
+        styles: { padding: "0" }
+      }, {
+        trigger: r(({ isOpen: o }) => [
+          c(e.$slots, "trigger", k(w({ selectedLabel: v(g), isOpen: o })), () => [
+            h(Q, {
+              "selected-label": v(g),
+              "is-open": o,
+              direction: t.direction,
+              class: "w-full"
+            }, null, 8, ["selected-label", "is-open", "direction"])
+          ])
+        ]),
+        default: r(() => [
+          c(e.$slots, "default"),
+          t.options?.length || s.value.length || e.$slots.menu || e.$slots.item || t.remote || t.searchable ? (S(), U(K, {
+            key: 0,
+            options: t.options,
+            cachedOptions: s.value,
+            class: q(t.className),
+            selected: v(x),
+            selectedIndex: t.selectedIndex,
+            maxHeight: t.maxHeight,
+            nestedPosition: T.value,
+            nestedOffset: t.nestedOffset,
+            selectable: t.selectable,
+            direction: t.direction,
+            layout: t.layout,
+            columns: t.columns,
+            loading: t.loading,
+            hasMore: t.hasMore,
+            searchable: t.searchable,
+            remote: t.remote,
+            onSelect: L,
+            onClose: y,
+            onLoadMore: n[0] || (n[0] = (o) => e.$emit("load-more")),
+            onSearch: n[1] || (n[1] = (o) => e.$emit("search", o))
+          }, F({
+            menu: r(() => [
+              c(e.$slots, "menu")
+            ]),
+            item: r((o) => [
+              c(e.$slots, "item", k(w(o)))
+            ]),
+            _: 2
+          }, [
+            e.$slots.header ? {
+              name: "header",
+              fn: r(() => [
+                c(e.$slots, "header")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.footer ? {
+              name: "footer",
+              fn: r(() => [
+                c(e.$slots, "footer")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "layout", "columns", "loading", "hasMore", "searchable", "remote"])) : G("", !0)
+        ]),
+        _: 3
+      }, 8, ["teleport", "offset", "placement", "isOpen", "menuId", "ignoreClickOutside", "className"]),
+      h(W, {
+        show: m.value,
+        title: a.value.title,
+        description: a.value.description,
+        "confirm-text": a.value.confirmText,
+        "cancel-text": a.value.cancelText,
+        variant: a.value.variant,
+        onConfirm: A,
+        onCancel: V
+      }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"])
+    ], 4));
+  }
+});
+export {
+  se as default
+};

package/components/Dropdown/Dropdown.vue2.js

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

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

@@ -0,0 +1,12 @@
+import { IDropdownOption } from '../../types';
+interface Props {
+    option: IDropdownOption;
+    value: boolean;
+    focused?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: boolean, option: IDropdownOption) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onChange?: (value: boolean, option: IDropdownOption) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Dropdown/DropdownBooleanItem.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as r, openBlock as i, createElementBlock as m, withModifiers as d, normalizeClass as u, createElementVNode as c, createBlock as f, createCommentVNode as p, toDisplayString as g, createVNode as h } from "vue";
+import v from "../Switch.vue.js";
+import x from "../Icon.vue.js";
+const k = { class: "flex items-center gap-2 flex-1 min-w-0" }, y = { class: "truncate font-medium" }, V = /* @__PURE__ */ r({
+  __name: "DropdownBooleanItem",
+  props: {
+    option: {},
+    value: { type: Boolean },
+    focused: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(e, { emit: a }) {
+    const l = e, s = a, o = (t) => {
+      s("change", t, l.option);
+    };
+    return (t, n) => (i(), m("div", {
+      "data-dropdown-item": "",
+      class: u(["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: n[0] || (n[0] = d((w) => o(!e.value), ["stop"]))
+    }, [
+      c("div", k, [
+        e.option.icon ? (i(), f(x, {
+          key: 0,
+          icon: e.option.icon,
+          class: "h-4 w-4 shrink-0 opacity-70"
+        }, null, 8, ["icon"])) : p("", !0),
+        c("span", y, g(e.option.label), 1)
+      ]),
+      h(v, {
+        "model-value": e.value,
+        class: "ml-3 shrink-0 scale-75 origin-right",
+        "onUpdate:modelValue": o
+      }, null, 8, ["model-value"])
+    ], 2));
+  }
+});
+export {
+  V as default
+};

package/components/Dropdown/DropdownBooleanItem.vue2.js

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

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

@@ -0,0 +1,21 @@
+import { IDropdownOptions, IDropdownOption } from '../../types';
+interface Props {
+    options: IDropdownOptions;
+    selected?: any;
+    selectable?: boolean;
+    columns?: number | string;
+    itemsClass?: string;
+    headerClass?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    select: (option: IDropdownOption) => any;
+    mouseenter: (payload: any) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: (option: IDropdownOption) => any;
+    onMouseenter?: (payload: any) => any;
+}>, {
+    options: IDropdownOptions;
+    selectable: boolean;
+    columns: number | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Dropdown/DropdownGroupedLayout.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as v, computed as _, openBlock as t, createElementBlock as n, normalizeStyle as C, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as $, toDisplayString as h, createBlock as d, createCommentVNode as f, createVNode as w } from "vue";
+import B from "../Icon.vue.js";
+import y from "./DropdownItem.vue.js";
+const N = { class: "font-semibold text-sm text-foreground" }, S = { 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"
+}, g = {
+  key: 1,
+  class: "px-2 text-xs text-muted-foreground italic"
+}, j = /* @__PURE__ */ v({
+  __name: "DropdownGroupedLayout",
+  props: {
+    options: { default: () => [] },
+    selected: {},
+    selectable: { type: Boolean, default: !0 },
+    columns: { default: 3 },
+    itemsClass: {},
+    headerClass: {}
+  },
+  emits: ["select", "mouseenter"],
+  setup(o, { emit: z }) {
+    const l = o, k = _(() => {
+      const e = l.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;
+    return (e, A) => (t(), n("div", {
+      class: "grid gap-6 p-4",
+      style: C(k.value)
+    }, [
+      (t(!0), n(a, null, i(o.options, (s, p) => (t(), n("div", {
+        key: s.key || s.value || p,
+        class: "flex flex-col space-y-2 min-w-[150px]"
+      }, [
+        m("div", {
+          class: $(["flex items-center gap-2 px-2 py-1 mb-1", o.headerClass])
+        }, [
+          m("span", N, h(s.label), 1),
+          s.icon ? (t(), d(B, {
+            key: 0,
+            icon: s.icon,
+            class: "w-4 h-4 text-muted-foreground"
+          }, null, 8, ["icon"])) : f("", !0)
+        ], 2),
+        m("div", S, [
+          s.children && s.children.length ? (t(!0), n(a, { key: 0 }, i(s.children, (c, x) => (t(), n(a, {
+            key: c.key || c.value || x
+          }, [
+            w(y, {
+              option: c,
+              selected: u(c),
+              selectable: o.selectable,
+              class: "w-full",
+              onClick: (r) => e.$emit("select", c)
+            }, null, 8, ["option", "selected", "selectable", "onClick"]),
+            c.children && c.children.length ? (t(), n("div", V, [
+              (t(!0), n(a, null, i(c.children, (r, b) => (t(), d(y, {
+                key: r.key || r.value || b,
+                option: r,
+                selected: u(r),
+                selectable: o.selectable,
+                class: "w-full text-xs",
+                onClick: (D) => e.$emit("select", r)
+              }, null, 8, ["option", "selected", "selectable", "onClick"]))), 128))
+            ])) : f("", !0)
+          ], 64))), 128)) : (t(), n("div", g, "No items"))
+        ])
+      ]))), 128))
+    ], 4));
+  }
+});
+export {
+  j as default
+};