PUCounter Component
A hand-drawn style counter component with increment/decrement controls and smooth animations
Usage
Basic Usage
5
With Suffix
12items
Different Sizes
8
8
8
Disabled State
3
Without Controls
42views
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | number | No | 0 | Current counter value |
| min | number | No | 0 | Minimum value |
| max | number | No | 999 | Maximum value |
| step | number | No | 1 | Increment/decrement step |
| suffix | string | No | '' | Text suffix after value |
| showControls | boolean | No | true | Show increment/decrement buttons |
| disabled | boolean | No | false | Disabled state |
| size | small | medium | large | No | medium | Counter size |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| update:modelValue | number | Emitted when value changes |
| change | number | Emitted when increment/decrement is clicked |
Features
- Hand-drawn style buttons with organic shadows
- Smooth animations for value changes
- Increment/decrement controls with disabled states
- Optional suffix text
- Multiple sizes for different use cases
- Min/max value constraints
- Customizable step increments
- Dark mode support
- Responsive design
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API