@mozaic-ds/vue 2.6.1 → 2.8.0

package/src/components/drawer/README.md

@@ -0,0 +1,30 @@
+# MDrawer
+
+A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `open` | If `true`, display the drawer. | `boolean` | - |
+| `position` | Position of the drawer. | `"left"` `"right"` | - |
+| `extended` | If `true`, the drawer have a bigger width. | `boolean` | - |
+| `back` | If `true`, display the back button. | `boolean` | - |
+| `title*` | Title of the drawer. | `string` | - |
+| `contentTitle` | Title of the content of the drawer. | `string` | - |
+| `closeOnOverlay` | if `true`, close the drawer when clicking the overlay. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the content of the drawer |
+| `footer` | Use this slot to insert buttons in the footer |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `back` | Emits when click back button of the drawer. | [] |
+| `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |

package/src/components/field/MField.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 /**
- * This component creates a structured form field with a label, optional help text, error and validation message handling.
+ * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  */
 const props = defineProps<{
   /**

package/src/components/field/README.md

@@ -0,0 +1,24 @@
+# MField
+
+A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` | - |
+| `label*` | The text displayed as the label for the form field. | `string` | - |
+| `requirementText` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` | - |
+| `helpText` | Text shown below the form field to provide additional context or instructions for the user. | `string` | - |
+| `helpId` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` | - |
+| `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `messageId` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` | - |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the form element of your choice |

package/src/components/fieldgroup/README.md

@@ -0,0 +1,22 @@
+# MFieldGroup
+
+This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` | - |
+| `legend*` | The text displayed as the legend for the form fieldset. | `string` | - |
+| `requirementText` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` | - |
+| `helpText` | Text shown below the form field to provide additional context or instructions for the user. | `string` | - |
+| `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the form element of your choice |

package/src/components/flag/README.md

@@ -0,0 +1,11 @@
+# MFlag
+
+A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Label of the Flag. | `string` | - |
+| `appearance` | Allows to define the Flag appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | - |

package/src/components/iconbutton/MIconButton.stories.ts

@@ -8,6 +8,7 @@ import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/C
 const meta: Meta<typeof MIconButton> = {
   title: 'Action/Icon Button',
   component: MIconButton,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/iconbutton/MIconButton.vue

@@ -52,7 +52,7 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert the form element of your choice
+   * Use this slot to insert an icon for the Button.
    */
   icon: VNode;
 }>();
@@ -70,4 +70,9 @@ const classObject = computed(() => {
 
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/button';
+
+.mc-button__icon::v-deep(svg) {
+  width: 100%;
+  height: 100%;
+}
 </style>

package/src/components/iconbutton/README.md

@@ -0,0 +1,21 @@
+# MIconButton
+
+Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Defines the visual style of the icon button. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `size` | Determines the size of the icon button. | `"s"` `"m"` `"l"` | `"m"` |
+| `disabled` | If `true`, disables the icon button, making it non-interactive. | `boolean` | - |
+| `ghost` | If `true`, applies a "ghost" style to the icon button. | `boolean` | - |
+| `outlined` | If `true`, the icon button gets an outlined style. | `boolean` | - |
+| `type` | Specifies the button's HTML `type` attribute. | `"button"` `"reset"` `"submit"` | `"button"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon for the Button. |

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.stories.ts

