@nuxt/ui 3.3.2 → 4.0.0-alpha.0

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

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt';
+import type { TextareaProps, TextareaSlots } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
+export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'form'
+     */
+    as?: any;
+    /**
+     * The placeholder text for the textarea.
+     * @defaultValue t('chatPrompt.placeholder')
+     */
+    placeholder?: string;
+    autofocus?: TextareaProps['autofocus'];
+    autoresize?: TextareaProps['autoresize'];
+    rows?: TextareaProps['rows'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: ChatPrompt['variants']['variant'];
+    error?: Error;
+    class?: any;
+    ui?: ChatPrompt['slots'] & TextareaProps['ui'];
+}
+export interface ChatPromptEmits {
+    submit: [event: Event];
+    close: [event: Event];
+}
+export interface ChatPromptSlots extends TextareaSlots {
+    header(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
+    modelValue?: string;
+}, {
+    textareaRef: HTMLTextAreaElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: Event) => any;
+    submit: (event: Event) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptProps & {
+    modelValue?: string;
+}> & Readonly<{
+    onClose?: ((event: Event) => any) | undefined;
+    onSubmit?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    as: any;
+    autofocus: boolean;
+    rows: number;
+    autoresize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/ui/chat-prompt-submit";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { transformUI } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  status: { type: String, required: false, default: "ready" },
+  icon: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  streamingIcon: { type: String, required: false },
+  streamingColor: { type: null, required: false, default: "neutral" },
+  streamingVariant: { type: null, required: false, default: "subtle" },
+  submittedIcon: { type: String, required: false },
+  submittedColor: { type: null, required: false, default: "neutral" },
+  submittedVariant: { type: null, required: false, default: "subtle" },
+  errorIcon: { type: String, required: false },
+  errorColor: { type: null, required: false, default: "error" },
+  errorVariant: { type: null, required: false, default: "soft" },
+  ui: { type: void 0, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["stop", "reload"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const buttonProps = computed(() => ({
+  ready: {
+    icon: props.icon || appConfig.ui.icons.arrowUp,
+    color: props.color,
+    variant: props.variant,
+    type: "submit"
+  },
+  submitted: {
+    icon: props.submittedIcon || appConfig.ui.icons.stop,
+    color: props.submittedColor,
+    variant: props.submittedVariant,
+    onClick() {
+      emits("stop");
+    }
+  },
+  streaming: {
+    icon: props.streamingIcon || appConfig.ui.icons.stop,
+    color: props.streamingColor,
+    variant: props.streamingVariant,
+    onClick() {
+      emits("stop");
+    }
+  },
+  error: {
+    icon: props.errorIcon || appConfig.ui.icons.reload,
+    color: props.errorColor,
+    variant: props.errorVariant,
+    onClick() {
+      emits("reload");
+    }
+  }
+})[props.status]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+</script>
+
+<template>
+  <UButton
+    :aria-label="t('chatPromptSubmit.label')"
+    v-bind="buttonProps"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(ui, props.ui)"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UButton>
+</template>

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

@@ -0,0 +1,100 @@
+import type { ChatStatus } from 'ai';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt-submit';
+import type { ButtonProps, ButtonSlots } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
+export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+    status?: ChatStatus;
+    /**
+     * The icon displayed in the button when the status is `ready`.
+     * @defaultValue appConfig.ui.icons.arrowUp
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * The color of the button when the status is `ready`.
+     * @defaultValue 'primary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `ready`.
+     * @defaultValue 'solid'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `streaming`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    streamingIcon?: string;
+    /**
+     * The color of the button when the status is `streaming`.
+     * @defaultValue 'neutral'
+     */
+    streamingColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `streaming`.
+     * @defaultValue 'subtle'
+     */
+    streamingVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `submitted`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    submittedIcon?: string;
+    /**
+     * The color of the button when the status is `submitted`.
+     * @defaultValue 'neutral'
+     */
+    submittedColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `submitted`.
+     * @defaultValue 'subtle'
+     */
+    submittedVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `error`.
+     * @defaultValue appConfig.ui.icons.reload
+     * @IconifyIcon
+     */
+    errorIcon?: string;
+    /**
+     * The color of the button when the status is `error`.
+     * @defaultValue 'error'
+     */
+    errorColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `error`.
+     * @defaultValue 'soft'
+     */
+    errorVariant?: ButtonProps['variant'];
+    ui?: ChatPromptSubmit['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+export interface ChatPromptSubmitEmits {
+    stop: [];
+    reload: [];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    stop: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
+    onStop?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {
+    status: ChatStatus;
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,7 +1,7 @@
 import type { CheckboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
 export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
     /**

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

@@ -2,7 +2,8 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, ComponentConfig } from '../types/utils';
+import type { AcceptableValue } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
 export type CheckboxGroupItem = {

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chip';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Chip = ComponentConfig<typeof theme, AppConfig, 'chip'>;
 export interface ChipProps {
     /**

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

@@ -1,7 +1,7 @@
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/collapsible';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Collapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible'>;
 export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
     /**

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/color-picker';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ColorPicker = ComponentConfig<typeof theme, AppConfig, 'colorPicker'>;
 export type ColorPickerProps = {
     /**
@@ -41,8 +41,8 @@ declare const _default: import("vue").DefineComponent<ColorPickerProps & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
     defaultValue: string;
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
     throttle: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -4,7 +4,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
 export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     prefix?: string;

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

@@ -2,7 +2,8 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
 import type { AvatarProps, KbdProps, LinkProps } from '../types';
-import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;

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

@@ -3,7 +3,8 @@ import type { ContextMenuContentProps as RekaContextMenuContentProps } from 'rek
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/context-menu';
 import type { ContextMenuItem, ContextMenuSlots } from '../types';
-import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
+import type { ArrayOrNested, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> extends Omit<RekaContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
     items?: T;

package/dist/runtime/components/DashboardGroup.vue

@@ -0,0 +1,48 @@
+<script>
+import theme from "#build/ui/dashboard-group";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useNuxtApp, useAppConfig } from "#imports";
+import { provideDashboardContext } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  storage: { type: String, required: false, default: "cookie" },
+  storageKey: { type: String, required: false, default: "dashboard" },
+  persistent: { type: Boolean, required: false, default: true },
+  unit: { type: String, required: false, default: "%" }
+});
+defineSlots();
+const nuxtApp = useNuxtApp();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardGroup || {} }));
+const sidebarOpen = ref(false);
+const sidebarCollapsed = ref(false);
+provideDashboardContext({
+  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");
+  }
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,24 @@
+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;
+}
+export interface DashboardGroupSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    unit: "%" | "rem" | "px";
+    storageKey: string;
+    persistent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardNavbar.vue

@@ -0,0 +1,72 @@
+<script>
+import theme from "#build/ui/dashboard-navbar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: String, 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 },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const dashboardContext = useDashboard({});
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavbar || {} })());
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" v-bind="dashboardContext">
+      <UDashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left" v-bind="dashboardContext">
+        <slot name="leading" v-bind="dashboardContext">
+          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        </slot>
+
+        <h1 :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+
+        <slot name="trailing" v-bind="dashboardContext" />
+      </slot>
+    </div>
+
+    <div v-if="!!slots.default" :class="ui.center({ class: props.ui?.center })">
+      <slot v-bind="dashboardContext" />
+    </div>
+
+    <div :class="ui.right({ class: props.ui?.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,52 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps } 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.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Partial<ButtonProps>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title(props?: {}): any;
+    leading(props: DashboardNavbarSlotsProps): any;
+    trailing(props: DashboardNavbarSlotsProps): any;
+    left(props: DashboardNavbarSlotsProps): any;
+    default(props: DashboardNavbarSlotsProps): any;
+    right(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Partial<ButtonProps>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.vue

@@ -0,0 +1,62 @@
+<script>
+import theme from "#build/ui/dashboard-panel";
+</script>
+
+<script setup>
+import { computed, useId, toRef } from "vue";
+import { useAppConfig } from "#imports";
+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({
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  id: { type: String, required: false },
+  minSize: { type: Number, required: false, default: 15 },
+  maxSize: { type: Number, required: false },
+  defaultSize: { type: Number, required: false },
+  resizable: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+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 })));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPanel || {} })({
+  size: !!size.value
+}));
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-dragging="isDragging"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
+  >
+    <slot>
+      <slot name="header" />
+
+      <div :class="ui.body({ class: props.ui?.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">
+    <UDashboardResizeHandle
+      v-if="resizable"
+      :aria-controls="id"
+      :class="ui.handle({ class: props.ui?.handle })"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @dblclick="onDoubleClick"
+    />
+  </slot>
+</template>

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

@@ -0,0 +1,30 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/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;
+    ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    'default'(props?: {}): any;
+    'header'(props?: {}): any;
+    'body'(props?: {}): any;
+    'footer'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -0,0 +1,27 @@
+<script>
+import theme from "#build/ui/dashboard-resize-handle";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardResizeHandle || {} }));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="separator"
+    :class="ui({ class: props.class })"
+  >
+    <slot />
+  </Primitive>
+</template>