@nuxt/ui 4.7.0 → 4.8.0

package/dist/runtime/components/DashboardToolbar.vue

@@ -6,27 +6,27 @@ import theme from "#build/ui/dashboard-toolbar";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("dashboardToolbar", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardToolbar", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardToolbar || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot>
-      <div data-slot="left" :class="ui.left({ class: [uiProp?.left] })">
+      <div data-slot="left" :class="ui.left({ class: [props.ui?.left] })">
         <slot name="left" />
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: [uiProp?.right] })">
+      <div data-slot="right" :class="ui.right({ class: [props.ui?.right] })">
         <slot name="right" />
       </div>
     </slot>

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

@@ -75,9 +75,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
-    overlay: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
+    overlay: boolean;
     direction: import("vaul-vue").DrawerDirection;
     handle: boolean;
     dismissible: boolean;

package/dist/runtime/components/Drawer.vue

@@ -4,16 +4,17 @@ import theme from "#build/ui/drawer";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { VisuallyHidden } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -43,9 +44,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["close:prevent", "drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
 const slots = defineSlots();
+const props = useComponentProps("drawer", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("drawer", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
+const rootProps = useForwardProps(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -71,57 +72,57 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
+  <component :is="props.nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
       <FieldGroupReset>
-        <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+        <DrawerOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-        <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
-          <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
+        <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+          <DrawerHandle v-if="props.handle" data-slot="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
-          <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
-            <DrawerTitle v-if="!title && !slots.title" />
+          <VisuallyHidden v-if="!props.title && !slots.title || !props.description && !slots.description || !!slots.content">
+            <DrawerTitle v-if="!props.title && !slots.title" />
             <DrawerTitle v-else-if="!!slots.content">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </DrawerTitle>
 
-            <DrawerDescription v-if="!description && !slots.description" />
+            <DrawerDescription v-if="!props.description && !slots.description" />
             <DrawerDescription v-else-if="!!slots.content">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </DrawerDescription>
           </VisuallyHidden>
 
           <slot name="content">
-            <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-              <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+            <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+              <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
                 <slot name="header">
-                  <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                  <DrawerTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                     <slot name="title">
-                      {{ title }}
+                      {{ props.title }}
                     </slot>
                   </DrawerTitle>
 
-                  <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                  <DrawerDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                     <slot name="description">
-                      {{ description }}
+                      {{ props.description }}
                     </slot>
                   </DrawerDescription>
                 </slot>
               </div>
 
-              <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+              <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
                 <slot name="body" />
               </div>
 
-              <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+              <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
                 <slot name="footer" />
               </div>
             </div>

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

@@ -75,9 +75,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
-    overlay: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
+    overlay: boolean;
     direction: import("vaul-vue").DrawerDirection;
     handle: boolean;
     dismissible: boolean;

package/dist/runtime/components/DropdownMenu.vue

@@ -5,14 +5,15 @@ import theme from "#build/ui/dropdown-menu";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UDropdownMenuContent from "./DropdownMenuContent.vue";
-const props = defineProps({
+const _props = defineProps({
   size: { type: null, required: false },
   items: { type: null, required: false },
   checkedIcon: { type: null, required: false },
@@ -36,9 +37,9 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const props = useComponentProps("dropdownMenu", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dropdownMenu", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "defaultOpen", "open", "modal"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
 const getProxySlots = () => omit(slots, ["default"]);
@@ -49,33 +50,33 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
 
 <template>
   <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
-    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="props.disabled">
       <slot :open="open" />
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent
       v-model:search-term="searchTerm"
-      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
       :ui="ui"
-      :ui-override="uiProp"
+      :ui-override="props.ui"
       v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="labelKey"
-      :description-key="descriptionKey"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
-      :size="size"
-      :filter="filter"
-      :filter-fields="filterFields"
-      :ignore-filter="ignoreFilter"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="props.labelKey"
+      :description-key="props.descriptionKey"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
+      :size="props.size"
+      :filter="props.filter"
+      :filter-fields="props.filterFields"
+      :ignore-filter="props.ignoreFilter"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+      <DropdownMenuArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/Editor.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/editor";
 <script setup>
 import { computed, provide, useAttrs, watch } from "vue";
 import { defu } from "defu";
-import { Primitive, useForwardProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { mergeAttributes } from "@tiptap/core";
 import Code from "@tiptap/extension-code";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
@@ -17,11 +17,12 @@ import StarterKit from "@tiptap/starter-kit";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   modelValue: { type: null, required: false },
   contentType: { type: String, required: false },
@@ -65,9 +66,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 defineSlots();
+const props = useComponentProps("editor", _props);
 const attrs = useAttrs();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("editor", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editor || {} })({
   placeholderMode: typeof props.placeholder === "object" ? props.placeholder.mode : void 0
 }));
@@ -78,7 +79,7 @@ const editorProps = computed(() => defu(props.editorProps, {
     autocorrect: "off",
     autocapitalize: "off",
     ...attrs,
-    class: ui.value.base({ class: uiProp.value?.base })
+    class: ui.value.base({ class: props.ui?.base })
   }
 }));
 const contentType = computed(() => props.contentType || (typeof props.modelValue === "string" ? "html" : "json"));
@@ -196,7 +197,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <template v-if="editor">
       <slot :editor="editor" :handlers="handlers" />
 
@@ -204,7 +205,7 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="ui.content({ class: uiProp?.content })"
+        :class="ui.content({ class: props.ui?.content })"
       />
     </template>
   </Primitive>

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

@@ -70,8 +70,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/EditorDragHandle.vue

@@ -5,17 +5,17 @@ import theme from "#build/ui/editor-drag-handle";
 <script setup>
 import { computed, ref } from "vue";
 import DragHandle from "@tiptap/extension-drag-handle-vue-3";
-import { useForwardProps } from "reka-ui";
 import { reactiveOmit, reactivePick } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { buildFloatingUIMiddleware } from "../utils/editor";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   icon: { type: null, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
@@ -52,10 +52,10 @@ const props = defineProps({
 });
 defineSlots();
 const emit = defineEmits(["nodeChange", "hover"]);
+const props = useComponentProps("editorDragHandle", _props);
 const dragHandleProps = useForwardProps(reactivePick(props, "pluginKey", "nested", "nestedOptions", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement"));
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "options", "editor", "pluginKey", "nested", "nestedOptions", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement", "class", "ui"));
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("editorDragHandle", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorDragHandle || {} })());
 const floatingUIOptions = computed(() => defu(props.options, {
   strategy: "absolute",
@@ -114,10 +114,10 @@ function onClick() {
   <DragHandle
     v-bind="dragHandleProps"
     :compute-position-config="computePositionConfig"
-    :editor="editor"
+    :editor="props.editor"
     :on-node-change="onNodeChange"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @click="onClick"
   >
     <slot :ui="ui" :on-click="onClick">
@@ -128,8 +128,8 @@ function onClick() {
   ...$attrs
 }"
         data-slot="handle"
-        :class="ui.handle({ class: [uiProp?.handle, props.class] })"
-        :ui="transformUI(ui, uiProp)"
+        :class="ui.handle({ class: [props.ui?.handle, props.class] })"
+        :ui="transformUI(ui, props.ui)"
       />
     </slot>
   </DragHandle>

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

@@ -70,8 +70,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/EditorToolbar.vue

@@ -4,12 +4,13 @@ import theme from "#build/ui/editor-toolbar";
 
 <script setup>
 import { computed, inject } from "vue";
-import { Primitive, Separator, useForwardProps } from "reka-ui";
+import { Primitive, Separator } from "reka-ui";
 import { defu } from "defu";
 import { BubbleMenu, FloatingMenu } from "@tiptap/vue-3/menus";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { isArrayOfArray, pick, omit } from "../utils";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
@@ -17,7 +18,7 @@ import UButton from "./Button.vue";
 import UDropdownMenu from "./DropdownMenu.vue";
 import UTooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
@@ -38,8 +39,8 @@ const props = defineProps({
   options: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("editorToolbar", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("editorToolbar", props);
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
 const Component = computed(() => {
   return {
@@ -177,9 +178,9 @@ function getDropdownItems(item) {
   <Primitive
     :as="Component"
     v-bind="Component !== 'template' ? {
-  editor,
+  editor: props.editor,
   tabindex: -1,
-  class: ui.root({ class: uiProp?.root }),
+  class: ui.root({ class: props.ui?.root }),
   ...rootProps,
   options,
   ...$attrs
@@ -187,9 +188,9 @@ function getDropdownItems(item) {
   ...$attrs
 }"
   >
-    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <Primitive :as="props.as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
       <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
-        <div role="group" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <slot
               :name="item.slot || 'item'"
@@ -236,7 +237,7 @@ function getDropdownItems(item) {
         <Separator
           v-if="groupIndex < groups.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: uiProp?.separator })"
+          :class="ui.separator({ class: props.ui?.separator })"
           orientation="vertical"
         />
       </template>

package/dist/runtime/components/Empty.vue

@@ -6,11 +6,11 @@ import theme from "#build/ui/empty";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
@@ -23,8 +23,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("empty", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("empty", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} })({
   variant: props.variant,
   size: props.size
@@ -32,38 +32,38 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (props.icon || props.avatar || !!slots.leading) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+          <UAvatar v-if="props.icon || props.avatar" :icon="props.icon" v-bind="typeof props.avatar === 'object' ? props.avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div v-if="!!slots.body || (props.actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="props.actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
-            <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
+            <UButton v-for="(action, index) in props.actions" :key="index" :size="props.size" v-bind="action" />
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { NuxtError } from '#app';
 import theme from '#build/ui/error';
-import type { ButtonProps } from '../types';
+import type { ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
@@ -11,6 +11,11 @@ export interface ErrorProps {
      * @defaultValue 'main'
      */
     as?: any;
+    /**
+     * The icon displayed above the status code.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     error?: Partial<NuxtError & {
         message: string;
     }>;
@@ -30,6 +35,9 @@ export interface ErrorProps {
 }
 export interface ErrorSlots {
     default?(props?: {}): VNode[];
+    leading?(props: {
+        ui: Error['ui'];
+    }): VNode[];
     statusCode?(props?: {}): VNode[];
     statusMessage?(props?: {}): VNode[];
     message?(props?: {}): VNode[];

package/dist/runtime/components/Error.vue

@@ -6,12 +6,14 @@ import theme from "#build/ui/error";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { clearError, useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
-const props = defineProps({
+import UIcon from "./Icon.vue";
+const _props = defineProps({
   as: { type: null, required: false, default: "main" },
+  icon: { type: null, required: false },
   error: { type: Object, required: false },
   redirect: { type: String, required: false, default: "/" },
   clear: { type: [Boolean, Object], required: false, default: true },
@@ -19,9 +21,9 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("error", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("error", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.error || {} })());
 function handleError() {
   clearError({ redirect: props.redirect });
@@ -29,31 +31,36 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!props.error?.status || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: uiProp?.statusCode })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading" :ui="ui">
+        <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </slot>
+    </div>
+    <p v-if="!!props.error?.statusCode || !!props.error?.status || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode || props.error?.status }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!props.error?.statusText || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: uiProp?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!props.error?.statusText || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage || props.error?.statusText }}
       </slot>
     </h1>
-    <p v-if="props.error?.message && props.error.message !== (props.error.statusMessage || props.error.statusText) || !!slots.message" data-slot="message" :class="ui.message({ class: uiProp?.message })">
+    <p v-if="props.error?.message && props.error.message !== (props.error.statusMessage || props.error.statusText) || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+    <div v-if="!!props.clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
       <slot name="links">
         <UButton
-          v-if="clear"
+          v-if="props.clear"
           size="lg"
           color="primary"
           variant="solid"
           :label="t('error.clear')"
-          v-bind="typeof clear === 'object' ? clear : {}"
+          v-bind="typeof props.clear === 'object' ? props.clear : {}"
           @click="handleError"
         />
       </slot>