@mozaic-ds/vue 2.15.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -41,7 +41,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.11.0",
+    "@mozaic-ds/styles": "^2.13.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -57,6 +57,7 @@
     "@storybook/addon-themes": "^10.0.4",
     "@storybook/vue3-vite": "^10.0.4",
     "@types/jsdom": "^28.0.0",
+    "@types/lodash": "^4.17.23",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^4.0.7",
     "@vitest/eslint-plugin": "^1.1.38",

package/src/components/actionlistbox/MActionListbox.spec.ts

@@ -24,6 +24,7 @@ const items = [
     icon: DummyIcon,
   },
   {
+    id: 'move',
     label: 'Move to...',
     icon: DummyIcon,
   },
@@ -121,4 +122,17 @@ describe('MActionListbox', () => {
     expect(wrapper.emitted('close')).toBeTruthy();
     expect(wrapper.emitted('close')?.length).toBe(1);
   });
+
+  it('emits "action" when an item is clicked', async () => {
+    const wrapper = mountComponent({ title: 'Action List' });
+
+    const actions = wrapper.findAll('.mc-action-list__button');
+    await actions[0].trigger('click');
+
+    expect(wrapper.emitted('action')).toBeTruthy();
+    expect(wrapper.emitted('action')?.[0][0]).toBe(0);
+
+    await actions[1].trigger('click');
+    expect(wrapper.emitted('action')?.[1][0]).toBe('move');
+  });
 });

package/src/components/actionlistbox/MActionListbox.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MActionListbox from './MActionListbox.vue';
 import MButton from '../button/MButton.vue';
