Design SystemComponents
Quantity
Let users step a quantity up or down.
Import
import { Quantity } from "@dr-max/ui/quantity"
The entry carries its own precompiled CSS (including the styles of the Button, Icon, Spinner, Text and Tooltip parts it composes) — no extra style imports needed.
Usage
The quantity is a controlled v-model number:
<script setup lang="ts">
import { Quantity } from "@dr-max/ui/quantity"
import { ref } from "vue"
const quantity = ref(1)
</script>
<template>
<Quantity v-model="quantity" :minimum="1" :maximum="10" />
</template>
Sizes
<template>
<Quantity v-model="quantity" size="sm" />
<Quantity v-model="quantity" size="md" />
</template>
Limits
Reaching minimum disables the decrease button and reaching maximum disables the increase button. The emitted change payload carries the requested value (oldValue/newValue) — clamping is the consumer's responsibility:
<template>
<Quantity v-model="quantity" :minimum="1" :maximum="10" />
</template>
Loading
Show a spinner in the button whose action is being processed:
<template>
<Quantity v-model="quantity" decrease-loading />
<Quantity v-model="quantity" increase-loading />
</template>
Disabled
<template>
<Quantity v-model="quantity" disabled />
</template>
Error tooltip
error-message renders in a tooltip bubble anchored to the control named by error-type (increment, decrement or change):
<template>
<Quantity
v-model="quantity"
:maximum="10"
error-message="Maximum quantity reached"
error-type="increment"
/>
</template>
Accessible labels
The three inner controls carry their own accessible names, all overridable:
<template>
<Quantity
v-model="quantity"
decrease-label="Decrease quantity"
increase-label="Increase quantity"
quantity-label="Quantity"
/>
</template>
Playground
<script setup lang="ts">
import { Quantity } from '@dr-max/ui/quantity'
</script>
<template>
<Quantity :model-value="1" size="md" :minimum="0" :maximum="10" />
</template>