@aleph-alpha/ui-library 1.13.0 → 1.15.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;
+};

package/src/components/UiRangeCalendar/UiRangeCalendar.stories.ts

@@ -30,7 +30,7 @@ const meta: Meta<typeof UiRangeCalendar> = {
     weekStartsOn: {
       control: 'select',
       options: [0, 1, 2, 3, 4, 5, 6],
-      description: 'The day of the week to start on. 0 = Sunday, 1 = Monday, etc.',
+      description: 'The day of the week to start on. 0 is the locale default first day.',
     },
     numberOfMonths: {
       control: { type: 'number', min: 1, max: 3 },
@@ -337,7 +337,7 @@ const dateRange = ref<DateRange>()
 </script>
 
 <template>
-  <UiRangeCalendar v-model="dateRange" locale="de" :week-starts-on="1" weekday-format="short" class="rounded-md border shadow-sm" />
+  <UiRangeCalendar v-model="dateRange" locale="de" weekday-format="short" class="rounded-md border shadow-sm" />
 </template>`;
 
 /**
@@ -347,7 +347,6 @@ const dateRange = ref<DateRange>()
 export const GermanLocale: Story = {
   args: {
     locale: 'de',
-    weekStartsOn: 1,
     weekdayFormat: 'short',
   },
   render: (args) => ({
@@ -361,7 +360,6 @@ export const GermanLocale: Story = {
       v-model="dateRange"
       :default-placeholder="placeholder"
       :locale="args.locale"
-      :week-starts-on="args.weekStartsOn"
       :weekday-format="args.weekdayFormat"
       :disabled="args.disabled"
       class="rounded-md border shadow-sm"

package/src/components/UiRangeCalendar/types.ts

@@ -90,7 +90,7 @@ export interface UiRangeCalendarProps {
 
   /**
    * The day of the week to start on.
-   * @default 0 (Sunday)
+   * @default 0
    */
   weekStartsOn?: UiRangeCalendarWeekStartsOn;