@bitrix24/b24ui-nuxt 2.1.11 → 2.1.15

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

@@ -0,0 +1,80 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { Editor } from '@tiptap/vue-3';
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
+import theme from '#build/b24ui/editor-toolbar';
+import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types';
+import type { EditorItem, EditorCustomHandlers } from '../types/editor';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type EditorToolbar = ComponentConfig<typeof theme, AppConfig, 'editorToolbar'>;
+type ButtonItem = Omit<ButtonProps, 'type'> & {
+    'slot'?: string;
+    'tooltip'?: TooltipProps;
+    'aria-label'?: string;
+};
+type EditorToolbarButtonItem<H extends EditorCustomHandlers = EditorCustomHandlers> = Omit<ButtonItem, LinkPropsKeys> & EditorItem<H>;
+type EditorToolbarDropdownChildItem<H extends EditorCustomHandlers = EditorCustomHandlers> = DropdownMenuItem | (Omit<DropdownMenuItem, 'type'> & EditorItem<H>);
+type EditorToolbarDropdownItem<H extends EditorCustomHandlers = EditorCustomHandlers> = ButtonItem & DropdownMenuProps<ArrayOrNested<EditorToolbarDropdownChildItem<H>>>;
+export type EditorToolbarItem<H extends EditorCustomHandlers = EditorCustomHandlers> = ButtonItem | EditorToolbarButtonItem<H> | EditorToolbarDropdownItem<H>;
+type EditorToolbarBaseProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>> = {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The color of the toolbar controls.
+     * @defaultValue 'air-tertiary-no-accent'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The color of the active toolbar control.
+     * @defaultValue 'air-tertiary-accent'
+     */
+    activeColor?: ButtonProps['color'];
+    /**
+     * The size of the toolbar controls.
+     * @defaultValue 'sm'
+     */
+    size?: ButtonProps['size'];
+    items?: T;
+    editor: Editor;
+    class?: any;
+    b24ui?: EditorToolbar['slots'];
+};
+export type EditorToolbarProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>> = (EditorToolbarBaseProps<T> & {
+    layout?: 'fixed';
+}) | (EditorToolbarBaseProps<T> & Partial<Omit<BubbleMenuPluginProps, 'editor' | 'element'>> & {
+    layout?: 'bubble';
+}) | (EditorToolbarBaseProps<T> & Partial<Omit<FloatingMenuPluginProps, 'editor' | 'element'>> & {
+    layout?: 'floating';
+});
+type SlotPropsProps = {
+    index: number;
+    isActive: (item: EditorToolbarItem) => boolean;
+    isDisabled: (item: EditorToolbarItem) => boolean;
+    onClick: (e: MouseEvent, item: EditorToolbarItem) => void;
+};
+type SlotProps<T extends EditorToolbarItem> = (props: {
+    item: T;
+} & SlotPropsProps) => any;
+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 {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: EditorToolbarSlots<T, NestedItem<T>>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/FormField.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
+  error: { type: [Boolean, String], required: false, default: void 0 },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
@@ -83,7 +83,7 @@ provide(formFieldInjectionKey, computed(() => ({
     <div data-slot="container" :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: props.b24ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" data-slot="error" :class="b24ui.error({ class: props.b24ui?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="b24ui.error({ class: props.b24ui?.error })">
         <slot name="error" :error="error">
           <div data-slot="errorWrapper" :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
             <WarningIcon data-slot="errorIcon" :class="b24ui.errorIcon()" />

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { InputHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -136,6 +137,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     tag?: string;

package/dist/runtime/components/InputMenu.vue

@@ -14,7 +14,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -48,6 +48,7 @@ const props = defineProps({
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   tag: { type: String, required: false },
   tagColor: { type: null, required: false },
@@ -184,6 +185,18 @@ function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
   }
+  if (props.modelModifiers?.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional) {
+    value ??= void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { InputHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -136,6 +137,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     tag?: string;

package/dist/runtime/components/PageCard.vue

@@ -51,6 +51,7 @@ const ariaLabel = computed(() => {
     :data-orientation="orientation"
     data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    v-bind="$attrs"
     @click="onClick"
   >
     <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
@@ -92,7 +93,7 @@ const ariaLabel = computed(() => {
     <B24Link
       v-if="to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
+      v-bind="{ to, target }"
       class="focus:outline-none peer"
       raw
     >

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

@@ -43,7 +43,6 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
     /**
      * The color of the pagination controls.
      * @defaultValue 'air-secondary-no-accent'
-     * @IconComponent
      */
     color?: ButtonProps['color'];
     /**

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

@@ -43,7 +43,6 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
     /**
      * The color of the pagination controls.
      * @defaultValue 'air-secondary-no-accent'
-     * @IconComponent
      */
     color?: ButtonProps['color'];
     /**

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -115,6 +116,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the Select. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */

package/dist/runtime/components/Select.vue

@@ -12,7 +12,7 @@ import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { usePortal } from "../composables/usePortal";
-import { get, getDisplayValue, isArrayOfArray } from "../utils";
+import { get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Badge from "./Badge.vue";
@@ -41,6 +41,7 @@ const props = defineProps({
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
@@ -119,6 +120,18 @@ onMounted(() => {
   }, props.autofocusDelay);
 });
 function onUpdate(value) {
+  if (props.modelModifiers?.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional) {
+    value ??= void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -115,6 +116,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the Select. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, InputProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -142,6 +143,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */

package/dist/runtime/components/SelectMenu.vue

@@ -13,7 +13,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -47,6 +47,7 @@ const props = defineProps({
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -188,6 +189,18 @@ function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
   }
+  if (props.modelModifiers?.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional) {
+    value ??= void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, InputProps, BadgeProps, IconComponent } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -142,6 +143,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */

package/dist/runtime/components/User.vue

@@ -77,7 +77,6 @@ const chipSize = computed(() => {
         :aria-label="name"
         v-bind="{ to, target, ...$attrs }"
         class="focus:outline-none peer"
-        tabindex="-1"
         raw
       >
         <span class="absolute inset-0" aria-hidden="true" />

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -33,6 +33,7 @@ const props = defineProps({
   labelKey: { type: null, required: false },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "name" },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -60,7 +61,7 @@ function getEmojiFlag(locale) {
     // English -> USA
     de: "de",
     // Deutsch
-    la: "es",
+    es: "es",
     // Catalan -> Spain
     br: "br",
     // Português
@@ -92,8 +93,10 @@ function getEmojiFlag(locale) {
     // ภาษาไทย
     ar: "sa",
     // Arabic -> Saudi Arabia
-    kz: "kz"
+    kk: "kz",
     // Kazakh -> Kazakhstan
+    hi: "in"
+    // Indian (हिन्दी)
   };
   const baseLanguage = locale.split("-")[0]?.toLowerCase() || locale;
   const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, "").slice(0, 2);
@@ -115,7 +118,7 @@ function getEmojiFlag(locale) {
 
     <template #item-leading="{ item }">
       <span class="size-5 text-center">
-        {{ getEmojiFlag(item.code) }}
+        {{ getEmojiFlag(item.locale) }}
       </span>
     </template>
   </B24SelectMenu>

package/dist/runtime/components/prose/Accordion.vue

@@ -37,7 +37,7 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <B24Accordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(b24ui(), props.b24ui)">
+  <B24Accordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui(), props.b24ui)">
     <template #content="{ item }">
       <component :is="item.component" />
     </template>

package/dist/runtime/components/prose/Callout.vue

@@ -50,7 +50,6 @@ const iconFromIconName = computed(() => {
       v-if="to"
       v-bind="{ to, target, ...$attrs }"
       class="focus:outline-none"
-      tabindex="-1"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />

package/dist/runtime/components/prose/Card.vue

@@ -37,7 +37,6 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
       :aria-label="ariaLabel"
       v-bind="{ to, target, ...$attrs }"
       class="focus:outline-none"
-      tabindex="-1"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -9,7 +9,8 @@ export interface ShortcutsConfig {
 }
 export interface ShortcutsOptions {
     chainDelay?: number;
+    layoutIndependent?: boolean;
 }
-export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function extractShortcuts(items: any[] | any[][], separator?: '_' | '-'): Record<string, Handler>;
 export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/shared").Fn;
 export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -4,12 +4,36 @@ import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
-export function extractShortcuts(items) {
+function convertKeyToCode(key) {
+  if (/^[a-z]$/i.test(key)) {
+    return `Key${key.toUpperCase()}`;
+  }
+  if (/^\d$/.test(key)) {
+    return `Digit${key}`;
+  }
+  if (/^f\d+$/i.test(key)) {
+    return key.toUpperCase();
+  }
+  const specialKeys = {
+    space: "Space",
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    arrowup: "ArrowUp",
+    arrowdown: "ArrowDown",
+    arrowleft: "ArrowLeft",
+    arrowright: "ArrowRight"
+  };
+  return specialKeys[key.toLowerCase()] || key;
+}
+export function extractShortcuts(items, separator = "_") {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
       if (item.kbds?.length && (item.onSelect || item.onClick)) {
-        const shortcutKey = item.kbds.join("_");
+        const shortcutKey = item.kbds.join(separator);
         shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
       if (item.children) {
@@ -31,14 +55,16 @@ export function defineShortcuts(config, options = {}) {
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
+  const layoutIndependent = options.layoutIndependent ?? false;
+  const shiftableCodes = shiftableKeys.map((k) => convertKeyToCode(k));
   const onKeyDown = (e) => {
     if (!e.key) {
       return;
     }
-    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
-    const shiftableKey = shiftableKeys.includes(e.key.toLowerCase());
+    const alphabetKey = layoutIndependent ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = layoutIndependent ? shiftableCodes.includes(e.code) : shiftableKeys.includes(e.key.toLowerCase());
     let chainedKey;
-    chainedInputs.value.push(e.key);
+    chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
       for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
@@ -54,8 +80,14 @@ export function defineShortcuts(config, options = {}) {
       }
     }
     for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key) {
-        continue;
+      if (layoutIndependent) {
+        if (e.code !== shortcut.key) {
+          continue;
+        }
+      } else {
+        if (e.key.toLowerCase() !== shortcut.key) {
+          continue;
+        }
       }
       if (e.metaKey !== shortcut.metaKey) {
         continue;
@@ -98,17 +130,32 @@ export function defineShortcuts(config, options = {}) {
       }
       const chained = key.includes("-") && key !== "-" && !key.includes("_");
       if (chained) {
-        shortcut = {
-          key: key.toLowerCase(),
-          metaKey: false,
-          ctrlKey: false,
-          shiftKey: false,
-          altKey: false
-        };
+        if (layoutIndependent) {
+          const parts = key.split("-").map((p) => convertKeyToCode(p));
+          shortcut = {
+            key: parts.join("-"),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        } else {
+          shortcut = {
+            key: key.toLowerCase(),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        }
       } else {
         const keySplit = key.toLowerCase().split("_").map((k) => k);
+        let baseKey = keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_");
+        if (layoutIndependent) {
+          baseKey = convertKeyToCode(baseKey);
+        }
         shortcut = {
-          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          key: baseKey,
           metaKey: keySplit.includes("meta") || keySplit.includes("command"),
           ctrlKey: keySplit.includes("ctrl"),
           shiftKey: keySplit.includes("shift"),

package/dist/runtime/composables/useEditorMenu.d.ts

@@ -0,0 +1,64 @@
+import type { Ref, ComputedRef, MaybeRef } from 'vue';
+import type { Editor } from '@tiptap/vue-3';
+import type { FloatingUIOptions } from '../types/editor';
+export interface EditorMenuOptions<T = any> {
+    editor: Editor;
+    /**
+     * The trigger character (e.g., '/', '@', ':')
+     */
+    char: string;
+    /**
+     * Plugin key to identify this menu
+     */
+    pluginKey: string;
+    /**
+     * The items to display (can be a flat array or grouped)
+     */
+    items?: MaybeRef<T[] | T[][] | undefined>;
+    /**
+     * Fields to filter items by.
+     * @defaultValue ['label']
+     */
+    filterFields?: string[];
+    /**
+     * Function to filter items based on query
+     */
+    filter?: (items: T[], query: string) => T[];
+    /**
+     * Maximum number of items to display
+     * @defaultValue 42
+     */
+    limit?: number;
+    /**
+     * Function to execute when an item is selected
+     */
+    onSelect: (editor: Editor, range: any, item: T) => void;
+    /**
+     * Function to render each menu item
+     */
+    renderItem: (item: T, b24ui: ComputedRef<any>) => any;
+    /**
+     * The options for positioning the menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+     * @defaultValue { strategy: 'absolute', placement: 'bottom-start', offset: 8, shift: { padding: 8 } }
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: FloatingUIOptions;
+    /**
+     * The DOM element to append the menu to. Default is the editor's parent element.
+     *
+     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+     *
+     * @type {HTMLElement}
+     * @default editor.view.dom.parentElement
+     */
+    appendTo?: HTMLElement | (() => HTMLElement);
+    /**
+     * UI styles computed ref
+     */
+    b24ui: ComputedRef<any>;
+}
+export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
+    plugin: import("prosemirror-state").Plugin<any>;
+    destroy: () => void;
+    filteredItems: Ref<T[], T[]>;
+};