@mozaic-ds/vue 2.6.1 → 2.7.0

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/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/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/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/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

@@ -119,14 +119,16 @@ describe('MTabs.vue', () => {
   });
 
   it('renders icon component when icon prop is provided', () => {
-    const DummyIcon = markRaw(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/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/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] |

package/src/components/textinput/README.md

@@ -0,0 +1,32 @@
+# MTextInput
+
+A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data 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).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the input element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the input field. | `string` `number` | - |
+| `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
+| `inputType` | Defines the type of input. | `"number"` `"text"` `"date"` `"email"` `"password"` `"search"` `"tel"` | `"text"` |
+| `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
+| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
+| `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
+| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
+| `isClearable` | If `true`, a clear button will appear when the input has a value. | `boolean` | - |
+| `clearLabel` | The label text for the clear button. | `string` | `"clear content"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon in the input. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |

package/src/components/toaster/MToaster.stories.ts

@@ -8,6 +8,7 @@ import { ref, watch } from 'vue';
 const meta: Meta<typeof MToaster> = {
   title: 'Overlay/Toaster',
   component: MToaster,
+  tags: ['v2'],
   parameters: {
     layout: 'fullscreen',
     docs: {

package/src/components/toaster/README.md

@@ -0,0 +1,28 @@
+# MToaster
+
+A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `open` | If `true`, display the Toaster. | `boolean` | - |
+| `position` | Position of the toaster. | `"top"` `"bottom"` `"top-center"` `"bottom-center"` | - |
+| `description*` | Description of the toaster. | `string` | - |
+| `status` | Allows to define the toaster style. | `"info"` `"success"` `"warning"` `"error"` | `"info"` |
+| `closable` | If `true`, display the close button. | `boolean` | `true` |
+| `progress` | If `true`, display the progress bar of the duration. | `boolean` | - |
+| `timeout` | Duration of the toaster | `number` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `action` | Use this slot to insert a button or a link in the toaster |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:open` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |

package/src/components/toggle/README.md

@@ -0,0 +1,21 @@
+# MToggle
+
+A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the toggle, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the toggle element, typically used for form submission. | `string` | - |
+| `label` | The text label displayed next to the toggle. | `string` | - |
+| `modelValue` | The toggle's checked state, bound via v-model. | `boolean` | - |
+| `size` | Determines the size of the toggle. | `"s"` `"m"` | `"s"` |
+| `disabled` | If `true`, disables the toggle, making it non-interactive. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the toggle value changes, updating the modelValue prop. | [value: boolean] |

package/src/components/togglegroup/MToggleGroup.vue

@@ -20,7 +20,7 @@ import { computed, ref, watch } from 'vue';
 import MToggle from '../toggle/MToggle.vue';
 
 /**
- * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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 Group section](/docs/form-elements-field-group--docs#toggle-group).A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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 Group section](/docs/form-elements-field-group--docs#toggle-group).
+ * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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 Group section](/docs/form-elements-field-group--docs#toggle-group).
  */
 const props = defineProps<{
   /**

package/src/components/togglegroup/README.md

@@ -0,0 +1,20 @@
+# MToggleGroup
+
+A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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 Group section](/docs/form-elements-field-group--docs#toggle-group).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `name*` | The name attribute for the toggle element, typically used for form submission. | `string` | - |
+| `modelValue` | Property used to manage the values checked by v-model
+(Do not use directly) | `string[]` | - |
+| `options*` | List of properties of each toggle of the toggle group. | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; isInvalid?: boolean` `undefined; size?: "s"` `"m"` `undefined; }[]` | - |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the toggle group value changes, updating the modelValue prop. | [value: Array<string>] |

package/src/components/tooltip/README.md

@@ -0,0 +1,19 @@
+# MTooltip
+
+A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the tooltip, used to describe the tooltip. | `string` | - |
+| `text*` | Content of the tooltip. | `string` | - |
+| `position` | Determines the position of the tooltip. | `"left"` `"right"` `"top"` `"bottom"` | `"top"` |
+| `pointer` | If `true`, the tooltip display a pointer. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | The tooltip will point to the content of the slot. |

package/src/components/usingIcons.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Using Icons" />
+<Meta title="Getting Started/Using Icons" />
 
 # Using Icons
 

package/src/components/usingPresets.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Using Presets" />
+<Meta title="Getting Started/Using Presets" />
 
 # Mozaic's presets
 

package/src/main.ts

@@ -27,6 +27,7 @@ export { default as MPincode } from './components/pincode/MPincode.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
+export { default as MSegmentedControl } from './components/segmentedcontrol/MSegmentedControl.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';