Skip to content

Commit 43c7d6c

Browse files
FelipeO16FelipeO16
committed
feat(docs): add docs page for progress
1 parent a6a0ac4 commit 43c7d6c

File tree

4 files changed

+247
-0
lines changed

4 files changed

+247
-0
lines changed

‎docs/app/components/AllComponents.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,27 @@
267267
<a href="/docs/components/pu-progress">PUProgress</a>
268268
</template>
269269
</ShowComponent>
270+
<ShowComponent>
271+
<template #component>
272+
<div class="flex gap-2">
273+
<PUAvatar
274+
src="/avatar.svg"
275+
size="small"
276+
/>
277+
<PUAvatar
278+
src="/avatar.svg"
279+
size="medium"
280+
/>
281+
<PUAvatar
282+
src="/avatar.svg"
283+
size="large"
284+
/>
285+
</div>
286+
</template>
287+
<template #component-name>
288+
<a href="/docs/components/pu-avatar">PUAvatar</a>
289+
</template>
290+
</ShowComponent>
270291
<PUModal />
271292
<PUToast
272293
ref="toast"

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="avatar-demo">
3+
<CodeBlock v-if="type === 'default'">
4+
<template #preview>
5+
<PUAvatar src="/avatar.svg" />
6+
</template>
7+
<template #code>
8+
<slot name="code" />
9+
</template>
10+
</CodeBlock>
11+
12+
<CodeBlock v-if="type === 'sizes'">
13+
<template #preview>
14+
<div class="flex items-center gap-2">
15+
<PUAvatar
16+
src="/avatar.svg"
17+
size="small"
18+
/>
19+
<PUAvatar
20+
src="/avatar.svg"
21+
size="medium"
22+
/>
23+
<PUAvatar
24+
src="/avatar.svg"
25+
size="large"
26+
/>
27+
<PUAvatar
28+
src="/avatar.svg"
29+
size="xlarge"
30+
/>
31+
</div>
32+
</template>
33+
<template #code>
34+
<slot name="code" />
35+
</template>
36+
</CodeBlock>
37+
38+
<CodeBlock v-if="type === 'shapes'">
39+
<template #preview>
40+
<div class="flex items-center gap-2">
41+
<PUAvatar
42+
src="/avatar.svg"
43+
shape="circular"
44+
/>
45+
<PUAvatar
46+
src="/avatar.svg"
47+
shape="rounded"
48+
/>
49+
<PUAvatar
50+
src="/avatar.svg"
51+
shape="square"
52+
/>
53+
</div>
54+
</template>
55+
<template #code>
56+
<slot name="code" />
57+
</template>
58+
</CodeBlock>
59+
60+
<CodeBlock v-if="type === 'fallback'">
61+
<template #preview>
62+
<PUAvatar />
63+
</template>
64+
<template #code>
65+
<slot name="code" />
66+
</template>
67+
</CodeBlock>
68+
</div>
69+
</template>
70+
71+
<script lang="ts" setup>
72+
defineProps<{
73+
type: 'default' | 'sizes' | 'shapes' | 'fallback'
74+
}>()
75+
</script>

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
::doc-topic
2+
#title
3+
PU-Avatar Component
4+
#description
5+
A flexible avatar component with support for images, fallback content, and multiple styling options
6+
::
7+
8+
::doc-topic
9+
#title
10+
Usage
11+
#description
12+
Basic Usage
13+
::
14+
::paper-show-avatar{type="default"}
15+
#code
16+
```html
17+
<template>
18+
<PUAvatar src="/avatar.svg" />
19+
</template>
20+
```
21+
::
22+
23+
::doc-topic
24+
#description
25+
### Different Sizes
26+
::
27+
::paper-show-avatar{type="sizes"}
28+
#code
29+
```html
30+
<template>
31+
<div class="flex items-center gap-2">
32+
<PUAvatar src="/avatar.svg" size="small" />
33+
<PUAvatar src="/avatar.svg" size="medium" />
34+
<PUAvatar src="/avatar.svg" size="large" />
35+
<PUAvatar src="/avatar.svg" size="xlarge" />
36+
</div>
37+
</template>
38+
```
39+
::
40+
41+
::doc-topic
42+
#description
43+
### Different Shapes
44+
::
45+
::paper-show-avatar{type="shapes"}
46+
#code
47+
```html
48+
<template>
49+
<div class="flex items-center gap-2">
50+
<PUAvatar src="/avatar.svg" shape="circular" />
51+
<PUAvatar src="/avatar.svg" shape="rounded" />
52+
<PUAvatar src="/avatar.svg" shape="square" />
53+
</div>
54+
</template>
55+
```
56+
::
57+
58+
::doc-topic
59+
#description
60+
### Fallback Content
61+
::
62+
::paper-show-avatar{type="fallback"}
63+
#code
64+
```html
65+
<template>
66+
<PUAvatar />
67+
</template>
68+
```
69+
::
70+
71+
::doc-topic
72+
#title
73+
## Props
74+
::
75+
::doc-table
76+
---
77+
headers: ['Prop', 'Type', 'Required', 'Default', 'Description']
78+
rows:
79+
- - 'src'
80+
- 'string'
81+
- 'No'
82+
- 'undefined'
83+
- 'Image source URL'
84+
- - 'size'
85+
- 'small | medium | large | xlarge'
86+
- 'No'
87+
- 'medium'
88+
- 'Size of the avatar'
89+
- - 'shape'
90+
- 'circular | rounded | square'
91+
- 'No'
92+
- 'circular'
93+
- 'Shape of the avatar'
94+
---
95+
::
96+
97+
::doc-topic
98+
#title
99+
## Styling
100+
#description
101+
- Base styling with Tailwind:
102+
::code-box{header="Core Structure" type="css" copy}
103+
```css
104+
.avatar {
105+
@apply flex items-center justify-center overflow-hidden border-2 border-black;
106+
}
107+
108+
.avatar img {
109+
@apply w-full h-full object-cover;
110+
}
111+
```
112+
::
113+
- Size classes:
114+
::code-box{header="Size Classes" type="css" copy}
115+
```css
116+
.small { @apply w-8 h-8; }
117+
.medium { @apply w-12 h-12; }
118+
.large { @apply w-16 h-16; }
119+
.xlarge { @apply w-24 h-24; }
120+
```
121+
::
122+
- Shape classes:
123+
::code-box{header="Shape Classes" type="css" copy}
124+
```css
125+
.circular { @apply rounded-full; }
126+
.rounded { @apply rounded-lg; }
127+
.square { @apply rounded-none; }
128+
```
129+
::
130+
131+
::doc-topic
132+
#title
133+
## Features
134+
#description
135+
- Multiple size options
136+
- Customizable shapes
137+
- Fallback content for missing images
138+
- Border styling
139+
- Responsive design
140+
::
141+
142+
::doc-topic
143+
#title
144+
## Dependencies
145+
#description
146+
- Tailwind CSS for styling
147+
::

‎docs/public/avatar.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)