Manual v0.1 // Component Library
The Stepper
Control
"A real v-model quantity control. Click the buttons below, they actually count."
Ported from dermageddon's QtyButton and fixed into a proper v-model. Bounds are enforced via min/max props; buttons disable themselves at the edges.
01 / DEFAULT
Unbounded
min 0, no max
0
Specmin=0 / max=Infinity
v-model="qty" :min="0"
02 / BOUNDED
Min / Max
Cart-style limit
2
Specmin=0 / max=5
v-model="qty" :min="0" :max="5"
03 / DISABLED
Locked
Read-only state
4
Specboth buttons inert
v-model="qty" disabled
How to use
import { Stepper } from "echo-ui";<Stepper v-model="qty" :min="0" :max="10" />v-model is a Number, defaults to 0. disabled locks both buttons regardless of bounds.
Base rule
emits update:modelValue, clamps at min/max
Source
echo-ui/components/Stepper.vue