@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -9,9 +9,10 @@ import { useEditorMenu } from "../composables/useEditorMenu";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: ":" },
   pluginKey: { type: String, required: false, default: "emojiMenu" },
@@ -21,7 +22,9 @@ const props = defineProps({
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorEmojiMenu || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorEmojiMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();

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

@@ -13,12 +13,18 @@ export interface EditorEmojiMenuItem {
     [key: string]: any;
 }
 export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorEmojiMenu['variants']['size'];
     items?: T[] | T[][];
     class?: any;
     b24ui?: EditorEmojiMenu['slots'];
 }
-declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorEmojiMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends EditorEmojiMenuItem>(__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<EditorEmojiMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -28,8 +34,8 @@ declare const __VLS_export: <T extends EditorEmojiMenuItem>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -17,12 +17,18 @@ export interface EditorMentionMenuItem {
     [key: string]: any;
 }
 export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorMentionMenu['variants']['size'];
     items?: T[] | T[][];
     class?: any;
     b24ui?: EditorMentionMenu['slots'];
 }
-declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorMentionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends EditorMentionMenuItem>(__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<EditorMentionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -32,8 +38,8 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorMentionMenu.vue

@@ -10,9 +10,10 @@ import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: "@" },
   pluginKey: { type: String, required: false, default: "mentionMenu" },
@@ -22,7 +23,9 @@ const props = defineProps({
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorMentionMenu || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorMentionMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();
@@ -42,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/EditorMentionMenu.vue.d.ts

@@ -17,12 +17,18 @@ export interface EditorMentionMenuItem {
     [key: string]: any;
 }
 export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorMentionMenu['variants']['size'];
     items?: T[] | T[][];
     class?: any;
     b24ui?: EditorMentionMenu['slots'];
 }
-declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorMentionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends EditorMentionMenuItem>(__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<EditorMentionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -32,8 +38,8 @@ declare const __VLS_export: <T extends EditorMentionMenuItem>(__VLS_props: NonNu
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -30,12 +30,18 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
 } & EditorItem<H>;
 export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
 export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorSuggestionMenu['variants']['size'];
     items?: T[] | T[][];
     class?: any;
     b24ui?: EditorSuggestionMenu['slots'];
 }
-declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__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<EditorSuggestionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -45,8 +51,8 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -10,9 +10,10 @@ import { createHandlers } from "../utils/editor";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  size: { type: null, required: false },
   items: { type: Array, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   editor: { type: Object, required: false },
   char: { type: String, required: false, default: "/" },
   pluginKey: { type: String, required: false, default: "suggestionMenu" },
@@ -23,7 +24,9 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const handlers = inject("editorHandlers", computed(() => createHandlers()));
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorSuggestionMenu || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.editorSuggestionMenu || {} })({
+  size: props.size
+}));
 let menu = null;
 onMounted(async () => {
   await nextTick();

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

@@ -30,12 +30,18 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
 } & EditorItem<H>;
 export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
 export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: EditorSuggestionMenu['variants']['size'];
     items?: T[] | T[][];
     class?: any;
     b24ui?: EditorSuggestionMenu['slots'];
 }
-declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorSuggestionMenuProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__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<EditorSuggestionMenuProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -45,8 +51,8 @@ declare const __VLS_export: <T extends EditorSuggestionMenuItem>(__VLS_props: No
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -62,8 +62,10 @@ type SlotProps<T extends EditorToolbarItem> = (props: {
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
     item: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
-declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorToolbarProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__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<EditorToolbarProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -73,8 +75,8 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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";
@@ -24,7 +25,7 @@ const props = defineProps({
   items: { type: null, required: false },
   editor: { type: Object, required: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   layout: { type: String, required: false, default: "fixed" },
   pluginKey: { type: [Object, String], required: false },
   updateDelay: { type: Number, required: false },
@@ -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 {
@@ -74,11 +76,11 @@ function isDisabled(item) {
   }
   if ("items" in item && item.items?.length) {
     const items = isArrayOfArray(item.items) ? item.items.flat() : item.items;
-    const itemItems = items.filter((item2) => "kind" in item2);
-    if (itemItems.length === 0) {
+    const actionableItems = items.filter((item2) => item2.type !== "separator" && item2.type !== "label");
+    if (actionableItems.length === 0) {
       return true;
     }
-    return itemItems.every((item2) => isDisabled(item2));
+    return actionableItems.every((item2) => isDisabled(item2));
   }
   if (!("kind" in item)) {
     return item.disabled ?? false;
@@ -122,7 +124,7 @@ function getActiveChildItem(item) {
   });
 }
 function getButtonProps(item) {
-  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip"]);
+  const baseProps = omit(item, ["kind", "mark", "align", "level", "href", "src", "pos", "items", "slot", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "tooltip", "onClick"]);
   if ("items" in item && item.items?.length) {
     const activeChild = getActiveChildItem(item);
     if (activeChild?.icon) {
@@ -139,9 +141,10 @@ function getButtonProps(item) {
   });
 }
 function getDropdownProps(item) {
-  const baseProps = pick(item, ["checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "b24ui"]);
+  const baseProps = pick(item, ["size", "checkedIcon", "loadingIcon", "externalIcon", "content", "arrow", "portal", "modal", "b24ui"]);
   return defu(baseProps, {
-    modal: false
+    modal: false,
+    size: props.size
   });
 }
 function mapDropdownItem(item) {
@@ -175,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
@@ -183,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'"
@@ -201,10 +204,10 @@ function getDropdownItems(item) {
                 :items="getDropdownItems(item)"
               >
                 <B24Tooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
-                  <B24Button :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                  <B24Button :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
                 </B24Tooltip>
 
-                <B24Button v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                <B24Button v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" @click="onClick($event, item)" />
               </B24DropdownMenu>
 
               <B24Tooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...item.tooltip || {} }">
@@ -232,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

@@ -62,8 +62,10 @@ type SlotProps<T extends EditorToolbarItem> = (props: {
 export type EditorToolbarSlots<A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>, T extends NestedItem<A> = NestedItem<A>> = {
     item: SlotProps<T>;
 } & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>;
-declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<EditorToolbarProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__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<EditorToolbarProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -73,8 +75,8 @@ declare const __VLS_export: <T extends ArrayOrNested<EditorToolbarItem>>(__VLS_p
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -48,9 +48,11 @@ export interface EmptySlots {
     actions(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
+    inverted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Empty.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/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 B24Button from "./Button.vue";
 const props = defineProps({
@@ -18,10 +19,11 @@ const props = defineProps({
   inverted: { type: Boolean, required: false, default: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("empty", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty || {} })({
   color: props.color,
   inverted: Boolean(props.inverted),
@@ -30,26 +32,26 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header">
         <slot name="leading" :b24ui="b24ui">
-          <div v-if="icon" data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div v-if="icon" data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })">
             <Component
               :is="icon"
               data-slot="icon"
-              :class="b24ui.icon({ class: props.b24ui?.icon })"
+              :class="b24ui.icon({ class: uiProp?.icon })"
             />
           </div>
         </slot>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -57,9 +59,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <B24Button v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -67,7 +69,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.empty |
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -48,9 +48,11 @@ export interface EmptySlots {
     actions(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
+    inverted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -7,7 +7,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {
@@ -34,9 +34,13 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    clear: boolean | ButtonProps;
+    as: any;
+    redirect: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Error.vue

@@ -6,20 +6,22 @@ import theme from "#build/b24ui/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 B24Button from "./Button.vue";
 const props = defineProps({
-  as: { type: null, required: false },
+  as: { type: null, required: false, default: "main" },
   error: { type: Object, required: false },
   redirect: { type: String, required: false, default: "/" },
   clear: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("error", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.error || {} })());
 function handleError() {
   clearError({ redirect: props.redirect });
@@ -27,23 +29,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="b24ui.statusCode({ class: props.b24ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="b24ui.statusCode({ class: uiProp?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="b24ui.statusMessage({ class: props.b24ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="b24ui.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="b24ui.message({ class: props.b24ui?.message })">
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="b24ui.message({ class: uiProp?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" data-slot="links" :class="b24ui.links({ class: props.b24ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="b24ui.links({ class: uiProp?.links })">
       <slot name="links">
         <B24Button
           v-if="clear"

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

@@ -7,7 +7,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {
@@ -34,9 +34,13 @@ export interface ErrorSlots {
     message(props?: {}): any;
     links(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    clear: boolean | ButtonProps;
+    as: any;
+    redirect: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;