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

Commit 7988941

Browse files
codebender828codebender828
authored
Merge pull request #296 from chakra-ui/fix/avatar-ssr-fix
fix/avatar ssr fix
2 parents 0d7e991 + 78f0fb0 commit 7988941

File tree

7 files changed

+120
-9
lines changed

7 files changed

+120
-9
lines changed

‎.changeset/cuddly-flies-draw.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
"@chakra-ui/c-avatar": patch
3+
"@chakra-ui/c-image": patch
4+
"@chakra-ui/nuxt-next": patch
5+
"@chakra-ui/c-accordion": patch
6+
"@chakra-ui/c-alert": patch
7+
"@chakra-ui/c-breadcrumb": patch
8+
"@chakra-ui/c-button": patch
9+
"@chakra-ui/c-checkbox": patch
10+
"@chakra-ui/c-close-button": patch
11+
"@chakra-ui/c-code": patch
12+
"@chakra-ui/c-color-mode": patch
13+
"@chakra-ui/c-focus-lock": patch
14+
"@chakra-ui/c-form-control": patch
15+
"@chakra-ui/c-icon": patch
16+
"@chakra-ui/c-input": patch
17+
"@chakra-ui/c-live-region": patch
18+
"@chakra-ui/c-media-query": patch
19+
"@chakra-ui/c-menu": patch
20+
"@chakra-ui/c-modal": patch
21+
"@chakra-ui/c-motion": patch
22+
"@chakra-ui/c-pin-input": patch
23+
"@chakra-ui/c-popover": patch
24+
"@chakra-ui/c-popper": patch
25+
"@chakra-ui/c-portal": patch
26+
"@chakra-ui/c-reset": patch
27+
"@chakra-ui/c-scroll-lock": patch
28+
"@chakra-ui/c-skip-nav": patch
29+
"@chakra-ui/c-spinner": patch
30+
"@chakra-ui/c-table": patch
31+
"@chakra-ui/c-tag": patch
32+
"@chakra-ui/c-textarea": patch
33+
"@chakra-ui/c-theme-provider": patch
34+
"@chakra-ui/c-toast": patch
35+
"@chakra-ui/c-tooltip": patch
36+
"@chakra-ui/c-visually-hidden": patch
37+
"@chakra-ui/vue-layout": patch
38+
"@chakra-ui/vue-styled": patch
39+
"@chakra-ui/vue-system": patch
40+
"@chakra-ui/vue-test-utils": patch
41+
"@chakra-ui/vue-utils": patch
42+
"@chakra-ui/vue-next": patch
43+
"@chakra-ui/vue-accessibilty": patch
44+
"@chakra-ui/vue-composables": patch
45+
"@chakra-ui/vue-auto-import": patch
46+
---
47+
48+
Fix Avatar Badge SSR bug

‎@types/components.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
33
* components using `unplugin-vue-components,`
44
*
55
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-19T12:50:09.916Z
9+
* This file was generated on 2023-03-28T13:35:59.574Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -77,6 +77,7 @@ declare module "@vue/runtime-core" {
7777
CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
7878
CAvatar: typeof import("@chakra-ui/vue-next")["CAvatar"]
7979
CAvatarBadge: typeof import("@chakra-ui/vue-next")["CAvatarBadge"]
80+
CAvatarGroup: typeof import("@chakra-ui/vue-next")["CAvatarGroup"]
8081
CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
8182
CBox: typeof import("@chakra-ui/vue-next")["CBox"]
8283
CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]

‎components.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
33
* components using `unplugin-vue-components,`
44
*
55
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-19T12:50:09.916Z
9+
* This file was generated on 2023-03-28T13:35:59.574Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -77,6 +77,7 @@ declare module "@vue/runtime-core" {
7777
CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
7878
CAvatar: typeof import("@chakra-ui/vue-next")["CAvatar"]
7979
CAvatarBadge: typeof import("@chakra-ui/vue-next")["CAvatarBadge"]
80+
CAvatarGroup: typeof import("@chakra-ui/vue-next")["CAvatarGroup"]
8081
CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
8182
CBox: typeof import("@chakra-ui/vue-next")["CBox"]
8283
CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]

