Skip to content

Commit 80eee44

Browse files
FelipeO16FelipeO16
committed
feat: add PUDivider component with hand-drawn style separators
1 parent 29df465 commit 80eee44

File tree

3 files changed

+462
-0
lines changed

3 files changed

+462
-0
lines changed

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="divider-demo">
3+
<CodeBlock
4+
v-if="type === 'horizontal'"
5+
:compare="false"
6+
>
7+
<template #preview>
8+
<div class="space-y-4">
9+
<div>Content above</div>
10+
<PUDivider
11+
orientation="horizontal"
12+
style="solid"
13+
/>
14+
<div>Content below</div>
15+
</div>
16+
</template>
17+
<template #code>
18+
<slot name="code" />
19+
</template>
20+
</CodeBlock>
21+
22+
<CodeBlock
23+
v-if="type === 'vertical'"
24+
:compare="false"
25+
>
26+
<template #preview>
27+
<div class="flex items-center h-20">
28+
<div>Left content</div>
29+
<PUDivider
30+
orientation="vertical"
31+
style="solid"
32+
/>
33+
<div>Right content</div>
34+
</div>
35+
</template>
36+
<template #code>
37+
<slot name="code" />
38+
</template>
39+
</CodeBlock>
40+
41+
<CodeBlock
42+
v-if="type === 'styles'"
43+
:compare="false"
44+
>
45+
<template #preview>
46+
<div class="space-y-4">
47+
<PUDivider style="solid" />
48+
<PUDivider style="dashed" />
49+
<PUDivider style="dotted" />
50+
<PUDivider style="wavy" />
51+
</div>
52+
</template>
53+
<template #code>
54+
<slot name="code" />
55+
</template>
56+
</CodeBlock>
57+
58+
<CodeBlock
59+
v-if="type === 'with-text'"
60+
:compare="false"
61+
>
62+
<template #preview>
63+
<PUDivider
64+
text="Section Title"
65+
style="solid"
66+
/>
67+
</template>
68+
<template #code>
69+
<slot name="code" />
70+
</template>
71+
</CodeBlock>
72+
73+
<CodeBlock
74+
v-if="type === 'sizes'"
75+
:compare="false"
76+
>
77+
<template #preview>
78+
<div class="space-y-4">
79+
<PUDivider size="small" />
80+
<PUDivider size="medium" />
81+
<PUDivider size="large" />
82+
</div>
83+
</template>
84+
<template #code>
85+
<slot name="code" />
86+
</template>
87+
</CodeBlock>
88+
</div>
89+
</template>
90+
91+
<script lang="ts" setup>
92+
defineProps<{
93+
type: 'horizontal' | 'vertical' | 'styles' | 'with-text' | 'sizes'
94+
}>()
95+
</script>

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
::doc-topic
2+
#title
3+
PUDivider Component
4+
#description
5+
A hand-drawn style divider component for creating visual separations with various styles and orientations
6+
::
7+
8+
::doc-topic
9+
#title
10+
Usage
11+
#description
12+
Basic Usage
13+
::
14+
::paper-show-divider{type="horizontal"}
15+
#code
16+
```html
17+
<template>
18+
<div>Content above</div>
19+
<PUDivider orientation="horizontal" style="solid" />
20+
<div>Content below</div>
21+
</template>
22+
```
23+
::
24+
25+
::doc-topic
26+
#description
27+
Vertical Divider
28+
::
29+
::paper-show-divider{type="vertical"}
30+
#code
31+
```html
32+
<template>
33+
<div class="flex items-center">
34+
<div>Left content</div>
35+
<PUDivider orientation="vertical" style="solid" />
36+
<div>Right content</div>
37+
</div>
38+
</template>
39+
```
40+
::
41+
42+
::doc-topic
43+
#description
44+
Different Styles
45+
::
46+
::paper-show-divider{type="styles"}
47+
#code
48+
```html
49+
<template>
50+
<PUDivider style="solid" />
51+
<PUDivider style="dashed" />
52+
<PUDivider style="dotted" />
53+
<PUDivider style="wavy" />
54+
</template>
55+
```
56+
::
57+
58+
::doc-topic
59+
#description
60+
With Text
61+
::
62+
::paper-show-divider{type="with-text"}
63+
#code
64+
```html
65+
<template>
66+
<PUDivider text="Section Title" style="solid" />
67+
</template>
68+
```
69+
::
70+
71+
::doc-topic
72+
#description
73+
Different Sizes
74+
::
75+
::paper-show-divider{type="sizes"}
76+
#code
77+
```html
78+
<template>
79+
<PUDivider size="small" />
80+
<PUDivider size="medium" />
81+
<PUDivider size="large" />
82+
</template>
83+
```
84+
::
85+
86+
::doc-topic
87+
#title
88+
Props
89+
::
90+
::doc-table
91+
---
92+
headers: ['Prop', 'Type', 'Required', 'Default', 'Description']
93+
rows:
94+
- - 'orientation'
95+
- 'horizontal | vertical'
96+
- 'No'
97+
- 'horizontal'
98+
- 'Divider orientation'
99+
- - 'style'
100+
- 'solid | dashed | dotted | wavy'
101+
- 'No'
102+
- 'solid'
103+
- 'Divider line style'
104+
- - 'text'
105+
- 'string'
106+
- 'No'
107+
- "''"
108+
- 'Text to display in the divider'
109+
- - 'size'
110+
- 'small | medium | large'
111+
- 'No'
112+
- 'medium'
113+
- 'Divider thickness'
114+
- - 'customClass'
115+
- 'string'
116+
- 'No'
117+
- "''"
118+
- 'Custom CSS classes'
119+
---
120+
::
121+
122+
::doc-topic
123+
#title
124+
Features
125+
#description
126+
- Hand-drawn style visual effects
127+
- Multiple orientations: horizontal and vertical
128+
- Various line styles: solid, dashed, dotted, wavy
129+
- Text support with background masking
130+
- Different sizes for thickness control
131+
- Dark mode support
132+
- Responsive design
133+
::
134+
135+
::doc-topic
136+
#title
137+
Dependencies
138+
#description
139+
- Tailwind CSS for styling
140+
- Vue 3 Composition API
141+
::

0 commit comments

Comments
 (0)