@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/components/sidebar/stories/WithProfileInfoOnly.stories.vue

@@ -0,0 +1,119 @@
+<template>
+  <MSidebar
+    v-model="expanded"
+    @update:model-value="emit('update:modelValue')"
+    @close="emit('close')"
+  >
+    <template #header>
+      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+    </template>
+
+    <template #shortcuts>
+      <MSidebarShortcuts>
+        <MSidebarShortcutItem
+          v-for="(item, index) in shortcutItems"
+          :key="index"
+          v-bind="item"
+        />
+      </MSidebarShortcuts>
+    </template>
+
+    <template #nav>
+      <template v-for="(item, index) in navigationItems" :key="index">
+        <MSidebarExpandableItem
+          v-if="item.items"
+          menu-label="Sublist menu label"
+          :label="item.label"
+          :icon="item.icon"
+        >
+          <MSidebarNavItem
+            v-for="(subItem, subIndex) in item.items"
+            :key="subIndex"
+            v-bind="subItem"
+            :active="active === `subNav-${subIndex}`"
+            @click="active = `subNav-${subIndex}`"
+          />
+        </MSidebarExpandableItem>
+
+        <MSidebarNavItem
+          v-else
+          v-bind="item"
+          :active="active === `nav-${index}`"
+          @click="active = `nav-${index}`"
+        />
+      </template>
+    </template>
+
+    <template #footer>
+      <MSidebarFooter
+        hide-button
+        title="Dieter Rams"
+        subtitle="Industrial designer"
+        href="#"
+        avatar="/images/Avatar.png"
+        @log-out="emit('log-out')"
+      >
+        <MSidebarNavItem
+          v-for="(item, index) in footerMenuItems"
+          :key="index"
+          v-bind="item"
+          :active="active === `footer-${index}`"
+          @click="active = `footer-${index}`"
+        />
+      </MSidebarFooter>
+    </template>
+  </MSidebar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  Coffee24,
+  Course24,
+  Sample24,
+  Release24,
+  Palette24,
+  Pantone24,
+  Admin24,
+} from '@mozaic-ds/icons-vue';
+
+import MSidebar from '../MSidebar.vue';
+import MSidebarExpandableItem from '../../sidebarexpandableitem/MSidebarExpandableItem.vue';
+import MSidebarFooter from '../../sidebarfooter/MSidebarFooter.vue';
+import MSidebarHeader from '../../sidebarheader/MSidebarHeader.vue';
+import MSidebarNavItem from '../../sidebarnavitem/MSidebarNavItem.vue';
+import MSidebarShortcutItem from '../../sidebarshortcutitem/MSidebarShortcutItem.vue';
+import MSidebarShortcuts from '../../sidebarshortcuts/MSidebarShortcuts.vue';
+
+const emit = defineEmits(['close', 'update:modelValue', 'log-out']);
+
+const expanded = ref(true);
+
+const active = ref('');
+
+const shortcutItems = [
+  { label: 'Shortcut 01', icon: Coffee24, href: '#' },
+  { label: 'Shortcut 02', icon: Course24, href: '#' },
+];
+
+const navigationItems = [
+  { label: 'Get Started', href: '#', icon: Release24 },
+  {
+    label: 'Design Tokens',
+    icon: Sample24,
+    items: [
+      { label: 'Subsection menu label 1', href: '#', locked: true },
+      { label: 'Subsection menu label 2', href: '#', external: true },
+    ],
+  },
+  { label: 'Styles', href: '#', icon: Palette24 },
+  { label: 'Components', href: '#', icon: Pantone24 },
+];
+
+const footerMenuItems = [
+  { label: 'Action 01', icon: Admin24, href: '#' },
+  { label: 'Action 02', icon: Admin24, href: '#' },
+  { label: 'Action 03', icon: Admin24, href: '#' },
+  { label: 'Action 04', icon: Admin24, href: '#' },
+];
+</script>

package/src/components/sidebar/stories/WithSingleLevel.stories.vue

