@mozaic-ds/vue 2.6.0 → 2.7.0

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MSegmentedControl from './MSegmentedControl.vue';
+
+const meta: Meta<typeof MSegmentedControl> = {
+  title: 'Action/Segmented Control',
+  component: MSegmentedControl,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.',
+      },
+    },
+  },
+  args: {
+    segments: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MSegmentedControl },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MSegmentedControl
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></MSegmentedControl>
+    `,
+  }),
+};
+export default meta;
+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' },
+};
+
+export const Full: Story = {
+  args: { full: true },
+};

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="mc-segmented-control" :class="classObject" role="radiogroup">
+    <button
+      v-for="(segment, index) in segments"
+      :key="`segment-${index}`"
+      type="button"
+      class="mc-segmented-control__segment"
+      :class="{
+        'mc-segmented-control__segment--selected': isSegmentSelected(index),
+      }"
+      :aria-checked="isSegmentSelected(index)"
+      role="radio"
+      @click="onClickSegment(index)"
+    >
+      {{ segment.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+/**
+ * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+      /**
+       * The label displayed for the segment.
+       */
+      label: string;
+    }>;
+  }>(),
+  {
+    modelValue: 0,
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'mc-segmented-control--full': props.full,
+    [`mc-segmented-control--${props.size}`]: props.size && props.size != 's',
+  };
+});
+
+const modelValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    modelValue.value = newVal;
+  },
+);
+
+const onClickSegment = (index: number) => {
+  if (index !== modelValue.value) {
+    modelValue.value = index;
+    emit('update:modelValue', index);
+  }
+};
+
+const isSegmentSelected = (index: number) => {
+  return modelValue.value === index;
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected segment changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/segmented-control';
+</style>

package/src/components/segmentedcontrol/README.md

@@ -0,0 +1,19 @@
+# MSegmentedControl
+
+A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | The selected segment index, bound via v-model. | `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; }[]` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value: number] |

package/src/components/select/MSelect.vue

@@ -30,7 +30,7 @@
 import { computed } from 'vue';
 
 /**
- * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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#select).
  */
 const props = withDefaults(
   defineProps<{
@@ -69,7 +69,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the select
+     * Determines the size of the select.
      */
     size?: 's' | 'm';
     /**
@@ -96,6 +96,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/select/README.md

@@ -0,0 +1,24 @@
+# MSelect
+
+A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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#select).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the select, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the select element, used for form submission. | `string` | - |
+| `options*` | Define the available choices for the select element. | `{ id?: string` `undefined; text: string; value: string` `number; attributes?: Record<string` `string` `number` `boolean>` `undefined; disabled?: boolean` `undefined; }[]` | - |
+| `modelValue` | The current value of the select. | `string` `number` | - |
+| `placeholder` | Text displayed when the select has no selected value. | `string` | - |
+| `isInvalid` | If `true`, the select is marked as invalid. | `boolean` | - |
+| `disabled` | If `true`, the select is disabled and non-interactive. | `boolean` | - |
+| `size` | Determines the size of the select. | `"s"` `"m"` | `"m"` |
+| `readonly` | If `true`, the select is read-only (cannot be edited). | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the select value changes, updating the modelValue prop. | [value: string | number] |

package/src/components/statusbadge/MStatusBadge.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof MStatusBadge> = {
     docs: {
       description: {
         component:
-          'A status badge indicates the status of an entity and can evolve at any time.',
+          'A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.',
       },
     },
   },

package/src/components/statusbadge/MStatusBadge.vue

@@ -9,16 +9,16 @@
 import { computed } from 'vue';
 import MStatusDot from '../statusdot/MStatusDot.vue';
 /**
- * A status badge indicates the status of an entity and can evolve at any time.
+ * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Content of the Status Badge
+     * Content of the status badge
      */
     label: string;
     /**
-     * Allows to define the Status Badge style
+     * Allows to define the status badge type
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
   }>(),

package/src/components/statusbadge/README.md

@@ -0,0 +1,11 @@
+# MStatusBadge
+
+A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Content of the status badge | `string` | - |
+| `status` | Allows to define the status badge type | `"info"` `"success"` `"warning"` `"error"` `"neutral"` | `"info"` |

package/src/components/statusdot/MStatusDot.stories.ts

@@ -4,6 +4,7 @@ import MStatusDot from './MStatusDot.vue';
 const meta: Meta<typeof MStatusDot> = {
   title: 'Status/Status Dot',
   component: MStatusDot,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/statusdot/MStatusDot.vue

@@ -5,16 +5,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A badge indicates the status of an entity and can evolve at any time.
+ * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Allows to define the Status Dot style
+     * Allows to define the status dot type.
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
     /**
-     * Determines the size of the Status Dot.
+     * Determines the size of the status dot.
      */
     size?: 's' | 'm' | 'l';
   }>(),

package/src/components/statusdot/README.md

@@ -0,0 +1,11 @@
+# MStatusDot
+
+A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `status` | Allows to define the status dot type. | `"info"` `"success"` `"warning"` `"error"` `"neutral"` | `"info"` |
+| `size` | Determines the size of the status dot. | `"s"` `"m"` `"l"` | - |

package/src/components/statusnotification/MStatusNotification.vue

@@ -46,15 +46,15 @@ import MIconButton from '../iconbutton/MIconButton.vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Title of the Status Notification
+     * Title of the status notification.
      */
     title: string;
     /**
-     * Description of the Status Notification
+     * Description of the status notification.
      */
     description: string;
     /**
-     * Allows to define the Status Notification style
+     * Allows to define the status notification type.
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**

package/src/components/statusnotification/README.md

@@ -0,0 +1,25 @@
+# MStatusNotification
+
+A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `title*` | Title of the status notification. | `string` | - |
+| `description*` | Description of the status notification. | `string` | - |
+| `status` | Allows to define the status notification type. | `"info"` `"success"` `"warning"` `"error"` | `"info"` |
+| `closable` | if `true`, display the close button. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `footer` | Use this slot to insert a button or a link in the footer |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `close` | Emits when closing the notification. | [] |

package/src/components/tabs/MTabs.stories.ts

@@ -39,7 +39,7 @@ const meta: Meta<typeof Mtabs> = {
       return { args, handleUpdate };
     },
     template: `
