@nuxt/ui 4.4.0 → 4.5.0

package/dist/runtime/components/DropdownMenu.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UDropdownMenuContent from "./DropdownMenuContent.vue";
@@ -24,7 +25,7 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -32,6 +33,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dropdownMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => props.arrow);
@@ -48,9 +50,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :ui="ui"
-      :ui-override="props.ui"
+      :ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"
@@ -64,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -41,6 +41,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

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

@@ -56,10 +56,11 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
     image?: boolean | Partial<ImageOptions>;
     /**
      * The mention extension options to configure mention handling. Set to `false` to disable the extension.
+     * The `suggestion` and `suggestions` options are omitted as they are managed by the `EditorMentionMenu` component.
      * @defaultValue { HTMLAttributes: { class: 'mention' } }
      * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
      */
-    mention?: boolean | Partial<MentionOptions>;
+    mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>;
     /**
      * Custom item handlers to override or extend the default handlers.
      * These handlers are provided to all child components (toolbar, suggestion menu, etc.).

package/dist/runtime/components/Editor.vue

@@ -17,6 +17,7 @@ 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 { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -31,7 +32,7 @@ const props = defineProps({
   mention: { type: [Boolean, Object], required: false, default: true },
   handlers: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   extensions: { type: Array, required: false },
   injectCSS: { type: Boolean, required: false },
   injectNonce: { type: null, required: false },
@@ -66,6 +67,7 @@ const emits = defineEmits(["update:modelValue"]);
 defineSlots();
 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
 }));
@@ -76,7 +78,7 @@ const editorProps = computed(() => defu(props.editorProps, {
     autocorrect: "off",
     autocapitalize: "off",
     ...attrs,
-    class: ui.value.base({ class: props.ui?.base })
+    class: ui.value.base({ class: uiProp.value?.base })
   }
 }));
 const contentType = computed(() => props.contentType || (typeof props.modelValue === "string" ? "html" : "json"));
@@ -108,6 +110,16 @@ const image = computed(() => typeof props.image === "boolean" ? {} : props.image
 const mention = computed(() => defu(typeof props.mention === "boolean" ? {} : props.mention, {
   HTMLAttributes: {
     class: "mention"
+  },
+  renderText({ node }) {
+    return `${node.attrs.mentionSuggestionChar ?? "@"}${node.attrs.label ?? node.attrs.id}`;
+  },
+  renderHTML({ options, node }) {
+    return [
+      "span",
+      mergeAttributes({ "data-type": "mention" }, options.HTMLAttributes),
+      `${node.attrs.mentionSuggestionChar ?? "@"}${node.attrs.label ?? node.attrs.id}`
+    ];
   }
 }));
 const extensions = computed(() => [
@@ -184,7 +196,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <template v-if="editor">
       <slot :editor="editor" :handlers="handlers" />
 
@@ -192,7 +204,7 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="ui.content({ class: props.ui?.content })"
+        :class="ui.content({ class: uiProp?.content })"
       />
     </template>
   </Primitive>

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

@@ -56,10 +56,11 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
     image?: boolean | Partial<ImageOptions>;
     /**
      * The mention extension options to configure mention handling. Set to `false` to disable the extension.
+     * The `suggestion` and `suggestions` options are omitted as they are managed by the `EditorMentionMenu` component.
      * @defaultValue { HTMLAttributes: { class: 'mention' } }
      * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
      */
-    mention?: boolean | Partial<MentionOptions>;
+    mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>;
     /**
      * Custom item handlers to override or extend the default handlers.
      * These handlers are provided to all child components (toolbar, suggestion menu, etc.).

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

@@ -43,21 +43,33 @@ export interface EditorDragHandleEmits {
         node: JSONContent;
         pos: number;
     }];
+    hover: [{
+        node: JSONContent;
+        pos: number;
+    }];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EditorDragHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hover: (args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any;
     nodeChange: (args_0: {
         node: JSONContent;
         pos: number;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<EditorDragHandleProps> & Readonly<{
+    onHover?: ((args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any) | undefined;
     onNodeChange?: ((args_0: {
         node: JSONContent;
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "md" | "xs" | "sm" | "lg" | "xl";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;

package/dist/runtime/components/EditorDragHandle.vue

@@ -9,6 +9,7 @@ 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 { buildFloatingUIMiddleware } from "../utils/editor";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,11 +21,13 @@ const props = defineProps({
   variant: { type: null, required: false, default: "ghost" },
   options: { type: Object, required: false },
   editor: { type: Object, required: true },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   pluginKey: { type: [Object, String], required: false },
+  nestedOptions: { type: Object, required: false },
   onElementDragStart: { type: Function, required: false },
   onElementDragEnd: { type: Function, required: false },
   getReferencedVirtualElement: { type: Function, required: false },
+  nested: { type: [Boolean, Object], required: false },
   label: { type: String, required: false },
   activeColor: { type: null, required: false },
   activeVariant: { type: null, required: false },
@@ -48,10 +51,11 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false }
 });
 defineSlots();
-const emit = defineEmits(["nodeChange"]);
-const dragHandleProps = useForwardProps(reactivePick(props, "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement"));
-const buttonProps = useForwardProps(reactiveOmit(props, "icon", "options", "editor", "pluginKey", "onElementDragEnd", "onElementDragStart", "getReferencedVirtualElement", "class", "ui"));
+const emit = defineEmits(["nodeChange", "hover"]);
+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",
@@ -86,11 +90,16 @@ const computePositionConfig = computed(() => ({
 const currentNodePos = ref();
 function onNodeChange({ pos }) {
   currentNodePos.value = pos;
+  if (pos == null || pos < 0) return;
+  const node = props.editor.state.doc.nodeAt(pos);
+  if (node) {
+    emit("hover", { node: node.toJSON(), pos });
+  }
 }
 function onClick() {
   if (!props.editor) return;
   const pos = currentNodePos.value;
-  if (pos == null) return;
+  if (pos == null || pos < 0) return;
   const node = props.editor.state.doc.nodeAt(pos);
   if (node) {
     const selectedNode = { node: node.toJSON(), pos };
@@ -108,7 +117,7 @@ function onClick() {
     :editor="editor"
     :on-node-change="onNodeChange"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     @click="onClick"
   >
     <slot :ui="ui" :on-click="onClick">
@@ -119,8 +128,8 @@ function onClick() {
   ...$attrs
 }"
         data-slot="handle"
-        :class="ui.handle({ class: [props.ui?.handle, props.class] })"
-        :ui="transformUI(ui, props.ui)"
+        :class="ui.handle({ class: [uiProp?.handle, props.class] })"
+        :ui="transformUI(ui, uiProp)"
       />
     </slot>
   </DragHandle>

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

@@ -43,21 +43,33 @@ export interface EditorDragHandleEmits {
         node: JSONContent;
         pos: number;
     }];
+    hover: [{
+        node: JSONContent;
+        pos: number;
+    }];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EditorDragHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hover: (args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any;
     nodeChange: (args_0: {
         node: JSONContent;
         pos: number;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<EditorDragHandleProps> & Readonly<{
+    onHover?: ((args_0: {
+        node: JSONContent;
+        pos: number;
+    }) => any) | undefined;
     onNodeChange?: ((args_0: {
         node: JSONContent;
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "md" | "xs" | "sm" | "lg" | "xl";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: ":" },
   pluginKey: { type: String, required: false, default: "emojiMenu" },

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

@@ -38,7 +38,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (evt: "update:searchTerm", value: string) => void;
+    emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/EditorMentionMenu.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: "@" },
   pluginKey: { type: String, required: false, default: "mentionMenu" },
@@ -50,7 +50,10 @@ onMounted(async () => {
     onSelect: (editor, range, item) => {
       editor.chain().focus().deleteRange(range).insertContent({
         type: "mention",
-        attrs: item
+        attrs: {
+          ...item,
+          mentionSuggestionChar: props.char
+        }
       }).run();
     },
     renderItem: (item, styles) => [

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

@@ -38,7 +38,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (evt: "update:searchTerm", value: string) => void;
+    emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: "/" },
   pluginKey: { type: String, required: false, default: "suggestionMenu" },

package/dist/runtime/components/EditorToolbar.vue

@@ -9,6 +9,7 @@ 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 { isArrayOfArray, pick, omit } from "../utils";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
@@ -26,7 +27,7 @@ const props = defineProps({
   items: { type: null, required: false },
   editor: { type: Object, required: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   layout: { type: String, required: false, default: "fixed" },
   pluginKey: { type: [Object, String], required: false },
   updateDelay: { type: Number, required: false },
@@ -38,6 +39,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editorToolbar", props);
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
 const Component = computed(() => {
   return {
@@ -143,9 +145,10 @@ function getButtonProps(item) {
   });
 }
 function getDropdownProps(item) {
-  const baseProps = pick(item, ["checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "ui"]);
+  const baseProps = pick(item, ["size", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "ui"]);
   return defu(baseProps, {
-    modal: false
+    modal: false,
+    size: props.size
   });
 }
 function mapDropdownItem(item) {
@@ -176,7 +179,7 @@ function getDropdownItems(item) {
     v-bind="Component !== 'template' ? {
   editor,
   tabindex: -1,
-  class: ui.root({ class: props.ui?.root }),
+  class: ui.root({ class: uiProp?.root }),
   ...rootProps,
   options,
   ...$attrs
@@ -184,9 +187,9 @@ function getDropdownItems(item) {
   ...$attrs
 }"
   >
-    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
       <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
-        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+        <div role="group" data-slot="group" :class="ui.group({ class: uiProp?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <slot
               :name="item.slot || 'item'"
@@ -233,7 +236,7 @@ function getDropdownItems(item) {
         <Separator
           v-if="groupIndex < groups.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: props.ui?.separator })"
+          :class="ui.separator({ class: uiProp?.separator })"
           orientation="vertical"
         />
       </template>

package/dist/runtime/components/Empty.vue

@@ -6,6 +6,7 @@ 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 { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
@@ -19,10 +20,11 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("empty", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} })({
   variant: props.variant,
   size: props.size
@@ -30,20 +32,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.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: props.ui?.header })">
+  <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 })">
       <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: props.ui?.avatar })" />
+          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -51,9 +53,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -61,7 +63,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/Error.vue

@@ -6,6 +6,7 @@ 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 { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -15,11 +16,12 @@ const props = defineProps({
   redirect: { type: String, required: false, default: "/" },
   clear: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 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 });
@@ -27,23 +29,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: uiProp?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: uiProp?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage }}
       </slot>
     </h1>
-    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="ui.message({ class: uiProp?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
       <slot name="links">
         <UButton
           v-if="clear"

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

@@ -18,7 +18,9 @@ export interface FieldGroupProps {
      */
     orientation?: FieldGroup['variants']['orientation'];
     class?: any;
-    ui?: FieldGroup['slots'];
+    ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;

package/dist/runtime/components/FieldGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/field-group";
 import { provide, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { fieldGroupInjectionKey } from "../composables/useFieldGroup";
 import { tv } from "../utils/tv";
 const props = defineProps({
@@ -13,10 +14,11 @@ const props = defineProps({
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("fieldGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fieldGroup || {} }));
 provide(fieldGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
@@ -25,7 +27,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -18,7 +18,9 @@ export interface FieldGroupProps {
      */
     orientation?: FieldGroup['variants']['orientation'];
     class?: any;
-    ui?: FieldGroup['slots'];
+    ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;

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

@@ -171,7 +171,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }>) => void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };