@mozaic-ds/vue 2.19.2 → 2.20.0

package/src/components/optionListbox/use-listbox-selection.composable.ts

@@ -0,0 +1,149 @@
+import { computed } from 'vue';
+import type { ListboxOption } from './MOptionListbox.types';
+
+type SelectionValue = string | number | null | (string | number)[];
+
+type Props = {
+  modelValue: SelectionValue;
+  options: ListboxOption[];
+  multiple?: boolean;
+  readonly?: boolean;
+  checkableSections?: boolean;
+};
+
+export function useListboxSelection(
+  props: Props,
+  emit: (on: 'update:modelValue', value: SelectionValue) => void,
+) {
+  const selection = computed<SelectionValue>({
+    get() {
+      return props.modelValue;
+    },
+    set(value) {
+      emit('update:modelValue', value);
+    },
+  });
+
+  const sectionMap = computed(() => {
+    const map = new Map<string, ListboxOption[]>();
+    let currentSection: ListboxOption | null = null;
+
+    props.options.forEach((option) => {
+      if (option.type === 'section') {
+        currentSection = option;
+        map.set(currentSection?.value?.toString() || currentSection.label, []);
+      } else if (currentSection) {
+        map
+          .get(currentSection?.value?.toString() || currentSection.label)!
+          .push(option);
+      }
+    });
+
+    return map;
+  });
+
+  function isSelectable(item: ListboxOption): boolean {
+    return !!(
+      (item.type !== 'section' && !item.disabled) ||
+      (item.type === 'section' && props.checkableSections && props.multiple)
+    );
+  }
+
+  function isOptionSelected(item: ListboxOption) {
+    if (item.value === undefined || item.value === null) return false;
+
+    if (Array.isArray(selection.value)) {
+      return (selection.value as (string | number)[]).includes(item.value);
+    }
+
+    return item.value === selection.value;
+  }
+
+  function isSectionSelected(item: ListboxOption) {
+    if (!props.checkableSections || !props.multiple) return false;
+
+    const sectionItems =
+      sectionMap.value.get(item.value?.toString() || item.label) || [];
+    const selectedItems = Array.isArray(selection.value)
+      ? (selection.value as (string | number)[])
+      : [];
+
+    return sectionItems.every((opt) => selectedItems.includes(opt.value!));
+  }
+
+  function isIndeterminate(item: ListboxOption) {
+    const section = sectionMap.value.get(item.value?.toString() || item.label);
+    return (
+      section?.some((option) => isOptionSelected(option)) &&
+      !section?.every((option) => isOptionSelected(option))
+    );
+  }
+
+  function toggleValue(item?: ListboxOption) {
+    if (!item || !isSelectable(item)) return;
+
+    if (Array.isArray(selection.value)) {
+      if (isOptionSelected(item)) {
+        selection.value = (selection.value as (string | number)[]).filter(
+          (el) => el !== item.value,
+        );
+      } else {
+        selection.value = [...selection.value, item.value!];
+      }
+    } else {
+      selection.value = isOptionSelected(item) ? null : item.value!;
+    }
+  }
+
+  function toggleSection(item: ListboxOption) {
+    if (!props.checkableSections || !props.multiple) return;
+
+    const sectionItems =
+      sectionMap.value.get(item.value?.toString() || item.label) || [];
+    const selectedItems = Array.isArray(selection.value)
+      ? (selection.value as (string | number)[])
+      : [];
+
+    if (isSectionSelected(item)) {
+      selection.value = selectedItems.filter(
+        (opt) => !sectionItems.find((i) => i.value === opt),
+      );
+    } else {
+      selection.value = [
+        ...selectedItems,
+        ...sectionItems
+          .filter((opt) => !selectedItems.includes(opt.value!))
+          .map((i) => i.value!),
+      ];
+    }
+  }
+
+  function selectAll() {
+    selection.value = props.options
+      .filter(
+        (option) =>
+          option.value !== undefined &&
+          option.value !== null &&
+          !option.disabled &&
+          option.type !== 'section',
+      )
+      .map((item) => item.value!);
+  }
+
+  function clearSelection() {
+    selection.value = Array.isArray(selection.value) ? [] : null;
+  }
+
+  return {
+    selection,
+    sectionMap,
+    isSelectable,
+    isOptionSelected,
+    isSectionSelected,
+    isIndeterminate,
+    toggleValue,
+    toggleSection,
+    selectAll,
+    clearSelection,
+  };
+}

package/src/components/pageheader/MPageHeader.spec.ts

@@ -31,15 +31,29 @@ describe('MPageHeader', () => {
       expect(wrapper.find('.slot-content').exists()).toBe(true);
     });
 
-    it('renders actions slot when provided', () => {
+    it('renders features slot when provided', () => {
       const wrapper = shallowMount(MPageHeader, {
         props: { title: 'My Page' },
         slots: {
-          actions: '<button class="action-btn">Action</button>',
+          actions: '<button class="feature-btn">Feature</button>',
         },
       });
 
-      expect(wrapper.find('.action-btn').exists()).toBe(true);
+      expect(wrapper.find('.feature-btn').exists()).toBe(true);
+      expect(wrapper.find('.mc-page-header__features-wrapper').exists()).toBe(
+        true,
+      );
+    });
+
+    it('renders context slot when provided', () => {
+      const wrapper = shallowMount(MPageHeader, {
+        props: { title: 'My Page' },
+        slots: {
+          context: '<div class="context-slot">Context</div>',
+        },
+      });
+
+      expect(wrapper.find('.context-slot').exists()).toBe(true);
     });
 
     it('renders tabs slot when provided', () => {

package/src/components/pageheader/MPageHeader.stories.ts

@@ -2,13 +2,18 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 import MPageHeader from './MPageHeader.vue';
 import MTabs from '../tabs/MTabs.vue';
-import MIconButton from '../iconbutton/MIconButton.vue';
-import { Search24, HelpCircle24, Notification24 } from '@mozaic-ds/icons-vue';
-import MSelect from '../select/MSelect.vue';
+import MPageHeaderFeature from '../pageheaderfeature/MPageHeaderFeature.vue';
+import MPageHeaderContext from '../pageheadercontext/MPageHeaderContext.vue';
+import { HelpCircle20, Search20, Notification20 } from '@mozaic-ds/icons-vue';
+import { ref } from 'vue';
 
 const meta: Meta<typeof MPageHeader> = {
   title: 'Structure/Page Header',
   component: MPageHeader,
+  subcomponents: {
+    MPageHeaderFeature,
+    MPageHeaderContext,
+  },
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -26,61 +31,51 @@ const meta: Meta<typeof MPageHeader> = {
     statusLabel: 'Information',
     extraInfo: 'Additional information',
     actions: `
-      <MIconButton
-        ghost
-        aria-label="Search button"
-      >
-        <template #icon>
-          <Search24 />
-        </template>
-      </MIconButton>
-      <MIconButton
-        ghost
-        aria-label="Help button"
-      >
-        <template #icon>
-          <HelpCircle24 />
-        </template>
-      </MIconButton>
-      <MIconButton
-        ghost
-        aria-label="Notification button"
-      >
-        <template #icon>
-          <Notification24 />
-        </template>
-      </MIconButton>
-      <MSelect
-        id="scope-select"
-        aria-label="Scope select"
-        size="s"
-        placeholder="Choose a scope"
-        :options='[{ "text": "Option1", "value": "option1"}, { "text": "Option2", "value": "option2"}]'
+      <MPageHeaderFeature
+        label="Search"
+        :icon="Search20"
+        @action="handleFeatureClick"
       />
-    `,
+
+      <MPageHeaderFeature
+        label="Help"
+        :icon="HelpCircle20"
+        @action="handleFeatureClick"
+      />
+
+      <MPageHeaderFeature
+        label="Notifications"
+        :icon="Notification20"
+        @action="handleFeatureClick"
+      />
+      `,
+    context: `<MPageHeaderContext v-model="context" :options="[{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]" />`,
     tabs: `
-      <MTabs :tabs='[{ "label": "Label" }, { "label": "Label" }, { "label": "Label" }, { "label": "Label" }]' />
+      <MTabs size="s" :tabs='[{ "label": "Label" }, { "label": "Label" }, { "label": "Label" }, { "label": "Label" }]' />
     `,
   },
   render: (args) => ({
     components: {
       MPageHeader,
       MTabs,
-      MIconButton,
-      Search24,
-      HelpCircle24,
-      Notification24,
-      MSelect,
+      MPageHeaderFeature,
+      MPageHeaderContext,
     },
     setup() {
       const handleBackButtonClick = action('back');
       const handleMenuClick = action('toggle-menu');
+      const handleFeatureClick = action('action');
+      const context = ref('');
 
       return {
         args,
-
+        context,
+        HelpCircle20,
+        Search20,
+        Notification20,
         handleBackButtonClick,
         handleMenuClick,
+        handleFeatureClick,
       };
     },
     template: `
@@ -91,6 +86,7 @@ const meta: Meta<typeof MPageHeader> = {
       >
         <template v-if="${'tabs' in args}" v-slot:tabs>${args.tabs}</template>
         <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
+        <template v-if="${'context' in args}" v-slot:context>${args.context}</template>
       </MPageHeader>
     `,
   }),

package/src/components/pageheader/MPageHeader.vue

@@ -7,27 +7,29 @@
   >
     <div class="mc-page-header__top-wrapper">
       <div class="mc-page-header__top-content">
-        <MIconButton
-          v-if="backButton"
-          ghost
-          aria-label="Back button"
-          @click="emit('back')"
-        >
-          <template #icon>
-            <ArrowBack24 />
-          </template>
-        </MIconButton>
-
         <div class="mc-page-header__content-wrapper">
-          <span class="mc-page-header__title">
-            {{ title }}
-          </span>
+          <div class="mc-page-header__title-wrapper">
+            <MIconButton
+              v-if="backButton"
+              ghost
+              aria-label="Back button"
+              @click="emit('back')"
+            >
+              <template #icon>
+                <ArrowBack24 />
+              </template>
+            </MIconButton>
+            <span class="mc-page-header__title">
+              {{ title }}
+            </span>
+          </div>
 
           <div v-if="status || extraInfo" class="mc-page-header__info-wrapper">
             <MStatusBadge
               v-if="statusLabel && status"
               :label="statusLabel"
               :status="status"
+              size="s"
             />
 
             <span v-if="extraInfo" class="mc-page-header__extra-info">
@@ -52,7 +54,11 @@
         </MIconButton>
 
         <div class="mc-page-header__actions-content">
-          <slot name="actions" />
+          <div v-if="$slots.actions" class="mc-page-header__features-wrapper">
+            <slot name="actions" />
+          </div>
+
+          <slot name="context" />
         </div>
       </div>
     </div>
@@ -111,9 +117,13 @@ const emit = defineEmits<{
 
 defineSlots<{
   /**
-   * Use this slot to insert action items in the top content.
+   * Use this slot to insert feature items in the top content.
    */
   actions?: VNode;
+  /**
+   * Use this slot to insert context switcher component.
+   */
+  context?: VNode;
   /**
    * Use this slot to insert any content below the Page Header top content.
    */

package/src/components/pageheader/README.md

@@ -18,7 +18,8 @@ The Page Header is a fundamental component that structures the top part of an in
 
 | Name | Description |
 | --- | --- |
-| `actions` | Use this slot to insert action items in the top content. |
+| `actions` | Use this slot to insert feature items in the top content. |
+| `context` | Use this slot to insert context switcher component. |
 | `content` | Use this slot to insert any content below the Page Header top content. |
 | `tabs` | Use this slot to insert a tab in the header. |
 

package/src/components/pageheadercontext/MPageHeaderContext.spec.ts

@@ -0,0 +1,155 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { nextTick } from 'vue';
+import MPageHeaderContext from './MPageHeaderContext.vue';
+
+const options = [
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+];
+
+const stubs = {
+  MOptionListbox: {
+    name: 'MOptionListbox',
+    props: ['modelValue', 'options', 'multiple', 'id'],
+    emits: ['update:modelValue'],
+    template: '<div class="option-listbox-stub" />',
+  },
+};
+
+describe('MPageHeaderContext', () => {
+  it('renders selected option label in single mode', () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: 2,
+        options,
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-page-header__context-switcher').text()).toContain(
+      'Option 2',
+    );
+  });
+
+  it('falls back to provided label when no option matches modelValue', () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: 999,
+        options,
+        label: 'Fallback context',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-page-header__context-switcher').text()).toContain(
+      'Fallback context',
+    );
+  });
+
+  it('always uses label in multiple mode', () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: [1],
+        options,
+        multiple: true,
+        label: 'Multi context',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-page-header__context-switcher').text()).toContain(
+      'Multi context',
+    );
+  });
+
+  it('toggles listbox visibility when switcher button is clicked', async () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: null,
+        options,
+      },
+      global: { stubs },
+    });
+
+    const listbox = wrapper.find('.mc-page-header__context-switcher-listbox');
+    expect(listbox.classes()).toContain(
+      'mc-page-header__context-switcher-listbox--hidden',
+    );
+
+    await wrapper.find('.mc-page-header__context-switcher').trigger('click');
+    expect(listbox.classes()).not.toContain(
+      'mc-page-header__context-switcher-listbox--hidden',
+    );
+  });
+
+  it('emits update:modelValue when the listbox emits an update', async () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: null,
+        options,
+      },
+      global: { stubs },
+    });
+
+    wrapper
+      .findComponent({ name: 'MOptionListbox' })
+      .vm.$emit('update:modelValue', 1);
+    await nextTick();
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1]);
+  });
+
+  it('closes the listbox on outside click', async () => {
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: null,
+        options,
+      },
+      global: { stubs },
+      attachTo: document.body,
+    });
+
+    await wrapper.find('.mc-page-header__context-switcher').trigger('click');
+    expect(
+      wrapper
+        .find('.mc-page-header__context-switcher-listbox')
+        .classes()
+        .includes('mc-page-header__context-switcher-listbox--hidden'),
+    ).toBe(false);
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await nextTick();
+
+    expect(
+      wrapper
+        .find('.mc-page-header__context-switcher-listbox')
+        .classes()
+        .includes('mc-page-header__context-switcher-listbox--hidden'),
+    ).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('registers and removes click listener on mount lifecycle', () => {
+    const addSpy = vi.spyOn(document, 'addEventListener');
+    const removeSpy = vi.spyOn(document, 'removeEventListener');
+
+    const wrapper = mount(MPageHeaderContext, {
+      props: {
+        modelValue: null,
+        options,
+      },
+      global: { stubs },
+    });
+
+    expect(addSpy).toHaveBeenCalledWith('click', expect.any(Function));
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('click', expect.any(Function));
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+});

package/src/components/pageheadercontext/MPageHeaderContext.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="mc-page-header__context-switcher-wrapper">
+    <button
+      type="button"
+      class="mc-page-header__context-switcher"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      aria-haspopup="listbox"
+      aria-controls="listbox-contextSwitcherMenu"
+      @click="isOpen = !isOpen"
+    >
+      <span> {{ contextLabel }} </span>
+      <ChevronDown20 />
+    </button>
+
+    <div
+      :class="{
+        'mc-page-header__context-switcher-listbox': true,
+        'mc-page-header__context-switcher-listbox--hidden': !isOpen,
+        'mc-page-header__context-switcher-listbox--multiple': props.multiple,
+      }"
+    >
+      <MOptionListbox
+        id="contextSwitcherMenu"
+        v-model="model"
+        :options="props.options"
+        :multiple="props.multiple"
+        :open="isOpen"
+        @open="isOpen = true"
+        @close="isOpen = false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDown20 } from '@mozaic-ds/icons-vue';
+import MOptionListbox from '../optionListbox/MOptionListbox.vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+/**
+ * The Page Header Context component provides a compact context switcher integrated in the page header.
+ * It allows selecting a single context or multiple contexts from a list of options.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current selected value.
+     */
+    modelValue: string | number | null | (string | number)[];
+    /**
+     * Fallback label displayed when no option is selected, or main label in multiple mode.
+     */
+    label?: string;
+    /**
+     * Enables multiple selection mode.
+     */
+    multiple?: boolean;
+    /**
+     * Available options in the context switcher list.
+     */
+    options: Array<{
+      /**
+       * Option label displayed in the list.
+       */
+      label: string;
+      /**
+       * Option value emitted on selection.
+       */
+      value: string | number;
+    }>;
+  }>(),
+  {
+    label: 'Default label',
+    multiple: false,
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected value changes.
+   */
+  (
+    e: 'update:modelValue',
+    value: string | number | null | (string | number)[],
+  ): void;
+}>();
+
+const isOpen = ref(false);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value: string | number | null | (string | number)[]) => {
+    emit('update:modelValue', value);
+  },
+});
+
+const contextLabel = computed(() => {
+  if (props.multiple) {
+    return props.label;
+  } else {
+    const selectedOption = props.options.find(
+      (option) => option.value === props.modelValue,
+    );
+    return selectedOption ? selectedOption.label : props.label;
+  }
+});
+
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.mc-page-header__context-switcher-wrapper')) {
+    isOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/page-header';
+</style>

package/src/components/pageheadercontext/README.md

@@ -0,0 +1,33 @@
+# MPageHeaderContext
+
+The Page Header Context component provides a compact context switcher integrated in the page header. It allows selecting a single context or multiple contexts from a list of options.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | Current selected value. | `string` `number` `(string` `number)[]` `null` | - |
+| `label` | Fallback label displayed when no option is selected, or main label in multiple mode. | `string` | `"Default label"` |
+| `multiple` | Enables multiple selection mode. | `boolean` | `false` |
+| `options*` | Available options in the context switcher list. | `{ label: string; value: string` `number; }[]` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string` `number` `(string` `number)[]` `null]` |
+
+## Dependencies
+
+### Depends on
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPageHeaderContext --> MOptionListbox
+style MPageHeaderContext fill:#008240,stroke:#333,stroke-width:4px
+```