@mozaic-ds/vue 2.6.1 → 2.8.0

package/src/components/pincode/MPincode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-pincode-input" :class="classObject" @paste="onPaste">
+  <div class="mc-pincode-input" @paste="onPaste">
     <input
       v-for="(digit, index) in otp"
       :key="index"
@@ -12,6 +12,7 @@
       autocomplete="one-time-code"
       :name="name || `pincode-${id}`"
       class="mc-pincode-input__control"
+      :class="classObject"
       :disabled="disabled"
       :readonly="readonly"
       :value="digit"
@@ -77,6 +78,9 @@ const classObject = computed(() => {
 });
 
 const emit = defineEmits<{
+  /**
+   * Emits when the pincode value changes, updating the modelValue prop.
+   */
   (on: 'update:modelValue', value: string): void;
 }>();
 

package/src/components/pincode/README.md

@@ -0,0 +1,22 @@
+# MPincode
+
+A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<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 pincode element, used to associate the label with the form element. | `string` | - |
+| `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
+| `name` | The name attribute for the pincode element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the pincode field. | `string` `number` | - |
+| `isInvalid` | If `true`, applies an invalid state to the pincode. | `boolean` | - |
+| `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the pincode value changes, updating the modelValue prop. | [value: string] |

package/src/components/quantityselector/MQuantitySelector.stories.ts

@@ -80,10 +80,3 @@ export const Invalid: Story = {
     isInvalid: true,
   },
 };
-
-export const readOnly: Story = {
-  args: {
-    id: 'readonlyId',
-    readonly: true,
-  },
-};

package/src/components/quantityselector/README.md

@@ -0,0 +1,27 @@
+# MQuantitySelector
+
+A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the quantity selector element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the quantity selector element, typically used for form submission. | `string` | `"quantity-selector-input"` |
+| `modelValue` | The current value of the quantity selector field. | `number` | `1` |
+| `isInvalid` | If `true`, applies an invalid state to the quantity selector. | `boolean` | - |
+| `disabled` | If `true`, disables the quantity selector, making it non-interactive. | `boolean` | - |
+| `size` | Determines the size of the quantity selector. | `"s"` `"m"` | `"m"` |
+| `min` | Minimum acceptable value for the quantity selector. | `number` | `1` |
+| `max` | Maximum acceptable value for the quantity selector. | `number` | `100` |
+| `step` | Determines how much the value will change per click when the quantity is increased or decreased. | `number` | `1` |
+| `readonly` | If `true`, the quantity selector is read-only (cannot be edited). | `boolean` | - |
+| `incrementlabel` | The label text for the increment button. | `string` | `"Increment"` |
+| `decrementLabel` | The label text for the decrement button. | `string` | `"Decrement"` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the quantity selector value changes, updating the `modelValue` prop. | [value: number] |

package/src/components/radio/README.md

@@ -0,0 +1,21 @@
+# MRadio
+
+A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the radio, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the radio element, typically used for form submission. | `string` | - |
+| `label` | The text label displayed next to the radio. | `string` | - |
+| `modelValue` | The radio's checked state, bound via v-model. | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the radio. | `boolean` | - |
+| `disabled` | If `true`, disables the radio, making it non-interactive. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the radio value changes, updating the modelValue prop. | [value: boolean] |

package/src/components/radiogroup/README.md

@@ -0,0 +1,21 @@
+# MRadioGroup
+
+A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<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#radio-group).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `name*` | The name attribute for the radio 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 radio button of the radio group | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; }[]` | - |
+| `isInvalid` | If `true`, applies an invalid state to the radio group. | `boolean` | - |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the radio group value changes, updating the modelValue prop. | [value: string] |

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

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MSegmentedControl from './MSegmentedControl.vue';
+
+describe('MSegmentedControl.vue', () => {
+  const segments = [
+    { label: 'First' },
+    { label: 'Second' },
+    { label: 'Third' },
+  ];
+
+  it('renders segments with correct labels', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons).toHaveLength(segments.length);
+    buttons.forEach((btn, i) => {
+      expect(btn.text()).toBe(segments[i].label);
+    });
+  });
+
+  it('sets default active segment based on modelValue prop', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 1 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons[1].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[1].attributes('aria-checked')).toBe('true');
+  });
+
+  it('emits update:modelValue and changes active segment on click', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 0 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    await buttons[2].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+
+    expect(buttons[2].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[2].attributes('aria-checked')).toBe('true');
+  });
+
+  it('does not emit update event if clicking already active segment', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 1 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    await buttons[1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  it('applies full width class when full prop is true', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, full: true },
+    });
+
+    expect(wrapper.classes()).toContain('mc-segmented-control--full');
+  });
+
+  it('applies size class when size prop is "m"', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, size: 'm' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-segmented-control--m');
+  });
+
+  it('does not apply size class when size is "s" (default)', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-segmented-control--s');
+  });
+
+  it('updates active segment when modelValue prop changes', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 0 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons[0].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+
+    await wrapper.setProps({ modelValue: 2 });
+
+    expect(buttons[2].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[2].attributes('aria-checked')).toBe('true');
+  });
+
+  it('adds role="radio" attribute to buttons', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    const buttons = wrapper.findAll('button');
+    buttons.forEach((button) => {
+      expect(button.attributes('role')).toBe('radio');
+    });
+  });
+});

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