@mozaic-ds/vue 2.14.0 → 2.16.0

package/src/components/optionListbox/MOptionListbox.vue

@@ -0,0 +1,470 @@
+<template>
+  <div
+    ref="listboxEl"
+    class="mc-option-listbox mc-listbox__content mc-combobox__listbox"
+  >
+    <template v-if="search">
+      <div class="mc-option-listbox__search">
+        <MTextInput
+          ref="textInput"
+          v-model="searchText"
+          role="combobox"
+          :id="`search-${id}`"
+          size="s"
+          :placeholder="searchPlaceholder"
+          autocomplete="off"
+          :aria-expanded="open"
+          :aria-controls="`listbox-${id}`"
+          aria-autocomplete="list"
+          :aria-activedescendant="activeDescendantId"
+          @input="updateFilteredResults"
+          @keydown="handleKeydown"
+        >
+          <template #icon>
+            <Search24 />
+          </template>
+        </MTextInput>
+      </div>
+
+      <hr class="mc-option-listbox__separator" />
+    </template>
+
+    <template v-if="multiple && actions">
+      <div class="mc-option-listbox__actions">
+        <MButton appearance="accent" ghost size="s" @click="selectAll">
+          {{ selectLabel }}
+        </MButton>
+        <MButton appearance="standard" ghost size="s" @click="clearSelection">
+          {{ clearLabel }}
+        </MButton>
+      </div>
+      <hr class="mc-option-listbox__separator" />
+    </template>
+
+    <ul
+      class="mc-option-listbox__list"
+      role="listbox"
+      :id="`listbox-${id}`"
+      :tabindex="-1"
+      aria-label="Suggestions"
+      :aria-multiselectable="multiple"
+    >
+      <li
+        v-for="(item, index) in filteredResults"
+        :key="index"
+        :id="`option-${id}-${index}`"
+        :class="{
+          'mc-option-listbox__item': true,
+          'mc-option-listbox__item--section': item.type === 'section',
+          'mc-option-listbox__item--readonly': readonly,
+          'mc-option-listbox__item--disabled': item.disabled,
+          'mc-option-listbox__item--selectable': isSelectable(item),
+          'mc-option-listbox__item--active': activeIndex === index,
+          'mc-option-listbox__item--selected':
+            item.type === 'section'
+              ? isSectionSelected(item) || isIndeterminate(item)
+              : isOptionSelected(item),
+        }"
+        v-bind="
+          item.type === 'section' && !checkableSections
+            ? {
+                role: 'presentation',
+              }
+            : {
+                role: 'option',
+                ['aria-disabled']: item.disabled,
+                ['aria-selected']: isOptionSelected(item),
+                onClick: () =>
+                  item.type === 'section'
+                    ? toggleSection(item)
+                    : toggleValue(item),
+              }
+        "
+      >
+        <div class="mc-option-listbox__label">
+          <slot v-if="item.type !== 'section'" name="optionPrefix" />
+
+          <div class="mc-option-listbox__content">
+            <span
+              :class="
+                item.type === 'section'
+                  ? 'mc-option-listbox__section-title'
+                  : 'mc-option-listbox__text'
+              "
+            >
+              {{ item.label }}
+            </span>
+
+            <span v-if="item.content" class="mc-option-listbox__additional">
+              {{ item.content }}
+            </span>
+          </div>
+
+          <div class="mc-option-listbox__spacer"></div>
+
+          <template v-if="isSelectable(item)">
+            <span
+              v-if="item.type === 'section'"
+              class="mc-option-listbox__checkbox"
+            >
+              <component :is="isIndeterminate(item) ? Less20 : Check20" />
+            </span>
+
+            <template v-else>
+              <span v-if="multiple" class="mc-option-listbox__checkbox">
+                <Check20 />
+              </span>
+
+              <CheckCircleFilled24
+                v-else
+                class="mc-option-listbox__selection-icon"
+              />
+            </template>
+          </template>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch, type VNode } from 'vue';
+import MButton from '../button/MButton.vue';
+import MTextInput from '../textinput/MTextInput.vue';
+import {
+  CheckCircleFilled24,
+  Search24,
+  Less20,
+  Check20,
+} from '@mozaic-ds/icons-vue';
+import { debounce } from 'lodash';
+
+/**
+ * An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.
+ */
+export type ListboxOption = {
+  label: string;
+  content?: string;
+  value?: string | number;
+  disabled?: boolean;
+  type?: 'option' | 'section';
+};
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected value(s) of the listbox.
+     */
+    modelValue: string | number | null | (string | number)[];
+    /**
+     * Unique identifier for the listbox.
+     */
+    id: string;
+    /**
+     * Whether the listbox is open.
+     */
+    open?: boolean;
+    /**
+     * Enable multiple selection.
+     */
+    multiple?: boolean;
+    /**
+     * Make the listbox read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Show a search input above the options.
+     */
+    search?: boolean;
+    /**
+     * Show select all / clear buttons when multiple.
+     */
+    actions?: boolean;
+    /**
+     * Enable checkable section headers.
+     */
+    checkableSections?: boolean;
+    /**
+     * Placeholder text for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Label for the "Select all" button.
+     */
+    selectLabel?: string;
+    /**
+     * Label for the "Clear selection" button.
+     */
+    clearLabel?: string;
+    /**
+     * Array of options and sections to display in the listbox.
+     */
+    options: Array<ListboxOption>;
+  }>(),
+  {
+    searchPlaceholder: 'Find an option...',
+    selectLabel: 'Select all',
+    clearLabel: 'Clear',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected value changes.
+   */
+  (
+    on: 'update:modelValue',
+    value: string | number | null | (string | number)[],
+  ): void;
+  /**
+   * Emits when the listbox should open.
+   */
+  (on: 'open'): void;
+  /**
+   * Emits when the listbox should close.
+   */
+  (on: 'close'): void;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to add a prefix to options.
+   */
+  optionPrefix: VNode;
+}>();
+
+const listboxEl = useTemplateRef('listboxEl');
+const textInput = useTemplateRef('textInput');
+
+const activeIndex = ref<number>(-1);
+
+const searchText = ref('');
+
+const filteredResults = ref<ListboxOption[]>(props.options);
+
+const selection = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number | null | (string | number)[]) {
+    emit('update:modelValue', value);
+  },
+});
+
+const activeDescendantId = computed(() => {
+  return activeIndex.value >= 0
+    ? `option-${props.id}-${activeIndex.value}`
+    : undefined;
+});
+
+const updateFilteredResults = debounce(() => {
+  const search = searchText.value.toLowerCase().trim();
+
+  if (!search) {
+    filteredResults.value = props.options;
+    return;
+  }
+
+  filteredResults.value = props.options.filter((option) =>
+    option.label.toLowerCase().includes(search),
+  );
+
+  activeIndex.value = filteredResults.value.length ? 0 : -1;
+}, 200);
+
+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 toggleSection(item: ListboxOption) {
+  if (!props.checkableSections || !props.multiple) return;
+
+  const sectionItems =
+    sectionMap.value.get(item.value?.toString() || item.label) || [];
+  const selectedItems = selection.value as (string | number)[];
+
+  if (isSectionSelected(item)) {
+    selection.value = selectedItems.filter(
+      (opt) => !sectionItems.find((item) => item.value === opt),
+    );
+  } else {
+    selection.value = [
+      ...selectedItems,
+      ...sectionItems
+        .filter((opt) => !selectedItems.includes(opt.value!))
+        .map((item) => item.value!),
+    ];
+  }
+}
+
+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 selectAll() {
+  selection.value = [
+    ...props.options
+      .filter(
+        (option) =>
+          !!option.value && !option.disabled && option.type !== 'section',
+      )
+      .map((item) => item.value!),
+  ];
+}
+
+function clearSelection() {
+  if (Array.isArray(selection.value)) {
+    selection.value = [];
+  } else {
+    selection.value = null;
+  }
+}
+
+function isSelectable(item: ListboxOption) {
+  return (
+    (item.type !== 'section' && !item.disabled) ||
+    (item.type === 'section' && props.checkableSections && props.multiple)
+  );
+}
+
+function isSectionSelected(item: ListboxOption) {
+  if (!props.checkableSections || !props.multiple) return false;
+
+  const sectionItems =
+    sectionMap.value.get(item.value?.toString() || item.label) || [];
+  const selectedItems = selection.value as (string | number)[];
+
+  return sectionItems.every((opt) => selectedItems.includes(opt.value!));
+}
+
+function isOptionSelected(item: ListboxOption) {
+  if (!item.value) return false;
+
+  if (Array.isArray(selection.value)) {
+    return (selection.value as (string | number)[])?.includes(item.value!);
+  } else {
+    return item.value === selection.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 moveActive(delta: number) {
+  if (!props.open || filteredResults.value.length === 0) return;
+
+  let nextIndex = activeIndex.value + delta;
+
+  if (nextIndex < 0) nextIndex = filteredResults.value.length - 1;
+  if (nextIndex >= filteredResults.value.length) nextIndex = 0;
+
+  while (!isSelectable(filteredResults.value[nextIndex])) {
+    nextIndex += delta > 0 ? 1 : -1;
+    if (nextIndex < 0) nextIndex = filteredResults.value.length - 1;
+    if (nextIndex >= filteredResults.value.length) nextIndex = 0;
+  }
+
+  activeIndex.value = nextIndex;
+}
+
+function selectActive() {
+  const item = filteredResults.value[activeIndex.value];
+  if (!item || !isSelectable(item)) return;
+
+  if (item.type === 'section') {
+    toggleSection(item);
+  } else {
+    toggleValue(item);
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      if (!props.open) {
+        emit('open');
+        activeIndex.value = 0;
+      } else {
+        moveActive(1);
+      }
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      if (!props.open) {
+        emit('open');
+        activeIndex.value = filteredResults.value.length - 1;
+      } else {
+        moveActive(-1);
+      }
+      break;
+    case 'Enter':
+      event.preventDefault();
+      if (!props.open) {
+        emit('open');
+        activeIndex.value = 0;
+      } else {
+        selectActive();
+      }
+      break;
+    case 'Escape':
+      event.preventDefault();
+      emit('close');
+      break;
+  }
+}
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      setTimeout(() => {
+        textInput.value?.focus();
+      }, 50);
+    }
+  },
+);
+
+defineExpose({
+  handleKeydown,
+  toggleValue,
+  clearSelection,
+  listboxEl,
+  activeIndex,
+});
+</script>
+
+<style lang="scss">
+@use '@mozaic-ds/styles/components/option-listbox';
+</style>