@@ -25,10 +26,10 @@ const meta: Meta<typeof MActionListbox> = {
         <template>
           <MActionListbox
             :items="[
-              { label: 'Duplicate', icon: Copy20, disabled: true },
-              { label: 'Move to...', icon: ArrowTopRight20 },
-              { label: 'Download', icon: Download20 },
-              { label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
+              { id: 'item-1', label: 'Duplicate', icon: Copy20, disabled: true },
+              { id: 'item-2', label: 'Move to...', icon: ArrowTopRight20 },
+              { id: 'item-3', label: 'Download', icon: Download20 },
+              { id: 'item-4', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
             ]"
             title="Listbox title (optional)"
           />
@@ -41,19 +42,23 @@ const meta: Meta<typeof MActionListbox> = {
     title: 'Listbox title (optional)',
     items: [
       {
+        id: 'item-1',
         label: 'Duplicate',
         icon: Copy20,
         disabled: true,
       },
       {
+        id: 'item-2',
         label: 'Move to...',
         icon: ArrowTopRight20,
       },
       {
+        id: 'item-3',
         label: 'Download',
         icon: Download20,
       },
       {
+        id: 'item-4',
         label: 'Delete',
         icon: Trash20,
         appearance: 'danger',
@@ -64,10 +69,11 @@ const meta: Meta<typeof MActionListbox> = {
   render: (args) => ({
     components: { MActionListbox },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
-        <MActionListbox v-bind="args" />
+        <MActionListbox v-bind="args" @action="handleAction" />
     `,
   }),
 };
@@ -80,11 +86,12 @@ export const Activator: Story = {
   render: (args) => ({
     components: { MActionListbox, MButton },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
       <div>
-        <MActionListbox v-bind="args">
+        <MActionListbox v-bind="args" @action="handleAction">
           <template #activator="{id}">
             <MButton :popovertarget="id">Activator</MButton>
           </template>

package/src/components/actionlistbox/MActionListbox.vue

@@ -42,7 +42,11 @@
               ]"
               role="menuitem"
             >
-              <button type="button" class="mc-action-list__button">
+              <button
+                type="button"
+                class="mc-action-list__button"
+                @click="emit('action', item?.id || index)"
+              >
                 <component
                   v-if="item.icon"
                   class="mc-action-list__icon"
@@ -85,6 +89,10 @@ const props = withDefaults(
      */
 
     items: Array<{
+      /**
+       * Unique identifier for the item.
+       */
+      id?: string;
       /**
        * The icon displayed for the item from Mozaic-icon-vue.
        */
@@ -115,6 +123,10 @@ const emit = defineEmits<{
    * Emits when the close button is clicked.
    */
   (on: 'close'): void;
+  /**
+   * Emits when an item is clicked, providing its id or index.
+   */
+  (on: 'action', value: string | number): void;
 }>();
 
 const slots = defineSlots<{

package/src/components/actionlistbox/README.md

@@ -9,7 +9,7 @@ An action list is a contextual menu that presents a list of available actions re
 | --- | --- | --- | --- | 
 | `title` | title displayed in mobile version. | `string` | - |
 | `position` | Defines the position of the listbox relative to its trigger or container. | `"bottom"` `"top"` `"left"` `"right"` | `"bottom"` |
-| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
+| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ id?: string` `undefined; icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
 
 ## Slots
 
@@ -22,6 +22,7 @@ An action list is a contextual menu that presents a list of available actions re
 | Name | Description | Type |
 | --- | --- | --- |
 | `close` | Emits when the close button is clicked. | [] |
+| `action` | Emits when an item is clicked, providing its id or index. | [value: string | number] |
 
 ## Dependencies
 

package/src/components/button/README.md

@@ -41,6 +41,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 
 - [MFileUploaderItem](../fileuploaderitem)
 - [MNavigationIndicator](../navigationindicator)
+- [MOptionListbox](../optionListbox)
 - [MPagination](../pagination)
 - [MPasswordInput](../passwordinput)
 - [MStepperBottomBar](../stepperbottombar)
@@ -52,6 +53,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 graph TD;
   MFileUploaderItem --> MButton
   MNavigationIndicator --> MButton
+  MOptionListbox --> MButton
   MPagination --> MButton
   MPasswordInput --> MButton
   MStepperBottomBar --> MButton

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

@@ -0,0 +1,246 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref, nextTick } from 'vue';
+import MCombobox from './MCombobox.vue';
+
+const MOptionListboxStub = defineComponent({
+  name: 'MOptionListbox',
+  props: [
+    'modelValue',
+    'open',
+    'multiple',
+    'search',
+    'actions',
+    'checkableSections',
+    'searchPlaceholder',
+    'selectLabel',
+    'clearLabel',
+    'options',
+    'id',
+  ],
+  emits: ['update:modelValue', 'open', 'close'],
+  setup() {
+    const activeIndex = ref(-1);
+    const listboxEl = ref(document.createElement('div'));
+
+    // On crée une fonction mock que l’on expose
+    const toggleValue = vi.fn();
+
+    return {
+      activeIndex,
+      listboxEl,
+      handleKeydown: () => {},
+      toggleValue, // <- expose ici
+    };
+  },
+  template: `<div />`,
+});
+
+const MTagStub = defineComponent({
+  name: 'MTag',
+  props: ['id', 'label', 'type', 'size'],
+  emits: ['remove-tag'],
+  template: `<div class="m-tag-stub">{{ label }}</div>`,
+});
+
+const MButtonStub = defineComponent({
+  name: 'MButton',
+  props: ['outlined', 'size'],
+  emits: ['click'],
+  template: `<button @click="$emit('click')"><slot/></button>`,
+});
+
+const CrossCircleFilled24 = defineComponent({
+  name: 'CrossCircleFilled24',
+  template: `<svg/>`,
+});
+const ChevronDown24 = defineComponent({
+  name: 'ChevronDown24',
+  template: `<svg/>`,
+});
+
+describe('MCombobox', () => {
+  const options = [
+    { label: 'One', value: 1 },
+    { label: 'Two', value: 2 },
+    { label: 'Three', value: 3 },
+  ];
+
+  it('renders placeholder when no selection', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.exists()).toBe(true);
+    expect(control.text()).toBe('Select an option');
+  });
+
+  it('renders selected label for single value', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: 1, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.text()).toBe('One');
+  });
+
+  it('multiple selection shows joins values', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: [1, 2], multiple: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-combobox__control').text()).toBe('1, 2');
+  });
+
+  it('toggles listbox open/close on control click', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    await control.trigger('click');
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+
+  it('clear button clears selection and emits update:modelValue', async () => {
+    const wrapperSingle = mount(MCombobox, {
+      props: { modelValue: 1, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnSingle = wrapperSingle.find('.mc-combobox__clear');
+    expect(clearBtnSingle.exists()).toBe(true);
+    await clearBtnSingle.trigger('click');
+    const emittedSingle = wrapperSingle.emitted('update:modelValue') || [];
+    expect(emittedSingle.length).toBeGreaterThan(0);
+    expect(emittedSingle[emittedSingle.length - 1][0]).toBeNull();
+
+    const wrapperMulti = mount(MCombobox, {
+      props: { modelValue: [1], multiple: true, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnMulti = wrapperMulti.find('.mc-combobox__clear');
+    expect(clearBtnMulti.exists()).toBe(true);
+    await clearBtnMulti.trigger('click');
+    const emittedMulti = wrapperMulti.emitted('update:modelValue') || [];
+    expect(emittedMulti.length).toBeGreaterThan(0);
+
+    const last = emittedMulti[emittedMulti.length - 1][0];
+    expect(Array.isArray(last)).toBe(true);
+    expect(last).toEqual([]);
+  });
+
+  it('activeDescendant reflects child listbox activeIndex', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const listboxRef = (wrapper.vm as InstanceType<typeof MCombobox>).$refs
+      .listbox as { activeIndex: number };
+    expect(listboxRef).toBeTruthy();
+
+    listboxRef.activeIndex = 2;
+    await nextTick();
+
+    const control = wrapper.find('.mc-combobox__control');
+    const attr = control.attributes()['aria-activedescendant'];
+    expect(attr).toBeTruthy();
+
+    expect(attr.includes('-2')).toBe(true);
+  });
+
+  it('clicking outside closes the listbox', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    document.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await nextTick();
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+});

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>
+    `,
+  }),
+};