‎modules/nuxt/playground/app.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,67 @@
120120
<DiscordIcon />
121121
</c-icon-button>
122122
</c-button-group>
123+
<c-stack>
124+
<c-heading as="h3" size="md"> Avatars </c-heading>
125+
<c-avatar-group :max="3" size="md">
126+
<c-avatar
127+
name="Sarah Drasner"
128+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
129+
alt="Sarah Drasner"
130+
:border-color="
131+
useColorModeValue(
132+
`${selectedColor.color}.50`,
133+
`${selectedColor.color}.900`
134+
).value
135+
"
136+
>
137+
<c-avatar-badge
138+
bg="green.400"
139+
border-width="2px"
140+
box-size="0.8em"
141+
/>
142+
</c-avatar>
143+
<c-avatar
144+
name="Evan You"
145+
alt="Evan You"
146+
src="https://www.github.com/yyx990803.png"
147+
:border-color="
148+
useColorModeValue(
149+
`${selectedColor.color}.50`,
150+
`${selectedColor.color}.900`
151+
).value
152+
"
153+
>
154+
<c-avatar-badge
155+
bg="green.400"
156+
border-width="2px"
157+
box-size="0.8em"
158+
/>
159+
</c-avatar>
160+
<c-avatar
161+
name="Anthony Fu"
162+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
163+
alt="Anthony Fu"
164+
:border-color="
165+
useColorModeValue(
166+
`${selectedColor.color}.50`,
167+
`${selectedColor.color}.900`
168+
).value
169+
"
170+
>
171+
<c-avatar-badge
172+
bg="green.400"
173+
border-width="2px"
174+
box-size="0.8em"
175+
/>
176+
</c-avatar>
177+
<c-avatar
178+
name="Maya Shavin"
179+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
180+
alt="Maya Shavin"
181+
></c-avatar>
182+
</c-avatar-group>
183+
</c-stack>
123184
</c-stack>
124185
</chakra.div>
125186
</template>

‎packages/c-avatar/src/c-avatar-group.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
/* eslint vue/no-side-effects-in-computed-properties: 0 */
2-
import {
3-
useMultiStyleConfig,
4-
chakra,
5-
} from "@chakra-ui/vue-system"
2+
import { useMultiStyleConfig, chakra } from "@chakra-ui/vue-system"
63
import { SystemStyleObject } from "@chakra-ui/styled-system"
74
import {
85
getValidChildren,
@@ -45,6 +42,7 @@ export const avatarGroupProps = {
4542
* CAvatarGroup displays a number of avatars grouped together in a stack.
4643
*/
4744
export const CAvatarGroup = defineComponent({
45+
name: "CAvatarGroup",
4846
props: avatarGroupProps,
4947
setup(props, { slots, attrs }) {
5048
const mergedProps = computed(() => mergeWith({}, props, attrs))

‎packages/c-image/src/c-image.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ interface ImageOptions extends NativeImageOptions {
7373
referrerPolicy?: ReferrerPolicy
7474
}
7575

76-
export interface CImageProps extends UseImageProps, ImageOptions { }
76+
export interface CImageProps extends UseImageProps, ImageOptions {}
7777

7878
export const CImage = defineComponent({
7979
name: "CImage",

‎packages/c-image/src/use-image.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { canUseDOM } from "@chakra-ui/utils"
12
import {
23
computed,
34
unref,
@@ -84,6 +85,7 @@ export function useImage(props: UseImageProps) {
8485
}
8586

8687
watchPostEffect(() => {
88+
if (!canUseDOM()) return
8789
/**
8890
* If user opts out of the fallback/placeholder
8991
* logic, let's bail out.

0 commit comments

Comments
 (0)