package/src/components/optionListbox/README.md

@@ -0,0 +1,63 @@
+# MOptionListbox
+
+An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | The current selected value(s) of the listbox. | `string` `number` `(string` `number)[]` `null` | - |
+| `id*` | Unique identifier for the listbox. | `string` | - |
+| `open` | Whether the listbox is open. | `boolean` | - |
+| `multiple` | Enable multiple selection. | `boolean` | - |
+| `readonly` | Make the listbox read-only. | `boolean` | - |
+| `search` | Show a search input above the options. | `boolean` | - |
+| `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
+| `checkableSections` | Enable checkable section headers. | `boolean` | - |
+| `searchPlaceholder` | Placeholder text for the search input. | `string` | `"Find an option..."` |
+| `selectLabel` | Label for the "Select all" button. | `string` | `"Select all"` |
+| `clearLabel` | Label for the "Clear selection" button. | `string` | `"Clear"` |
+| `options*` | Array of options and sections to display in the listbox. | `ListboxOption[]` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `optionPrefix` | Use this slot to add a prefix to options. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string` `number` `(string` `number)[]` `null]` |
+| `close` | Emits when the listbox should close. | [] |
+| `open` | Emits when the selected value changes. / ( on: 'update:modelValue', value: string | number | null | (string | number)[], ): void; /** Emits when the listbox should open. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MTextInput](../textinput)
+
+### Graph
+
+```mermaid
+graph TD;
+  MOptionListbox --> MButton
+  MOptionListbox --> MTextInput
+style MOptionListbox fill:#008240,stroke:#333,stroke-width:4px
+```
+
+### Used By
+
+- [MCombobox](../combobox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCombobox --> MOptionListbox
+style MOptionListbox fill:#008240,stroke:#333,stroke-width:4px
+```

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

@@ -98,9 +98,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
-      ).toBe(true);
+      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
+        true,
+      );
     });
 
     it('does not render status badge if statusLabel is missing', () => {
@@ -111,9 +111,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
-      ).toBe(false);
+      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
+        false,
+      );
     });
 
     it('renders extra info when provided', () => {
@@ -124,9 +124,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.find('.mc-page-header__extra-info').text(),
-      ).toBe('Details');
+      expect(wrapper.find('.mc-page-header__extra-info').text()).toBe(
+        'Details',
+      );
     });
 
     it('renders info wrapper only when status or extraInfo exists', () => {
@@ -134,9 +134,9 @@ describe('MPageHeader', () => {
         props: { title: 'My Page' },
       });
 
-      expect(
-        wrapper.find('.mc-page-header__info-wrapper').exists(),
-      ).toBe(false);
+      expect(wrapper.find('.mc-page-header__info-wrapper').exists()).toBe(
+        false,
+      );
     });
   });
 });

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

@@ -63,7 +63,15 @@ const meta: Meta<typeof MPageHeader> = {
     `,
   },
   render: (args) => ({
-    components: { MPageHeader, MTabs, MIconButton, Search24, HelpCircle24, Notification24, MSelect },
+    components: {
+      MPageHeader,
+      MTabs,
+      MIconButton,
+      Search24,
+      HelpCircle24,
+      Notification24,
+      MSelect,
+    },
     setup() {
       const handleBackButtonClick = action('back');
       const handleMenuClick = action('toggle-menu');

package/src/components/pageheader/MPageHeader.vue

@@ -23,10 +23,7 @@
             {{ title }}
           </span>
 
-          <div
-            v-if="status || extraInfo"
-            class="mc-page-header__info-wrapper"
-          >
+          <div v-if="status || extraInfo" class="mc-page-header__info-wrapper">
             <MStatusBadge
               v-if="statusLabel && status"
               :label="statusLabel"
@@ -55,13 +52,13 @@
         </MIconButton>
 
         <div class="mc-page-header__actions-content">
-          <slot name="actions"/>
+          <slot name="actions" />
         </div>
       </div>
     </div>
 
     <div class="mc-page-header__tabs">
-      <slot name="tabs"/>
+      <slot name="tabs" />
     </div>
   </div>
 </template>