@mozaic-ds/vue 2.6.1 → 2.8.0

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

@@ -5,7 +5,6 @@
       :id="option.id"
       :key="option.id"
       :label="option.label"
-      :is-invalid="option.isInvalid"
       :name="name"
       :class="classObjectItem"
       :model-value="modelValue ? modelValue.includes(option.value) : undefined"
@@ -20,7 +19,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<{
   /**
@@ -40,7 +39,6 @@ const props = defineProps<{
     label: string;
     value: string;
     disabled?: boolean;
-    isInvalid?: boolean;
     size?: 's' | 'm';
   }>;
   /**

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

@@ -23,10 +23,12 @@ export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.v
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MPhoneNumber } from './components/phonenumber/MPhoneNumber.vue';
 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';