Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 6a02716

Browse files
ShyrroShyrro
committed
feat: add avatar component
Signed-off-by: Shyrro <[email protected]>
1 parent 1123461 commit 6a02716

26 files changed

+1627
-16
lines changed

‎packages/c-avatar/README.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# @chakra-ui/c-avatar
2+
3+
The avatar component is used to represent user and displays the profile picture initials or fallback icon
4+
5+
## Installation
6+
7+
```sh
8+
yarn add @chakra-ui/c-avatar
9+
# or
10+
npm i @chakra-ui/c-avatar
11+
```
12+
13+
## Imports
14+
15+
This packages exports the following components:
16+
17+
- **CAvatar** : The image that represents the user.
18+
- **CAvatarBadge** : A wrapper that displays its content on the right corner of the avatar.
19+
- **CAvatarGroup** : A wrapper to stack multiple Avatars together.
20+
21+
## Usage
22+
23+
### Default :
24+
25+
```html
26+
<c-avatar
27+
name="Evan You"
28+
alt="Evan You"
29+
src="https://www.github.com/yyx990803.png" />
30+
```
31+
32+
### Avatar Sizes :
33+
34+
The avatar component comes in 7 different sizes (`2xs`|`xs` | `sm` | `md` | `lg` | `xl` | `2xl`) :
35+
36+
```html
37+
<c-avatar
38+
name="Evan You"
39+
alt="Evan You"
40+
src="https://www.github.com/yyx990803.png"
41+
size="sm"/>
42+
43+
```
44+
45+
### Avatar Fallbacks :
46+
47+
If there is an error loading the `src` of the avatar, there are 2 fallbacks :
48+
49+
- If there's a `name` prop, we use it to generate the initials and a random, accessible background color.
50+
- If there's no `name` prop, we use a default Avatar.
51+
52+
### Customize the Fallback Avatar :
53+
54+
You can customize the fallback Avatar either by using style props or by passing a custom icon.
55+
56+
```html
57+
<!-- Styles props -->
58+
<c-avatar size="md" bg="red.500" />
59+
60+
<!-- Custom default icon -->
61+
<c-avatar>
62+
<c-icon color="white" name="star" />
63+
</c-avatar>
64+
```
65+
66+
### Avatar with badges
67+
68+
In some products, you might need to show a badge on the avatar. We call this a `badge`.
69+
70+
The badge is by default on the bottom right corner, but you can change its position by using the prop `position` (`top-start` | `top-end` | `bottom-start` | `bottom-end`)
71+
72+
```html
73+
<c-avatar name="Evan You">
74+
<c-avatar-badge bg="red.500" />
75+
</c-avatar>
76+
```
77+
78+
You can also add icons inside the badge if needed :
79+
80+
```html
81+
<c-avatar name="Evan You">
82+
<c-avatar-badge bg="red.500">
83+
<c-icon color="white" name="minus" w="0.3em" />
84+
</c-avatar-badge>
85+
</c-avatar>
86+
```
87+
88+
### Avatar Group
89+
90+
In some cases, you might need to stack avatars as a group. Use the `CAvatarGroup` component.
91+
92+
- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
93+
- To size all the avatars equally, pass the `size` prop.
94+
- To adjust the spacing between the avatars, pass the `spacing` prop.
95+
96+
97+
```html
98+
99+
<c-avatar-group max="3" size="lg">
100+
<c-avatar
101+
name="Sarah Drasner"
102+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
103+
alt="Sarah Drasner"
104+
/>
105+
<c-avatar
106+
name="Evan You"
107+
alt="Evan You"
108+
src="https://www.github.com/yyx990803.png"
109+
/>
110+
<c-avatar
111+
name="Anthony Fu"
112+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
113+
alt="Anthony Fu"
114+
/>
115+
<c-avatar
116+
name="Maya Shavin"
117+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
118+
alt="Maya Shavin"
119+
/>
120+
</c-avatar-group>
121+
122+
```
123+
124+
### Initials
125+
126+
We use a method that generate initials by splitting and merging the first character in each word from the `name` prop. But you can also pass the initials you want through the prop `initials`.

