@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/dashboard-search-button';
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
+export interface DashboardSearchButtonProps {
+    /**
+     * The icon displayed in the button.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The label displayed in the button.
+     * @defaultValue t('dashboardSearchButton.label')
+     */
+    label?: string;
+    /**
+     * The color of the button.
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button.
+     * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
+     */
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    /**
+     * Whether the button is collapsed.
+     * @defaultValue false
+     */
+    collapsed?: boolean;
+    /**
+     * Display a tooltip on the button when is collapsed with the button label.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * The keyboard keys to display in the button.
+     * `{ variant: 'subtle' }`{lang="ts-type"}
+     * @defaultValue ['meta', 'k']
+     */
+    kbds?: KbdProps['value'][] | KbdProps[];
+    ui?: DashboardSearchButton['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+declare const _default: __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";
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardSidebar.vue

@@ -0,0 +1,162 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar";
+</script>
+
+<script setup>
+import { ref, computed, toRef, useId, watch } from "vue";
+import { defu } from "defu";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
+import { useResizable } from "../composables/useResizable";
+import { useLocale } from "../composables/useLocale";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import UDashboardResizeHandle from "./DashboardResizeHandle.vue";
+import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  mode: { type: null, required: false, default: "slideover" },
+  menu: { type: null, 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 },
+  id: { type: String, required: false },
+  side: { type: String, required: false, default: "left" },
+  minSize: { type: Number, required: false, default: 10 },
+  maxSize: { type: Number, required: false, default: 20 },
+  defaultSize: { type: Number, required: false, default: 15 },
+  resizable: { type: Boolean, required: false, default: false },
+  collapsible: { type: Boolean, required: false, default: false },
+  collapsedSize: { type: Number, required: false, default: 0 }
+});
+const slots = defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
+const route = useRoute();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const dashboardContext = useDashboard({
+  storageKey: "dashboard",
+  unit: "%",
+  sidebarOpen: ref(false),
+  sidebarCollapsed: ref(false)
+});
+const id = `${dashboardContext.storageKey}-sidebar-${props.id || useId()}`;
+const { el, size, collapse, isCollapsed, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })), { collapsed });
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const [DefineResizeHandleTemplate, ReuseResizeHandleTemplate] = createReusableTemplate();
+useRuntimeHook("dashboard:sidebar:toggle", () => {
+  open.value = !open.value;
+});
+useRuntimeHook("dashboard:sidebar:collapse", (value) => {
+  isCollapsed.value = value;
+});
+watch(open, () => dashboardContext.sidebarOpen.value = open.value, { immediate: true });
+watch(isCollapsed, () => dashboardContext.sidebarCollapsed.value = isCollapsed.value, { immediate: true });
+watch(() => route.fullPath, () => {
+  open.value = false;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebar || {} })({
+  side: props.side
+}));
+const Menu = computed(() => ({
+  slideover: USlideover,
+  modal: UModal,
+  drawer: UDrawer
+})[props.mode]);
+const menuProps = toRef(() => defu(props.menu, {
+  content: {
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }
+}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
+function toggleOpen() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UDashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <DefineResizeHandleTemplate>
+    <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>
+  </DefineResizeHandleTemplate>
+
+  <ReuseResizeHandleTemplate v-if="side === 'right'" />
+
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-collapsed="isCollapsed"
+    :data-dragging="isDragging"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
+  >
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+  </div>
+
+  <ReuseResizeHandleTemplate v-if="side === 'left'" />
+
+  <Menu
+    v-model:open="open"
+    :title="t('dashboardSidebar.title')"
+    :description="t('dashboardSidebar.description')"
+    v-bind="menuProps"
+    :ui="{
+  overlay: ui.overlay({ class: props.ui?.overlay }),
+  content: ui.content({ class: props.ui?.content })
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div v-if="!!slots.header || mode !== 'drawer'" :class="ui.header({ class: props.ui?.header, menu: true })">
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
+
+          <slot name="header" />
+
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+          <slot />
+        </div>
+
+        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+          <slot name="footer" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
+</template>

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

@@ -0,0 +1,75 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/dashboard-sidebar';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
+type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
+type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
+    /**
+     * The mode of the sidebar menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component.
+     */
+    menu?: DashboardSidebarMenu<T>;
+    /**
+     * 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?: DashboardSidebar['slots'];
+}
+export interface DashboardSidebarSlots {
+    'header'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'default'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'footer'(props: {
+        collapsed?: boolean;
+        collapse?: (value: boolean) => void;
+    }): any;
+    'toggle'(props: {
+        open: boolean;
+        toggle: () => void;
+    }): any;
+    'content'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: <T extends DashboardSidebarMode>(__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 "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open" | "onUpdate:collapsed"> & (DashboardSidebarProps<T> & {
+        open?: boolean;
+        collapsed?: boolean;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: DashboardSidebarSlots;
+    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => 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/DashboardSidebarCollapse.vue

@@ -0,0 +1,36 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar-collapse";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  side: { type: String, required: false, default: "left" },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  class: { type: null, required: false }
+});
+const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
+} });
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse || {} }));
+</script>
+
+<template>
+  <UButton
+    v-bind="rootProps"
+    :aria-label="sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')"
+    :icon="sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose"
+    :class="ui({ class: props.class, side: props.side })"
+    @click="collapseSidebar?.(!sidebarCollapsed)"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '../types';
+export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    class?: any;
+}
+declare const _default: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -0,0 +1,36 @@
+<script>
+import theme from "#build/ui/dashboard-sidebar-toggle";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  side: { type: String, required: false, default: "left" },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  class: { type: null, required: false }
+});
+const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
+} });
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarToggle || {} }));
+</script>
+
+<template>
+  <UButton
+    v-bind="rootProps"
+    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
+    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+    :class="ui({ class: props.class, side: props.side })"
+    @click="toggleSidebar"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '../types';
+export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    class?: any;
+}
+declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DashboardToolbar.vue

@@ -0,0 +1,32 @@
+<script>
+import theme from "#build/ui/dashboard-toolbar";
+</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 },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardToolbar || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot>
+      <div :class="ui.left({ class: [props.ui?.left] })">
+        <slot name="left" />
+      </div>
+
+      <div :class="ui.right({ class: [props.ui?.right] })">
+        <slot name="right" />
+      </div>
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,25 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/dashboard-toolbar';
+import type { ComponentConfig } from '../types/tv';
+type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
+export interface DashboardToolbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: DashboardToolbar['slots'];
+}
+export interface DashboardToolbarSlots {
+    default(props?: {}): any;
+    left(props?: {}): any;
+    right(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,7 +2,8 @@ import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
 import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/drawer';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
 export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
     /**
@@ -72,8 +73,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProp
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     direction: import("vaul-vue").DrawerDirection;
-    dismissible: boolean;
     handle: boolean;
+    dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/DropdownMenu.vue

@@ -14,9 +14,9 @@ import UDropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
   size: { type: null, required: false },
   items: { type: null, required: false },
-  checkedIcon: { type: String, required: false },
-  loadingIcon: { type: String, required: false },
-  externalIcon: { type: [Boolean, String], required: false, default: true },
+  checkedIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  externalIcon: { type: [Boolean, String, Object], required: false, default: true },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },

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

@@ -1,15 +1,16 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dropdown-menu';
-import type { AvatarProps, KbdProps, LinkProps } from '../types';
-import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     color?: DropdownMenu['variants']['color'];
     avatar?: AvatarProps;
     content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
@@ -43,20 +44,20 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is loading.
      * @defaultValue appConfig.ui.icons.loading
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * The icon displayed when the item is an external link.
      * Set to `false` to hide the external icon.
      * @defaultValue appConfig.ui.icons.external
      * @IconifyIcon
      */
-    externalIcon?: boolean | string;
+    externalIcon?: boolean | IconProps['name'];
     /**
      * The content of the menu.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }

package/dist/runtime/components/DropdownMenuContent.vue

@@ -23,9 +23,9 @@ 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 },

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

@@ -2,8 +2,9 @@ import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots, DynamicSlots, MergeTypes } from '../types';
-import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
+import type { DropdownMenuItem, DropdownMenuSlots, IconProps } from '../types';
+import type { ArrayOrNested, NestedItem, DynamicSlots, MergeTypes } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
     items?: T;
@@ -13,15 +14,15 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     /**
      * @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<DropdownMenu['slots']>]: (props?: Record<string, any>) => string;

package/dist/runtime/components/Error.vue

@@ -0,0 +1,60 @@
+<script>
+import theme from "#build/ui/error";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { clearError, useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "main" },
+  error: { type: Object, required: false },
+  redirect: { type: String, required: false, default: "/" },
+  clear: { type: [Boolean, Object], required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.error || {} })());
+function handleError() {
+  clearError({ redirect: props.redirect });
+}
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
+      <slot name="statusCode">
+        {{ props.error?.statusCode }}
+      </slot>
+    </p>
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
+      <slot name="statusMessage">
+        {{ props.error?.statusMessage }}
+      </slot>
+    </h1>
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" :class="ui.message({ class: props.ui?.message })">
+      <slot name="message">
+        {{ props.error?.message }}
+      </slot>
+    </p>
+    <div v-if="!!clear || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+      <slot name="links">
+        <UButton
+          v-if="clear"
+          size="lg"
+          color="primary"
+          variant="solid"
+          :label="t('error.clear')"
+          v-bind="typeof clear === 'object' ? clear : {}"
+          @click="handleError"
+        />
+      </slot>
+    </div>
+  </Primitive>
+</template>