@mozaic-ds/vue 2.19.1 → 2.20.0

package/src/components/combobox/MCombobox.vue

@@ -20,7 +20,7 @@
         :aria-controls="`listbox-${id}`"
         :disabled="disabled"
         class="mc-combobox__control"
-        aria-label="Combobox input"
+        :aria-label="props.controlAriaLabel"
         @click="toggleListbox"
         v-bind="
           search
@@ -45,7 +45,7 @@
         v-if="clearable && hasValue"
         type="button"
         class="mc-combobox__clear"
-        aria-label="Clear selection"
+        :aria-label="props.clearAriaLabel"
         @click="listbox?.clearSelection"
       >
         <CrossCircleFilled24 />
@@ -55,40 +55,42 @@
         type="button"
         :tabindex="-1"
         class="mc-combobox__icon"
-        aria-label="Expand options list"
+        aria-hidden="true"
         @click="toggleListbox"
       >
         <ChevronDown24 />
       </button>
     </div>
 
-    <MOptionListbox
-      ref="listbox"
-      v-model="selection"
-      @update:model-value="onSelectionUpdate"
-      :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 #item="{ item }">
-        <slot name="item" v-bind="{ item }" />
-      </template>
-    </MOptionListbox>
+    <div class="mc-combobox__listbox">
+      <MOptionListbox
+        ref="listbox"
+        v-model="selection"
+        @update:model-value="onSelectionUpdate"
+        :id
+        :open="isOpen"
+        :multiple
+        :search
+        :actions
+        :checkable-sections
+        :search-placeholder
+        :select-label
+        :clear-label
+        :options
+        class="mc-combobox__listbox"
+        @open="openListbox"
+        @close="
+          () => {
+            closeListbox();
+            comboboxControl?.focus();
+          }
+        "
+      >
+        <template #item="{ item }">
+          <slot name="item" v-bind="{ item }" />
+        </template>
+      </MOptionListbox>
+    </div>
   </div>
 </template>
 
@@ -175,13 +177,31 @@ const props = withDefaults(
      * Array of options to display in the listbox.
      */
     options: Array<ListboxOption>;
+    /**
+     * Accessible label for the combobox trigger button. Should describe what
+     * the combobox selects (e.g. "Select a country").
+     */
+    controlAriaLabel?: string;
+    /**
+     * Accessible label for the clear selection button.
+     */
+    clearAriaLabel?: string;
+    /**
+     * Controls the open state of the listbox. When provided, the component operates in controlled
+     * mode and delegates open/close decisions to the parent via `v-model:open`. When omitted, the
+     * component manages its own open state internally.
+     */
+    open?: boolean;
   }>(),
   {
+    open: undefined,
     placeholder: 'Select an option',
     searchPlaceholder: 'Find an option...',
     selectLabel: 'Select all',
     clearLabel: 'Clear',
     size: 'm',
+    controlAriaLabel: 'Combobox input',
+    clearAriaLabel: 'Clear selection',
   },
 );
 
@@ -212,7 +232,19 @@ const combobox = useTemplateRef('combobox');
 const listbox = useTemplateRef('listbox');
 const comboboxControl = useTemplateRef('comboboxControl');
 
-const isOpen = ref(false);
+const showListbox = ref(false);
+
+const isControlled = computed(() => props.open !== undefined);
+
+const isOpen = computed({
+  get() {
+    return isControlled.value ? (props.open as boolean) : showListbox.value;
+  },
+  set(value: boolean) {
+    emit('update:open', value);
+    if (!isControlled.value) showListbox.value = value;
+  },
+});
 
 const activeDescendantId = computed(() => {
   const activeIndex = listbox.value?.activeIndex || -1;
@@ -252,30 +284,28 @@ function handleClickOutside(event: MouseEvent) {
     !combobox.value?.contains(event.target as Node) &&
     !listbox.value?.listboxEl?.contains(event.target as Node)
   ) {
-    close();
+    closeListbox();
   }
 }
 
-function open() {
+function openListbox() {
   isOpen.value = true;
-  emit('update:open', true);
   document.addEventListener('click', handleClickOutside);
 }
 
-function close() {
+function closeListbox() {
   isOpen.value = false;
-  emit('update:open', false);
   document.removeEventListener('click', handleClickOutside);
 }
 
 function onSelectionUpdate() {
   if (!props.multiple) {
-    close();
+    closeListbox();
   }
 }
 
 function toggleListbox() {
-  return isOpen.value ? close() : open();
+  return isOpen.value ? closeListbox() : openListbox();
 }
 
 function getOptionLabel(value: string | number) {

package/src/components/combobox/README.md

@@ -23,6 +23,12 @@ A combobox is an input field that allows users to select an option from a dropdo
 | `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[]` | - |
+| `controlAriaLabel` | Accessible label for the combobox trigger button. Should describe what
+the combobox selects (e.g. "Select a country"). | `string` | `"Combobox input"` |
+| `clearAriaLabel` | Accessible label for the clear selection button. | `string` | `"Clear selection"` |
+| `open` | Controls the open state of the listbox. When provided, the component operates in controlled
+mode and delegates open/close decisions to the parent via `v-model:open`. When omitted, the
+component manages its own open state internally. | `boolean` | - |
 
 ## Slots
 

package/src/components/datatable/DataTable.stories.ts

@@ -132,7 +132,7 @@ export const TopbarActions: Story = {
         <template v-slot:topbar>
           <MDataTableTop>
             <template v-slot:actions>
-              <MToggle size="s" label="Toggle Label" />
+              <MToggle size="s" label="Toggle Label" id="idofthetoggle" />
               <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
               <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
               <MButton appearance="accent" size="s" >Primary action</MButton>
@@ -256,7 +256,7 @@ export const TopbarFull: Story = {
               <div style="display: flex;align-items: center;">999 selected</div>
             </template>
             <template v-slot:actions>
-              <MToggle size="s" label="Toggle Label" />
+              <MToggle size="s" label="Toggle Label" id="idofthetoggletopbarfull" />
               <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
               <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
               <MButton appearance="accent" size="s" >Primary action</MButton>

package/src/components/datatable/DataTableCells.stories.ts

@@ -2,6 +2,7 @@ import { ref } from 'vue';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import MStatusBadge from '../statusbadge/MStatusBadge.vue';

package/src/components/datatable/DataTableEmpty.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable } from '@mozaic-ds/datatable-vue';
 import MButton from '../button/MButton.vue';
 import { Filter24 } from '@mozaic-ds/icons-vue';

package/src/components/datatable/DataTableExpandable.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 
 const meta: Meta<typeof MDataTable> = {

package/src/components/datatable/DataTableNested.stories.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 
 const meta: Meta<typeof MDataTable> = {

package/src/components/datatable/DataTablePageable.stories.ts

@@ -0,0 +1,194 @@
+import { ref } from 'vue';
+import * as utils from './utils';
+
+// Components
+import '@mozaic-ds/datatable-vue/style.css';
+import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
+
+// Styles
+import './assets/styles.scss';
+
+// Scripts
+const api = {
+  fetchItems: ({ sort, size, page }) =>
+    new Promise((resolve) => {
+      setTimeout(() => {
+        let items = [...utils.addlDeals];
+        if (sort)
+          items = items.sort((itemA, itemB) => {
+            const { column, direction } = sort;
+            if (direction === 'ASC') {
+              return itemA[column] > itemB[column] ? 1 : -1;
+            } else {
+              return itemA[column] < itemB[column] ? 1 : -1;
+            }
+          });
+        const paginated = items.slice((page - 1) * size, page * size);
+        resolve(paginated);
+      }, 1000);
+    }),
+};
+
+export default {
+  title: 'DataTable/MDataTable Pageable',
+  component: MDataTable,
+  args: utils.args,
+  argTypes: utils.argtypes,
+  parameters: {
+    componentName: 'MDataTable',
+    docs: { autodocs: false },
+    backgrounds: utils.backgrounds,
+  },
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!--
+          Default content
+        -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export const Default = {
+  args: {
+    pageable: true,
+    totalItems: utils.deals10.length,
+    accessibilityLabels: { paginationAriaLabel: 'Select a DataTable page' },
+  },
+};
+
+export const CustomPaginationText = {
+  args: { ...Default.args },
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!--
+          Default content
+        -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+
+        <!-- Custom Pagination Text -->
+        <template v-slot:paging.text="{ option }">
+          Custom pagination - {{ option.value }} / {{ option.length }}
+        </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export const FullPaginatedExample = {
+  args: {
+    pageable: true,
+    itemsPerPage: 10,
+  },
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn },
+    setup() {
+      const items = ref(utils.deals10);
+      const totalItems = ref(utils.addlDeals.length);
+      const loading = ref(false);
+      const currentPage = ref(1);
+      return { args, items, totalItems, loading, currentPage };
+    },
+    template: `
+      <MDataTable
+        v-bind="args"
+        :items="items"
+        :totalItems="totalItems"
+        :loading="loading"
+        @change="updatePage"
+      >
+        <!--
+          Default content
+        -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+      async updatePage({
+        sort = undefined,
+        size = undefined,
+        page = undefined,
+      }) {
+        console.log('Poulou');
+        this.loading = true;
+        this.items = await api.fetchItems({ sort, size, page });
+        this.loading = false;
+      },
+    },
+  }),
+};

package/src/components/datatable/DataTableSelectable.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 import MCheckbox from '../checkbox/MCheckbox.vue';
 

package/src/components/datatable/DataTableSortable.stories.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import * as utils from './utils';
 
 // Components
+import '@mozaic-ds/datatable-vue/style.css';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 
 const meta: Meta<typeof MDataTable> = {

package/src/components/datepicker/MDatepicker.stories.ts

@@ -17,6 +17,7 @@ const meta: Meta<typeof MDatepicker> = {
   },
   args: {
     id: 'datepickerId',
+    modelValue: '2025-07-22',
     ariaLabel: 'enter the date',
   },
   render: (args) => ({
@@ -29,6 +30,7 @@ const meta: Meta<typeof MDatepicker> = {
     template: `
       <MDatepicker 
         v-bind="args"
+        v-model="args.modelValue"
         @update:modelValue="handleUpdate"
       ></MDatepicker>
     `,

package/src/components/datepicker/MDatepicker.vue

@@ -3,20 +3,18 @@
     <input
       :id="id"
       class="mc-datepicker__control mc-text-input__control"
-      :value="modelValue"
+      :value="model"
       type="date"
       :name="name"
       :disabled="disabled"
       :aria-invalid="isInvalid"
       :readonly="readonly"
       v-bind="$attrs"
-      @input="
-        emit('update:modelValue', ($event.target as HTMLInputElement).value)
-      "
+      @input="model = ($event.target as HTMLInputElement).value"
     />
 
     <div
-      v-if="isClearable && modelValue"
+      v-if="isClearable && model"
       class="mc-datepicker__controls-options mc-controls-options"
     >
       <button
@@ -24,7 +22,8 @@
         class="mc-controls-options__button"
         @click="clearValue"
       >
-        <CrossCircleFilled24
+        <component
+          :is="props.size === 'm' ? CrossCircleFilled24 : CrossCircleFilled20"
           class="mc-controls-options__icon"
           aria-hidden="true"
         />
@@ -35,8 +34,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
+import { computed } from 'vue';
+import { CrossCircleFilled20, CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 /**
  * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
  */
@@ -93,10 +92,17 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref(props.modelValue);
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number) {
+    emit('update:modelValue', value);
+  },
+});
+
 const clearValue = () => {
-  modelValue.value = '';
-  emit('update:modelValue', '');
+  model.value = '';
 };
 
 const emit = defineEmits<{

package/src/components/divider/README.md

@@ -26,6 +26,7 @@ A divider is a visual element used to separate content or sections within an int
 - [MFileUploaderItem](../fileuploaderitem)
 - [MSidebarFooter](../sidebarfooter)
 - [_MSidebarFooterMenu](../sidebarfooter)
+- [MSidebarShortcuts](../sidebarshortcuts)
 - [MStepperBottomBar](../stepperbottombar)
 - [MTabs](../tabs)
 
@@ -38,6 +39,7 @@ graph TD;
   MFileUploaderItem --> MDivider
   MSidebarFooter --> MDivider
   _MSidebarFooterMenu --> MDivider
+  MSidebarShortcuts --> MDivider
   MStepperBottomBar --> MDivider
   MTabs --> MDivider
 style MDivider fill:#008240,stroke:#333,stroke-width:4px

package/src/components/drawer/MDrawer.vue

@@ -226,11 +226,13 @@ onUnmounted(() => {
 });
 
 const onClickOverlay = (event: MouseEvent) => {
-  if (
-    props.closeOnOverlay &&
-    !sectionRef.value?.contains(event.target as Node)
-  ) {
-    onClose();
+  if (props.closeOnOverlay) {
+    const path = event.composedPath();
+    const clickedInsideDrawer =
+      sectionRef.value && path.includes(sectionRef.value);
+    if (!clickedInsideDrawer) {
+      onClose();
+    }
   }
 };
 

package/src/components/link/MLink.stories.ts

@@ -13,6 +13,24 @@ const meta: Meta<typeof MLink> = {
       },
     },
   },
+  argTypes: {
+    appearance: {
+      options: [
+        'primary',
+        'secondary',
+        'accent',
+        'inverse',
+        'standard (deprecated)',
+      ],
+      mapping: {
+        primary: 'primary',
+        secondary: 'secondary',
+        accent: 'accent',
+        inverse: 'inverse',
+        'standard (deprecated)': 'standard',
+      },
+    },
+  },
   args: {
     default: 'Stand-alone link',
     href: '#',

package/src/components/link/MLink.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, onMounted, type VNode } from 'vue';
 /**
  * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
  */
@@ -38,8 +38,14 @@ const props = withDefaults(
     iconPosition?: 'left' | 'right';
     /**
      * Allows to define the link appearance.
+     * `standard` value is deprecated and will be removed in the next major release. Use `primary` instead.
      */
-    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
+    appearance?:
+      | 'primary'
+      | 'secondary'
+      | 'accent'
+      | 'inverse'
+      | /** @deprecated Use 'primary' instead */ 'standard';
     /**
      * Allows to define the link size.
      */
@@ -62,7 +68,7 @@ const props = withDefaults(
     router?: boolean;
   }>(),
   {
-    appearance: 'standard',
+    appearance: 'primary',
     size: 's',
     iconPosition: 'left',
   },
@@ -82,7 +88,9 @@ defineSlots<{
 const classObject = computed(() => {
   return {
     [`mc-link--${props.appearance}`]:
-      props.appearance && props.appearance != 'standard',
+      props.appearance &&
+      props.appearance !== 'standard' &&
+      props.appearance !== 'primary',
     [`mc-link--${props.size}`]: props.size && props.size != 's',
     'mc-link--inline': props.inline,
     'mc-link--stand-alone': !props.inline,
@@ -102,6 +110,14 @@ const linkProps = computed(() => {
     target: props.target,
   };
 });
+
+onMounted(() => {
+  if (props.appearance === 'standard' && import.meta.env.DEV) {
+    console.warn(
+      '[Mozaic]: The value "standard" for the "appearance" prop is deprecated — use "primary" instead.',
+    );
+  }
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/link/README.md

@@ -8,7 +8,8 @@ A link is an interactive text element used to navigate between pages, sections,
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `iconPosition` | Position of the icon relative to the text. | `"left"` `"right"` | `"left"` |
-| `appearance` | Allows to define the link appearance. | `"standard"` `"inverse"` `"accent"` `"secondary"` | `"standard"` |
+| `appearance` | Allows to define the link appearance.
+`standard` value is deprecated and will be removed in the next major release. Use `primary` instead. | `"standard"` `"inverse"` `"accent"` `"primary"` `"secondary"` | `"primary"` |
 | `size` | Allows to define the link size. | `"s"` `"m"` | `"s"` |
 | `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - |
 | `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |