@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Container.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/container'
+
+const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
+
+const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
+
+export interface ContainerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
+
+export interface ContainerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<ContainerProps>()
+defineSlots<ContainerSlots>()
+</script>
+
+<template>
+  <Primitive :as="as" :class="container({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/ContextMenu.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/context-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
+
+const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
+
+export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<ContextMenuItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ContextMenuItem[] | ContextMenuItem[][]
+  select?(e: Event): void
+}
+
+type ContextMenuVariants = VariantProps<typeof contextMenu>
+
+export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>, Pick<ContextMenuTriggerProps, 'disabled'> {
+  size?: ContextMenuVariants['size']
+  items?: T[] | T[][]
+  /** The content of the menu. */
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof contextMenu.slots>
+}
+
+export interface ContextMenuEmits extends ContextMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type ContextMenuSlots<T extends { slot?: string }> = {
+  'default'(props?: {}): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends ContextMenuItem">
+import { computed, toRef } from 'vue'
+import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UContextMenuContent from './ContextMenuContent.vue'
+import { omit } from '../utils'
+
+const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
+  portal: true,
+  modal: true
+})
+const emits = defineEmits<ContextMenuEmits>()
+const slots = defineSlots<ContextMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
+const contentProps = toRef(() => props.content as ContextMenuContentProps)
+const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
+
+const ui = computed(() => contextMenu({
+  size: props.size
+}))
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="rootProps">
+    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
+      <slot />
+    </ContextMenuTrigger>
+
+    <UContextMenuContent
+      :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>
+    </UContextMenuContent>
+  </ContextMenuRoot>
+</template>

package/dist/runtime/components/ContextMenuContent.vue

@@ -0,0 +1,122 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ContextMenuContentProps as RadixContextMenuContentProps, ContextMenuContentEmits as RadixContextMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/context-menu'
+import type { KbdProps, AvatarProps, ContextMenuItem, ContextMenuSlots } from '../types'
+
+const _contextMenu = tv(theme)()
+
+interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof _contextMenu
+  uiOverride?: any
+}
+
+interface ContextMenuContentEmits extends RadixContextMenuContentEmits {}
+</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,115 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+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
+}
+</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/DropdownMenu.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/dropdown-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
+
+const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<DropdownMenuItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  select?(e: Event): void
+}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
+  size?: DropdownMenuVariants['size']
+  items?: T[] | T[][]
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof dropdownMenu.slots>
+}
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<T extends { slot?: string }> = {
+  'default'(props: { open: boolean }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</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>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, DropdownMenuContentEmits as RadixDropdownMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/dropdown-menu'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
+
+const _dropdownMenu = tv(theme)()
+
+interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof _dropdownMenu
+  uiOverride?: any
+}
+
+interface DropdownMenuContentEmits extends RadixDropdownMenuContentEmits {}
+
+type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends DropdownMenuItem">
+import { computed } from 'vue'
+import { DropdownMenu } 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<DropdownMenuContentProps<T>>()
+const emits = defineEmits<DropdownMenuContentEmits>()
+const slots = defineSlots<DropdownMenuContentSlots<T>>()
+
+const appConfig = useAppConfig()
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'class', 'ui'), emits)
+const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuContentSlots<T>[string]>
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, 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>
+
+  <DropdownMenu.Portal :disabled="!portal">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <DropdownMenu.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}`">
+          <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.separator })" />
+          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <DropdownMenu.SubTrigger
+              as="button"
+              type="button"
+              :disabled="item.disabled"
+              :text-value="item.label"
+              :class="ui.item({ class: uiOverride?.item })"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.SubTrigger>
+
+            <UDropdownMenuContent
+              sub
+              :class="props.class"
+              :ui="ui"
+              :ui-override="uiOverride"
+              :portal="portal"
+              :items="item.children"
+              side="right"
+              align="start"
+              :align-offset="-4"
+              :side-offset="3"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </UDropdownMenuContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.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<DropdownMenuItem, 'type'>)" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </ULinkBase>
+            </ULink>
+          </DropdownMenu.Item>
+        </template>
+      </DropdownMenu.Group>
+
+      <slot />
+    </component>
+  </DropdownMenu.Portal>
+</template>