@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/countdown';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -70,13 +71,13 @@ export interface CountdownEmits {
     progress: [value: CountdownData];
 }
 export interface CountdownSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Countdown['b24ui'];
-    }): any;
-    default(props: CountdownData & {
+    }): VNode[];
+    default?(props: CountdownData & {
         formatTime: string;
         b24ui: Countdown['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,20 +1,26 @@
-import type { UseLoadingProps } from '../composables/useLoading';
-export interface DashboardGroupProps extends Pick<UseLoadingProps, 'id' | 'storage' | 'storageKey'> {
+import type { VNode } from 'vue';
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
-    storage: "cookie" | "local";
     storageKey: string;
+    storage: "cookie" | "local";
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DashboardGroup.vue

@@ -3,45 +3,49 @@ import theme from "#build/b24ui/dashboard-group";
 </script>
 
 <script setup>
-import { ref, computed, useId } from "vue";
+import { ref, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  id: { type: String, required: false },
+  b24ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
-  storageKey: { type: String, required: false, default: "dashboard" }
+  storageKey: { type: String, required: false, default: "dashboard" },
+  persistent: { type: Boolean, required: false, default: true },
+  unit: { type: String, required: false, default: "px" }
 });
 defineSlots();
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
-const isLoading = ref(false);
-const contextId = `${props.storage}-sidebar-group-${props.id || useId()}`;
+const sidebarCollapsed = ref(false);
 provideDashboardContext({
-  contextId,
   storage: props.storage,
   storageKey: props.storageKey,
+  persistent: props.persistent,
+  unit: props.unit,
   sidebarOpen,
   toggleSidebar: () => {
     nuxtApp.hooks.callHook("dashboard:sidebar:toggle");
   },
+  sidebarCollapsed,
+  collapseSidebar: (collapsed) => {
+    nuxtApp.hooks.callHook("dashboard:sidebar:collapse", collapsed);
+  },
   toggleSearch: () => {
     nuxtApp.hooks.callHook("dashboard:search:toggle");
-  },
-  isLoading,
-  load: (load, contextId2) => {
-    nuxtApp.hooks.callHook("dashboard:content:load", load, contextId2);
   }
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,20 +1,26 @@
-import type { UseLoadingProps } from '../composables/useLoading';
-export interface DashboardGroupProps extends Pick<UseLoadingProps, 'id' | 'storage' | 'storageKey'> {
+import type { VNode } from 'vue';
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
-    storage: "cookie" | "local";
     storageKey: string;
+    storage: "cookie" | "local";
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,60 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title?(props?: {}): VNode[];
+    leading?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+    trailing?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+    left?(props: DashboardNavbarSlotsProps): VNode[];
+    default?(props: DashboardNavbarSlotsProps): VNode[];
+    right?(props: DashboardNavbarSlotsProps): VNode[];
+    toggle?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardNavbar.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/b24ui/dashboard-navbar";
+</script>
+
+<script setup>
+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 B24DashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  title: { type: String, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "left" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardNavbar", props);
+const dashboardContext = useDashboard({});
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardNavbar || {} })());
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" v-bind="{ ...dashboardContext, b24ui }">
+      <B24DashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        data-slot="toggle"
+        :class="b24ui.toggle({ class: uiProp?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left" v-bind="dashboardContext">
+        <slot name="leading" v-bind="{ ...dashboardContext, b24ui }">
+          <Component
+            :is="icon"
+            v-if="icon"
+            data-slot="icon"
+            :class="b24ui.icon({ class: uiProp?.icon })"
+          />
+        </slot>
+
+        <h1 data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+
+        <slot name="trailing" v-bind="{ ...dashboardContext, b24ui }" />
+      </slot>
+    </div>
+
+    <div v-if="!!slots.default" data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot v-bind="dashboardContext" />
+    </div>
+
+    <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" v-bind="dashboardContext" />
+
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,60 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title?(props?: {}): VNode[];
+    leading?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+    trailing?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+    left?(props: DashboardNavbarSlotsProps): VNode[];
+    default?(props: DashboardNavbarSlotsProps): VNode[];
+    right?(props: DashboardNavbarSlotsProps): VNode[];
+    toggle?(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,32 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    '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;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.vue

@@ -0,0 +1,66 @@
+<script>
+import theme from "#build/b24ui/dashboard-panel";
+</script>
+
+<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";
+import B24DashboardResizeHandle from "./DashboardResizeHandle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  id: { type: String, required: false },
+  minSize: { type: Number, required: false, default: 200 },
+  maxSize: { type: Number, required: false },
+  defaultSize: { type: Number, required: false },
+  resizable: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardPanel", props);
+const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "px" });
+const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
+const { el, size, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })));
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardPanel || {} })({
+  size: !!size.value
+}));
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-dragging="isDragging"
+    data-slot="root"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
+    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
+  >
+    <slot>
+      <slot name="header" />
+
+      <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+        <slot name="body" />
+      </div>
+
+      <slot name="footer" />
+    </slot>
+  </div>
+
+  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <B24DashboardResizeHandle
+      v-if="resizable"
+      :aria-controls="id"
+      data-slot="handle"
+      :class="b24ui.handle({ class: uiProp?.handle })"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @dblclick="onDoubleClick"
+    />
+  </slot>
+</template>

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

@@ -0,0 +1,32 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    '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;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+import type { VNode } from 'vue';
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -0,0 +1,30 @@
+<script>
+import theme from "#build/b24ui/dashboard-resize-handle";
+</script>
+
+<script setup>
+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 },
+  b24ui: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardResizeHandle", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardResizeHandle || {} }));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="separator"
+    :class="b24ui({ class: [uiProp?.base, props.class] })"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,23 @@
+import type { VNode } from 'vue';
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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/b24ui/dashboard-search';
@@ -62,10 +63,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     class?: any;
     b24ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['b24ui'];
 }
-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";
@@ -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", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
@@ -120,7 +122,7 @@ defineExpose({
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
+    :class="b24ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -130,7 +132,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :b24ui="transformUI(omit(b24ui, ['modal']), props.b24ui)"
+          :input="{ fixed: true }"
+          :b24ui="transformUI(omit(b24ui, ['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/b24ui/dashboard-search';
@@ -62,10 +63,10 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
     class?: any;
     b24ui?: DashboardSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<CommandPaletteItem>, CommandPaletteItem>['b24ui'];
 }
-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

@@ -42,10 +42,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: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    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 (): {