@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/DashboardSidebar.vue

@@ -0,0 +1,170 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar";
+</script>
+
+<script setup>
+import { ref, computed, toRef, useId, watch } from "vue";
+import { defu } from "defu";
+import { createReusableTemplate } from "@vueuse/core";
+import USlideover from "@nuxt/ui/components/Slideover.vue";
+import UModal from "@nuxt/ui/components/Modal.vue";
+import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
+import { useResizable } from "../composables/useResizable";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  mode: { type: null, required: false, default: "slideover" },
+  menu: { type: null, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "left" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  id: { type: String, required: false },
+  side: { type: String, required: false, default: "left" },
+  minSize: { type: Number, required: false, default: 10 },
+  maxSize: { type: Number, required: false, default: 20 },
+  defaultSize: { type: Number, required: false, default: 15 },
+  resizable: { type: Boolean, required: false, default: false },
+  collapsible: { type: Boolean, required: false, default: false },
+  collapsedSize: { type: Number, required: false, default: 0 }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, default: false });
+const collapsed = defineModel("collapsed", { type: Boolean, default: false });
+const route = useRoute();
+const appConfig = useAppConfig();
+const dashboardCtx = useDashboard({
+  storageKey: "dashboard",
+  unit: "%",
+  sidebarOpen: ref(false),
+  sidebarCollapsed: ref(false)
+});
+const id = `${dashboardCtx.storageKey}-sidebar-${props.id || useId()}`;
+const {
+  el,
+  size,
+  collapse,
+  isCollapsed,
+  isDragging,
+  onMouseDown,
+  onTouchStart
+} = useResizable(
+  id,
+  toRef(() => ({ ...dashboardCtx, ...props })),
+  { collapsed }
+);
+const [DefineToggle, ReuseToggle] = createReusableTemplate();
+const [DefineHandle, ReuseHandle] = createReusableTemplate();
+useRuntimeHook("dashboard:sidebar:toggle", () => {
+  open.value = !open.value;
+});
+useRuntimeHook("dashboard:sidebar:collapse", (v) => {
+  isCollapsed.value = v;
+});
+watch(open, () => {
+  if (dashboardCtx.sidebarOpen) {
+    dashboardCtx.sidebarOpen.value = open.value;
+  }
+}, { immediate: true });
+watch(isCollapsed, () => {
+  if (dashboardCtx.sidebarCollapsed) {
+    dashboardCtx.sidebarCollapsed.value = isCollapsed.value;
+  }
+}, { immediate: true });
+watch(() => route.fullPath, () => {
+  open.value = false;
+});
+const ui = computed(
+  () => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebar })({ side: props.side })
+);
+const Menu = computed(() => ({ slideover: USlideover, modal: UModal, drawer: UDrawer })[props.mode]);
+const menuProps = toRef(() => defu(
+  props.menu,
+  { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
+  props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}
+));
+function toggleOpen() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <DefineToggle>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UDashboardSidebarToggle
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+      />
+    </slot>
+  </DefineToggle>
+
+  <DefineHandle>
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+      <UDashboardResizeHandle
+        v-if="props.resizable"
+        :aria-controls="id"
+        :class="ui.handle({ class: props.ui?.handle })"
+        @mousedown="onMouseDown"
+        @touchstart="onTouchStart"
+      />
+    </slot>
+  </DefineHandle>
+
+  <ReuseHandle v-if="props.side === 'right'" />
+
+  <div
+    :id="id"
+    ref="el"
+    :data-collapsed="isCollapsed"
+    :data-dragging="isDragging"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
+  >
+    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+  </div>
+
+  <ReuseHandle v-if="props.side === 'left'" />
+
+  <Menu
+    v-model:open="open"
+    v-bind="menuProps"
+    :ui="{
+  overlay: ui.overlay({ class: props.ui?.overlay }),
+  content: ui.content({ class: props.ui?.content })
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div
+          v-if="$slots.header || props.mode !== 'drawer'"
+          :class="ui.header({ class: props.ui?.header, menu: true })"
+        >
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
+          <slot name="header" />
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+          <slot name="footer" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
+</template>

package/dist/runtime/components/DashboardSidebar.vue.d.ts

