@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/DescriptionList.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/description-list";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("descriptionList", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.descriptionList || {} })({
   size: props.size
 }));
@@ -51,19 +53,19 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: uiProp?.legend })">
       <slot name="legend">
         {{ legend }}
       </slot>
     </h2>
-    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">
+    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: uiProp?.text })">
       <slot name="text">
         {{ text }}
       </slot>
     </p>
 
-    <dl data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+    <dl data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
       <template
         v-for="(item, index) in normalizedItems"
         :key="index"
@@ -85,7 +87,7 @@ const normalizedItems = computed(() => {
             data-slot="labelWrapper"
             :class="b24ui.labelWrapper({
   class: [
-    props.b24ui?.labelWrapper,
+    uiProp?.labelWrapper,
     item?.b24ui?.labelWrapper
   ]
 })"
@@ -97,19 +99,19 @@ const normalizedItems = computed(() => {
                 data-slot="icon"
                 :class="b24ui.icon({
   class: [
-    props.b24ui?.icon,
+    uiProp?.icon,
     item?.b24ui?.icon
   ]
 })"
               />
               <B24Avatar
                 v-else-if="item.avatar"
-                :size="props.b24ui?.avatarSize || b24ui.avatarSize()"
+                :size="uiProp?.avatarSize || b24ui.avatarSize()"
                 v-bind="item.avatar"
                 data-slot="avatar"
                 :class="b24ui.avatar({
   class: [
-    props.b24ui?.avatar,
+    uiProp?.avatar,
     item?.b24ui?.avatar
   ]
 })"
@@ -120,7 +122,7 @@ const normalizedItems = computed(() => {
               :class="b24ui.label({
   class: [
     item?.class,
-    props.b24ui?.label,
+    uiProp?.label,
     item?.b24ui?.label
   ]
 })"
