@mozaic-ds/vue 2.14.0 → 2.16.0

package/src/components/segmentedcontrol/MSegmentedControl.spec.ts

@@ -4,9 +4,9 @@ import MSegmentedControl from './MSegmentedControl.vue';
 
 describe('MSegmentedControl.vue', () => {
   const segments = [
-    { label: 'First' },
-    { label: 'Second' },
-    { label: 'Third' },
+    { id: '1', label: 'First' },
+    { id: '2', label: 'Second' },
+    { id: '3', label: 'Third' },
   ];
 
   it('renders segments with correct labels', () => {
@@ -23,42 +23,74 @@ describe('MSegmentedControl.vue', () => {
 
   it('sets default active segment based on modelValue prop', () => {
     const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 1 },
+      props: { segments, modelValue: '1' },
     });
 
     const buttons = wrapper.findAll('button');
-    expect(buttons[1].classes()).toContain(
+    expect(buttons[0].classes()).toContain(
       'mc-segmented-control__segment--selected',
     );
-    expect(buttons[1].attributes('aria-checked')).toBe('true');
+    expect(buttons[0].attributes('aria-checked')).toBe('true');
   });
 
-  it('emits update:modelValue and changes active segment on click', async () => {
-    const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 0 },
+  describe('Segment selection - string type model', () => {
+    it('emits update:modelValue and changes active segment on click', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '1' },
+      });
+
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['3']);
+
+      expect(buttons[2].classes()).toContain(
+        'mc-segmented-control__segment--selected',
+      );
+      expect(buttons[2].attributes('aria-checked')).toBe('true');
     });
 
-    const buttons = wrapper.findAll('button');
-    await buttons[2].trigger('click');
+    it('does not emit update event if clicking already active segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '2' },
+      });
 
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('click');
 
-    expect(buttons[2].classes()).toContain(
-      'mc-segmented-control__segment--selected',
-    );
-    expect(buttons[2].attributes('aria-checked')).toBe('true');
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
   });
 
-  it('does not emit update event if clicking already active segment', async () => {
-    const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 1 },
+  describe('Segment selection - number type model', () => {
+    it('emits update:modelValue and changes active segment on click', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 0 },
+      });
+
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+
+      expect(buttons[2].classes()).toContain(
+        'mc-segmented-control__segment--selected',
+      );
+      expect(buttons[2].attributes('aria-checked')).toBe('true');
     });
 
