@mozaic-ds/vue 2.6.0 → 2.7.0

package/src/components/textinput/MTextInput.vue

@@ -41,7 +41,7 @@ import { computed, type VNode } from 'vue';
 import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
 
 /**
- * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
+ * 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).
  */
 const props = withDefaults(
   defineProps<{
@@ -62,7 +62,7 @@ const props = withDefaults(
      */
     placeholder?: string;
     /**
-     * Defines the type of input
+     * Defines the type of input.
      */
     inputType?:
       | 'date'
@@ -81,7 +81,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the input
+     * Determines the size of the input.
      */
     size?: 's' | 'm';
     /**
@@ -93,7 +93,7 @@ const props = withDefaults(
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
   }>(),
@@ -106,7 +106,7 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert an icon in the input
+   * Use this slot to insert an icon in the input.
    */
   icon?: VNode;
 }>();
@@ -128,9 +128,13 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/controls-options';
 @use '@mozaic-ds/styles/components/text-input';
-</style>
+</style>

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/MToaster.vue

@@ -58,11 +58,11 @@ import MLinearProgressbarBuffer from '../linearprogressbarbuffer/MLinearProgress
 const props = withDefaults(
   defineProps<{
     /**
-     * if `true`, display the Toaster.
+     * If `true`, display the Toaster.
      */
     open?: boolean;
     /**
-     * Position of the toaster
+     * Position of the toaster.
      */
     position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
     /**
@@ -74,11 +74,11 @@ const props = withDefaults(
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**
-     * if `true`, display the close button.
+     * If `true`, display the close button.
      */
     closable?: boolean;
     /**
-     * if `true`, display the progress bar of the duration.
+     * If `true`, display the progress bar of the duration.
      */
     progress?: boolean;
     /**

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/MToggle.vue

@@ -24,7 +24,7 @@
 import { computed } from 'vue';
 
 /**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * 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.
  */
 const props = withDefaults(
   defineProps<{
@@ -45,7 +45,7 @@ const props = withDefaults(
      */
     modelValue?: boolean;
     /**
-     * Determines the size of the toggle
+     * Determines the size of the toggle.
      */
     size?: 's' | 'm';
     /**
@@ -70,6 +70,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

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 used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * 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<{
   /**
@@ -33,7 +33,7 @@ const props = defineProps<{
    */
   modelValue?: Array<string>;
   /**
-   * list of properties of each toggle of the toggle group
+   * List of properties of each toggle of the toggle group.
    */
   options: Array<{
     id: string;

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/MTooltip.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="tooltip-story-wrapper">
-    <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
-      <slot />
-      <span :id="id" class="mc-tooltip__content" role="tooltip">
-        {{ text }}
-      </span>
-    </div>
+  <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
+    <slot />
+    <span :id="id" class="mc-tooltip__content" role="tooltip">
+      {{ text }}
+    </span>
   </div>
 </template>
 
@@ -21,15 +19,15 @@ const props = withDefaults(
      */
     id: string;
     /**
-     * Content of the tooltip
+     * Content of the tooltip.
      */
     text: string;
     /**
-     * Determines the position of the tooltip
+     * Determines the position of the tooltip.
      */
     position?: 'top' | 'bottom' | 'left' | 'right';
     /**
-     * if `true`, the tooltip display a pointer.
+     * If `true`, the tooltip display a pointer.
      */
     pointer?: boolean;
   }>(),

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

@@ -1,10 +1,10 @@
 export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
 export { default as MButton } from './components/button/MButton.vue';
+export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
-export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
@@ -13,6 +13,8 @@ export { default as MField } from './components/field/MField.vue';
 export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
 export { default as MFlag } from './components/flag/MFlag.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
+export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue';
 export { default as MLink } from './components/link/MLink.vue';
 export { default as MLoader } from './components/loader/MLoader.vue';
 export { default as MLoadingOverlay } from './components/loadingoverlay/MLoadingOverlay.vue';
@@ -22,13 +24,13 @@ 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 MPincode } from './components/pincode/MPincode.vue';
-export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
-export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.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';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
@@ -36,5 +38,5 @@ export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToaster } from './components/toaster/MToaster.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
-export { default as MTooltip } from './components/tooltip/MTooltip.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';
+export { default as MTooltip } from './components/tooltip/MTooltip.vue';