@mozaic-ds/vue 2.15.0 → 2.17.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 name="item" v-bind="{ item }">
+            <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>
+          </slot>
+
+          <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 customize the content of each item.
+   */
+  item(props: { item: ListboxOption }): 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 |
+| --- | --- |
+| `item` | Use this slot to customize the content of each item. |
+
+## 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/overlay/MOverlay.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MOverlay
+ * Links Figma Overlay (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-19511',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MOverlay } from '@mozaic-ds/vue';
+      </script>
+
+      <MOverlay is-visible dialog-label="Overlay">
+        <p>Overlay content</p>
+      </MOverlay>`,
+  },
+);

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

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MPageHeader
+ * Links Figma Page header (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=16419-62764',
+  {
+    props: {
+      title: figma.string('Title'),
+      shadow: figma.boolean('Has shadow'),
+    },
+    example: ({ title, shadow }) =>
+      html`<script setup>
+        import { MPageHeader } from '@mozaic-ds/vue';
+      </script>
+
+      <MPageHeader title=${title} shadow=${shadow} />`,
+  },
+);

package/src/components/pagination/MPagination.figma.ts

@@ -0,0 +1,34 @@
+/**
+ * Code Connect mapping for MPagination
+ * Links Figma Pagination (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11558',
+  {
+    props: {
+      compact: figma.enum('Compact mode', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ compact }) =>
+      html`<script setup>
+        import { MPagination } from '@mozaic-ds/vue';
+      </script>
+
+      <MPagination
+        id="pagination-id"
+        :model-value="1"
+        :compact=${compact}
+        :options="[
+          { text: 'Page 1 of 99', value: 1 },
+          { text: 'Page 2 of 99', value: 2 },
+          { text: 'Page 99 of 99', value: 99 },
+        ]"
+        select-label="Select page"
+        aria-label="pagination"
+      ></MPagination>`,
+  },
+);

package/src/components/passwordinput/MPasswordInput.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MPasswordInput
+ * Links Figma _password input / base to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29957',
+  {
+    props: {
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+      isClearable: figma.boolean('Is clearable'),
+    },
+    example: ({ isInvalid, isClearable }) =>
+      html`<script setup>
+        import { MPasswordInput } from '@mozaic-ds/vue';
+      </script>
+
+      <MPasswordInput
+        id="password-input-id"
+        :is-invalid=${isInvalid}
+        :is-clearable=${isClearable}
+        placeholder="Enter your password"
+        model-value=""
+      ></MPasswordInput>`,
+  },
+);

package/src/components/phonenumber/MPhoneNumber.figma.ts

@@ -0,0 +1,47 @@
+/**
+ * Code Connect mapping for MPhoneNumber
+ * Links Figma _phone number input / base to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5022-21080',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        Disabled: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MPhoneNumber } from '@mozaic-ds/vue';
+      </script>
+
+      <MPhoneNumber
+        id="phone-number-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+      ></MPhoneNumber>`,
+  },
+);