@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiNavigationMenu/UiNavigationMenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+  import { NavigationMenu as ShadcnNavigationMenu } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuProps, UiNavigationMenuEmits } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenu',
+  });
+
+  const props = withDefaults(defineProps<UiNavigationMenuProps>(), {
+    modelValue: undefined,
+    defaultValue: undefined,
+    orientation: 'horizontal',
+    dir: 'ltr',
+    delayDuration: 200,
+    skipDelayDuration: 300,
+    disableClickTrigger: false,
+    disableHoverTrigger: false,
+    viewport: true,
+  });
+
+  const emit = defineEmits<UiNavigationMenuEmits>();
+</script>
+
+<template>
+  <ShadcnNavigationMenu
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :dir="props.dir"
+    :delay-duration="props.delayDuration"
+    :skip-delay-duration="props.skipDelayDuration"
+    :disable-click-trigger="props.disableClickTrigger"
+    :disable-hover-trigger="props.disableHoverTrigger"
+    :viewport="props.viewport"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <slot />
+  </ShadcnNavigationMenu>
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { NavigationMenuContent as ShadcnNavigationMenuContent } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuContentProps, UiNavigationMenuContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuContent',
+  });
+
+  const props = defineProps<UiNavigationMenuContentProps>();
+
+  const emit = defineEmits<UiNavigationMenuContentEmits>();
+</script>
+
+<template>
+  <ShadcnNavigationMenuContent
+    :force-mount="props.forceMount ? true : undefined"
+    :disable-outside-pointer-events="props.disableOutsidePointerEvents"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('outsideClick', $event)"
+    @focus-outside="emit('outsideFocus', $event)"
+    @interact-outside="emit('outsideInteract', $event)"
+  >
+    <slot />
+  </ShadcnNavigationMenuContent>
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuIndicator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { NavigationMenuIndicator as ShadcnNavigationMenuIndicator } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuIndicatorProps } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuIndicator',
+  });
+
+  const props = defineProps<UiNavigationMenuIndicatorProps>();
+</script>
+
+<template>
+  <ShadcnNavigationMenuIndicator :force-mount="props.forceMount ? true : undefined" />
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { NavigationMenuItem as ShadcnNavigationMenuItem } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuItemProps } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuItem',
+  });
+
+  const props = defineProps<UiNavigationMenuItemProps>();
+</script>
+
+<template>
+  <ShadcnNavigationMenuItem :value="props.value" :as-child="props.asChild">
+    <slot />
+  </ShadcnNavigationMenuItem>
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuLink.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { NavigationMenuLink as ShadcnNavigationMenuLink } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuLinkProps, UiNavigationMenuLinkEmits } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuLink',
+  });
+
+  const props = defineProps<UiNavigationMenuLinkProps>();
+
+  const emit = defineEmits<UiNavigationMenuLinkEmits>();
+
+  // Compute aria-current value: 'page' when active, undefined otherwise
+  const ariaCurrent = computed(() => (props.active ? 'page' : undefined));
+</script>
+
+<template>
+  <ShadcnNavigationMenuLink
+    :active="props.active"
+    :as-child="props.asChild"
+    :aria-current="ariaCurrent"
+    @select="emit('select', $event)"
+  >
+    <slot />
+  </ShadcnNavigationMenuLink>
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuList.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { NavigationMenuList as ShadcnNavigationMenuList } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuListProps } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuList',
+  });
+
+  const props = defineProps<UiNavigationMenuListProps>();
+</script>
+
+<template>
+  <ShadcnNavigationMenuList :as-child="props.asChild">
+    <slot />
+  </ShadcnNavigationMenuList>
+</template>

package/src/components/UiNavigationMenu/UiNavigationMenuTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { NavigationMenuTrigger as ShadcnNavigationMenuTrigger } from '@/components/core/navigation-menu';
+  import type { UiNavigationMenuTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiNavigationMenuTrigger',
+  });
+
+  const props = defineProps<UiNavigationMenuTriggerProps>();
+</script>
+
+<template>
+  <ShadcnNavigationMenuTrigger :disabled="props.disabled" :as-child="props.asChild">
+    <slot />
+  </ShadcnNavigationMenuTrigger>
+</template>

package/src/components/UiNavigationMenu/__tests__/UiNavigationMenu.test.ts

@@ -0,0 +1,428 @@
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { ref } from 'vue';
+import {
+  UiNavigationMenu,
+  UiNavigationMenuList,
+  UiNavigationMenuItem,
+  UiNavigationMenuTrigger,
+  UiNavigationMenuContent,
+  UiNavigationMenuLink,
+  UiNavigationMenuIndicator,
+} from '../index';
+
+// Helper to render a basic navigation menu
+function renderNavigationMenu(
+  options: {
+    triggerText?: string;
+    links?: string[];
+    modelValue?: string;
+    defaultValue?: string;
+    disableHoverTrigger?: boolean;
+    disableClickTrigger?: boolean;
+    itemValue?: string;
+  } = {},
+) {
+  const {
+    triggerText = 'Products',
+    links = ['Link 1', 'Link 2'],
+    modelValue,
+    defaultValue,
+    disableHoverTrigger = false,
+    disableClickTrigger = false,
+    itemValue = 'products',
+  } = options;
+
+  return render({
+    components: {
+      UiNavigationMenu,
+      UiNavigationMenuList,
+      UiNavigationMenuItem,
+      UiNavigationMenuTrigger,
+      UiNavigationMenuContent,
+      UiNavigationMenuLink,
+    },
+    template: `
+      <UiNavigationMenu
+        ${modelValue !== undefined ? ':model-value="modelValue"' : ''}
+        ${defaultValue !== undefined ? ':default-value="defaultValue"' : ''}
+        :disable-hover-trigger="disableHoverTrigger"
+        :disable-click-trigger="disableClickTrigger"
+      >
+        <UiNavigationMenuList>
+          <UiNavigationMenuItem :value="itemValue">
+            <UiNavigationMenuTrigger>
+              {{ triggerText }}
+            </UiNavigationMenuTrigger>
+            <UiNavigationMenuContent>
+              <UiNavigationMenuLink v-for="link in links" :key="link">
+                {{ link }}
+              </UiNavigationMenuLink>
+            </UiNavigationMenuContent>
+          </UiNavigationMenuItem>
+        </UiNavigationMenuList>
+      </UiNavigationMenu>
+    `,
+    setup() {
+      return {
+        triggerText,
+        links,
+        modelValue,
+        defaultValue,
+        disableHoverTrigger,
+        disableClickTrigger,
+        itemValue,
+      };
+    },
+  });
+}
+
+describe('UiNavigationMenu', () => {
+  test('supports controlled modelValue', async () => {
+    const { getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu :model-value="modelValue">
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>
+                <UiNavigationMenuLink>Product Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+      setup() {
+        const modelValue = ref('products');
+        return { modelValue };
+      },
+    });
+
+    await waitFor(() => {
+      expect(getByText('Product Link')).toBeVisible();
+    });
+  });
+
+  test('suppresses viewport rendering when viewport is false', () => {
+    const { container } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+      },
+      template: `
+        <UiNavigationMenu :viewport="false">
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem>
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>Content</UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    expect(
+      container.querySelector('[data-slot="navigation-menu-viewport"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  test('emits update:modelValue when item changes', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getByRole } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu @update:model-value="onUpdateModelValue" :disable-hover-trigger="true">
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>
+                <UiNavigationMenuLink>Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+      setup() {
+        return { onUpdateModelValue };
+      },
+    });
+
+    await user.click(getByRole('button', { name: 'Products' }));
+
+    await waitFor(() => {
+      expect(onUpdateModelValue).toHaveBeenCalledWith('products');
+    });
+  });
+});
+
+describe('UiNavigationMenuTrigger', () => {
+  test('forwards disableHoverTrigger — click opens when hover is disabled', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText, queryByText } = renderNavigationMenu({
+      disableHoverTrigger: true,
+    });
+
+    // Hover should not open the menu
+    await user.hover(getByRole('button', { name: 'Products' }));
+    expect(queryByText('Link 1')).not.toBeInTheDocument();
+
+    // Click should open the menu
+    await user.click(getByRole('button', { name: 'Products' }));
+
+    await waitFor(() => {
+      expect(getByText('Link 1')).toBeVisible();
+    });
+  });
+
+  test('forwards disabled prop', () => {
+    const { getByRole } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem>
+              <UiNavigationMenuTrigger :disabled="true">Disabled</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>Content</UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    expect(getByRole('button', { name: 'Disabled' })).toBeDisabled();
+  });
+});
+
+describe('UiNavigationMenuContent', () => {
+  test('content is present in DOM without interaction when forceMount is true', () => {
+    const { getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent :force-mount="true">
+                <UiNavigationMenuLink>Force Mounted Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    expect(getByText('Force Mounted Link')).toBeInTheDocument();
+  });
+
+  test('forwards escapeKeyDown event', async () => {
+    const user = userEvent.setup();
+    const onEscapeKeyDown = vi.fn();
+
+    const { getByRole, getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent @escape-key-down="onEscapeKeyDown">
+                <UiNavigationMenuLink>Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+      setup() {
+        return { onEscapeKeyDown };
+      },
+    });
+
+    await user.hover(getByRole('button', { name: 'Products' }));
+    await waitFor(() => expect(getByText('Link')).toBeVisible());
+
+    await user.keyboard('{Escape}');
+
+    expect(onEscapeKeyDown).toHaveBeenCalled();
+  });
+});
+
+describe('UiNavigationMenuLink', () => {
+  test('forwards active prop as data-active attribute', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>
+                <UiNavigationMenuLink :active="true">Active Link</UiNavigationMenuLink>
+                <UiNavigationMenuLink :active="false">Inactive Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    await user.hover(getByRole('button', { name: 'Products' }));
+
+    await waitFor(() => {
+      expect(getByText('Active Link')).toHaveAttribute('data-active');
+      expect(getByText('Inactive Link')).not.toHaveAttribute('data-active');
+    });
+  });
+
+  test('forwards select event', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    const { getByRole, getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>
+                <UiNavigationMenuLink @select="onSelect">Click Me</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+      setup() {
+        return { onSelect };
+      },
+    });
+
+    await user.hover(getByRole('button', { name: 'Products' }));
+    await waitFor(() => expect(getByText('Click Me')).toBeVisible());
+
+    await user.click(getByText('Click Me'));
+
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  test('sets aria-current="page" when active', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuLink,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem value="products">
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>
+                <UiNavigationMenuLink :active="true">Active Link</UiNavigationMenuLink>
+                <UiNavigationMenuLink :active="false">Inactive Link</UiNavigationMenuLink>
+              </UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    await user.hover(getByRole('button', { name: 'Products' }));
+
+    await waitFor(() => {
+      expect(getByText('Active Link')).toHaveAttribute('aria-current', 'page');
+      expect(getByText('Inactive Link')).not.toHaveAttribute('aria-current');
+    });
+  });
+});
+
+describe('UiNavigationMenuIndicator', () => {
+  test('indicator is present in DOM without interaction when forceMount is true', async () => {
+    const { container } = render({
+      components: {
+        UiNavigationMenu,
+        UiNavigationMenuList,
+        UiNavigationMenuItem,
+        UiNavigationMenuTrigger,
+        UiNavigationMenuContent,
+        UiNavigationMenuIndicator,
+      },
+      template: `
+        <UiNavigationMenu>
+          <UiNavigationMenuList>
+            <UiNavigationMenuItem>
+              <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
+              <UiNavigationMenuContent>Content</UiNavigationMenuContent>
+            </UiNavigationMenuItem>
+            <UiNavigationMenuIndicator :force-mount="true" />
+          </UiNavigationMenuList>
+        </UiNavigationMenu>
+      `,
+    });
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('[data-slot="navigation-menu-indicator"]'),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/components/UiNavigationMenu/index.ts

@@ -0,0 +1,11 @@
+export { default as UiNavigationMenu } from './UiNavigationMenu.vue';
+export { default as UiNavigationMenuList } from './UiNavigationMenuList.vue';
+export { default as UiNavigationMenuItem } from './UiNavigationMenuItem.vue';
+export { default as UiNavigationMenuTrigger } from './UiNavigationMenuTrigger.vue';
+export { default as UiNavigationMenuContent } from './UiNavigationMenuContent.vue';
+export { default as UiNavigationMenuLink } from './UiNavigationMenuLink.vue';
+export { default as UiNavigationMenuIndicator } from './UiNavigationMenuIndicator.vue';
+
+export { navigationMenuTriggerStyle } from '@/components/core/navigation-menu';
+
+export * from './types';