@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

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

@@ -1,4 +1,5 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/dropdown-menu';
 import type { AvatarProps, KbdProps, LinkProps, IconComponent } from '../types';
@@ -87,38 +88,38 @@ export interface DropdownMenuEmits extends DropdownMenuRootEmits {
 }
 type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
-}) => any;
+}) => VNode[];
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props: {
+    'default'?(props: {
         open: boolean;
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;

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/DropdownMenu.vue.d.ts

@@ -1,4 +1,5 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/dropdown-menu';
 import type { AvatarProps, KbdProps, LinkProps, IconComponent } from '../types';
@@ -87,38 +88,38 @@ export interface DropdownMenuEmits extends DropdownMenuRootEmits {
 }
 type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
-}) => any;
+}) => VNode[];
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props: {
+    'default'?(props: {
         open: boolean;
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;

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

@@ -1,5 +1,6 @@
 import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/b24ui/dropdown-menu';
 import type { DropdownMenuItem, DropdownMenuSlots, IconComponent } from '../types';
@@ -30,12 +31,12 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     b24uiOverride?: DropdownMenu['slots'];
 }
 type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;

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/DropdownMenuContent.vue.d.ts

@@ -1,5 +1,6 @@
 import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/b24ui/dropdown-menu';
 import type { DropdownMenuItem, DropdownMenuSlots, IconComponent } from '../types';
@@ -30,12 +31,12 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     b24uiOverride?: DropdownMenu['slots'];
 }
 type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3';
 import type { StarterKitOptions } from '@tiptap/starter-kit';
@@ -56,10 +57,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.).
@@ -72,10 +74,10 @@ export interface EditorEmits<T extends Content = Content> {
     'update:modelValue': [value: T];
 }
 export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
-    default(props: {
+    default?(props: {
         editor: TiptapEditor;
         handlers: EditorHandlers<H>;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3';
 import type { StarterKitOptions } from '@tiptap/starter-kit';
@@ -56,10 +57,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.).
@@ -72,10 +74,10 @@ export interface EditorEmits<T extends Content = Content> {
     'update:modelValue': [value: T];
 }
 export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
-    default(props: {
+    default?(props: {
         editor: TiptapEditor;
         handlers: EditorHandlers<H>;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3';
@@ -26,13 +27,13 @@ export interface EditorDragHandleProps extends Omit<DragHandleProps, 'editor' |
     b24ui?: EditorDragHandle['slots'] & ButtonProps['b24ui'];
 }
 export interface EditorDragHandleSlots {
-    default(props: {
+    default?(props: {
         b24ui: EditorDragHandle['b24ui'];
         onClick: () => {
             node: JSONContent;
             pos: number;
         } | undefined;
-    }): any;
+    }): VNode[];
 }
 export interface EditorDragHandleEmits {
     nodeChange: [{
@@ -65,8 +66,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>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3';
@@ -26,13 +27,13 @@ export interface EditorDragHandleProps extends Omit<DragHandleProps, 'editor' |
     b24ui?: EditorDragHandle['slots'] & ButtonProps['b24ui'];
 }
 export interface EditorDragHandleSlots {
-    default(props: {
+    default?(props: {
         b24ui: EditorDragHandle['b24ui'];
         onClick: () => {
             node: JSONContent;
             pos: number;
         } | undefined;
-    }): any;
+    }): VNode[];
 }
 export interface EditorDragHandleEmits {
     nodeChange: [{
@@ -65,8 +66,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/EditorMentionMenu.vue

@@ -45,7 +45,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/EditorToolbar.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
@@ -58,9 +59,9 @@ type SlotPropsProps = {
 };
 type SlotProps<T extends EditorToolbarItem> = (props: {
     item: T;
-} & SlotPropsProps) => any;
+} & SlotPropsProps) => VNode[];
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    item: SlotProps<T>;
+    item?: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
 declare const _default: typeof __VLS_export;
 export default _default;

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";
@@ -36,6 +37,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("editorToolbar", props);
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
 const Component = computed(() => {
   return {
@@ -176,7 +178,7 @@ function getDropdownItems(item) {
     v-bind="Component !== 'template' ? {
   editor,
   tabindex: -1,
-  class: b24ui.root({ class: props.b24ui?.root }),
+  class: b24ui.root({ class: uiProp?.root }),
   ...rootProps,
   options,
   ...$attrs
@@ -184,9 +186,9 @@ function getDropdownItems(item) {
   ...$attrs
 }"
   >
-    <Primitive :as="as" role="toolbar" data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+    <Primitive :as="as" role="toolbar" data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
       <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
-        <div role="group" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
+        <div role="group" data-slot="group" :class="b24ui.group({ class: uiProp?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <slot
               :name="item.slot || 'item'"
@@ -233,7 +235,7 @@ function getDropdownItems(item) {
         <Separator
           v-if="groupIndex < groups.length - 1"
           data-slot="separator"
-          :class="b24ui.separator({ class: props.b24ui?.separator })"
+          :class="b24ui.separator({ class: uiProp?.separator })"
           orientation="vertical"
         />
       </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Editor } from '@tiptap/vue-3';
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
@@ -58,9 +59,9 @@ type SlotPropsProps = {
 };
 type SlotProps<T extends EditorToolbarItem> = (props: {
     item: T;
-} & SlotPropsProps) => any;
+} & SlotPropsProps) => VNode[];
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    item: SlotProps<T>;
+    item?: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/empty';
 import type { ComponentConfig } from '../types/tv';
@@ -38,15 +39,15 @@ export interface EmptyProps {
     b24ui?: Empty['slots'];
 }
 export interface EmptySlots {
-    header(props?: {}): any;
-    leading(props: {
+    header?(props?: {}): VNode[];
+    leading?(props: {
         b24ui: Empty['b24ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    body(props?: {}): any;
-    actions(props?: {}): any;
-    footer(props?: {}): any;
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;