PUDropdown Component
A hand-drawn style dropdown component with smooth animations and customizable options
Usage
Basic Usage
Selected:
Different Sizes
Disabled State
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | string | number | No | '' | Selected option value |
| options | DropdownOption[] | No | [] | Array of dropdown options |
| placeholder | string | No | Select an option | Placeholder text |
| disabled | boolean | No | false | Disabled state |
| size | small | medium | large | No | medium | Dropdown size |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| update:modelValue | string | number | Emitted when selection changes |
| change | string | number | Emitted when option is selected |
Types
| Type | Properties | Description |
|---|---|---|
| DropdownOption | value: string | number, label: string, icon?: any | Dropdown option interface |
Features
- Hand-drawn style trigger and menu with organic shadows
- Smooth dropdown animations with Vue transitions
- Click outside to close functionality
- Keyboard navigation support
- Multiple sizes for different use cases
- Disabled state support
- Optional icons for options
- Dark mode support
- Responsive design
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API