Skip to content

Commit 236371c

Browse files
lepturelepture
committed
fix(avatar): add a user icon for avatar fallback
1 parent d8be344 commit 236371c

File tree

15 files changed

+648
-277
lines changed

15 files changed

+648
-277
lines changed

‎.vitepress/config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { resolve } from 'node:path'
22
import { defineConfig } from 'vitepress'
33
import tailwindcss from '@tailwindcss/vite'
4+
import Icons from 'unplugin-icons/vite'
45
import { markdownExampleTagBlock } from './plugins/example'
56

67
// https://vitepress.dev/reference/site-config
@@ -11,8 +12,10 @@ export default defineConfig({
1112
cleanUrls: true,
1213
vite: {
1314
plugins: [
14-
// @ts-expect-error this seems a type bug of vite
15+
// @ts-expect-error this seems a type bug
1516
tailwindcss(),
17+
// @ts-expect-error this seems a type bug
18+
Icons({ compiler: 'vue3' }),
1619
],
1720
resolve: {
1821
alias: {

‎docs/content/components/avatar.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,19 @@ radix: https://www.radix-ui.com/themes/docs/components/avatar
1818
### Size
1919

2020
<Example name="avatar/Size.vue" />
21+
22+
### Radius
23+
24+
<Example name="avatar/Radius.vue" />
25+
26+
### Fallback
27+
28+
<Example name="avatar/Fallback.vue" />
29+
30+
### Variant
31+
32+
<Example name="avatar/Variant.vue" />
33+
34+
### Ring
35+
36+
<Example name="avatar/Ring.vue" />

‎docs/examples/avatar/Fallback.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script setup lang="ts">
2+
import { Avatar } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-4">
7+
<Avatar
8+
src="https://bit.ly/broken-link"
9+
radius="full"
10+
alt="Harry Potter"
11+
/>
12+
<Avatar
13+
src="https://bit.ly/broken-link"
14+
variant="soft"
15+
radius="full"
16+
fallback="HP"
17+
/>
18+
<Avatar
19+
src="https://bit.ly/broken-link"
20+
radius="full"
21+
variant="soft"
22+
/>
23+
</div>
24+
</template>

‎docs/examples/avatar/Radius.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import { Avatar } from '#components'
3+
4+
const picture = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
5+
</script>
6+
7+
<template>
8+
<div class="flex flex-wrap items-center gap-4">
9+
<Avatar
10+
:src="picture"
11+
alt="Alex"
12+
radius="none"
13+
/>
14+
<Avatar
15+
:src="picture"
16+
alt="Alex"
17+
radius="small"
18+
/>
19+
<Avatar
20+
:src="picture"
21+
alt="Alex"
22+
radius="medium"
23+
/>
24+
<Avatar
25+
:src="picture"
26+
alt="Alex"
27+
radius="full"
28+
/>
29+
</div>
30+
</template>

‎docs/examples/avatar/Ring.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { Avatar } from '#components'
3+
4+
const picture = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
5+
</script>
6+
7+
<template>
8+
<div class="flex flex-wrap items-center gap-4">
9+
<Avatar
10+
:src="picture"
11+
alt="Alex"
12+
radius="full"
13+
color="indigo"
14+
variant="ring"
15+
/>
16+
<Avatar
17+
:src="picture"
18+
alt="Alex"
19+
radius="full"
20+
color="jade"
21+
variant="ring"
22+
/>
23+
<Avatar
24+
:src="picture"
25+
alt="Alex"
26+
radius="full"
27+
color="crimson"
28+
variant="ring"
29+
/>
30+
</div>
31+
</template>

‎docs/examples/avatar/Size.vue‎

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,66 @@
11
<script setup lang="ts">
22
import { Avatar } from '#components'
3+
4+
const picture = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
35
</script>
46

57
<template>
68
<div class="flex flex-col gap-4">
7-
<div class="flex flex-wrap items-center gap-2">
8-
<Avatar fallback="A" size="1" />
9-
<Avatar fallback="A" size="2" />
10-
<Avatar fallback="A" size="3" />
11-
<Avatar fallback="A" size="4" />
12-
<Avatar fallback="A" size="5" />
13-
<Avatar fallback="AB" size="6" />
14-
</div>
15-
<div class="flex flex-wrap items-center gap-2">
16-
<Avatar fallback="AB" size="7" />
17-
<Avatar fallback="AB" size="8" />
18-
<Avatar fallback="AB" size="9" />
9+
<div class="flex flex-wrap items-center gap-1">
10+
<Avatar
11+
:src="picture"
12+
alt="Alex"
13+
radius="full"
14+
size="1"
15+
/>
16+
<Avatar
17+
:src="picture"
18+
alt="Alex"
19+
radius="full"
20+
size="2"
21+
/>
22+
<Avatar
23+
:src="picture"
24+
alt="Alex"
25+
radius="full"
26+
size="3"
27+
/>
28+
<Avatar
29+
:src="picture"
30+
alt="Alex"
31+
radius="full"
32+
size="4"
33+
/>
34+
<Avatar
35+
:src="picture"
36+
alt="Alex"
37+
radius="full"
38+
size="5"
39+
/>
40+
<Avatar
41+
:src="picture"
42+
alt="Alex"
43+
radius="full"
44+
size="6"
45+
/>
46+
<Avatar
47+
:src="picture"
48+
alt="Alex"
49+
radius="full"
50+
size="7"
51+
/>
52+
<Avatar
53+
:src="picture"
54+
alt="Alex"
55+
radius="full"
56+
size="8"
57+
/>
58+
<Avatar
59+
:src="picture"
60+
alt="Alex"
61+
radius="full"
62+
size="9"
63+
/>
1964
</div>
2065
</div>
2166
</template>

‎docs/examples/avatar/Variant.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { Avatar } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-4">
7+
<div class="flex flex-wrap items-center gap-4">
8+
<Avatar
9+
fallback="HP"
10+
radius="full"
11+
size="3"
12+
variant="solid"
13+
/>
14+
<Avatar
15+
fallback="HP"
16+
radius="full"
17+
size="3"
18+
variant="surface"
19+
/>
20+
<Avatar
21+
fallback="HP"
22+
radius="full"
23+
size="3"
24+
variant="soft"
25+
/>
26+
<Avatar
27+
fallback="HP"
28+
radius="full"
29+
size="3"
30+
variant="outline"
31+
/>
32+
</div>
33+
</div>
34+
</template>

0 commit comments

Comments
 (0)