@mozaic-ds/vue 2.14.0 → 2.16.0

package/src/components/combobox/MCombobox.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCombobox from './MCombobox.vue';
+import { computed, ref } from 'vue';
+import type { ListboxOption } from '../optionListbox/MOptionListbox.vue';
+import MTag from '../tag/MTag.vue';
+import MButton from '../button/MButton.vue';
+
+const defaultOptions = Array.from({ length: 12 }).map((_el, index) => {
+  return {
+    label: `Option ${index + 1}`,
+    value: `option${index + 1}`,
+  };
+});
+
+let optionCount = 0;
+
+const optionsWithSections: ListboxOption[] = Array.from({ length: 12 }).map(
+  (_el, index) => {
+    const isSection = index % 3 === 0;
+
+    if (!isSection) {
+      optionCount++;
+    }
+
+    return {
+      label: `${isSection ? 'Section' : 'Option'} ${isSection ? index / 3 + 1 : optionCount}`,
+      value: !isSection ? `option${optionCount}` : undefined,
+      type: isSection ? 'section' : 'option',
+    };
+  },
+);
+
+const meta: Meta<typeof MCombobox> = {
+  title: 'Form elements/Combobox',
+  component: MCombobox,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.',
+      },
+      story: {
+        height: '300px',
+      },
+    },
+  },
+  args: {
+    modelValue: null,
+    checkableSections: true,
+    options: defaultOptions,
+  },
+  render: (args) => ({
+    components: { MCombobox },
+    setup() {
+      const counterLabel = computed(
+        () => `${(args.modelValue as Array<unknown>)?.length} selected`,
+      );
+      return { args, counterLabel };
+    },
+    template: `
+      <MCombobox v-bind="args" v-model="args.modelValue" :counter-label="counterLabel"></MCombobox>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCombobox>;
+
+export const Default: Story = {};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    modelValue: [],
+  },
+};
+
+export const SearchInput: Story = {
+  args: {
+    search: true,
+    modelValue: [],
+    multiple: true,
+  },
+};
+
+export const ActionButtons: Story = {
+  args: {
+    modelValue: [],
+    multiple: true,
+    actions: true,
+  },
+};
+
+export const WithSections: Story = {
+  args: {
+    options: optionsWithSections,
+  },
+};
+
+export const SelectableSections: Story = {
+  args: {
+    modelValue: [],
+    multiple: true,
+    options: optionsWithSections,
+    checkableSections: true,
+  },
+};
+
+export const Clearable = {
+  args: {
+    clearable: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const AdditionalInformation: Story = {
+  args: {
+    options: defaultOptions.map((option) => ({
+      ...option,
+      content: 'Additional information',
+    })),
+  },
+};
+
+export const RemovableTags: Story = {
+  args: {
+    modelValue: [],
+    options: defaultOptions,
+    multiple: true,
+  },
+  render: (args) => ({
+    components: { MCombobox, MTag, MButton },
+    setup() {
+      function findByValue(value: string | number) {
+        return args.options.find((option) => option.value === value);
+      }
+
+      const open = ref(false);
+      const maxResultsDisplayed = ref(9);
+      const counterLabel = computed(
+        () => `${(args.modelValue as Array<unknown>)?.length} selected`,
+      );
+      return { args, counterLabel, maxResultsDisplayed, findByValue, open };
+    },
+    template: `
+      <MCombobox v-bind="args" v-model="args.modelValue" :counter-label="counterLabel" @update:open="open = $event"></MCombobox>
+
+      <template
+        v-if="!open"
+      >
+        <div style="width: 300px; display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin: 16px 0;">
+          <MTag
+            v-for="(item, index) in args.modelValue?.slice(0, maxResultsDisplayed)"
+            :key="index"
+            id="tag"
+            :label="findByValue(item)?.label || ''"
+            type="removable"
+            size="s"
+          />
+        </div>
+
+        <MButton
+          v-if="args.modelValue?.length > maxResultsDisplayed"
+          outlined
+          size="s"
+          @click="maxResultsDisplayed = args.modelValue?.length"
+        >
+          Show more
+        </MButton>
+      </template>
+    `,
+  }),
+};

package/src/components/combobox/MCombobox.vue

@@ -0,0 +1,277 @@
+<template>
+  <div
+    ref="combobox"
+    :class="{
+      'mc-combobox': true,
+      'mc-combobox--open': isOpen,
+      'mc-combobox--multiple': multiple,
+      'mc-combobox--invalid': invalid,
+      'mc-combobox--s': size === 's',
+      'mc-combobox--disabled': disabled,
+      'mc-combobox--readonly': readonly,
+    }"
+  >
+    <div class="mc-combobox__input">
+      <button
+        ref="comboboxControl"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        aria-haspopup="listbox"
+        :aria-controls="`listbox-${id}`"
+        :disabled="disabled"
+        class="mc-combobox__control"
+        aria-label="Combobox input"
+        @click="toggleListbox"
+        v-bind="
+          search
+            ? {}
+            : {
+                role: 'combobox',
+                'aria-activedescendant': activeDescendantId,
+                onKeydown: listbox?.handleKeydown,
+              }
+        "
+      >
+        {{ selectionLabel }}
+      </button>
+      <span v-if="multiple && hasValue" class="mc-combobox__counter">
+        {{ counterLabel }}
+      </span>
+
+      <button
+        v-if="clearable && hasValue"
+        type="button"
+        class="mc-combobox__clear"
+        aria-label="Clear selection"
+        @click="listbox?.clearSelection"
+      >
+        <CrossCircleFilled24 />
+      </button>
+
+      <button
+        type="button"
+        :tabindex="-1"
+        class="mc-combobox__icon"
+        aria-label="Expand options list"
+        @click="toggleListbox"
+      >
+        <ChevronDown24 />
+      </button>
+    </div>
+
+    <MOptionListbox
+      ref="listbox"
+      v-model="selection"
+      :id
+      :open="isOpen"
+      :multiple
+      :search
+      :actions
+      :checkable-sections
+      :search-placeholder
+      :select-label
+      :clear-label
+      :options
+      class="mc-combobox__listbox"
+      @open="open"
+      @close="
+        () => {
+          close();
+          comboboxControl?.focus();
+        }
+      "
+    >
+      <template #optionPrefix>
+        <slot name="optionPrefix" />
+      </template>
+    </MOptionListbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MOptionListbox, {
+  type ListboxOption,
+} from '../optionListbox/MOptionListbox.vue';
+import { CrossCircleFilled24, ChevronDown24 } from '@mozaic-ds/icons-vue';
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  useId,
+  useTemplateRef,
+  type VNode,
+} from 'vue';
+
+/**
+ * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected value(s) of the combobox.
+     */
+    modelValue: string | number | null | (string | number)[];
+    /**
+     * Enable multiple selection mode.
+     */
+    multiple?: boolean;
+    /**
+     * Size of the combobox: small ('s') or medium ('m').
+     */
+    size?: 's' | 'm';
+    /**
+     * Disable the combobox input.
+     */
+    disabled?: boolean;
+    /**
+     * Make the combobox read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the combobox as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Show a clear selection button.
+     */
+    clearable?: boolean;
+    /**
+     * Enable the search input inside the listbox.
+     */
+    search?: boolean;
+    /**
+     * Show select all / clear buttons when multiple.
+     */
+    actions?: boolean;
+    /**
+     * Enable checkable section headers in the listbox.
+     */
+    checkableSections?: boolean;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Label for the selected items counter.
+     */
+    counterLabel?: string;
+    /**
+     * 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 to display in the listbox.
+     */
+    options: Array<ListboxOption>;
+  }>(),
+  {
+    placeholder: 'Select an option',
+    counterLabel: '99 selected',
+    searchPlaceholder: 'Find an option...',
+    selectLabel: 'Select all',
+    clearLabel: 'Clear',
+    size: 'm',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected value(s) change.
+   */
+  (
+    on: 'update:modelValue',
+    value: string | number | null | (string | number)[],
+  ): void;
+  /**
+   * Emitted when the listbox is opened or closed.
+   */
+  (on: 'update:open', value: boolean): void;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to add a prefix to options.
+   */
+  optionPrefix: VNode;
+}>();
+
+const id = useId();
+
+const combobox = useTemplateRef('combobox');
+const listbox = useTemplateRef('listbox');
+const comboboxControl = useTemplateRef('comboboxControl');
+
+const isOpen = ref(false);
+
+const activeDescendantId = computed(() => {
+  const activeIndex = listbox.value?.activeIndex || -1;
+  return activeIndex >= 0 ? `option-${id}-${activeIndex}` : undefined;
+});
+
+const selection = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number | null | (string | number)[]) {
+    emit('update:modelValue', value);
+  },
+});
+
+const selectionLabel = computed(() => {
+  if (Array.isArray(selection.value)) {
+    if (!selection.value.length) return props.placeholder;
+    return (selection.value as (string | number)[]).join(', ');
+  }
+
+  return (
+    props.options.find((option) => option.value === selection.value)?.label ||
+    props.placeholder
+  );
+});
+
+const hasValue = computed(() =>
+  props.multiple
+    ? !!(selection.value as (string | number)[]).length
+    : !!selection.value,
+);
+
+function handleClickOutside(event: MouseEvent) {
+  if (
+    !combobox.value?.contains(event.target as Node) &&
+    !listbox.value?.listboxEl?.contains(event.target as Node)
+  ) {
+    close();
+  }
+}
+
+function open() {
+  isOpen.value = true;
+  emit('update:open', true);
+  document.addEventListener('click', handleClickOutside);
+}
+
+function close() {
+  isOpen.value = false;
+  emit('update:open', false);
+  document.removeEventListener('click', handleClickOutside);
+}
+
+function toggleListbox() {
+  return isOpen.value ? close() : open();
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/combobox';
+</style>

package/src/components/combobox/README.md

@@ -0,0 +1,52 @@
+# MCombobox
+
+A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | The current selected value(s) of the combobox. | `string` `number` `(string` `number)[]` `null` | - |
+| `multiple` | Enable multiple selection mode. | `boolean` | - |
+| `size` | Size of the combobox: small ('s') or medium ('m'). | `"s"` `"m"` | `"m"` |
+| `disabled` | Disable the combobox input. | `boolean` | - |
+| `readonly` | Make the combobox read-only. | `boolean` | - |
+| `invalid` | Mark the combobox as invalid. | `boolean` | - |
+| `clearable` | Show a clear selection button. | `boolean` | - |
+| `search` | Enable the search input inside the listbox. | `boolean` | - |
+| `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
+| `checkableSections` | Enable checkable section headers in the listbox. | `boolean` | - |
+| `placeholder` | Placeholder text when no value is selected. | `string` | `"Select an option"` |
+| `counterLabel` | Label for the selected items counter. | `string` | `"99 selected"` |
+| `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 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]` |
+| `update:open` | Emitted when the selected value(s) change. / ( on: 'update:modelValue', value: string | number | null | (string | number)[], ): void; /** Emitted when the listbox is opened or closed. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCombobox --> MOptionListbox
+style MCombobox fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/field/MField.stories.ts

@@ -5,6 +5,8 @@ import MField from './MField.vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import MTextArea from '../textarea/MTextArea.vue';
 import MSelect from '../select/MSelect.vue';
+import MCombobox from '../combobox/MCombobox.vue';
+import { ref } from 'vue';
 
 const meta: Meta<typeof MField> = {
   title: 'Form Elements/Field',
@@ -383,3 +385,106 @@ export const SelectInvalid: Story = {
     `,
   }),
 };
+
+export const ComboboxValid: Story = {
+  args: {
+    label: 'Label',
+    id: 'comboboxValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MCombobox
+        v-model="value"
+        :options="
+          [
+            {
+              label: 'Option 1',
+              value: 'option1',
+            },
+            {
+              label: 'Option 2',
+              value: 'option2',
+            },
+            {
+              label: 'Option 3',
+              value: 'option3',
+            },
+            {
+              label: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MCombobox },
+    setup() {
+      const value = ref(null);
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate, value };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const ComboboxInvalid: Story = {
+  args: {
+    label: 'Label',
+    id: 'comboboxValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MCombobox
+        v-model="value"
+        invalid
+        :options="
+          [
+            {
+              label: 'Option 1',
+              value: 'option1',
+            },
+            {
+              label: 'Option 2',
+              value: 'option2',
+            },
+            {
+              label: 'Option 3',
+              value: 'option3',
+            },
+            {
+              label: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MCombobox },
+    setup() {
+      const value = ref(null);
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate, value };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};