PUSearch Component
A hand-drawn style search component with suggestions, loading states, and smooth animations
Usage
Basic Usage
With Suggestions
Loading State
Different Sizes
Disabled State
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | string | No | '' | Search input value |
| placeholder | string | No | Search... | Input placeholder text |
| suggestions | SearchSuggestion[] | No | [] | Array of search suggestions |
| loading | boolean | No | false | Loading state |
| disabled | boolean | No | false | Disabled state |
| size | small | medium | large | No | medium | Search input size |
| showClear | boolean | No | true | Show clear button |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| update:modelValue | string | Emitted when input value changes |
| search | string | Emitted when Enter is pressed |
| suggestion-select | SearchSuggestion | Emitted when suggestion is selected |
| clear | - | Emitted when clear button is clicked |
Types
| Type | Properties | Description |
|---|---|---|
| SearchSuggestion | text: string, value: string, icon?: any | Search suggestion interface |
Features
- Hand-drawn style input with organic shadows
- Search icon and clear button
- Loading spinner animation
- Dropdown suggestions with keyboard navigation
- Smooth animations and transitions
- Multiple sizes for different use cases
- Disabled state support
- Optional icons for suggestions
- Dark mode support
- Responsive design
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API