‎packages/c-avatar/examples/badge-c-avatar.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<c-stack>
3+
<chakra.p font-weight="bold">Default </chakra.p>
4+
<c-h-stack align="center" spacing="1">
5+
<c-avatar name="Sasuke Uchiha" size="sm">
6+
<c-avatar-badge bg="gray.500" />
7+
</c-avatar>
8+
<c-avatar name="Evan You">
9+
<c-avatar-badge bg="red.500" />
10+
</c-avatar>
11+
<c-avatar size="lg">
12+
<c-avatar-badge bg="orange.500" />
13+
</c-avatar>
14+
<c-avatar
15+
src="https://www.github.com/yyx990803.png"
16+
size="xl"
17+
alt="Evan you"
18+
lazy
19+
>
20+
<c-avatar-badge bg="green.500" aria-label="Online" title="Online" />
21+
</c-avatar>
22+
</c-h-stack>
23+
<chakra.p font-weight="bold">All positions</chakra.p>
24+
<c-h-stack align="center" spacing="1">
25+
<c-avatar name="Sasuke Uchiha" size="sm">
26+
<c-avatar-badge placement="top-start" bg="gray.500" />
27+
</c-avatar>
28+
<c-avatar name="Evan You">
29+
<c-avatar-badge placement="top-end" bg="red.500" />
30+
</c-avatar>
31+
<c-avatar size="lg">
32+
<c-avatar-badge placement="bottom-start" bg="orange.500" />
33+
</c-avatar>
34+
<c-avatar
35+
src="https://www.github.com/yyx990803.png"
36+
size="xl"
37+
alt="Evan you"
38+
lazy
39+
>
40+
<c-avatar-badge bg="green.500" aria-label="Online" title="Online" />
41+
</c-avatar>
42+
</c-h-stack>
43+
<chakra.p font-weight="bold">With custom border colors</chakra.p>
44+
<c-h-stack align="center" spacing="1">
45+
<c-avatar name="Sasuke Uchiha" size="sm">
46+
<c-avatar-badge bg="gray.500" borderColor="lightgray" />
47+
</c-avatar>
48+
<c-avatar name="Evan You">
49+
<c-avatar-badge bg="red.500" borderColor="pink" />
50+
</c-avatar>
51+
<c-avatar size="lg">
52+
<c-avatar-badge bg="orange.500" borderColor="papayawhip" />
53+
</c-avatar>
54+
<c-avatar
55+
src="https://www.github.com/yyx990803.png"
56+
size="xl"
57+
alt="Evan you"
58+
lazy
59+
>
60+
<c-avatar-badge
61+
aria-label="Online"
62+
title="Online"
63+
bg="green.500"
64+
borderColor="palegreen"
65+
>
66+
</c-avatar-badge>
67+
</c-avatar>
68+
</c-h-stack>
69+
<chakra.p font-weight="bold">Badge with icons</chakra.p>
70+
<c-h-stack align="center" spacing="1">
71+
<c-avatar name="Sasuke Uchiha" size="sm">
72+
<c-avatar-badge bg="orange.500">
73+
<c-icon color="white" name="chevron-right" w="0.3em" />
74+
</c-avatar-badge>
75+
</c-avatar>
76+
<c-avatar name="Evan You">
77+
<c-avatar-badge bg="red.500">
78+
<c-icon color="white" name="minus" w="0.3em" />
79+
</c-avatar-badge>
80+
</c-avatar>
81+
<c-avatar size="lg">
82+
<c-avatar-badge bg="yellow.500">
83+
<c-icon color="white" name="star" w="0.3em" />
84+
</c-avatar-badge>
85+
</c-avatar>
86+
<c-avatar
87+
src="https://www.github.com/yyx990803.png"
88+
size="xl"
89+
alt="Evan you"
90+
loading="lazy"
91+
>
92+
<c-avatar-badge aria-label="Connected" bg="green.500">
93+
<c-icon color="white" name="add" w="0.3em" />
94+
</c-avatar-badge>
95+
</c-avatar>
96+
</c-h-stack>
97+
</c-stack>
98+
</template>
99+
<script setup>
100+
import { CAvatar, CAvatarBadge } from "../src"
101+
</script>

‎packages/c-avatar/examples/base-c-avatar.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<c-stack>
3+
<chakra.p font-weight="bold">Default</chakra.p>
4+
<c-h-stack align="center">
5+
<c-avatar size="sm" />
6+
<c-avatar size="md"></c-avatar>
7+
<c-avatar size="lg"></c-avatar>
8+
<c-avatar size="xl"></c-avatar>
9+
</c-h-stack>
10+
11+
<chakra.p font-weight="bold">With custom background colors</chakra.p>
12+
<c-h-stack align="center">
13+
<c-avatar size="sm" bg="yellow.500" />
14+
<c-avatar size="md" bg="blue.500"></c-avatar>
15+
<c-avatar size="lg" bg="red.500"></c-avatar>
16+
<c-avatar size="xl" bg="purple.500"></c-avatar>
17+
</c-h-stack>
18+
<chakra.p font-weight="bold">With custom icons</chakra.p>
19+
<c-h-stack align="center">
20+
<c-avatar size="sm">
21+
<c-icon color="white" name="close" />
22+
</c-avatar>
23+
<c-avatar size="md">
24+
<c-icon color="white" name="star" />
25+
</c-avatar>
26+
<c-avatar size="lg">
27+
<c-icon color="white" name="check" />
28+
</c-avatar>
29+
<c-avatar size="xl">
30+
<c-icon color="white" name="user" />
31+
</c-avatar>
32+
</c-h-stack>
33+
34+
<chakra.p font-weight="bold">With initials</chakra.p>
35+
<c-h-stack align="center">
36+
<c-avatar size="sm" name="Sarah Drasner" />
37+
<c-avatar size="md" name="Anthony Fu"></c-avatar>
38+
<c-avatar size="lg" name="Maya Shavin"></c-avatar>
39+
<c-avatar size="xl" name="Evan You"></c-avatar>
40+
</c-h-stack>
41+
<chakra.p font-weight="bold">With pictures</chakra.p>
42+
<c-h-stack align="center">
43+
<c-avatar
44+
name="Sarah Drasner"
45+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
46+
alt="Sarah Drasner"
47+
size="sm"
48+
></c-avatar>
49+
<c-avatar
50+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
51+
alt="Anthony Fu"
52+
size="md"
53+
></c-avatar>
54+
<c-avatar
55+
name="Maya Shavin"
56+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
57+
alt="Maya Shavin"
58+
size="lg"
59+
>
60+
</c-avatar>
61+
<c-avatar
62+
src="https://www.github.com/yyx990803.png"
63+
size="xl"
64+
name="Evan You"
65+
>
66+
</c-avatar>
67+
</c-h-stack>
68+
</c-stack>
69+
</template>
70+
<script setup>
71+
import { CAvatar } from "../src"
72+
</script>

‎packages/c-avatar/examples/c-group-avatar.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<c-stack>
3+
<chakra.p font-weight="bold">Default</chakra.p>
4+
<c-avatar-group>
5+
<c-avatar name="Sarah Drasner" />
6+
<c-avatar></c-avatar>
7+
<c-avatar name="Maya Shavin"></c-avatar>
8+
<c-avatar name="Evan You"></c-avatar>
9+
</c-avatar-group>
10+
<chakra.p font-weight="bold">Custom max</chakra.p>
11+
<c-avatar-group max="3" size="lg">
12+
<c-avatar
13+
name="Sarah Drasner"
14+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
15+
alt="Sarah Drasner"
16+
/>
17+
<c-avatar
18+
name="Evan You"
19+
alt="Evan You"
20+
src="https://www.github.com/yyx990803.png"
21+
></c-avatar>
22+
<c-avatar
23+
name="Anthony Fu"
24+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
25+
alt="Anthony Fu"
26+
></c-avatar>
27+
<c-avatar
28+
name="Maya Shavin"
29+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
30+
alt="Maya Shavin"
31+
></c-avatar>
32+
</c-avatar-group>
33+
<chakra.p font-weight="bold">Smaller</chakra.p>
34+
<c-avatar-group size="sm">
35+
<c-avatar name="Sarah Drasner" />
36+
<c-avatar name="Anthony Fu"></c-avatar>
37+
<c-avatar name="Maya Shavin"></c-avatar>
38+
<c-avatar name="Evan You"></c-avatar>
39+
</c-avatar-group>
40+
</c-stack>
41+
</template>
42+
<script setup>
43+
import { CAvatar, CAvatarGroup } from "../src"
44+
</script>

‎packages/c-avatar/examples/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * as BaseAvatar from "./base-c-avatar.vue"
2+
export * as BadgeAvatar from "./badge-c-avatar.vue"
3+
export * as GroupAvatar from "./c-group-avatar.vue"

‎packages/c-avatar/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src'

‎packages/c-avatar/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@chakra-ui/c-avatar",
3+
"description": "Chakra UI Vue | The avatar component is used to represent user and displays the profile picture initials or fallback icon component",
4+
"version": "0.0.0-alpha.0",
5+
"main": "dist/chakra-ui-c-avatar.cjs.js",
6+
"module": "dist/chakra-ui-c-avatar.esm.js",
7+
"author": "Shyrro <[email protected]>",
8+
"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
9+
"license": "MIT",
10+
"files": [
11+
"dist"
12+
],
13+
"exports": {
14+
".": {
15+
"require": "./dist/chakra-ui-c-avatar.cjs.js",
16+
"default": "./dist/chakra-ui-c-avatar.esm.js"
17+
}
18+
},
19+
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-avatar",
20+
"bugs": {
21+
"url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
22+
},
23+
"sideEffects": false,
24+
"scripts": {
25+
"clean": "rimraf dist"
26+
},
27+
"dependencies": {
28+
"@chakra-ui/utils": "^2.0.3",
29+
"@chakra-ui/vue-layout": "^0.1.0-alpha.11",
30+
"@chakra-ui/vue-system": "^0.1.0-alpha.5",
31+
"@chakra-ui/vue-utils": "0.1.0-alpha.10",
32+
"@chakra-ui/vue-theme-tools": "0.1.0-alpha.10"
33+
},
34+
"devDependencies": {
35+
"vue": "^3.2.29"
36+
},
37+
"peerDependencies": {
38+
"vue": "^3.1.4"
39+
},
40+
"publishConfig": {
41+
"access": "public"
42+
}
43+
}

0 commit comments

Comments
 (0)