@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist/runtime/components/Badge.vue

@@ -1,9 +1,31 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/badge";
-const appConfig = _appConfig;
-const badge = tv({ extend: tv(theme), ...appConfig.ui?.badge || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/badge'
+
+const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
+
+const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
+
+type BadgeVariants = VariantProps<typeof badge>
+
+export interface BadgeProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'span'
+   */
+  as?: any
+  label?: string | number
+  color?: BadgeVariants['color']
+  variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
+  class?: any
+}
+
+export interface BadgeSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Breadcrumb.vue

@@ -1,9 +1,47 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/breadcrumb";
-const appConfig = _appConfig;
-const breadcrumb = tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} });
+<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/breadcrumb'
+import type { AvatarProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
+
+const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  separatorIcon?: string
+  class?: any
+  ui?: Partial<typeof breadcrumb.slots>
+}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'separator'(props?: {}): any
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">

package/dist/runtime/components/Button.vue

@@ -1,13 +1,44 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/button";
-const appConfig = _appConfig;
-const button = tv({ extend: tv(theme), ...appConfig.ui?.button || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button'
+import type { LinkProps } from './Link.vue'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+import { formLoadingInjectionKey } from '../composables/useFormField'
+
+const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
+
+const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  color?: ButtonVariants['color']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  /** Render the button with equal padding on all sides. */
+  square?: boolean
+  /** Render the button full width. */
+  block?: boolean
+  /** Set loading state automatically based on the `@click` promise state */
+  loadingAuto?: boolean
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
+  class?: any
+  ui?: PartialString<typeof button.slots>
+}
+
+export interface ButtonSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type Ref, computed, ref, inject } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
@@ -21,13 +52,33 @@ const slots = defineSlots<ButtonSlots>()
 const linkProps = useForwardProps(pickLinkProps(props))
 
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
+
+async function onClickWrapper(event: MouseEvent) {
+  loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally {
+    loadingAutoState.value = false
+  }
+}
+
+const isLoading = computed(() => {
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: isLoading.value }))
+)
 
 const ui = computed(() => button({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
-  loading: props.loading,
+  loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
@@ -37,7 +88,14 @@ const ui = computed(() => button({
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+  <ULink
+    :type="type"
+    :disabled="disabled || isLoading"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    v-bind="linkProps"
+    raw
+    @click="onClickWrapper"
+  >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
     </slot>

package/dist/runtime/components/ButtonGroup.vue

@@ -1,9 +1,33 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/button-group";
-const appConfig = _appConfig;
-const buttonGroup = tv({ extend: tv(theme), ...appConfig.ui?.buttonGroup });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: ButtonGroupVariants['size']
+  /**
+   * The orientation the buttons are laid out.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ButtonGroupVariants['orientation']
+  class?: any
+}
+
+export interface ButtonGroupSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Card.vue

@@ -1,9 +1,28 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/card";
-const appConfig = _appConfig;
-const card = tv({ extend: tv(theme), ...appConfig.ui?.card || {} });
+<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/card'
+
+const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
+
+const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
+
+export interface CardProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof card.slots>
+}
+
+export interface CardSlots {
+  header(props?: {}): any
+  default(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Checkbox.vue

@@ -1,9 +1,48 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/checkbox";
-const appConfig = _appConfig;
-const checkbox = tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/checkbox'
+
+const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id'> {
+  label?: string
+  description?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  /**
+   * The icon displayed when checked.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  icon?: string
+  indeterminate?: InputHTMLAttributes['indeterminate']
+  /**
+   * The icon displayed when the checkbox is indeterminate.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  indeterminateIcon?: string
+  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
+  defaultValue?: boolean
+  class?: any
+  ui?: Partial<typeof checkbox.slots>
+}
+
+export interface CheckboxEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Chip.vue

@@ -1,9 +1,42 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/chip";
-const appConfig = _appConfig;
-const chip = tv({ extend: tv(theme), ...appConfig.ui?.chip || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display some text inside the chip. */
+  text?: string | number
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  /** When `true`, translate the chip at the edge for non rounded elements. */
+  inset?: boolean
+  /** When `true`, render the chip relatively to the parent. */
+  standalone?: boolean
+  class?: any
+  ui?: Partial<typeof chip.slots>
+}
+
+export interface ChipEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Collapsible.vue

@@ -1,9 +1,30 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/collapsible";
-const appConfig = _appConfig;
-const collapsible = tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/collapsible'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
+
+const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/CommandPalette.vue

@@ -1,9 +1,102 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/command-palette";
-const appConfig = _appConfig;
-const commandPalette = tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxItemProps } from 'radix-vue'
+import type { FuseResult } from 'fuse.js'
+import type { AppConfig } from '@nuxt/schema'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/command-palette'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
+
+const commandPalette = tv({ extend: tv(theme), ...(appConfig.ui?.commandPalette || {}) })
+
+export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'> {
+  prefix?: string
+  label?: string
+  suffix?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  kbds?: KbdProps['value'][] | KbdProps[]
+  slot?: string
+  select?(e?: Event): void
+}
+
+export interface CommandPaletteGroup<T> {
+  id: string
+  label?: string
+  slot?: string
+  items?: T[]
+  /**
+   * Wether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse).
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue true
+   */
+  filter?: boolean
+  /** Filter group items after the search happened. */
+  postFilter?: (searchTerm: string, items: T[]) => T[]
+  /** The icon displayed when an item is highlighted. */
+  highlightedIcon?: string
+}
+
+export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'selectedValue' | 'resetSearchTermOnBlur'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed in the input.
+   * @defaultValue appConfig.ui.icons.search
+   */
+  icon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The placeholder text for the input.
+   * @defaultValue 'Type a command or search...'
+   */
+  placeholder?: InputProps['placeholder']
+  /**
+   * Display a close button in the input (useful when inside a `UModal`).
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  groups?: G[]
+  /**
+   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
+   * @defaultValue { ignoreLocation: true, threshold: 0.1, keys: ['label', 'suffix'], resultLimit: 12, matchAllWhenSearchEmpty: true }
+   */
+  fuse?: UseFuseOptions<T>
+  class?: any
+  ui?: PartialString<typeof commandPalette.slots>
+}
+
+export type CommandPaletteEmits<T> = ComboboxRootEmits<T>
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+  'empty'(props: { searchTerm?: string }): any
+  'close'(props: { ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
@@ -87,7 +180,7 @@ const groups = computed(() => {
     }
 
     acc[item.group] ||= []
-    acc[item.group].push({ ...item, matches })
+    acc[item.group]?.push({ ...item, matches })
 
     return acc
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)

package/dist/runtime/components/Container.vue

@@ -1,9 +1,25 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/container";
-const appConfig = _appConfig;
-const container = tv({ extend: tv(theme), ...appConfig.ui?.container || {} });
+<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">

package/dist/runtime/components/ContextMenu.vue

@@ -1,9 +1,61 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/context-menu";
-const appConfig = _appConfig;
-const contextMenu = tv({ extend: tv(theme), ...appConfig.ui?.contextMenu || {} });
+<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">

package/dist/runtime/components/ContextMenuContent.vue

@@ -1,7 +1,21 @@
-<script>
-import { tv } from "tailwind-variants";
-import theme from "#build/ui/context-menu";
-const contextMenu = tv(theme)();
+<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">