-      <Mtabs 
+      <Mtabs
         v-bind="args"
         @update:modelValue="handleUpdate"
       ></Mtabs>
@@ -102,3 +102,25 @@ export const Disabled: Story = {
     ],
   },
 };
+
+export const WithBadges: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+        badge: 3,
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+        badge: 99,
+      },
+      {
+        label: 'Label',
+        badge: 100,
+      },
+    ],
+  },
+};

package/src/components/tabs/MTabs.vue

@@ -25,6 +25,9 @@
           <div class="mc-tabs__label">
             <span>{{ tab.label }}</span>
           </div>
+          <span v-if="tab.badge" class="mc-tabs__badge">
+            <MNumberBadge :label="tab.badge" />
+          </span>
         </button>
       </li>
     </ul>
@@ -35,6 +38,7 @@
 <script setup lang="ts">
 import { computed, ref, type Component } from 'vue';
 import MDivider from '../divider/MDivider.vue';
+import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
  * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
  */
@@ -64,6 +68,10 @@ const props = withDefaults(
        * The icon displayed for the tab from Mozaic-icon-vue.
        */
       icon?: Component;
+      /**
+       * The number badge displayed for the tab.
+       */
+      badge?: number;
       /**
        * The label displayed for the tab.
        */

package/src/components/tabs/Mtabs.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MTabs from './MTabs.vue';
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, markRaw } from 'vue';
 
 describe('MTabs.vue', () => {
   const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];
@@ -119,14 +119,16 @@ describe('MTabs.vue', () => {
   });
 
   it('renders icon component when icon prop is provided', () => {
-    const DummyIcon = defineComponent({
-      name: 'DummyIcon',
-      render() {
-        return h('svg', { class: 'dummy-icon' }, [
-          h('circle', { cx: 10, cy: 10, r: 10 }),
-        ]);
-      },
-    });
+    const DummyIcon = markRaw(
+      defineComponent({
+        name: 'DummyIcon',
+        render() {
+          return h('svg', { class: 'dummy-icon' }, [
+            h('circle', { cx: 10, cy: 10, r: 10 }),
+          ]);
+        },
+      }),
+    );
 
     const tabsWithIcon = [
       { label: 'Tab 1', icon: DummyIcon },
@@ -146,4 +148,23 @@ describe('MTabs.vue', () => {
     const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
     expect(secondTabButton.findComponent(DummyIcon).exists()).toBe(false);
   });
+
+  it('renders badge when badge prop is provided', () => {
+    const tabsWithBadges = [{ label: 'Tab 1', badge: 5 }, { label: 'Tab 2' }];
+
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: tabsWithBadges,
+      },
+    });
+
+    const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
+    expect(firstTabButton.find('span.mc-tabs__badge').exists()).toBe(true);
+    expect(
+      firstTabButton.find('span.mc-tabs__badge .mc-number-badge').text(),
+    ).toBe('5');
+
+    const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
+    expect(secondTabButton.find('span.mc-tabs__badge').exists()).toBe(false);
+  });
 });