@@ -4,6 +4,7 @@ import MLinearProgressbarBuffer from './MLinearProgressbarBuffer.vue';
 const meta: Meta<typeof MLinearProgressbarBuffer> = {
   title: 'Indicators/Linear Progress Bar (Buffer)',
   component: MLinearProgressbarBuffer,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/linearprogressbarbuffer/README.md

@@ -0,0 +1,11 @@
+# MLinearProgressbarBuffer
+
+A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `size` | Allows to define the progress bar size. | `"s"` `"m"` `"l"` | - |
+| `value` | The current value of the progress bar. | `number` | `0` |

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.stories.ts

@@ -4,6 +4,7 @@ import MLinearProgressbarPercentage from './MLinearProgressbarPercentage.vue';
 const meta: Meta<typeof MLinearProgressbarPercentage> = {
   title: 'Indicators/Linear Progress Bar (Percentage)',
   component: MLinearProgressbarPercentage,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/linearprogressbarpercentage/README.md

@@ -0,0 +1,10 @@
+# MLinearProgressbarPercentage
+
+A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `value` | The current value of the progress bar. | `number` | `0` |

package/src/components/link/MLink.vue

@@ -62,8 +62,6 @@ const props = withDefaults(
     router?: boolean;
   }>(),
   {
-    href: undefined,
-    target: undefined,
     appearance: 'standard',
     size: 's',
     iconPosition: 'left',

package/src/components/link/README.md

@@ -0,0 +1,23 @@
+# MLink
+
+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.
+
+
+## Props
+
+| 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"` |
+| `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"` | - |
+| `inline` | Specify wether the link is inline. | `boolean` | - |
+| `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the textual content of the Link. |
+| `icon` | Use this slot to insert an icon for the Link. |

package/src/components/loader/MLoader.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
  */
 const props = withDefaults(
   defineProps<{

package/src/components/loader/README.md

@@ -0,0 +1,12 @@
+# MLoader
+
+A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
+| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` | `"m"` |
+| `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -44,7 +44,7 @@ type Story = StoryObj<typeof MLoadingOverlay>;
 
 export const Default: Story = {};
 
-export const text: Story = {
+export const Text: Story = {
   args: {
     text: 'Insert your text here',
   },

package/src/components/loadingoverlay/README.md

@@ -0,0 +1,11 @@
+# MLoadingOverlay
+
+A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `isVisible` | Controls the visibility of the loading overlay. | `boolean` | - |
+| `text` | Text of the loading overlay. | `string` | - |

package/src/components/modal/MModal.spec.ts

@@ -8,7 +8,8 @@ const stubs = {
     template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
   },
   MOverlay: {
-    template: `<div class="overlay"><slot/></div>`,
+    name: 'MOverlay',
+    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
   },
 };
 
@@ -100,4 +101,38 @@ describe('MModal component', () => {
 
     expect(wrapper.find('.mc-modal').classes()).toContain('is-open');
   });
+
+  it('emits update:open with false when overlay clicked and closeOnOverlay is true', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closeOnOverlay: true },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('does not emit update:open when overlay clicked and closeOnOverlay is false', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closeOnOverlay: false },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
+
+  it('does not emit update:open when overlay clicked and closeOnOverlay is not set', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title' },
+      global: { stubs },
+    });
+
+    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
 });

package/src/components/modal/MModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="modalTitle">
+  <MOverlay :is-visible="open" dialogLabel="modalTitle" @click="onClickOverlay">
     <section
       class="mc-modal"
       :class="classObject"
@@ -72,6 +72,10 @@ const props = withDefaults(
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * if `true`, close the modal when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
   }>(),
   {
     closable: true,
@@ -110,6 +114,12 @@ watch(
   },
 );
 
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
+  }
+};
+
 const onClose = () => {
   emit('update:open', false);
 };

package/src/components/modal/README.md

@@ -0,0 +1,29 @@
+# MModal
+
+A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `open` | if `true`, display the modal. | `boolean` | - |
+| `title*` | Title of the modal. | `string` | - |
+| `description` | Description of the modal. | `string` | - |
+| `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `closeOnOverlay` | if `true`, close the modal when clicking the overlay. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon next to the title of the modal. |
+| `default` | Use this slot to insert the content of the modal. |
+| `link` | Use this slot to insert a link in the footer. |
+| `footer` | Use this slot to insert buttons in the footer. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:open` | Emits when the modal display changes, updating the modelValue prop. | [value: boolean] |

package/src/components/numberbadge/README.md

@@ -0,0 +1,12 @@
+# MNumberBadge
+
+A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Content of the badge. | `number` | - |
+| `appearance` | Allows to define the badge appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `size` | Allows to define the badge size. | `"s"` `"m"` | `"s"` |

package/src/components/overlay/README.md

@@ -0,0 +1,17 @@
+# MOverlay
+
+An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `isVisible` | Controls the visibility of the overlay. | `boolean` | - |
+| `dialogLabel` | Accessible label for the overlay dialog. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert a centered content inside the overlay. |

package/src/components/pagination/README.md

@@ -0,0 +1,20 @@
+# MPagination
+
+Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the pagination. | `string` | - |
+| `modelValue*` | The current value of the selected page. | `number` | - |
+| `compact` | If `true`, display a compact version without the select. | `boolean` | - |
+| `options*` | Define the available choices for the pagination select element. | `{ id?: string` `undefined; text: string; value: number; }[]` | - |
+| `selectLabel` | Accessible label for the select of the pagination. | `string` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the pagination value changes, updating the modelValue prop. | [value: number] |

package/src/components/passwordinput/README.md

@@ -0,0 +1,25 @@
+# MPasswordInput
+
+A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the password input element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the password input element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the password input field. | `string` `number` | - |
+| `placeholder` | A placeholder text to show in the password input when it is empty. | `string` | - |
+| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
+| `disabled` | If `true`, disables the password input, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the password input is read-only (cannot be edited). | `boolean` | - |
+| `isClearable` | If `true`, a clear button will appear when the password input has a value. | `boolean` | - |
+| `clearLabel` | The label text for the clear button. | `string` | `"Clear content"` |
+| `buttonLabel` | Labels of the button displayed when showing or hiding the password. | `{ show: string; hide: string; }` | `{ show: "Show", hide: "Hide" }` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |