@nuxt/ui 4.9.0 → 4.10.0

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

@@ -3,6 +3,9 @@ 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 { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
@@ -41,6 +44,18 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
      * @defaultValue false
      */
     nested?: boolean;
+    /**
+     * Display a close button to dismiss the drawer.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
     class?: any;
     ui?: Drawer['slots'];
 }
@@ -53,6 +68,10 @@ export interface DrawerSlots {
     header?(props?: {}): VNode[];
     title?(props?: {}): VNode[];
     description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
+        ui: Drawer['ui'];
+    }): VNode[];
     body?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
 }
@@ -61,26 +80,26 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
-    "update:open": (open: boolean) => any;
     "close:prevent": () => any;
+    "update:open": (open: boolean) => any;
     release: (open: boolean) => any;
     "update:activeSnapPoint": (val: string | number) => any;
     animationEnd: (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
     onClose?: (() => any) | undefined;
     onDrag?: ((percentageDragged: number) => any) | undefined;
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onRelease?: ((open: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
 }>, {
     modal: boolean;
-    portal: boolean | string | HTMLElement;
     overlay: boolean;
+    portal: boolean | string | HTMLElement;
+    dismissible: boolean;
     direction: import("vaul-vue").DrawerDirection;
     handle: boolean;
-    dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -2,7 +2,11 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dropdown-menu';
-import type { AvatarProps, IconProps, InputProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { LinkProps } from './Link.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -170,7 +174,7 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
     slots: DropdownMenuSlots<T, NestedItem<T>>;
     emit: ((evt: "update:open", payload: boolean) => void) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/DropdownMenu.vue

@@ -43,7 +43,7 @@ const rootProps = useForwardProps(reactivePick(props, "defaultOpen", "open", "mo
 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"]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.dropdownMenu || {} })({
   size: props.size
 }));
 </script>

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

@@ -2,7 +2,11 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dropdown-menu';
-import type { AvatarProps, IconProps, InputProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { LinkProps } from './Link.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -170,7 +174,7 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
     slots: DropdownMenuSlots<T, NestedItem<T>>;
     emit: ((evt: "update:open", payload: boolean) => void) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,9 @@ import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'r
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots, IconProps, InputProps } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots } from './DropdownMenu.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
 import type { ArrayOrNested, GetItemKeys, NestedItem, DynamicSlots, MergeTypes } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -49,20 +51,20 @@ export default _default;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
         onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
         onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onCloseAutoFocus?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "update:searchTerm", value: string) => 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);
+    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) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/DropdownMenuContent.vue

@@ -40,6 +40,7 @@ const props = defineProps({
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
   loop: { type: Boolean, required: false },
+  memoDependencies: { type: Array, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
   sideFlip: { type: Boolean, required: false },

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

@@ -3,7 +3,9 @@ import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'r
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots, IconProps, InputProps } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots } from './DropdownMenu.vue';
+import type { IconProps } from './Icon.vue';
+import type { InputProps } from './Input.vue';
 import type { ArrayOrNested, GetItemKeys, NestedItem, DynamicSlots, MergeTypes } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -49,20 +51,20 @@ export default _default;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
         onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
         onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onCloseAutoFocus?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "update:searchTerm", value: string) => 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);
+    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) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -25,10 +25,11 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
     contentType?: EditorContentType;
     /**
      * The starter kit options to configure the editor.
+     * Set to `false` for a plain-text editor: keeps the essential nodes (paragraph, text, history) and disables all rich-text formatting.
      * @defaultValue { horizontalRule: false, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }
      * @see https://tiptap.dev/docs/editor/extensions/functionality/starterkit
      */
-    starterKit?: Partial<StarterKitOptions>;
+    starterKit?: boolean | Partial<StarterKitOptions>;
     /**
      * The placeholder text to show in empty paragraphs. Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`.
      * @defaultValue { showOnlyWhenEditable: false, showOnlyCurrent: true, mode: 'everyLine' }
@@ -94,7 +95,7 @@ declare const __VLS_export: <T extends Content, H extends EditorCustomHandlers>(
     slots: EditorSlots<H>;
     emit: (evt: "update:modelValue", value: T) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Editor.vue

@@ -19,6 +19,7 @@ import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useForwardProps } from "../composables/useForwardProps";
+import { omit } from "../utils";
 import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -26,7 +27,7 @@ const _props = defineProps({
   as: { type: null, required: false },
   modelValue: { type: null, required: false },
   contentType: { type: String, required: false },
-  starterKit: { type: Object, required: false },
+  starterKit: { type: [Boolean, Object], required: false, default: true },
   placeholder: { type: [String, Object], required: false },
   markdown: { type: Object, required: false },
   image: { type: [Boolean, Object], required: false, default: true },
@@ -69,7 +70,7 @@ defineSlots();
 const props = useComponentProps("editor", _props);
 const attrs = useAttrs();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editor || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editor || {} })({
   placeholderMode: typeof props.placeholder === "object" ? props.placeholder.mode : void 0
 }));
 const rootProps = useForwardProps(reactiveOmit(props, "starterKit", "extensions", "editorProps", "contentType", "class", "placeholder", "markdown", "image", "mention", "handlers"));
@@ -78,22 +79,44 @@ const editorProps = computed(() => defu(props.editorProps, {
     autocomplete: "off",
     autocorrect: "off",
     autocapitalize: "off",
-    ...attrs,
+    ...omit(attrs, ["data-slot"]),
     class: ui.value.base({ class: props.ui?.base })
   }
 }));
 const contentType = computed(() => props.contentType || (typeof props.modelValue === "string" ? "html" : "json"));
-const starterKit = computed(() => defu(props.starterKit, {
-  code: false,
-  horizontalRule: false,
-  dropcursor: {
-    color: "var(--ui-primary)",
-    width: 2
-  },
-  link: {
-    openOnClick: false
-  }
-}));
+const starterKit = computed(() => {
+  const options = typeof props.starterKit === "boolean" ? {} : props.starterKit ?? {};
+  const plainText = props.starterKit === false ? {
+    blockquote: false,
+    bold: false,
+    bulletList: false,
+    code: false,
+    codeBlock: false,
+    dropcursor: false,
+    gapcursor: false,
+    heading: false,
+    horizontalRule: false,
+    italic: false,
+    listItem: false,
+    listKeymap: false,
+    link: false,
+    orderedList: false,
+    strike: false,
+    underline: false,
+    trailingNode: false
+  } : {};
+  return defu(options, plainText, {
+    code: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "var(--ui-primary)",
+      width: 2
+    },
+    link: {
+      openOnClick: false
+    }
+  });
+});
 const placeholder = computed(() => {
   const options = typeof props.placeholder === "string" ? { placeholder: props.placeholder } : props.placeholder;
   const { mode, ...rest } = options || {};
@@ -126,10 +149,10 @@ const mention = computed(() => defu(typeof props.mention === "boolean" ? {} : pr
 const extensions = computed(() => [
   contentType.value === "markdown" && Markdown.configure(markdown.value),
   StarterKit.configure(starterKit.value),
-  Code.extend({
+  props.starterKit !== false && Code.extend({
     excludes: "code"
   }),
-  HorizontalRule.extend({
+  props.starterKit !== false && HorizontalRule.extend({
     renderHTML() {
       return [
         "div",
@@ -197,7 +220,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <template v-if="editor">
       <slot :editor="editor" :handlers="handlers" />
 

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

@@ -25,10 +25,11 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
     contentType?: EditorContentType;
     /**
      * The starter kit options to configure the editor.
+     * Set to `false` for a plain-text editor: keeps the essential nodes (paragraph, text, history) and disables all rich-text formatting.
      * @defaultValue { horizontalRule: false, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }
      * @see https://tiptap.dev/docs/editor/extensions/functionality/starterkit
      */
-    starterKit?: Partial<StarterKitOptions>;
+    starterKit?: boolean | Partial<StarterKitOptions>;
     /**
      * The placeholder text to show in empty paragraphs. Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`.
      * @defaultValue { showOnlyWhenEditable: false, showOnlyCurrent: true, mode: 'everyLine' }
@@ -94,7 +95,7 @@ declare const __VLS_export: <T extends Content, H extends EditorCustomHandlers>(
     slots: EditorSlots<H>;
     emit: (evt: "update:modelValue", value: T) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,9 @@ import type { AppConfig } from '@nuxt/schema';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3';
 import theme from '#build/ui/editor-drag-handle';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { FloatingUIOptions } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorDragHandle = ComponentConfig<typeof theme, AppConfig, 'editorDragHandle'>;
@@ -70,8 +72,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "md" | "xs" | "sm" | "lg" | "xl";
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    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>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/EditorDragHandle.vue

@@ -57,7 +57,7 @@ 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 ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorDragHandle || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorDragHandle || {} })());
 const floatingUIOptions = computed(() => defu(props.options, {
   strategy: "absolute",
   placement: "left-start",
@@ -117,7 +117,7 @@ function onClick() {
     :compute-position-config="computePositionConfig"
     :editor="props.editor"
     :on-node-change="onNodeChange"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @click="onClick"
   >

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

@@ -3,7 +3,9 @@ import type { AppConfig } from '@nuxt/schema';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3';
 import theme from '#build/ui/editor-drag-handle';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { FloatingUIOptions } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorDragHandle = ComponentConfig<typeof theme, AppConfig, 'editorDragHandle'>;
@@ -70,8 +72,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "md" | "xs" | "sm" | "lg" | "xl";
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    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>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -32,7 +32,7 @@ declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNull
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorEmojiMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorEmojiMenu || {} })({
   size: props.size
 }));
 let menu = null;

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

@@ -32,7 +32,7 @@ declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNull
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-mention-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
 export interface EditorMentionMenuItem {
@@ -40,7 +41,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     slots: {};
     emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/EditorMentionMenu.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 });
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorMentionMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorMentionMenu || {} })({
   size: props.size
 }));
 let menu = null;

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-mention-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>;
 export interface EditorMentionMenuItem {
@@ -40,7 +41,7 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
     slots: {};
     emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-suggestion-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorSuggestionMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorSuggestionMenu || {} })({
   size: props.size
 }));
 let menu = null;

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/editor-suggestion-menu';
 import type { EditorMenuOptions } from '../composables/useEditorMenu';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ComponentConfig } from '../types/tv';
 type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>;
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -4,7 +4,10 @@ import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import theme from '#build/ui/editor-toolbar';
-import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DropdownMenuProps, DropdownMenuItem } from './DropdownMenu.vue';
+import type { TooltipProps } from './Tooltip.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -84,7 +87,7 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
     slots: EditorToolbarSlots<T, NestedItem<T>>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/EditorToolbar.vue

@@ -54,7 +54,7 @@ const options = computed(() => defu(props.options, {
   offset: 8,
   shift: { padding: 8 }
 }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.editorToolbar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.editorToolbar || {} })({
   layout: props.layout
 }));
 const groups = computed(

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

@@ -4,7 +4,10 @@ import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import theme from '#build/ui/editor-toolbar';
-import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { DropdownMenuProps, DropdownMenuItem } from './DropdownMenu.vue';
+import type { TooltipProps } from './Tooltip.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { EditorItem, EditorCustomHandlers } from '../types/editor';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -84,7 +87,7 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
     slots: EditorToolbarSlots<T, NestedItem<T>>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/empty';
 import type { ComponentConfig } from '../types/tv';
-import type { ButtonProps, IconProps, AvatarProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { AvatarProps } from './Avatar.vue';
 type Empty = ComponentConfig<typeof theme, AppConfig, 'empty'>;
 export interface EmptyProps {
     /**
@@ -16,6 +18,14 @@ export interface EmptyProps {
      */
     icon?: IconProps['name'];
     avatar?: AvatarProps;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
     title?: string;
     description?: string;
     /**