@mozaic-ds/vue/src/components/quantityselector/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

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