@@ -0,0 +1,98 @@
+<template>
+  <MSidebar
+    v-model="expanded"
+    @update:model-value="emit('update:modelValue')"
+    @close="emit('close')"
+  >
+    <template #header>
+      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+    </template>
+
+    <template #shortcuts>
+      <MSidebarShortcuts>
+        <MSidebarShortcutItem
+          v-for="(item, index) in shortcutItems"
+          :key="index"
+          v-bind="item"
+        />
+      </MSidebarShortcuts>
+    </template>
+
+    <template #nav>
+      <template v-for="(item, index) in navigationItems" :key="index">
+        <MSidebarNavItem
+          v-bind="item"
+          :active="active === `nav-${index}`"
+          @click="active = `nav-${index}`"
+        />
+      </template>
+    </template>
+
+    <template #footer>
+      <MSidebarFooter
+        title="Dieter Rams"
+        subtitle="Industrial designer"
+        href="#"
+        img-src="/images/Avatar.png"
+        @log-out="emit('log-out')"
+      >
+        <MSidebarNavItem
+          v-for="(item, index) in footerMenuItems"
+          :key="index"
+          v-bind="item"
+          :active="active === `footer-${index}`"
+          @click="active = `footer-${index}`"
+        />
+      </MSidebarFooter>
+    </template>
+  </MSidebar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  Coffee24,
+  Course24,
+  Sample24,
+  Release24,
+  Palette24,
+  Pantone24,
+  Admin24,
+} from '@mozaic-ds/icons-vue';
+
+import MSidebar from '../MSidebar.vue';
+import MSidebarFooter from '../../sidebarfooter/MSidebarFooter.vue';
+import MSidebarHeader from '../../sidebarheader/MSidebarHeader.vue';
+import MSidebarNavItem from '../../sidebarnavitem/MSidebarNavItem.vue';
+import MSidebarShortcutItem from '../../sidebarshortcutitem/MSidebarShortcutItem.vue';
+import MSidebarShortcuts from '../../sidebarshortcuts/MSidebarShortcuts.vue';
+
+const emit = defineEmits(['close', 'update:modelValue', 'log-out']);
+
+const expanded = ref(true);
+
+const active = ref('');
+
+const shortcutItems = [
+  { label: 'Shortcut 01', icon: Coffee24, href: '#' },
+  { label: 'Shortcut 02', icon: Course24, href: '#' },
+];
+
+const navigationItems = [
+  { label: 'Get Started', href: '#', icon: Release24 },
+  {
+    label: 'Design Tokens',
+    icon: Sample24,
+    href: '#',
+  },
+  { label: 'Styles', href: '#', icon: Palette24 },
+  { label: 'Components', href: '#', icon: Pantone24 },
+];
+
+const footerMenuItems = [
+  { label: 'Action 01', icon: Admin24, href: '#' },
+  { label: 'Action 02', icon: Admin24, href: '#' },
+  { label: 'Action 03', icon: Admin24, href: '#' },
+  { label: 'Action 04', icon: Admin24, href: '#' },
+];
+</script>

package/src/components/sidebar/use-floating-item.composable.ts