@@ -0,0 +1,72 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, ComponentConfig } from '../types';
+import type { UseResizableProps } from '../composables/useResizable';
+import theme from '#build/ui/dashboard-sidebar';
+export type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
+export type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
+export type DashboardSidebarMenu<T extends DashboardSidebarMode> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
+    /** @defaultValue 'slideover' */
+    mode?: T;
+    /** Props for the sidebar menu component */
+    menu?: DashboardSidebarMenu<T>;
+    /** Customize the toggle button */
+    toggle?: boolean | Partial<ButtonProps>;
+    /** @defaultValue 'left' */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    ui?: DashboardSidebar['slots'];
+}
+export interface DashboardSidebarSlots {
+    'header'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'default'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'footer'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'toggle'(props: {
+        open: boolean;
+        toggle: () => void;
+    }): any;
+    'content'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardSidebarProps<DashboardSidebarMode> & {
+    open?: boolean;
+    collapsed?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps<DashboardSidebarMode> & {
+    open?: boolean;
+    collapsed?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    toggle: boolean | Partial<ButtonProps>;
+    collapsible: boolean;
+    mode: DashboardSidebarMode;
+    side: "left" | "right";
+    minSize: number;
+    maxSize: number;
+    defaultSize: number;
+    resizable: boolean;
+    collapsedSize: number;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSidebarSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -0,0 +1,46 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar-collapse";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  side: { type: String, required: false, default: "left" },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  class: { type: null, required: false }
+});
+const rootProps = useForwardProps(
+  reactivePick(props, "color", "variant", "size", "as", "disabled", "ui")
+);
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
+} });
+const ui = computed(
+  () => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse })
+);
+function toggleCollapse() {
+  collapseSidebar?.(!(sidebarCollapsed?.value ?? false));
+}
+</script>
+
+<template>
+  <UButton
+    v-bind="rootProps"
+    :aria-label="
+  sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')
+"
+    :icon="
+  sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose
+"
+    :class="ui({ class: props.class })"
+    @click="toggleCollapse"
+  />
+</template>

package/dist/runtime/components/DashboardSidebarCollapse.vue.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps } from '@nuxt/ui';
+export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /** @defaultValue 'neutral' */
+    color?: ButtonProps['color'];
+    /** @defaultValue 'ghost' */
+    variant?: ButtonProps['variant'];
+    class?: any;
+}
+declare const _default: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -0,0 +1,43 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar-toggle";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  side: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size", "as", "disabled", "ui"));
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const { sidebarOpen, toggleSidebar } = useDashboard();
+const uiPro = computed(
+  () => tv({
+    extend: tv(theme),
+    ...appConfig.ui?.dashboardSidebarToggle
+  })()
+);
+</script>
+
+<template>
+  <UButton
+    v-bind="rootProps"
+    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
+    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+    :class="uiPro({ class: props.class, side: props.side })"
+    @click="toggleSidebar"
+  />
+</template>

package/dist/runtime/components/DashboardSidebarToggle.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ComponentConfig } from '../types';
+import theme from '#build/ui/dashboard-sidebar-toggle';
+export type DashboardSidebarToggle = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebarToggle'>;
+export interface DashboardSidebarToggleProps extends Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    class?: any;
+    ui?: DashboardSidebarToggle['slots'];
+}
+declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,112 @@
+<script>
+import theme from "#build/ui/drawer";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  handle: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  activeSnapPoint: { type: [Number, String, null], required: false },
+  closeThreshold: { type: Number, required: false },
+  shouldScaleBackground: { type: Boolean, required: false },
+  setBackgroundColorOnScale: { type: Boolean, required: false },
+  scrollLockTimeout: { type: Number, required: false },
+  fixed: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  modal: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false },
+  direction: { type: String, required: false, default: "bottom" },
+  noBodyStyles: { type: Boolean, required: false },
+  handleOnly: { type: Boolean, required: false },
+  preventScrollRestoration: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false }
+});
+const emits = defineEmits(["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
+const contentEvents = {
+  closeAutoFocus: (e) => e.preventDefault()
+};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} })({
+  direction: props.direction,
+  inset: props.inset
+}));
+</script>
+
+<template>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
+
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div :class="ui.container({ class: props.ui?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+              <slot name="header">
+                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+              <slot name="body" />
+            </div>
+
+            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>

package/dist/runtime/components/Drawer.vue.d.ts

@@ -0,0 +1,78 @@
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/drawer';
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    class?: any;
+    ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+}
+export interface DrawerSlots {
+    default(props?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    drag: (percentageDragged: number) => any;
+    "update:open": (open: boolean) => any;
+    release: (open: boolean) => any;
+    "update:activeSnapPoint": (val: string | number) => any;
+    animationEnd: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDrag?: ((percentageDragged: number) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+    handle: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DropdownMenu.vue

@@ -0,0 +1,68 @@
+<script>
+import theme from "#build/ui/dropdown-menu";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { defu } from "defu";
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { omit } from "../utils";
+import { tv } from "../utils/tv";
+import UDropdownMenuContent from "./DropdownMenuContent.vue";
+const props = defineProps({
+  size: { type: null, required: false },
+  items: { type: null, required: false },
+  checkedIcon: { type: String, required: false },
+  loadingIcon: { type: String, required: false },
+  externalIcon: { type: [Boolean, String], required: false, default: true },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  labelKey: { type: null, required: false, default: "label" },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:open"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
+const arrowProps = toRef(() => props.arrow);
+const proxySlots = omit(slots, ["default"]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} })({
+  size: props.size
+}));
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+      <slot :open="open" />
+    </DropdownMenuTrigger>
+
+    <UDropdownMenuContent
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="ui"
+      :ui-override="props.ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+      :label-key="labelKey"
+      :checked-icon="checkedIcon"
+      :loading-icon="loadingIcon"
+      :external-icon="externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+    </UDropdownMenuContent>
+  </DropdownMenuRoot>
+</template>