@nuxt/ui 3.1.2 → 3.2.0

package/.nuxt/ui.css

@@ -1,6 +1,6 @@
 @source "./ui";
 
-@theme default inline {
+@theme static {
   --color-old-neutral-50: oklch(98.5% 0 0);
   --color-old-neutral-100: oklch(97% 0 0);
   --color-old-neutral-200: oklch(92.2% 0 0);
@@ -12,6 +12,9 @@
   --color-old-neutral-800: oklch(26.9% 0 0);
   --color-old-neutral-900: oklch(20.5% 0 0);
   --color-old-neutral-950: oklch(14.5% 0 0);
+}
+
+@theme default inline {
   --color-primary-50: var(--ui-color-primary-50);
 	--color-primary-100: var(--ui-color-primary-100);
 	--color-primary-200: var(--ui-color-primary-200);

package/cli/templates.mjs

@@ -31,8 +31,9 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -62,7 +63,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -75,8 +76,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -105,7 +107,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -186,6 +188,7 @@ links:${primitive
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+navigation.badge: Soon
 ---
 
 ## Usage

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BvUP-pSb.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BPVxSPGY.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.1.2";
+const version = "3.2.0";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Alert.vue

@@ -75,7 +75,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
         <UButton
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
-          size="md"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"

package/dist/runtime/components/Avatar.vue

@@ -10,6 +10,7 @@ import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
+import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "span" },
@@ -18,6 +19,7 @@ const props = defineProps({
   icon: { type: String, required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   ui: { type: null, required: false }
@@ -51,7 +53,13 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <component
+    :is="props.chip ? UChip : Primitive"
+    :as="as"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="props.style"
+  >
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -71,5 +79,5 @@ function onError() {
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
-  </Primitive>
+  </component>
 </template>

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

@@ -1,5 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
+import type { ChipProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
@@ -19,6 +20,7 @@ export interface AvatarProps {
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    chip?: boolean | ChipProps;
     class?: any;
     style?: any;
     ui?: Avatar['slots'];

package/dist/runtime/components/Calendar.vue

@@ -36,6 +36,7 @@ const props = defineProps({
   allowNonContiguousRanges: { type: Boolean, required: false },
   pagedNavigation: { type: Boolean, required: false },
   preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
   weekStartsOn: { type: Number, required: false },
   weekdayFormat: { type: String, required: false },
   fixedWeeks: { type: Boolean, required: false, default: true },
@@ -49,7 +50,9 @@ const props = defineProps({
   isDateUnavailable: { type: Function, required: false },
   isDateHighlightable: { type: Function, required: false },
   nextPage: { type: Function, required: false },
-  prevPage: { type: Function, required: false }
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
 defineSlots();

package/dist/runtime/components/Carousel.vue

@@ -176,7 +176,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -187,7 +186,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
@@ -202,6 +200,7 @@ defineExpose({
           <button
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           />
         </template>

package/dist/runtime/components/Checkbox.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   name: { type: String, required: false },
-  value: { type: [String, Number, Object, null], required: false },
+  value: { type: null, required: false },
   id: { type: String, required: false },
   defaultValue: { type: [Boolean, String], required: false }
 });

package/dist/runtime/components/CommandPalette.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/command-palette";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -26,10 +26,13 @@ const props = defineProps({
   as: { type: null, required: false },
   icon: { type: String, required: false },
   selectedIcon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: String, required: false },
+  back: { type: [Boolean, Object], required: false, default: true },
+  backIcon: { type: String, required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   labelKey: { type: String, required: false, default: "label" },
@@ -40,6 +43,7 @@ const props = defineProps({
   modelValue: { type: null, required: false, default: "" },
   defaultValue: { type: null, required: false },
   highlightOnHover: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false }
 });
@@ -48,7 +52,7 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "selectionBehavior"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading", "loadingIcon"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
 const fuse = computed(() => defu({}, props.fuse, {
@@ -60,7 +64,10 @@ const fuse = computed(() => defu({}, props.fuse, {
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
 }));
-const items = computed(() => props.groups?.filter((group) => {
+const history = ref([]);
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t("commandPalette.placeholder"));
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1]] : props.groups);
+const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`);
     return false;
@@ -69,7 +76,7 @@ const items = computed(() => props.groups?.filter((group) => {
     return false;
   }
   return true;
-}).flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
+})?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
 function getGroupWithItems(group, items2) {
   if (group?.postFilter && typeof group.postFilter === "function") {
@@ -86,7 +93,7 @@ function getGroupWithItems(group, items2) {
     })
   };
 }
-const groups = computed(() => {
+const filteredGroups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
@@ -97,37 +104,87 @@ const groups = computed(() => {
     return acc;
   }, {});
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = props.groups?.find((group2) => group2.id === id);
+    const group = groups.value?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
     return getGroupWithItems(group, items2);
   }).filter((group) => !!group);
-  const nonFuseGroups = props.groups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
   }, [...fuseGroups]);
 });
+const listboxRootRef = useTemplateRef("listboxRootRef");
+function navigate(item) {
+  if (!item.children?.length) {
+    return;
+  }
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  });
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function navigateBack() {
+  if (!history.value.length) {
+    return;
+  }
+  history.value.pop();
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack();
+  }
+}
+function onSelect(e, item) {
+  if (item.children?.length) {
+    e.preventDefault();
+    navigate(item);
+  } else {
+    item.onSelect?.(e);
+  }
+}
 </script>
 
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
         variant="none"
         :autofocus="autofocus"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
       >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="typeof back === 'object' ? back : {}"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
         <template v-if="close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
-              size="md"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
@@ -141,8 +198,8 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey) }}
           </ListboxGroupLabel>
@@ -150,10 +207,10 @@ const groups = computed(() => {
           <ListboxItem
             v-for="(item, index) in group.items"
             :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
             :disabled="item.disabled"
             as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
           >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
               <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -184,13 +241,20 @@ const groups = computed(() => {
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                         <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                       </span>
+
                       <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                     </slot>
 
-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                     </ListboxItemIndicator>
                   </span>

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

@@ -21,12 +21,17 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     loading?: boolean;
     disabled?: boolean;
     slot?: string;
+    /**
+     * The placeholder to display when the item has children.
+     */
+    placeholder?: string;
+    children?: CommandPaletteItem[];
     onSelect?(e?: Event): void;
     class?: any;
     ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
     id: string;
     label?: string;
     slot?: string;
@@ -45,7 +50,7 @@ export interface CommandPaletteGroup<T> {
      */
     highlightedIcon?: string;
 }
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -63,6 +68,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     selectedIcon?: string;
+    /**
+     * The icon displayed when an item has children.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -86,6 +97,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     closeIcon?: string;
+    /**
+     * Display a button to navigate back in history.
+     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    back?: boolean | ButtonProps;
+    /**
+     * The icon displayed in the back button.
+     * @defaultValue appConfig.ui.icons.arrowLeft
+     * @IconifyIcon
+     */
+    backIcon?: string;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -108,21 +131,22 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
     class?: any;
     ui?: CommandPalette['slots'];
 }
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
     'update:open': [value: boolean];
 };
 type SlotProps<T> = (props: {
     item: T;
     index: number;
 }) => any;
-export type CommandPaletteSlots<G extends {
-    slot?: string;
-}, T extends {
-    slot?: string;
-}> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
     'empty'(props: {
         searchTerm?: string;
     }): any;
+    'back'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
     'close'(props: {
         ui: {
             [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;

package/dist/runtime/components/ContextMenuContent.vue

@@ -91,68 +91,70 @@ const groups = computed(
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <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, item.ui?.label, item.class] })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.Label>
-          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-          <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <ContextMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <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, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.Label>
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <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="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <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"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UContextMenuContent>
+            </ContextMenu.Sub>
+            <ContextMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <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"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :loading-icon="loadingIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </ContextMenu.CheckboxItem>
+            <ContextMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </UContextMenuContent>
-          </ContextMenu.Sub>
-          <ContextMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.CheckboxItem>
-          <ContextMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            @select="item.onSelect"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </ULinkBase>
-            </ULink>
-          </ContextMenu.Item>
-        </template>
-      </ContextMenu.Group>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </ContextMenu.Item>
+          </template>
+        </ContextMenu.Group>
+      </div>
 
       <slot />