@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiNavigationMenu/types.ts

@@ -0,0 +1,185 @@
+export type UiNavigationMenuOrientation = 'horizontal' | 'vertical';
+
+export type UiNavigationMenuDir = 'ltr' | 'rtl';
+
+/**
+ * A horizontal navigation menu for site-wide navigation. Displays a list of
+ * navigation links with optional dropdown content for nested navigation.
+ *
+ * @category Navigation
+ * @useCases site navigation, main menu, header navigation, mega menu
+ * @keywords navigation, menu, nav, header, links, dropdown, mega menu
+ * @related UiDropdownMenu, UiTabs
+ */
+export type UiNavigationMenuProps = {
+  /**
+   * The controlled value of the menu item to activate.
+   * Use with `@update:modelValue` for two-way binding.
+   */
+  modelValue?: string;
+
+  /**
+   * The value of the menu item that should be active when initially rendered.
+   * Use when you do not need to control the state of the menu.
+   */
+  defaultValue?: string;
+
+  /**
+   * The orientation of the menu.
+   * @default 'horizontal'
+   */
+  orientation?: UiNavigationMenuOrientation;
+
+  /**
+   * The reading direction of the menu.
+   * @default 'ltr'
+   */
+  dir?: UiNavigationMenuDir;
+
+  /**
+   * The duration from when the mouse enters a trigger until the content opens.
+   * @default 200
+   */
+  delayDuration?: number;
+
+  /**
+   * How much time a user has to enter another trigger without incurring a delay again.
+   * @default 300
+   */
+  skipDelayDuration?: number;
+
+  /**
+   * Whether to disable the click trigger behavior.
+   * When `true`, the menu will only open on hover.
+   * @default false
+   */
+  disableClickTrigger?: boolean;
+
+  /**
+   * Whether to disable the hover trigger behavior.
+   * When `true`, the menu will only open on click.
+   * @default false
+   */
+  disableHoverTrigger?: boolean;
+
+  /**
+   * Whether to render the viewport element.
+   * Set to `false` for inline content rendering without the viewport wrapper.
+   * @default true
+   */
+  viewport?: boolean;
+};
+
+export type UiNavigationMenuEmits = {
+  /**
+   * Event emitted when the active menu item changes.
+   */
+  'update:modelValue': [value: string];
+};
+
+export type UiNavigationMenuListProps = {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+export type UiNavigationMenuItemProps = {
+  /**
+   * A unique value that associates the item with an active value when the
+   * navigation menu is controlled.
+   */
+  value?: string;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+export type UiNavigationMenuTriggerProps = {
+  /**
+   * Whether the trigger is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+export type UiNavigationMenuContentProps = {
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   * @default false
+   */
+  forceMount?: boolean;
+
+  /**
+   * When `true`, hover/focus/click interactions will be disabled on elements
+   * outside the content. Users will need to click twice on outside elements
+   * to interact with them: once to close the menu, and again to activate the element.
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+};
+
+export type UiNavigationMenuContentEmits = {
+  /**
+   * Event emitted when the escape key is pressed.
+   * Can be used to prevent closing or add custom behavior.
+   */
+  escapeKeyDown: [event: KeyboardEvent];
+
+  /**
+   * Event emitted when a click occurs outside the content.
+   */
+  outsideClick: [event: Event];
+
+  /**
+   * Event emitted when focus moves outside the content.
+   */
+  outsideFocus: [event: Event];
+
+  /**
+   * Event emitted when any interaction occurs outside the content.
+   */
+  outsideInteract: [event: Event];
+};
+
+export type UiNavigationMenuLinkProps = {
+  /**
+   * Whether the link is the currently active page.
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * Use when integrating with router-link or NuxtLink.
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+export type UiNavigationMenuLinkEmits = {
+  /**
+   * Event emitted when the link is selected (clicked or keyboard activated).
+   */
+  select: [event: CustomEvent<{ originalEvent: Event }>];
+};
+
+export type UiNavigationMenuIndicatorProps = {
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   * @default false
+   */
+  forceMount?: boolean;
+};