@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/ContextMenuContent.vue

@@ -0,0 +1,108 @@
+<script>
+import { tv } from "tailwind-variants";
+import theme from "#build/ui/context-menu";
+const contextMenu = tv(theme)();
+</script>
+
+<script setup lang="ts" generic="T extends ContextMenuItem">
+import { computed } from 'vue'
+import { ContextMenu } from 'radix-vue/namespaced'
+import { useForwardPropsEmits } from 'radix-vue'
+import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
+import { omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
+
+const props = defineProps<ContextMenuContentProps<T>>()
+const emits = defineEmits<ContextMenuContentEmits>()
+const slots = defineSlots<ContextMenuSlots<T>>()
+
+const appConfig = useAppConfig()
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'class', 'ui'), emits)
+const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ContextMenuItem, active?: boolean, index: number }>()
+
+const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <UAvatar v-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, active })" />
+      </slot>
+
+      <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
+        <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
+          {{ item.label }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
+      </span>
+
+      <span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <ContextMenu.Portal :disabled="!portal">
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
+      <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </ContextMenu.Label>
+          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.separator })" />
+          <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <ContextMenu.SubTrigger
+              as="button"
+              type="button"
+              :disabled="item.disabled"
+              :text-value="item.label"
+              :class="ui.item({ class: uiOverride?.item })"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.SubTrigger>
+
+            <UContextMenuContent
+              sub
+              :class="props.class"
+              :ui="ui"
+              :ui-override="uiOverride"
+              :portal="portal"
+              :items="item.children"
+              :align-offset="-4"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </UContextMenuContent>
+          </ContextMenu.Sub>
+          <ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
+            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </ULinkBase>
+            </ULink>
+          </ContextMenu.Item>
+        </template>
+      </ContextMenu.Group>
+
+      <slot />
+    </component>
+  </ContextMenu.Portal>
+</template>

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,73 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/drawer";
+const appConfig = _appConfig;
+const drawer = tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} });
+</script>
+
+<script setup lang="ts">
+import { toRef } from 'vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  portal: true,
+  overlay: true
+})
+const emits = defineEmits<DrawerEmits>()
+const slots = defineSlots<DrawerSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const contentProps = toRef(() => props.content)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = drawer()
+</script>
+
+<template>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child>
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal :disabled="!portal">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DrawerContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps">
+        <slot name="handle">
+          <div :class="ui.handle({ class: props.ui?.handle })" />
+        </slot>
+
+        <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,343 @@
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps } from 'radix-vue';
+declare const drawer: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    container: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    container: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    container: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    container: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    overlay: string;
+    content: string;
+    handle: string;
+    container: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            container?: import("tailwind-variants").ClassValue;
+            handle?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean;
+    class?: any;
+    ui?: Partial<typeof drawer.slots>;
+}
+export interface DrawerEmits extends DrawerRootEmits {
+}
+export interface DrawerSlots {
+    default(props?: {}): any;
+    handle(props?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<DrawerProps>, {
+    portal: boolean;
+    overlay: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drag: (percentageDragged: number) => void;
+    release: (open: boolean) => void;
+    close: () => void;
+    "update:open": (open: boolean) => void;
+    "update:activeSnapPoint": (val: string | number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<DrawerProps>, {
+    portal: boolean;
+    overlay: boolean;
+}>>> & 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;
+}>, {
+    overlay: boolean;
+    portal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<DrawerSlots> & DrawerSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/DropdownMenu.vue

@@ -0,0 +1,55 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/dropdown-menu";
+const appConfig = _appConfig;
+const dropdownMenu = tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} });
+</script>
+
+<script setup lang="ts" generic="T extends DropdownMenuItem">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UDropdownMenuContent from './DropdownMenuContent.vue'
+import { omit } from '../utils'
+
+const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+  portal: true,
+  modal: true
+})
+const emits = defineEmits<DropdownMenuEmits>()
+const slots = defineSlots<DropdownMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as DropdownMenuContentProps)
+const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
+const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>
+
+const ui = computed(() => dropdownMenu({
+  size: props.size
+}))
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
+      <slot :open="open" />
+    </DropdownMenuTrigger>
+
+    <UDropdownMenuContent
+      :class="ui.content({ class: [props.class, props.ui?.content] })"
+      :ui="ui"
+      :ui-override="props.ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+    </UDropdownMenuContent>
+  </DropdownMenuRoot>
+</template>