@@ -135,7 +137,7 @@ const normalizedItems = computed(() => {
             data-slot="descriptionWrapper"
             :class="b24ui.descriptionWrapper({
   class: [
-    props.b24ui?.descriptionWrapper,
+    uiProp?.descriptionWrapper,
     item?.b24ui?.descriptionWrapper,
     item?.b24ui?.class
   ],
@@ -147,7 +149,7 @@ const normalizedItems = computed(() => {
               :class="b24ui.description({
   class: [
     item?.class,
-    props.b24ui?.description,
+    uiProp?.description,
     item?.b24ui?.description
   ],
   orientation: item.orientation
@@ -162,7 +164,7 @@ const normalizedItems = computed(() => {
               data-slot="actions"
               :class="b24ui.actions({
   class: [
-    props.b24ui?.actions,
+    uiProp?.actions,
     item?.b24ui?.actions
   ],
   orientation: item.orientation
@@ -191,7 +193,7 @@ const normalizedItems = computed(() => {
     <div
       v-if="!!slots.footer"
       data-slot="footer"
-      :class="b24ui.footer({ class: props.b24ui?.footer })"
+      :class="b24ui.footer({ class: uiProp?.footer })"
     >
       <slot name="footer" :b24ui="b24ui" />
     </div>

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

@@ -0,0 +1,100 @@
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/drawer';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render an overlay blur behind the modal.
+     * `auto` use `motion-safe`.
+     * @defaultValue 'auto'
+     */
+    overlayBlur?: Drawer['variants']['overlayBlur'];
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
+    /**
+     * @defaultValue true
+     */
+    scrollbarThin?: boolean;
+    class?: any;
+    b24ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
+}
+export interface DrawerSlots {
+    default(props?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+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;
+    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;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    handle: boolean;
+    overlayBlur: Drawer["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,133 @@
+<script>
+import theme from "#build/b24ui/drawer";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+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 { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  overlayBlur: { type: null, required: false, default: "auto" },
+  handle: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  nested: { type: Boolean, required: false },
+  scrollbarThin: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  activeSnapPoint: { type: [Number, String, null], required: false },
+  closeThreshold: { type: Number, required: false },
+  shouldScaleBackground: { type: Boolean, required: false },
+  setBackgroundColorOnScale: { type: Boolean, required: false },
+  scrollLockTimeout: { type: Number, required: false },
+  fixed: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  modal: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  direction: { type: String, required: false, default: "bottom" },
+  noBodyStyles: { type: Boolean, required: false },
+  handleOnly: { type: Boolean, required: false },
+  preventScrollRestoration: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false }
+});
+const emits = defineEmits(["close:prevent", "drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
+const slots = defineSlots();
+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 portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
+  }
+  return {
+    pointerDownOutside
+  };
+});
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.drawer || {} })({
+  direction: props.direction,
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0,
+  overlayBlur: props.overlayBlur,
+  overlay: props.overlay,
+  scrollbarThin: props.scrollbarThin
+}));
+</script>
+
+<template>
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })" />
+
+      <DrawerContent data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" data-slot="handle" :class="b24ui.handle({ class: uiProp?.handle })" />
+
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
+              <slot name="header">
+                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="!!slots.body" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+              <slot name="body" />
+            </div>
+
+            <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </component>
+</template>

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

@@ -0,0 +1,100 @@
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/drawer';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render an overlay blur behind the modal.
+     * `auto` use `motion-safe`.
+     * @defaultValue 'auto'
+     */
+    overlayBlur?: Drawer['variants']['overlayBlur'];
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
+    /**
+     * @defaultValue true
+     */
+    scrollbarThin?: boolean;
+    class?: any;
+    b24ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
+}
+export interface DrawerSlots {
+    default(props?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+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;
+    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;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    handle: boolean;
+    overlayBlur: Drawer["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DropdownMenu.vue

@@ -5,14 +5,10 @@ import theme from "#build/b24ui/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, 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 B24DropdownMenuContent from "./DropdownMenuContent.vue";
@@ -35,6 +31,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", align: "center", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
@@ -58,9 +55,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
 
     <B24DropdownMenuContent
       data-slot="content"
-      :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })"
+      :class="b24ui.content({ class: [!slots.default && uiProp?.content, props.class] })"
       :b24ui="b24ui"
-      :b24ui-override="props.b24ui"
+      :b24ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :arrow="arrow"
@@ -74,7 +71,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
     </B24DropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -15,6 +15,7 @@ import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { omit, get, isArrayOfArray } from "../utils";
 import { pickLinkProps } from "../utils/link";
+import { useComponentUI } from "../composables/useComponentUI";
 import icons from "../dictionary/icons";
 import B24LinkBase from "./LinkBase.vue";
 import B24Link from "./Link.vue";
@@ -57,6 +58,7 @@ const props = defineProps({
 const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
 const slots = defineSlots();
 const { dir } = useLocale();
+const uiProp = useComponentUI("dropdownMenu", props);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -225,7 +227,7 @@ const groups = computed(
                 <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="b24ui.arrow({ class: props.b24ui?.arrow })" />
+                <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
               </B24DropdownMenuContent>
             </DropdownMenu.Sub>
             <DropdownMenu.CheckboxItem

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 });
@@ -66,6 +67,7 @@ const emits = defineEmits(["update:modelValue"]);
 defineSlots();
 const attrs = useAttrs();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editor", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.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: b24ui.value.base({ class: props.b24ui?.base })
+    class: b24ui.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="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.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="b24ui.content({ class: props.b24ui?.content })"
+        :class="b24ui.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

@@ -65,8 +65,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Editor
         pos: number;
     }) => any) | undefined;
 }>, {
-    size: "md" | "xs" | "sm" | "lg" | "xl" | "xss";
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    size: "lg" | "sm" | "md" | "xl" | "xs" | "xss";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EditorDragHandleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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";
@@ -55,6 +56,7 @@ 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", "b24ui"));
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editorDragHandle", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorDragHandle || {} })());
 const floatingUIOptions = computed(() => defu(props.options, {
   strategy: "absolute",
@@ -116,7 +118,7 @@ function onClick() {
     :editor="editor"
     :on-node-change="onNodeChange"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @click="onClick"
   >
     <slot :b24ui="b24ui" :on-click="onClick">
@@ -127,8 +129,8 @@ function onClick() {
   ...$attrs
 }"
         data-slot="handle"
-        :class="b24ui.handle({ class: [props.b24ui?.handle, props.class] })"
-        :b24ui="transformUI(b24ui, props.b24ui)"
+        :class="b24ui.handle({ class: [uiProp?.handle, props.class] })"
+        :b24ui="transformUI(b24ui, uiProp)"
       />
     </slot>
   </DragHandle>