robonen
eefd7abf83
Reorganize components into category folders (forms/canvas/overlays/etc.); add the media-editor headless family (timeline, curve-editor, waveform, crop, color picker, etc.); apply perf fixes (O(1) collection lookups, plain-object drag state, gesture-leak teardown, shallowRef color state, rect caching) and replace source `any` with proper types.
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import type { ComputedRef, Ref, ShallowRef } from 'vue';
|
|
import type { Direction } from '../../utilities/config-provider';
|
|
import type { Orientation } from '../../utilities/roving-focus';
|
|
|
|
import { useContextFactory } from '@robonen/vue';
|
|
|
|
/**
|
|
* Context shared by `NavigationMenuRoot` and `NavigationMenuSub`. Children
|
|
* (item / list / trigger / content / viewport / indicator) read from this
|
|
* single context regardless of whether they are inside a root or a submenu.
|
|
*/
|
|
export interface NavigationMenuContext {
|
|
isRootMenu: boolean;
|
|
modelValue: Ref<string>;
|
|
previousValue: Ref<string>;
|
|
baseId: ComputedRef<string> | Ref<string>;
|
|
dir: Ref<Direction>;
|
|
orientation: Orientation;
|
|
disableClickTrigger: Ref<boolean>;
|
|
disableHoverTrigger: Ref<boolean>;
|
|
disablePointerLeaveClose: Ref<boolean>;
|
|
unmountOnHide: Ref<boolean>;
|
|
|
|
rootNavigationMenu: ShallowRef<HTMLElement | undefined>;
|
|
activeTrigger: ShallowRef<HTMLElement | undefined>;
|
|
onActiveTriggerChange: (el: HTMLElement | undefined) => void;
|
|
|
|
indicatorTrack: ShallowRef<HTMLElement | undefined>;
|
|
onIndicatorTrackChange: (el: HTMLElement | undefined) => void;
|
|
|
|
viewport: ShallowRef<HTMLElement | undefined>;
|
|
onViewportChange: (el: HTMLElement | undefined) => void;
|
|
|
|
onTriggerEnter: (itemValue: string) => void;
|
|
onTriggerLeave: () => void;
|
|
onContentEnter: (itemValue: string) => void;
|
|
onContentLeave: () => void;
|
|
onItemSelect: (itemValue: string) => void;
|
|
onItemDismiss: () => void;
|
|
}
|
|
|
|
export interface NavigationMenuItemContext {
|
|
value: string;
|
|
contentId: string;
|
|
triggerId: string;
|
|
triggerRef: ShallowRef<HTMLElement | undefined>;
|
|
onTriggerChange: (el: HTMLElement | undefined) => void;
|
|
focusProxyRef: ShallowRef<HTMLElement | undefined>;
|
|
onFocusProxyChange: (el: HTMLElement | undefined) => void;
|
|
wasEscapeCloseRef: Ref<boolean>;
|
|
onEntryKeyDown: () => void;
|
|
onFocusProxyEnter: (side: 'start' | 'end') => void;
|
|
onContentFocusOutside: () => void;
|
|
onRootContentClose: () => void;
|
|
}
|
|
|
|
export const {
|
|
inject: useNavigationMenuContext,
|
|
provide: provideNavigationMenuContext,
|
|
} = useContextFactory<NavigationMenuContext>('NavigationMenu');
|
|
|
|
export const {
|
|
inject: useNavigationMenuItemContext,
|
|
provide: provideNavigationMenuItemContext,
|
|
} = useContextFactory<NavigationMenuItemContext>('NavigationMenuItem');
|