@nuxt/ui 4.4.0 → 4.5.1

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

@@ -1,4 +1,5 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
 import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
@@ -86,36 +87,36 @@ export interface ContextMenuEmits extends ContextMenuRootEmits {
 }
 type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: ContextMenu['ui'];
-}) => any;
+}) => VNode[];
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props?: {}): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'default'?(props?: {}): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: ContextMenu['ui'];
 }>;

package/dist/runtime/components/ContextMenu.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UContextMenuContent from "./ContextMenuContent.vue";
@@ -22,13 +23,14 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   pressOpenDelay: { type: Number, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contextMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -44,9 +46,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu |
     </ContextMenuTrigger>
 
     <UContextMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :ui="ui"
-      :ui-override="props.ui"
+      :ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"

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

@@ -1,4 +1,5 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
 import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
@@ -86,36 +87,36 @@ export interface ContextMenuEmits extends ContextMenuRootEmits {
 }
 type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: ContextMenu['ui'];
-}) => any;
+}) => VNode[];
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props?: {}): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'default'?(props?: {}): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: ContextMenu['ui'];
 }>;

package/dist/runtime/components/ContextMenuContent.vue

@@ -37,6 +37,7 @@ const props = defineProps({
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { UseResizableProps } from '../composables/useResizable';
 export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
@@ -6,9 +7,12 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardGroup.vue

@@ -8,9 +8,11 @@ import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
+  ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
   storageKey: { type: String, required: false, default: "dashboard" },
   persistent: { type: Boolean, required: false, default: true },
@@ -19,6 +21,7 @@ const props = defineProps({
 defineSlots();
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
 const sidebarCollapsed = ref(false);
@@ -42,7 +45,7 @@ provideDashboardContext({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { UseResizableProps } from '../composables/useResizable';
 export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
@@ -6,9 +7,12 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-navbar';
 import type { DashboardContext } from '../utils/dashboard';
@@ -32,19 +33,19 @@ export interface DashboardNavbarProps {
 }
 type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
 export interface DashboardNavbarSlots {
-    title(props?: {}): any;
-    leading(props: DashboardNavbarSlotsProps & {
+    title?(props?: {}): VNode[];
+    leading?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
-    trailing(props: DashboardNavbarSlotsProps & {
+    }): VNode[];
+    trailing?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
-    left(props: DashboardNavbarSlotsProps): any;
-    default(props: DashboardNavbarSlotsProps): any;
-    right(props: DashboardNavbarSlotsProps): any;
-    toggle(props: DashboardNavbarSlotsProps & {
+    }): VNode[];
+    left?(props: DashboardNavbarSlotsProps): VNode[];
+    default?(props: DashboardNavbarSlotsProps): VNode[];
+    right?(props: DashboardNavbarSlotsProps): VNode[];
+    toggle?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardNavbar.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
@@ -19,10 +20,11 @@ const props = defineProps({
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "left" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardNavbar", props);
 const dashboardContext = useDashboard({});
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavbar || {} })());
@@ -36,21 +38,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -60,11 +62,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: uiProp?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-navbar';
 import type { DashboardContext } from '../utils/dashboard';
@@ -32,19 +33,19 @@ export interface DashboardNavbarProps {
 }
 type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
 export interface DashboardNavbarSlots {
-    title(props?: {}): any;
-    leading(props: DashboardNavbarSlotsProps & {
+    title?(props?: {}): VNode[];
+    leading?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
-    trailing(props: DashboardNavbarSlotsProps & {
+    }): VNode[];
+    trailing?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
-    left(props: DashboardNavbarSlotsProps): any;
-    default(props: DashboardNavbarSlotsProps): any;
-    right(props: DashboardNavbarSlotsProps): any;
-    toggle(props: DashboardNavbarSlotsProps & {
+    }): VNode[];
+    left?(props: DashboardNavbarSlotsProps): VNode[];
+    default?(props: DashboardNavbarSlotsProps): VNode[];
+    right?(props: DashboardNavbarSlotsProps): VNode[];
+    toggle?(props: DashboardNavbarSlotsProps & {
         ui: DashboardNavbar['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-panel';
 import type { UseResizableProps } from '../composables/useResizable';
@@ -8,15 +9,15 @@ export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'min
     ui?: DashboardPanel['slots'];
 }
 export interface DashboardPanelSlots {
-    'default'(props?: {}): any;
-    'header'(props?: {}): any;
-    'body'(props?: {}): any;
-    'footer'(props?: {}): any;
-    'resize-handle'(props: {
+    'default'?(props?: {}): VNode[];
+    'header'?(props?: {}): VNode[];
+    'body'?(props?: {}): VNode[];
+    'footer'?(props?: {}): VNode[];
+    'resize-handle'?(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardPanel.vue

@@ -5,6 +5,7 @@ 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 { useResizable } from "../composables/useResizable";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
@@ -12,7 +13,7 @@ import UDashboardResizeHandle from "./DashboardResizeHandle.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   id: { type: String, required: false },
   minSize: { type: Number, required: false, default: 15 },
   maxSize: { type: Number, required: false },
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 defineSlots();
 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 })));
@@ -36,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: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
   >
     <slot>
       <slot name="header" />
 
-      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
         <slot name="body" />
       </div>
 
@@ -55,7 +57,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
       v-if="resizable"
       :aria-controls="id"
       data-slot="handle"
-      :class="ui.handle({ class: props.ui?.handle })"
+      :class="ui.handle({ class: uiProp?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"
       @dblclick="onDoubleClick"

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-panel';
 import type { UseResizableProps } from '../composables/useResizable';
@@ -8,15 +9,15 @@ export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'min
     ui?: DashboardPanel['slots'];
 }
 export interface DashboardPanelSlots {
-    'default'(props?: {}): any;
-    'header'(props?: {}): any;
-    'body'(props?: {}): any;
-    'footer'(props?: {}): any;
-    'resize-handle'(props: {
+    'default'?(props?: {}): VNode[];
+    'header'?(props?: {}): VNode[];
+    'body'?(props?: {}): VNode[];
+    'footer'?(props?: {}): VNode[];
+    'resize-handle'?(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface DashboardResizeHandleProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface DashboardResizeHandleProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardResizeHandleSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -7,12 +7,15 @@ 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({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardResizeHandle", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardResizeHandle || {} }));
 </script>
 
@@ -20,7 +23,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardResi
   <Primitive
     :as="as"
     role="separator"
-    :class="ui({ class: props.class })"
+    :class="ui({ class: [uiProp?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface DashboardResizeHandleProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface DashboardResizeHandleProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardResizeHandleSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+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';
@@ -65,10 +66,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     class?: any;
     ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui'];
 }
-export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
-    content(props: {
+export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteItem> & {
+    content?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DashboardSearch.vue

@@ -8,6 +8,7 @@ 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 { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -27,7 +28,7 @@ const props = defineProps({
   fuse: { type: Object, required: false },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   overlay: { type: Boolean, required: false },
@@ -47,6 +48,7 @@ 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"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
@@ -116,7 +118,7 @@ defineExpose({
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
+    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -126,7 +128,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :ui="transformUI(omit(ui, ['modal']), props.ui)"
+          :input="{ fixed: true }"
+          :ui="transformUI(omit(ui, ['modal']), uiProp)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -1,3 +1,4 @@
+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';
@@ -65,10 +66,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     class?: any;
     ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['ui'];
 }
-export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem> & {
-    content(props: {
+export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteItem> & {
+    content?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -48,9 +48,9 @@ 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;
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
-    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {