Skip to content

Commit 320daf1

Browse files
FelipeO16FelipeO16
committed
feat: add PUDropdown component with smooth animations
1 parent d33b801 commit 320daf1

File tree

3 files changed

+555
-0
lines changed

3 files changed

+555
-0
lines changed

‎docs/app/components/paper/ShowDropdown.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div class="dropdown-demo">
3+
<CodeBlock
4+
v-if="type === 'basic'"
5+
:compare="false"
6+
>
7+
<template #preview>
8+
<PUDropdown
9+
v-model="selectedValue"
10+
:options="options"
11+
placeholder="Choose an option"
12+
/>
13+
<div class="mt-2 text-sm text-gray-600">
14+
Selected: {{ selectedValue }}
15+
</div>
16+
</template>
17+
<template #code>
18+
<slot name="code" />
19+
</template>
20+
</CodeBlock>
21+
22+
<CodeBlock
23+
v-if="type === 'sizes'"
24+
:compare="false"
25+
>
26+
<template #preview>
27+
<div class="space-y-2">
28+
<PUDropdown
29+
v-model="selectedValue2"
30+
:options="options"
31+
size="small"
32+
placeholder="Small"
33+
/>
34+
<PUDropdown
35+
v-model="selectedValue2"
36+
:options="options"
37+
size="medium"
38+
placeholder="Medium"
39+
/>
40+
<PUDropdown
41+
v-model="selectedValue2"
42+
:options="options"
43+
size="large"
44+
placeholder="Large"
45+
/>
46+
</div>
47+
</template>
48+
<template #code>
49+
<slot name="code" />
50+
</template>
51+
</CodeBlock>
52+
53+
<CodeBlock
54+
v-if="type === 'disabled'"
55+
:compare="false"
56+
>
57+
<template #preview>
58+
<PUDropdown
59+
v-model="selectedValue3"
60+
:options="options"
61+
:disabled="true"
62+
placeholder="Disabled dropdown"
63+
/>
64+
</template>
65+
<template #code>
66+
<slot name="code" />
67+
</template>
68+
</CodeBlock>
69+
</div>
70+
</template>
71+
72+
<script lang="ts" setup>
73+
import { ref } from 'vue'
74+
75+
defineProps<{
76+
type: 'basic' | 'sizes' | 'disabled'
77+
}>()
78+
79+
const selectedValue = ref('')
80+
const selectedValue2 = ref('')
81+
const selectedValue3 = ref('')
82+
83+
const options = [
84+
{ value: 'option1', label: 'Option 1' },
85+
{ value: 'option2', label: 'Option 2' },
86+
{ value: 'option3', label: 'Option 3' },
87+
{ value: 'option4', label: 'Option 4' },
88+
]
89+
</script>

‎docs/content/docs/components/pu-dropdown.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
::doc-topic
2+
#title
3+
PUDropdown Component
4+
#description
5+
A hand-drawn style dropdown component with smooth animations and customizable options
6+
::
7+
8+
::doc-topic
9+
#title
10+
Usage
11+
#description
12+
Basic Usage
13+
::
14+
::paper-show-dropdown{type="basic"}
15+
#code
16+
```html
17+
<template>
18+
<PUDropdown
19+
v-model="selected"
20+
:options="options"
21+
placeholder="Choose an option"
22+
/>
23+
</template>
24+
25+
<script setup>
26+
const selected = ref('')
27+
const options = [
28+
{ value: 'option1', label: 'Option 1' },
29+
{ value: 'option2', label: 'Option 2' },
30+
{ value: 'option3', label: 'Option 3' },
31+
]
32+
</script>
33+
```
34+
::
35+
36+
::doc-topic
37+
#description
38+
Different Sizes
39+
::
40+
::paper-show-dropdown{type="sizes"}
41+
#code
42+
```html
43+
<template>
44+
<PUDropdown v-model="selected" :options="options" size="small" />
45+
<PUDropdown v-model="selected" :options="options" size="medium" />
46+
<PUDropdown v-model="selected" :options="options" size="large" />
47+
</template>
48+
```
49+
::
50+
51+
::doc-topic
52+
#description
53+
Disabled State
54+
::
55+
::paper-show-dropdown{type="disabled"}
56+
#code
57+
```html
58+
<template>
59+
<PUDropdown
60+
v-model="selected"
61+
:options="options"
62+
:disabled="true"
63+
placeholder="Disabled dropdown"
64+
/>
65+
</template>
66+
```
67+
::
68+
69+
::doc-topic
70+
#title
71+
Props
72+
::
73+
::doc-table
74+
---
75+
headers: ['Prop', 'Type', 'Required', 'Default', 'Description']
76+
rows:
77+
- - 'modelValue'
78+
- 'string | number'
79+
- 'No'
80+
- "''"
81+
- 'Selected option value'
82+
- - 'options'
83+
- 'DropdownOption[]'
84+
- 'No'
85+
- '[]'
86+
- 'Array of dropdown options'
87+
- - 'placeholder'
88+
- 'string'
89+
- 'No'
90+
- 'Select an option'
91+
- 'Placeholder text'
92+
- - 'disabled'
93+
- 'boolean'
94+
- 'No'
95+
- 'false'
96+
- 'Disabled state'
97+
- - 'size'
98+
- 'small | medium | large'
99+
- 'No'
100+
- 'medium'
101+
- 'Dropdown size'
102+
- - 'customClass'
103+
- 'string'
104+
- 'No'
105+
- "''"
106+
- 'Custom CSS classes'
107+
---
108+
::
109+
110+
::doc-topic
111+
#title
112+
Events
113+
::
114+
::doc-table
115+
---
116+
headers: ['Event', 'Payload', 'Description']
117+
rows:
118+
- - 'update:modelValue'
119+
- 'string | number'
120+
- 'Emitted when selection changes'
121+
- - 'change'
122+
- 'string | number'
123+
- 'Emitted when option is selected'
124+
---
125+
::
126+
127+
::doc-topic
128+
#title
129+
Types
130+
::
131+
::doc-table
132+
---
133+
headers: ['Type', 'Properties', 'Description']
134+
rows:
135+
- - 'DropdownOption'
136+
- 'value: string | number, label: string, icon?: any'
137+
- 'Dropdown option interface'
138+
---
139+
::
140+
141+
::doc-topic
142+
#title
143+
Features
144+
#description
145+
- Hand-drawn style trigger and menu with organic shadows
146+
- Smooth dropdown animations with Vue transitions
147+
- Click outside to close functionality
148+
- Keyboard navigation support
149+
- Multiple sizes for different use cases
150+
- Disabled state support
151+
- Optional icons for options
152+
- Dark mode support
153+
- Responsive design
154+
::
155+
156+
::doc-topic
157+
#title
158+
Dependencies
159+
#description
160+
- Tailwind CSS for styling
161+
- Vue 3 Composition API
162+
::

0 commit comments

Comments
 (0)