@eslamdevui/ui 3.3.4 → 4.0.0-beta

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

@@ -0,0 +1,50 @@
+import { ContextMenu } from 'reka-ui/namespaced';
+import type { ContextMenuContentProps as RekaContextMenuContentProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type theme from '#build/ui/context-menu';
+import type { ContextMenuItem, ContextMenuSlots, IconProps } from '../types';
+import type { ArrayOrNested, GetItemKeys } 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;
+    portal?: boolean | string | HTMLElement;
+    sub?: boolean;
+    labelKey: GetItemKeys<T>;
+    /**
+     * @IconifyIcon
+     */
+    checkedIcon?: IconProps['name'];
+    /**
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * @IconifyIcon
+     */
+    externalIcon?: boolean | IconProps['name'];
+    class?: any;
+    ui: {
+        [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;
+    };
+    uiOverride?: ContextMenu['slots'];
+}
+declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & ContextMenuContentProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ContextMenuSlots<T>;
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/ContextMenuContent.vue

@@ -23,14 +23,16 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true },
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
-  checkedIcon: { type: String, required: false },
-  loadingIcon: { type: String, required: false },
-  externalIcon: { type: [Boolean, String], required: false },
+  checkedIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  externalIcon: { type: [Boolean, String, Object], required: false },
   class: { type: null, required: false },
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
   loop: { type: Boolean, required: false },
+  sideFlip: { type: Boolean, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -47,7 +49,7 @@ const { dir } = useLocale();
 const appConfig = useAppConfig();
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "checkedIcon", "loadingIcon", "externalIcon", "class", "ui", "uiOverride"), emits);
-const proxySlots = omit(slots, ["default"]);
+const getProxySlots = () => omit(slots, ["default"]);
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate();
 const childrenIcon = computed(() => dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight);
 const groups = computed(
@@ -61,7 +63,7 @@ const groups = computed(
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
@@ -76,7 +78,7 @@ const groups = computed(
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -91,7 +93,7 @@ const groups = computed(
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
         <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
@@ -123,7 +125,7 @@ const groups = computed(
                 :external-icon="externalIcon"
                 v-bind="item.content"
               >
-                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
                   <slot :name="name" v-bind="slotData" />
                 </template>
               </UContextMenuContent>

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

@@ -2,26 +2,27 @@ import { ContextMenu } from 'reka-ui/namespaced';
 import type { ContextMenuContentProps as RekaContextMenuContentProps } from 'reka-ui';
 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 { ContextMenuItem, ContextMenuSlots, IconProps } from '../types';
+import type { ArrayOrNested, GetItemKeys } 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;
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
-    labelKey: keyof NestedItem<T>;
+    labelKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * @IconifyIcon
      */
-    externalIcon?: boolean | string;
+    externalIcon?: boolean | IconProps['name'];
     class?: any;
     ui: {
         [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;
@@ -35,7 +36,7 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
         readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & ContextMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & ContextMenuContentProps<T> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ContextMenuSlots<T>;

package/dist/runtime/components/DashboardGroup.d.vue.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, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardGroup.vue

@@ -9,21 +9,17 @@ import { useNuxtApp, useAppConfig } from "#imports";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 const props = defineProps({
-  as: { type: null, required: false, default: "div" },
+  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: "%" }
 });
-const appConfig = useAppConfig();
+defineSlots();
 const nuxtApp = useNuxtApp();
-const ui = computed(
-  () => tv({
-    extend: tv(theme),
-    ...appConfig.ui?.dashboardGroup || {}
-  })
-);
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
 const sidebarCollapsed = ref(false);
 provideDashboardContext({
@@ -32,15 +28,21 @@ provideDashboardContext({
   persistent: props.persistent,
   unit: props.unit,
   sidebarOpen,
+  toggleSidebar: () => {
+    nuxtApp.hooks.callHook("dashboard:sidebar:toggle");
+  },
   sidebarCollapsed,
-  toggleSidebar: () => nuxtApp.hooks.callHook("dashboard:sidebar:toggle"),
-  collapseSidebar: (collapsed) => nuxtApp.hooks.callHook("dashboard:sidebar:collapse", collapsed),
-  toggleSearch: () => nuxtApp.hooks.callHook("dashboard:search:toggle")
+  collapseSidebar: (collapsed) => {
+    nuxtApp.hooks.callHook("dashboard:sidebar:collapse", collapsed);
+  },
+  toggleSearch: () => {
+    nuxtApp.hooks.callHook("dashboard:search:toggle");
+  }
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: props.class })">
     <slot />
   </Primitive>
 </template>

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

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

package/dist/runtime/components/DashboardNavbar.d.vue.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, IconProps } 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?: IconProps['name'];
+    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, {}, {}, {}, {}, 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/DashboardNavbar.vue

@@ -9,51 +9,49 @@ 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, default: "div" },
-  icon: { type: String, required: false },
+  as: { type: null, required: false },
+  icon: { type: [String, 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 },
   ui: { type: null, required: false }
 });
-defineSlots();
-const dashboardContext = useDashboard();
+const slots = defineSlots();
 const appConfig = useAppConfig();
+const dashboardContext = useDashboard({});
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
-const uiPro = computed(
-  () => tv({
-    extend: tv(theme),
-    ...appConfig.ui?.dashboardNavbar
-  })()
-);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavbar || {} })());
 </script>
 
 <template>
   <DefineToggleTemplate>
     <slot name="toggle" v-bind="dashboardContext">
       <UDashboardSidebarToggle
-        v-if="props.toggle"
-        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
-        :side="props.toggleSide"
-        :class="uiPro.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="props.as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
-    <div :class="uiPro.left({ class: props.ui?.left })">
-      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
+  <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="props.icon" :name="props.icon" :class="uiPro.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 :class="uiPro.title({ class: props.ui?.title })">
+        <h1 :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ props.title }}
+            {{ title }}
           </slot>
         </h1>
 