package/src/components/tabs/README.md

@@ -0,0 +1,20 @@
+# MTabs
+
+Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` | - |
+| `divider` | If `true`, the divider will appear. | `boolean` | `true` |
+| `centered` | If `true`, the tabs of the component will be centered. | `boolean` | - |
+| `modelValue` | The selected tab index, bound via v-model. | `number` | `0` |
+| `tabs*` | An array of objects that allows you to provide all the data needed to generate the content for each tab. | `{ icon?: Component` `undefined; badge?: number` `undefined; label: string; disabled?: boolean` `undefined; }[]` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value: number] |

package/src/components/tag/MTag.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof MTag> = {
     docs: {
       description: {
         component:
-          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
+          'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
       },
     },
   },

package/src/components/tag/MTag.vue

@@ -144,6 +144,10 @@ const emit = defineEmits<{
    */
   (on: 'remove-tag', id: string): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/tag/README.md

@@ -0,0 +1,25 @@
+# MTag
+
+A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `type` | Defines the behavior and layout of the tag. | `"informative"` `"interactive"` `"contextualised"` `"removable"` `"selectable"` | `"informative"` |
+| `size` | Determines the size of the tag. | `"s"` `"m"` `"l"` | - |
+| `id` | A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'. | `string` | - |
+| `name` | The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable'). | `string` | - |
+| `label*` | The text label displayed next to the tag. | `string` | - |
+| `modelValue` | The tag's checked state, bound via v-model. Used only for type: 'selectable'. | `boolean` | - |
+| `disabled` | If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types. | `boolean` | - |
+| `contextualisedNumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
+| `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the tag value changes, updating the modelValue prop. | [value: boolean] |
+| `remove-tag` | Emits when the remove button of a tag is clicked, passing the tag's ID. | [id: string] |

package/src/components/textarea/MTextArea.vue

@@ -23,7 +23,7 @@
 import { computed } from 'vue';
 
 /**
- * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).
  */
 const props = withDefaults(
   defineProps<{
@@ -85,6 +85,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textarea/README.md

@@ -0,0 +1,25 @@
+# MTextArea
+
+A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the textarea, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the textarea element, used for form submission. | `string` | - |
+| `modelValue` | The current value of the textarea field. | `string` `number` | - |
+| `placeholder` | Text displayed when the textarea is empty. | `string` | - |
+| `isInvalid` | If `true`, the textarea is marked as invalid. | `boolean` | - |
+| `disabled` | If `true`, the textarea is disabled and non-interactive. | `boolean` | - |
+| `rows` | The number of visible text lines in the textarea. | `number` | `2` |
+| `minLength` | Minimum number of characters required for the textarea. | `number` | - |
+| `maxLength` | Maximum number of characters allowed in the textarea. | `number` | - |
+| `readonly` | If `true`, the textarea is read-only (cannot be edited). | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the textarea value changes, updating the modelValue prop. | [value: string | number] |