@@ -0,0 +1,135 @@
+import { useIsMobile } from '@/utils/use-is-mobile.composable';
+import { ref, type ShallowRef } from 'vue';
+
+type Options = {
+  allowItemHover?: boolean;
+  position?: 'bottom' | 'top';
+};
+
+const defaultOptions: Options = { allowItemHover: true, position: 'bottom' };
+
+export const useFloatingItem = (
+  trigger: ShallowRef<HTMLElement | null>,
+  floatingItem: ShallowRef<HTMLElement | null>,
+  options: Options = defaultOptions,
+) => {
+  const normalizedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  const { isMobile } = useIsMobile();
+  const floatingItemIsDisplayed = ref(false);
+
+  function getListboxPosition() {
+    const triggerRect = trigger.value?.getBoundingClientRect();
+    const floatingItemRect = floatingItem.value?.getBoundingClientRect();
+
+    if (!triggerRect || !floatingItemRect) return {};
+
+    if (isMobile.value) {
+      return {
+        top: `-${floatingItemRect.height + 24}px`,
+        left: `-${floatingItemRect.width - triggerRect.width}px`,
+      };
+    }
+
+    return {
+      top:
+        options.position === 'top'
+          ? `-${floatingItemRect.height - triggerRect.height}px`
+          : floatingItem.value?.style.left || '0px',
+    };
+  }
+
+  function hideFloatingItem(event?: MouseEvent | FocusEvent) {
+    if (!floatingItem.value || !trigger.value) return;
+
+    const target = event?.relatedTarget as Node | null;
+
+    // Prevent floating item from being hidden if mouse goes from trigger to listbox, unless specified
+    if (
+      normalizedOptions.allowItemHover &&
+      target &&
+      (floatingItem.value.contains(target) || trigger.value.contains(target))
+    ) {
+      return;
+    }
+
+    floatingItem.value.classList.add('mc-sidebar__floating-item--hidden');
+    floatingItemIsDisplayed.value = false;
+
+    document.removeEventListener('mousedown', handleClickOutside);
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    const target = event.target as Node;
+    if (
+      !floatingItem.value?.contains(target) &&
+      !trigger.value?.contains(target)
+    ) {
+      hideFloatingItem(event);
+    }
+  }
+
+  function showFloatingItem() {
+    floatingItem.value?.classList.toggle('mc-sidebar__floating-item--hidden');
+    floatingItemIsDisplayed.value = !floatingItem.value?.classList.contains(
+      'mc-sidebar__floating-item--hidden',
+    );
+
+    if (!floatingItemIsDisplayed.value) return;
+
+    const { left, top } = getListboxPosition();
+
+    if (!floatingItem.value) return;
+
+    if (top) {
+      floatingItem.value.style.top = top;
+    }
+
+    if (left) {
+      floatingItem.value.style.left = left;
+    }
+    floatingItemIsDisplayed.value = true;
+
+    document.addEventListener('mousedown', handleClickOutside);
+  }
+
+  function onTriggerKeydown(event: KeyboardEvent) {
+    if (!floatingItem.value) return;
+
+    if (['ArrowDown', 'Enter', ' '].includes(event.key)) {
+      event.preventDefault();
+      showFloatingItem();
+      focusFirstListboxItem();
+    }
+
+    if (event.key === 'Tab') {
+      hideFloatingItem();
+    }
+  }
+
+  function focusFirstListboxItem() {
+    const firstItem = floatingItem.value?.querySelector<HTMLElement>(
+      'button, [href], [tabindex]:not([tabindex="-1"])',
+    );
+    firstItem?.focus();
+  }
+
+  function onListboxKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      hideFloatingItem();
+      trigger.value?.focus();
+    }
+  }
+
+  return {
+    floatingItemIsDisplayed,
+    hideFloatingItem,
+    showFloatingItem,
+    onTriggerKeydown,
+    onListboxKeydown,
+  };
+};

package/src/components/sidebar/use-floating-item.spec.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ref, type ShallowRef } from 'vue';
+import { useFloatingItem } from './use-floating-item.composable';
+
+describe('useFloatingItem', () => {
+  let trigger: ShallowRef<HTMLElement | null>;
+  let floating: ShallowRef<HTMLElement | null>;
+  let triggerEl: HTMLElement;
+  let floatingEl: HTMLElement;
+  let childButton: HTMLButtonElement;
+
+  beforeEach(() => {
+    triggerEl = document.createElement('button');
+    floatingEl = document.createElement('div');
+    childButton = document.createElement('button');
+    childButton.textContent = 'item';
+    floatingEl.appendChild(childButton);
+
+    // start hidden
+    floatingEl.classList.add('mc-sidebar__floating-item--hidden');
+
+    // attach to DOM so focus and events behave normally
+    document.body.appendChild(triggerEl);
+    document.body.appendChild(floatingEl);
+
+    trigger = ref(triggerEl);
+    floating = ref(floatingEl);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('showFloatingItem sets position, removes hidden class, sets flag and adds mousedown listener', () => {
+    const { showFloatingItem, floatingItemIsDisplayed } = useFloatingItem(
+      trigger,
+      floating,
+    );
+
+    // ensure getBoundingClientRect returns a known top
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 42,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    const addSpy = vi.spyOn(document, 'addEventListener');
+
+    showFloatingItem();
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(false);
+    expect(floatingItemIsDisplayed.value).toBe(true);
+    expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+  });
+
+  it('hideFloatingItem adds hidden class, clears flag and removes mousedown listener', () => {
+    const { showFloatingItem, hideFloatingItem, floatingItemIsDisplayed } =
+      useFloatingItem(trigger, floating);
+
+    // make visible first
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 1,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+    const removeSpy = vi.spyOn(document, 'removeEventListener');
+
+    showFloatingItem();
+    // sanity
+    expect(floatingItemIsDisplayed.value).toBe(true);
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(false);
+
+    hideFloatingItem();
+
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(true);
+    expect(floatingItemIsDisplayed.value).toBe(false);
+    expect(removeSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+  });
+
+  it('hideFloatingItem does not hide when relatedTarget is inside floating or trigger if allowItemHover true', () => {
+    const { showFloatingItem, hideFloatingItem, floatingItemIsDisplayed } =
+      useFloatingItem(trigger, floating, { allowItemHover: true });
+
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 1,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    showFloatingItem();
+    expect(floatingItemIsDisplayed.value).toBe(true);
+
+    // simulate relatedTarget inside floating
+    const fakeEvent = {
+      relatedTarget: childButton,
+    } as unknown as FocusEvent;
+
+    hideFloatingItem(fakeEvent);
+    expect(floatingItemIsDisplayed.value).toBe(true);
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(false);
+  });
+
+  it('clicking outside after showFloatingItem hides the floating item', () => {
+    const result = useFloatingItem(trigger, floating);
+    const { showFloatingItem, floatingItemIsDisplayed } = result;
+
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 5,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    showFloatingItem();
+    expect(floatingItemIsDisplayed.value).toBe(true);
+
+    // Dispatch mousedown on an outside element
+    const outside = document.createElement('div');
+    document.body.appendChild(outside);
+
+    const event = new MouseEvent('mousedown', { bubbles: true });
+    // dispatch on outside so event.target is outside
+    outside.dispatchEvent(event);
+
+    // after event loop, listener should have executed synchronously
+    expect(floatingItemIsDisplayed.value).toBe(false);
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(true);
+  });
+
+  it('onTriggerKeydown opens on ArrowDown/Enter/Space and focuses first listbox item', () => {
+    const { onTriggerKeydown, floatingItemIsDisplayed } = useFloatingItem(
+      trigger,
+      floating,
+    );
+
+    // ensure getBoundingClientRect returns value so showFloatingItem proceeds
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 2,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    const preventSpy = vi.spyOn(keyEvent, 'preventDefault');
+
+    const focusSpy = vi.spyOn(childButton, 'focus');
+
+    onTriggerKeydown(keyEvent);
+    expect(preventSpy).toHaveBeenCalled();
+    expect(floatingItemIsDisplayed.value).toBe(true);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it('onTriggerKeydown with Tab hides the floating item', () => {
+    const { onTriggerKeydown, showFloatingItem, floatingItemIsDisplayed } =
+      useFloatingItem(trigger, floating);
+
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 3,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    showFloatingItem();
+    expect(floatingItemIsDisplayed.value).toBe(true);
+
+    const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
+    onTriggerKeydown(tabEvent);
+
+    expect(floatingItemIsDisplayed.value).toBe(false);
+    expect(
+      floatingEl.classList.contains('mc-sidebar__floating-item--hidden'),
+    ).toBe(true);
+  });
+
+  it('onListboxKeydown Escape hides and focuses trigger', () => {
+    const { onListboxKeydown, showFloatingItem, floatingItemIsDisplayed } =
+      useFloatingItem(trigger, floating);
+
+    vi.spyOn(triggerEl, 'getBoundingClientRect').mockReturnValue({
+      top: 6,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    } as unknown as DOMRect);
+
+    const triggerFocusSpy = vi.spyOn(triggerEl, 'focus');
+
+    showFloatingItem();
+    expect(floatingItemIsDisplayed.value).toBe(true);
+
+    const escEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+    const preventSpy = vi.spyOn(escEvent, 'preventDefault');
+
+    onListboxKeydown(escEvent);
+
+    expect(preventSpy).toHaveBeenCalled();
+    expect(floatingItemIsDisplayed.value).toBe(false);
+    expect(triggerFocusSpy).toHaveBeenCalled();
+  });
+});