@@ -61,14 +59,14 @@ const uiPro = computed(
       </slot>
     </div>
 
-    <div v-if="$slots.default" :class="uiPro.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div :class="uiPro.right({ class: props.ui?.right })">
+    <div :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
-      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
     </div>
   </Primitive>
 </template>

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, ComponentConfig } from '../types';
-import type { DashboardContext } from '../utils/dashboard';
 import theme from '#build/ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
 export interface DashboardNavbarProps {
     /**
@@ -13,11 +14,11 @@ export interface DashboardNavbarProps {
      * The icon displayed next to the title.
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     title?: string;
     /**
      * Customize the toggle button to open the sidebar.
-     * `{ color: 'neutral', variant: 'ghost' }`
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
     toggle?: boolean | Partial<ButtonProps>;
@@ -29,8 +30,7 @@ export interface DashboardNavbarProps {
     class?: any;
     ui?: DashboardNavbar['slots'];
 }
-export interface DashboardNavbarSlotsProps extends Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
-}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
 export interface DashboardNavbarSlots {
     title(props?: {}): any;
     leading(props: DashboardNavbarSlotsProps): any;
@@ -40,9 +40,8 @@ export interface DashboardNavbarSlots {
     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<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
     toggle: boolean | Partial<ButtonProps>;
-    as: any;
     toggleSide: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
 export default _default;

package/dist/runtime/components/DashboardPanel.d.vue.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, {}, {}, {}, {}, 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/DashboardPanel.vue

@@ -3,16 +3,18 @@ import theme from "#build/ui/dashboard-panel";
 </script>
 
 <script setup>
-import { useId, toRef, computed } from "vue";
+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 },
+  minSize: { type: Number, required: false, default: 15 },
   maxSize: { type: Number, required: false },
   defaultSize: { type: Number, required: false },
   resizable: { type: Boolean, required: false, default: false }
@@ -20,23 +22,26 @@ const props = defineProps({
 defineSlots();
 const appConfig = useAppConfig();
 const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "%" });
-const panelId = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
-const { el, size, isDragging, onMouseDown, onTouchStart } = useResizable(panelId, toRef(() => ({ ...dashboardContext, ...props })));
-const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPanel })());
+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="panelId"
+    :id="id"
     ref="el"
+    v-bind="$attrs"
     :data-dragging="isDragging"
-    :class="uiPro.root({ class: [props.ui?.root, props.class] })"
-    :style="size ? { '--width': `${size}${dashboardContext.unit}` } : void 0"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
   >
     <slot>
       <slot name="header" />
 
-      <div :class="uiPro.body({ class: props.ui?.body })">
+      <div :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -44,13 +49,14 @@ const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardP
     </slot>
   </div>
 
-  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
     <UDashboardResizeHandle
-      v-if="props.resizable"
-      :aria-controls="panelId"
-      :class="uiPro.handle({ class: props.ui?.handle })"
+      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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig } from '../types';
-import type { UseResizableProps } from '../composables/useResizable';
 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;
@@ -15,9 +15,11 @@ export interface DashboardPanelSlots {
     '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<{}>, {
+declare const _default: __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>;
 export default _default;

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

@@ -0,0 +1,18 @@
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): any;
+}
+declare const _default: __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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -13,12 +13,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
-const ui = computed(
-  () => tv({
-    extend: tv(theme),
-    ...appConfig.ui?.dashboardResizeHandle
-  })
-);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardResizeHandle || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,3 @@
-import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/ui/dashboard-resize-handle';
-import type { ComponentConfig } from '../types';
-export type DashboardResizeHandle = ComponentConfig<typeof theme, AppConfig, 'dashboardResizeHandle'>;
 export interface DashboardResizeHandleProps {
     /**
      * The element or component this component should render as.
@@ -13,7 +9,7 @@ export interface DashboardResizeHandleProps {
 export interface DashboardResizeHandleSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
+declare const _default: __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>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {