@nuxt/ui 4.6.1 → 4.7.0

package/dist/runtime/components/ContextMenuContent.vue

@@ -8,6 +8,7 @@ import { ContextMenu } from "reka-ui/namespaced";
 import { useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { omit, get, isArrayOfArray } from "../utils";
@@ -100,79 +101,81 @@ const groups = computed(
   </DefineItemTemplate>
 
   <ContextMenu.Portal v-bind="portalProps">
-    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
-      <slot name="content-top" :sub="sub ?? false" />
+    <FieldGroupReset>
+      <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+        <slot name="content-top" :sub="sub ?? false" />
 
-      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" data-slot="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'" data-slot="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)"
-                data-slot="item"
-                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              >
+        <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+          <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
                 <ReuseItemTemplate :item="item" :index="index" />
-              </ContextMenu.SubTrigger>
+              </ContextMenu.Label>
+              <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="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)"
+                  data-slot="item"
+                  :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+                >
+                  <ReuseItemTemplate :item="item" :index="index" />
+                </ContextMenu.SubTrigger>
 
-              <UContextMenuContent
-                sub
-                :class="item.ui?.content"
-                :ui="ui"
-                :ui-override="uiOverride"
-                :portal="portal"
-                :items="item.children"
-                :align-offset="-4"
-                :label-key="labelKey"
-                :description-key="descriptionKey"
-                :checked-icon="checkedIcon"
-                :loading-icon="loadingIcon"
-                :external-icon="externalIcon"
-                v-bind="item.content"
-              >
-                <template v-for="(_, name) in getProxySlots()" #[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)"
-              data-slot="item"
-              :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>
-            <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ContextMenu.Item
-                as-child
+                <UContextMenuContent
+                  sub
+                  :class="item.ui?.content"
+                  :ui="ui"
+                  :ui-override="uiOverride"
+                  :portal="portal"
+                  :items="item.children"
+                  :align-offset="-4"
+                  :label-key="labelKey"
+                  :description-key="descriptionKey"
+                  :checked-icon="checkedIcon"
+                  :loading-icon="loadingIcon"
+                  :external-icon="externalIcon"
+                  v-bind="item.content"
+                >
+                  <template v-for="(_, name) in getProxySlots()" #[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)"
+                data-slot="item"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+                @update:model-value="item.onUpdateChecked"
                 @select="item.onSelect"
               >
-                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
-                </ULinkBase>
-              </ContextMenu.Item>
-            </ULink>
-          </template>
-        </ContextMenu.Group>
-      </div>
+                <ReuseItemTemplate :item="item" :index="index" />
+              </ContextMenu.CheckboxItem>
+              <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ContextMenu.Item
+                  as-child
+                  :disabled="item.disabled"
+                  :text-value="get(item, props.labelKey)"
+                  @select="item.onSelect"
+                >
+                  <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                    <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                  </ULinkBase>
+                </ContextMenu.Item>
+              </ULink>
+            </template>
+          </ContextMenu.Group>
+        </div>
 
-      <slot />
+        <slot />
 
-      <slot name="content-bottom" :sub="sub ?? false" />
-    </component>
+        <slot name="content-bottom" :sub="sub ?? false" />
+      </component>
+    </FieldGroupReset>
   </ContextMenu.Portal>
 </template>

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

@@ -1,39 +1,14 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/dashboard-search';
-import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
-export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups' | 'fuse'> {
     /**
      * @defaultValue 'md'
      */
     size?: DashboardSearch['variants']['size'];
-    /**
-     * The icon displayed in the input.
-     * @defaultValue appConfig.ui.icons.search
-     * @IconifyIcon
-     */
-    icon?: IconProps['name'];
-    /**
-     * The placeholder text for the input.
-     * @defaultValue t('commandPalette.placeholder')
-     */
-    placeholder?: InputProps['placeholder'];
-    /**
-     * Automatically focus the input when component is mounted.
-     * @defaultValue true
-     */
-    autofocus?: boolean;
-    /** When `true`, the loading icon will be displayed. */
-    loading?: boolean;
-    /**
-     * The icon when the `loading` prop is `true`.
-     * @defaultValue appConfig.ui.icons.loading
-     * @IconifyIcon
-     */
-    loadingIcon?: IconProps['name'];
     /**
      * Display a close button in the input (useful when inside a Modal for example).
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -41,23 +16,18 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue appConfig.ui.icons.close
-     * @IconifyIcon
-     */
-    closeIcon?: IconProps['name'];
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'
      */
     shortcut?: string;
-    groups?: CommandPaletteGroup<T>[];
     /**
-     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
-     * @defaultValue {}
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful for large datasets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Set to `0` to disable.
+     * @defaultValue 100
      */
-    fuse?: UseFuseOptions<T>;
+    searchDelay?: number;
     /**
      * When `true`, the theme command will be added to the groups.
      * @defaultValue true
@@ -90,6 +60,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     colorMode: boolean;
+    searchDelay: number;
     fullscreen: boolean;
     shortcut: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;

package/dist/runtime/components/DashboardSearch.vue

@@ -16,16 +16,9 @@ import UCommandPalette from "./CommandPalette.vue";
 import UModal from "./Modal.vue";
 const props = defineProps({
   size: { type: null, required: false },
-  icon: { type: null, required: false },
-  placeholder: { type: String, required: false },
-  autofocus: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  loadingIcon: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: null, required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
-  groups: { type: Array, required: false },
-  fuse: { type: Object, required: false },
+  searchDelay: { type: Number, required: false, default: 100 },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -37,7 +30,15 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false },
   fullscreen: { type: Boolean, required: false, default: false },
   modal: { type: Boolean, required: false },
-  portal: { type: [Boolean, String], required: false, skipCheck: true }
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
+  icon: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  closeIcon: { type: null, required: false },
+  groups: { type: Array, required: false },
+  fuse: { type: Object, required: false }
 });
 const slots = defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
@@ -49,7 +50,7 @@ const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("dashboardSearch", props);
-const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {

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

@@ -1,39 +1,14 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/dashboard-search';
-import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
-export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups' | 'fuse'> {
     /**
      * @defaultValue 'md'
      */
     size?: DashboardSearch['variants']['size'];
-    /**
-     * The icon displayed in the input.
-     * @defaultValue appConfig.ui.icons.search
-     * @IconifyIcon
-     */
-    icon?: IconProps['name'];
-    /**
-     * The placeholder text for the input.
-     * @defaultValue t('commandPalette.placeholder')
-     */
-    placeholder?: InputProps['placeholder'];
-    /**
-     * Automatically focus the input when component is mounted.
-     * @defaultValue true
-     */
-    autofocus?: boolean;
-    /** When `true`, the loading icon will be displayed. */
-    loading?: boolean;
-    /**
-     * The icon when the `loading` prop is `true`.
-     * @defaultValue appConfig.ui.icons.loading
-     * @IconifyIcon
-     */
-    loadingIcon?: IconProps['name'];
     /**
      * Display a close button in the input (useful when inside a Modal for example).
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -41,23 +16,18 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue appConfig.ui.icons.close
-     * @IconifyIcon
-     */
-    closeIcon?: IconProps['name'];
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'
      */
     shortcut?: string;
-    groups?: CommandPaletteGroup<T>[];
     /**
-     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
-     * @defaultValue {}
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful for large datasets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Set to `0` to disable.
+     * @defaultValue 100
      */
-    fuse?: UseFuseOptions<T>;
+    searchDelay?: number;
     /**
      * When `true`, the theme command will be added to the groups.
      * @defaultValue true
@@ -90,6 +60,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     colorMode: boolean;
+    searchDelay: number;
     fullscreen: boolean;
     shortcut: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;

package/dist/runtime/components/DashboardSidebar.vue

@@ -72,11 +72,7 @@ const Menu = computed(() => ({
   modal: UModal,
   drawer: UDrawer
 })[props.mode]);
-const menuProps = toRef(() => defu(props.menu, {
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
+const menuProps = toRef(() => defu(props.menu, {}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
 function toggleOpen() {
   open.value = !open.value;
 }

package/dist/runtime/components/Drawer.vue

@@ -9,6 +9,7 @@ import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverla
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
@@ -76,55 +77,57 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+      <FieldGroupReset>
+        <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
-      <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
+        <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
+          <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
 
-        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
-          <DrawerTitle v-if="!title && !slots.title" />
-          <DrawerTitle v-else-if="!!slots.content">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DrawerTitle>
+          <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+            <DrawerTitle v-if="!title && !slots.title" />
+            <DrawerTitle v-else-if="!!slots.content">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </DrawerTitle>
 
-          <DrawerDescription v-if="!description && !slots.description" />
-          <DrawerDescription v-else-if="!!slots.content">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DrawerDescription>
-        </VisuallyHidden>
+            <DrawerDescription v-if="!description && !slots.description" />
+            <DrawerDescription v-else-if="!!slots.content">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </DrawerDescription>
+          </VisuallyHidden>
 
-        <slot name="content">
-          <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
-              <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DrawerTitle>
+          <slot name="content">
+            <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+              <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+                <slot name="header">
+                  <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+                  </DrawerTitle>
 
-                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DrawerDescription>
-              </slot>
-            </div>
+                  <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                    <slot name="description">
+                      {{ description }}
+                    </slot>
+                  </DrawerDescription>
+                </slot>
+              </div>
 
-            <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
-              <slot name="body" />
-            </div>
+              <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+                <slot name="body" />
+              </div>
 
-            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
-              <slot name="footer" />
+              <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+                <slot name="footer" />
+              </div>
             </div>
-          </div>
-        </slot>
-      </DrawerContent>
+          </slot>
+        </DrawerContent>
+      </FieldGroupReset>
     </DrawerPortal>
   </component>
 </template>