-    const buttons = wrapper.findAll('button');
-    await buttons[1].trigger('click');
+    it('does not emit update event if clicking already active segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 1 },
+      });
 
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
   });
 
   it('applies full width class when full prop is true', () => {
@@ -87,7 +119,7 @@ describe('MSegmentedControl.vue', () => {
 
   it('updates active segment when modelValue prop changes', async () => {
     const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 0 },
+      props: { segments, modelValue: '1' },
     });
 
     const buttons = wrapper.findAll('button');
@@ -95,7 +127,7 @@ describe('MSegmentedControl.vue', () => {
       'mc-segmented-control__segment--selected',
     );
 
-    await wrapper.setProps({ modelValue: 2 });
+    await wrapper.setProps({ modelValue: '3' });
 
     expect(buttons[2].classes()).toContain(
       'mc-segmented-control__segment--selected',

package/src/components/segmentedcontrol/MSegmentedControl.stories.ts

@@ -15,17 +15,22 @@ const meta: Meta<typeof MSegmentedControl> = {
     },
   },
   args: {
+    modelValue: 'label1',
     segments: [
       {
+        id: 'label1',
         label: 'Label',
       },
       {
+        id: 'label2',
         label: 'Label',
       },
       {
+        id: 'label3',
         label: 'Label',
       },
       {
+        id: 'label4',
         label: 'Label',
       },
     ],
@@ -40,6 +45,7 @@ const meta: Meta<typeof MSegmentedControl> = {
     template: `
       <MSegmentedControl
         v-bind="args"
+        v-model="args.modelValue"
         @update:modelValue="handleUpdate"
       ></MSegmentedControl>
     `,
@@ -50,25 +56,6 @@ type Story = StoryObj<typeof MSegmentedControl>;
 
 export const Default: Story = {};
 
-export const Icons: Story = {
-  args: {
-    segments: [
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-    ],
-  },
-};
-
 export const Size: Story = {
   args: { size: 'm' },
 };

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -6,11 +6,14 @@
       type="button"
       class="mc-segmented-control__segment"
       :class="{
-        'mc-segmented-control__segment--selected': isSegmentSelected(index),
+        'mc-segmented-control__segment--selected': isSegmentSelected(
+          index,
+          segment.id,
+        ),
       }"
-      :aria-checked="isSegmentSelected(index)"
+      :aria-checked="isSegmentSelected(index, segment.id)"
       role="radio"
-      @click="onClickSegment(index)"
+      @click="onClickSegment(index, segment.id)"
     >
       {{ segment.label }}
     </button>
@@ -25,9 +28,12 @@ import { computed, ref, watch } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * The selected segment index, bound via v-model.
+     * Defines the currently active tab.
+     *
+     * - If a `number` is provided, it represents the index of the segment.
+     * - If a `string` is provided, it must match the `id` of one of the segments.
      */
-    modelValue?: number;
+    modelValue?: string | number;
     /**
      * if `true`, the segmented control take the full width.
      */
@@ -40,6 +46,10 @@ const props = withDefaults(
      * An array of objects that allows you to provide all the data needed to generate the content for each segment.
      */
     segments: Array<{
+      /**
+       * Unique identifier for the segment.
+       */
+      id?: string;
       /**
        * The label displayed for the segment.
        */
@@ -59,7 +69,7 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref(props.modelValue);
+const modelValue = ref<string | number | undefined>(props.modelValue);
 
 watch(
   () => props.modelValue,
@@ -68,22 +78,26 @@ watch(
   },
 );
 
-const onClickSegment = (index: number) => {
-  if (index !== modelValue.value) {
-    modelValue.value = index;
-    emit('update:modelValue', index);
+const onClickSegment = (index: number, id?: string) => {
+  const value = typeof props.modelValue === 'number' ? index : id;
+
+  if (value !== modelValue.value) {
+    modelValue.value = value;
+    emit('update:modelValue', value);
   }
 };
 
-const isSegmentSelected = (index: number) => {
-  return modelValue.value === index;
+const isSegmentSelected = (index: number, id?: string) => {
+  const value = typeof props.modelValue === 'number' ? index : id;
+
+  return modelValue.value === value;
 };
 
 const emit = defineEmits<{
   /**
    * Emits when the selected segment changes, updating the modelValue prop.
    */
-  (on: 'update:modelValue', value: number): void;
+  (on: 'update:modelValue', value?: string | number): void;
 }>();
 </script>
 

package/src/components/segmentedcontrol/README.md

@@ -7,13 +7,16 @@ A Segmented Control allows users to switch between multiple options or views wit
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `modelValue` | The selected segment index, bound via v-model. | `number` | `0` |
+| `modelValue` | Defines the currently active tab.
+
+- If a `number` is provided, it represents the index of the segment.
+- If a `string` is provided, it must match the `id` of one of the segments. | `string` `number` | `0` |
 | `full` | if `true`, the segmented control take the full width. | `boolean` | - |
 | `size` | Determines the size of the segmented control. | `"s"` `"m"` | `"s"` |
-| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ label: string; }[]` | - |
+| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ id?: string` `undefined; label: string; }[]` | - |
 
 ## Events
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value: number] |
+| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value?: string | number] |

package/src/components/select/MSelect.vue

@@ -1,7 +1,8 @@
 <template>
-  <div :class="{
-    'mc-select': true,
-    [`mc-select--${size}`]: props.size && props.size != 'm',
+  <div
+    :class="{
+      'mc-select': true,
+      [`mc-select--${size}`]: props.size && props.size != 'm',
     }"
   >
     <select

package/src/components/sidebar/stories/DefaultCase.stories.vue

@@ -5,7 +5,7 @@
     @close="emit('close')"
   >
     <template #header>
-      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+      <MSidebarHeader title="Adeo Design System" logo="/mozaic-vue/logo.svg" />
     </template>
 
     <template #shortcuts>
@@ -49,7 +49,7 @@
         title="Dieter Rams"
         subtitle="Industrial designer"
         href="#"
-        avatar="/images/Avatar.png"
+        avatar="/mozaic-vue/images/Avatar.png"
         @log-out="emit('log-out')"
       >
         <MSidebarNavItem

package/src/components/sidebar/stories/README.md

@@ -2,6 +2,14 @@
 
 
 
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `any[]` |
+| `close` | - | `any[]` |
+| `log-out` | - | `any[]` |
+
 ## Dependencies
 
 ### Depends on

package/src/components/sidebar/stories/WithExpandOnly.stories.vue

@@ -5,7 +5,7 @@
     @close="emit('close')"
   >
     <template #header>
-      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+      <MSidebarHeader title="Adeo Design System" logo="/mozaic-vue/logo.svg" />
     </template>
 
     <template #shortcuts>

package/src/components/sidebar/stories/WithProfileInfoOnly.stories.vue

@@ -5,7 +5,7 @@
     @close="emit('close')"
   >
     <template #header>
-      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+      <MSidebarHeader title="Adeo Design System" logo="/mozaic-vue/logo.svg" />
     </template>
 
     <template #shortcuts>
@@ -50,7 +50,7 @@
         title="Dieter Rams"
         subtitle="Industrial designer"
         href="#"
-        avatar="/images/Avatar.png"
+        avatar="/mozaic-vue/images/Avatar.png"
         @log-out="emit('log-out')"
       >
         <MSidebarNavItem

package/src/components/sidebar/stories/WithSingleLevel.stories.vue

@@ -5,7 +5,7 @@
     @close="emit('close')"
   >
     <template #header>
-      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+      <MSidebarHeader title="Adeo Design System" logo="/mozaic-vue/logo.svg" />
     </template>
 
     <template #shortcuts>
@@ -33,7 +33,7 @@
         title="Dieter Rams"
         subtitle="Industrial designer"
         href="#"
-        img-src="/images/Avatar.png"
+        img-src="/mozaic-vue/images/Avatar.png"
         @log-out="emit('log-out')"
       >
         <MSidebarNavItem

package/src/components/stepperinline/MStepperInline.spec.ts

@@ -4,15 +4,15 @@ import { describe, it, expect } from 'vitest';
 
 describe('MStepperInline', () => {
   const defaultSteps = [
-    { label: 'Step 1' },
-    { label: 'Step 2' },
-    { label: 'Step 3' },
+    { id: '1', label: 'Step 1' },
+    { id: '2', label: 'Step 2' },
+    { id: '3', label: 'Step 3' },
   ];
 
   it('renders correctly with default props', () => {
     const wrapper = mount(MStepperInline, {
       props: {
-        currentStep: 1,
+        currentStep: '1',
         steps: defaultSteps,
       },
     });
@@ -28,12 +28,12 @@ describe('MStepperInline', () => {
 
   it('displays additional information when provided', () => {
     const stepsWithInfo = [
-      { label: 'Step 1', additionalInfo: 'Info 1' },
-      { label: 'Step 2', additionalInfo: 'Info 2' },
+      { id: '1', label: 'Step 1', additionalInfo: 'Info 1' },
+      { id: '1', label: 'Step 2', additionalInfo: 'Info 2' },
     ];
     const wrapper = mount(MStepperInline, {
       props: {
-        currentStep: 1,
+        currentStep: '1',
         steps: stepsWithInfo,
       },
     });
@@ -46,33 +46,68 @@ describe('MStepperInline', () => {
     );
   });
 
-  it('marks the correct step as active', async () => {
-    const wrapper = mount(MStepperInline, {
-      props: {
-        currentStep: 2,
-        steps: defaultSteps,
-      },
+  describe('currentStep as a string', () => {
+    it('marks the correct step as active', async () => {
+      const wrapper = mount(MStepperInline, {
+        props: {
+          currentStep: '2',
+          steps: defaultSteps,
+        },
+      });
+
+      const labels = wrapper.findAll('.mc-stepper-inline__label');
+      expect(labels[1].classes()).toContain('is-current');
+      expect(labels[0].classes()).not.toContain('is-current');
+
+      await wrapper.setProps({ currentStep: '3' });
+      expect(labels[2].classes()).toContain('is-current');
     });
 
-    const labels = wrapper.findAll('.mc-stepper-inline__label');
-    expect(labels[1].classes()).toContain('is-current');
-    expect(labels[0].classes()).not.toContain('is-current');
+    it('marks completed steps', () => {
+      const wrapper = mount(MStepperInline, {
+        props: {
+          currentStep: '3',
+          steps: defaultSteps,
+        },
+      });
 
-    await wrapper.setProps({ currentStep: 3 });
-    expect(labels[2].classes()).toContain('is-current');
+      const items = wrapper.findAll('.mc-stepper-inline__item');
+      expect(items[0].classes()).toContain('is-completed');
+      expect(items[1].classes()).toContain('is-completed');
+      expect(items[2].classes()).not.toContain('is-completed');
+    });
   });
 
-  it('marks completed steps', () => {
-    const wrapper = mount(MStepperInline, {
-      props: {
-        currentStep: 3,
-        steps: defaultSteps,
-      },
+  describe('currentStep as number', () => {
+    it('clamps to the first step when currentStep is below 1', () => {
+      const wrapper = mount(MStepperInline, {
+        props: { currentStep: 0, steps: defaultSteps },
+      });
+
+      const circles = wrapper.findAll('.mc-stepper-inline__circle');
+      expect(circles[0].classes()).toContain('is-current');
+    });
+
+    it('clamps to the last step when currentStep exceeds steps length', () => {
+      const wrapper = mount(MStepperInline, {
+        props: { currentStep: 99, steps: defaultSteps },
+      });
+
+      const items = wrapper.findAll('.mc-stepper-inline__item');
+      expect(items[items.length - 1].classes()).not.toContain('is-completed');
+      expect(items[0].classes()).toContain('is-completed');
+      expect(items[1].classes()).toContain('is-completed');
     });
 
-    const items = wrapper.findAll('.mc-stepper-inline__item');
-    expect(items[0].classes()).toContain('is-completed');
-    expect(items[1].classes()).toContain('is-completed');
-    expect(items[2].classes()).not.toContain('is-completed');
+    it('sets the correct step as current when currentStep is a valid number', () => {
+      const wrapper = mount(MStepperInline, {
+        props: { currentStep: 2, steps: defaultSteps },
+      });
+
+      const labels = wrapper.findAll('.mc-stepper-inline__label');
+      expect(labels[1].classes()).toContain('is-current');
+      expect(labels[0].classes()).not.toContain('is-current');
+      expect(labels[2].classes()).not.toContain('is-current');
+    });
   });
 });

package/src/components/stepperinline/MStepperInline.stories.ts

@@ -14,12 +14,12 @@ const meta: Meta<typeof MStepperInline> = {
     },
   },
   args: {
-    currentStep: 1,
+    currentStep: 'step1',
     steps: [
-      { label: 'Cart' },
-      { label: 'Delivery address' },
-      { label: 'Payment' },
-      { label: 'Order confirmation' },
+      { id: 'step1', label: 'Cart' },
+      { id: 'step2', label: 'Delivery address' },
+      { id: 'step3', label: 'Payment' },
+      { id: 'step4', label: 'Order confirmation' },
     ],
   },
   render: (args) => ({
@@ -38,12 +38,20 @@ export const Default: Story = {};
 
 export const AditionnalInfo: Story = {
   args: {
-    currentStep: 2,
+    currentStep: 'step2',
     steps: [
-      { label: 'Cart', additionalInfo: 'Additional information' },
-      { label: 'Delivery address', additionalInfo: 'Additional information' },
-      { label: 'Payment', additionalInfo: 'Additional information' },
-      { label: 'Order confirmation', additionalInfo: 'Additional information' },
+      { id: 'step1', label: 'Cart', additionalInfo: 'Additional information' },
+      {
+        id: 'step2',
+        label: 'Delivery address',
+        additionalInfo: 'Additional information',
+      },
+      { id: 'step3', label: 'Payment', additionalInfo: 'Additional information' },
+      {
+        id: 'step4',
+        label: 'Order confirmation',
+        additionalInfo: 'Additional information',
+      },
     ],
   },
 };

package/src/components/stepperinline/MStepperInline.vue

@@ -52,13 +52,21 @@ import { Check24, ChevronRight24 } from '@mozaic-ds/icons-vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Current step of the stepper compact.
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
      */
-    currentStep?: number;
+    currentStep?: string | number;
     /**
      * Steps of the stepper inline.
      */
     steps?: Array<{
+      /**
+       * Uniquer identifier for the step.
+       */
+      id?: string;
       /**
        * Label of the step.
        */
@@ -70,20 +78,26 @@ const props = withDefaults(
     }>;
   }>(),
   {
-    currentStep: 1,
+    currentStep: 0,
     steps: () => [],
   },
 );
 
-const safeStep = computed(() =>
-  Math.min(Math.max(props.currentStep, 1), props.steps.length),
-);
-const steps = props.steps;
+const activeStep = computed(() => {
+  if (typeof props.currentStep === 'number') {
+    return Math.min(Math.max(props.currentStep, 1), props.steps.length) - 1;
+  } else {
+    const activeIndex = props.steps.findIndex(
+      (step) => step.id === props.currentStep,
+    );
+    return activeIndex === -1 ? 0 : activeIndex;
+  }
+});
 
 const stepStates = computed(() =>
-  steps.map((_, i) => ({
-    completed: i + 1 < safeStep.value,
-    current: i + 1 === safeStep.value,
+  props.steps.map((_, i) => ({
+    completed: i < activeStep.value,
+    current: i === activeStep.value,
   })),
 );
 </script>

package/src/components/stepperinline/README.md

@@ -7,5 +7,9 @@ A stepper is a navigation component that guides users through a sequence of step
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `currentStep` | Current step of the stepper compact. | `number` | `1` |
-| `steps` | Steps of the stepper inline. | `{ label: string; additionalInfo?: string` `undefined; }[]` | `[]` |
+| `currentStep` | Defines the currently active step.
+
+- If a `number` is provided, it represents the 1-based position of the step
+  in the `steps` array (e.g. `1` for the first step).
+- If a `string` is provided, it must match the `id` of one of the steps. | `string` `number` | `0` |
+| `steps` | Steps of the stepper inline. | `{ id?: string` `undefined; label: string; additionalInfo?: string` `undefined; }[]` | `[]` |