@nuxt/ui 4.7.0 → 4.8.0

package/dist/runtime/components/DashboardPanel.vue

@@ -5,13 +5,13 @@ import theme from "#build/ui/dashboard-panel";
 <script setup>
 import { computed, useId, toRef } from "vue";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useResizable } from "../composables/useResizable";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UDashboardResizeHandle from "./DashboardResizeHandle.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   id: { type: String, required: false },
@@ -21,8 +21,8 @@ const props = defineProps({
   resizable: { type: Boolean, required: false, default: false }
 });
 defineSlots();
+const props = useComponentProps("dashboardPanel", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardPanel", props);
 const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "%" });
 const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
 const { el, size, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })));
@@ -38,13 +38,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
     v-bind="$attrs"
     :data-dragging="isDragging"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
   >
     <slot>
       <slot name="header" />
 
-      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -54,10 +54,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
 
   <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
     <UDashboardResizeHandle
-      v-if="resizable"
+      v-if="props.resizable"
       :aria-controls="id"
       data-slot="handle"
-      :class="ui.handle({ class: uiProp?.handle })"
+      :class="ui.handle({ class: props.ui?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"
       @dblclick="onDoubleClick"

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -7,23 +7,23 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
-const props = defineProps({
+import { useComponentProps } from "../composables/useComponentProps";
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("dashboardResizeHandle", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardResizeHandle", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardResizeHandle || {} }));
 </script>
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     role="separator"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,10 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-search';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 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'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups' | 'fuse'> {
+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'> {
     /**
      * @defaultValue 'md'
      */
@@ -21,6 +22,20 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue 'meta_k'
      */
     shortcut?: string;
+    /**
+     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
+     * @defaultValue {
+        fuseOptions: {
+          ignoreLocation: true,
+          useTokenSearch: true,
+          threshold: 0.1,
+          keys: ['label', 'description', 'suffix']
+        },
+        resultLimit: 12,
+        matchAllWhenSearchEmpty: true
+      }
+     */
+    fuse?: UseFuseOptions<T>;
     /**
      * 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.

package/dist/runtime/components/DashboardSearch.vue

@@ -4,20 +4,21 @@ import theme from "#build/ui/dashboard-search";
 
 <script setup>
 import { computed, useTemplateRef } from "vue";
-import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UCommandPalette from "./CommandPalette.vue";
 import UModal from "./Modal.vue";
-const props = defineProps({
+const _props = defineProps({
   size: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
   shortcut: { type: String, required: false, default: "meta_k" },
+  fuse: { type: Object, required: false },
   searchDelay: { type: Number, required: false, default: 100 },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -37,10 +38,10 @@ const props = defineProps({
   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 }
+  groups: { type: Array, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("dashboardSearch", _props);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 useRuntimeHook("dashboard:search:toggle", () => {
@@ -49,12 +50,13 @@ useRuntimeHook("dashboard:search:toggle", () => {
 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", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
-  fuseOptions: {}
+  fuseOptions: {
+    useTokenSearch: true
+  }
 }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearch || {} })({
   size: props.size,
@@ -115,11 +117,11 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="title || t('dashboardSearch.title')"
-    :description="description || t('dashboardSearch.description')"
+    :title="props.title || t('dashboardSearch.title')"
+    :description="props.description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
+    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -130,7 +132,7 @@ defineExpose({
           :groups="groups"
           :fuse="fuse"
           :input="{ fixed: true }"
-          :ui="transformUI(omit(ui, ['modal']), uiProp)"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -1,10 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-search';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 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'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups' | 'fuse'> {
+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'> {
     /**
      * @defaultValue 'md'
      */
@@ -21,6 +22,20 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue 'meta_k'
      */
     shortcut?: string;
+    /**
+     * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
+     * @defaultValue {
+        fuseOptions: {
+          ignoreLocation: true,
+          useTokenSearch: true,
+          threshold: 0.1,
+          keys: ['label', 'description', 'suffix']
+        },
+        resultLimit: 12,
+        matchAllWhenSearchEmpty: true
+      }
+     */
+    fuse?: UseFuseOptions<T>;
     /**
      * 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.

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

@@ -47,10 +47,10 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
-    collapsed: boolean;
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DashboardSearchButton.vue

@@ -4,11 +4,11 @@ import theme from "#build/ui/dashboard-search-button";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { omit, transformUI } from "../utils";
@@ -17,7 +17,7 @@ import UButton from "./Button.vue";
 import UKbd from "./Kbd.vue";
 import UTooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   icon: { type: null, required: false },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
@@ -48,13 +48,13 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("dashboardSearchButton", _props);
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
 const getProxySlots = () => omit(slots, ["trailing"]);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "variant", "collapsed", "tooltip", "kbds", "class", "ui"));
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardSearchButton", props);
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearchButton || {} })({
@@ -65,19 +65,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="icon || appConfig.ui.icons.search"
-      :label="label || t('dashboardSearchButton.label')"
-      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.label || t('dashboardSearchButton.label')"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{
   ...buttonProps,
-  ...collapsed ? {
+  ...props.collapsed ? {
     'square': true,
-    'aria-label': label || t('dashboardSearchButton.label')
+    'aria-label': props.label || t('dashboardSearchButton.label')
   } : {},
   ...$attrs
 }"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
-      :ui="transformUI(ui, uiProp)"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -85,10 +85,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
-            <template v-if="kbds?.length">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <template v-if="props.kbds?.length">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>
           </slot>
         </span>
@@ -96,7 +96,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
     </UButton>
   </DefineButtonTemplate>
 
-  <UTooltip v-if="collapsed && tooltip" :text="label || t('dashboardSearchButton.label')" v-bind="tooltipProps">
+  <UTooltip v-if="props.collapsed && props.tooltip" :text="props.label || t('dashboardSearchButton.label')" v-bind="tooltipProps">
     <ReuseButtonTemplate />
   </UTooltip>
   <ReuseButtonTemplate v-else />

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

@@ -47,10 +47,10 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
-    collapsed: boolean;
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -10,7 +10,7 @@ type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slide
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
     /**
      * The mode of the sidebar menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/DashboardSidebar.vue

@@ -7,7 +7,7 @@ import { ref, computed, toRef, useId, watch } from "vue";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useResizable } from "../composables/useResizable";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
@@ -18,7 +18,7 @@ import USlideover from "./Slideover.vue";
 import UModal from "./Modal.vue";
 import UDrawer from "./Drawer.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
   toggle: { type: [Boolean, Object], required: false, default: true },
@@ -36,12 +36,12 @@ const props = defineProps({
   collapsedSize: { type: Number, required: false, default: 0 }
 });
 const slots = defineSlots();
+const props = useComponentProps("dashboardSidebar", _props);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
 const route = useRoute();
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardSidebar", props);
 const dashboardContext = useDashboard({
   storageKey: "dashboard",
   unit: "%",
@@ -82,11 +82,11 @@ function toggleOpen() {
   <DefineToggleTemplate>
     <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UDashboardSidebarToggle
-        v-if="toggle"
-        v-bind="typeof toggle === 'object' ? toggle : {}"
-        :side="toggleSide"
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
@@ -94,10 +94,10 @@ function toggleOpen() {
   <DefineResizeHandleTemplate>
     <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :ui="ui">
       <UDashboardResizeHandle
-        v-if="resizable"
+        v-if="props.resizable"
         :aria-controls="id"
         data-slot="handle"
-        :class="ui.handle({ class: uiProp?.handle })"
+        :class="ui.handle({ class: props.ui?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
         @dblclick="onDoubleClick"
@@ -105,7 +105,7 @@ function toggleOpen() {
     </slot>
   </DefineResizeHandleTemplate>
 
-  <ReuseResizeHandleTemplate v-if="side === 'right'" />
+  <ReuseResizeHandleTemplate v-if="props.side === 'right'" />
 
   <div
     :id="id"
@@ -114,23 +114,23 @@ function toggleOpen() {
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
 
-  <ReuseResizeHandleTemplate v-if="side === 'left'" />
+  <ReuseResizeHandleTemplate v-if="props.side === 'left'" />
 
   <Menu
     v-model:open="open"
@@ -138,27 +138,27 @@ function toggleOpen() {
     :description="t('dashboardSidebar.description')"
     v-bind="menuProps"
     :ui="{
-  overlay: ui.overlay({ class: uiProp?.overlay }),
-  content: ui.content({ class: uiProp?.content })
+  overlay: ui.overlay({ class: props.ui?.overlay }),
+  content: ui.content({ class: props.ui?.content })
 }"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header, menu: true })">
-          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
+        <div v-if="!!slots.header || props.mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header, menu: true })">
+          <ReuseToggleTemplate v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
 
           <slot name="header" :collapsed="false" :collapse="() => {
 }" />
 
-          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
+          <ReuseToggleTemplate v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
         </div>
 
-        <div data-slot="body" :class="ui.body({ class: uiProp?.body, menu: true })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body, menu: true })">
           <slot :collapsed="false" :collapse="() => {
 }" />
         </div>
 
-        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, menu: true })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
           <slot name="footer" :collapsed="false" :collapse="() => {
 }" />
         </div>

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

@@ -10,7 +10,7 @@ type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slide
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
     /**
      * The mode of the sidebar menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

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

@@ -20,7 +20,7 @@ export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPro
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -4,15 +4,15 @@ import theme from "#build/ui/dashboard-sidebar-collapse";
 
 <script setup>
 import { ref, computed } from "vue";
-import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   side: { type: String, required: false, default: "left" },
@@ -40,10 +40,10 @@ const props = defineProps({
   exactActiveClass: { type: String, required: false },
   viewTransition: { type: Boolean, required: false }
 });
+const props = useComponentProps("dashboardSidebarCollapse", _props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardSidebarCollapse", props);
 const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse || {} }));
@@ -57,7 +57,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
   'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
   ...$attrs
 }"
-    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
+    :class="ui({ class: [props.ui?.base, props.class], side: props.side })"
     @click="collapseSidebar?.(!sidebarCollapsed)"
   />
 </template>

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

@@ -20,7 +20,7 @@ export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPro
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -20,7 +20,7 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkProps
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -4,16 +4,16 @@ import theme from "#build/ui/dashboard-sidebar-toggle";
 
 <script setup>
 import { ref, computed } from "vue";
-import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   side: { type: String, required: false, default: "left" },
@@ -41,10 +41,10 @@ const props = defineProps({
   exactActiveClass: { type: String, required: false },
   viewTransition: { type: Boolean, required: false }
 });
+const props = useComponentProps("dashboardSidebarToggle", _props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardSidebarToggle", props);
 const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarToggle || {} }));
@@ -58,7 +58,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
   'aria-label': sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open'),
   ...$attrs
 }"
-    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
+    :class="ui({ class: [props.ui?.base, props.class], side: props.side })"
     @click="toggleSidebar"
   />
 </template>

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

@@ -20,7 +20,7 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkProps
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     side: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;