fix: avatar ssr fix

Author: codebender828

@types/components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-03-19T12:50:09.916Z
+ * This file was generated on 2023-03-28T13:35:59.574Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -77,6 +77,7 @@ declare module "@vue/runtime-core" {
     CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
     CAvatar: typeof import("@chakra-ui/vue-next")["CAvatar"]
     CAvatarBadge: typeof import("@chakra-ui/vue-next")["CAvatarBadge"]
+    CAvatarGroup: typeof import("@chakra-ui/vue-next")["CAvatarGroup"]
     CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
     CBox: typeof import("@chakra-ui/vue-next")["CBox"]
     CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-03-19T12:50:09.916Z
+ * This file was generated on 2023-03-28T13:35:59.574Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -77,6 +77,7 @@ declare module "@vue/runtime-core" {
     CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
     CAvatar: typeof import("@chakra-ui/vue-next")["CAvatar"]
     CAvatarBadge: typeof import("@chakra-ui/vue-next")["CAvatarBadge"]
+    CAvatarGroup: typeof import("@chakra-ui/vue-next")["CAvatarGroup"]
     CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
     CBox: typeof import("@chakra-ui/vue-next")["CBox"]
     CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]

modules/nuxt/playground/app.vue

@@ -120,6 +120,67 @@
           <DiscordIcon />
         </c-icon-button>
       </c-button-group>
+      <c-stack>
+        <c-heading as="h3" size="md"> Avatars </c-heading>
+        <c-avatar-group :max="3" size="md">
+          <c-avatar
+            name="Sarah Drasner"
+            src="https://avatars.githubusercontent.com/u/2281088?v=4"
+            alt="Sarah Drasner"
+            :border-color="
+              useColorModeValue(
+                `${selectedColor.color}.50`,
+                `${selectedColor.color}.900`
+              ).value
+            "
+          >
+            <c-avatar-badge
+              bg="green.400"
+              border-width="2px"
+              box-size="0.8em"
+            />
+          </c-avatar>
+          <c-avatar
+            name="Evan You"
+            alt="Evan You"
+            src="https://www.github.com/yyx990803.png"
+            :border-color="
+              useColorModeValue(
+                `${selectedColor.color}.50`,
+                `${selectedColor.color}.900`
+              ).value
+            "
+          >
+            <c-avatar-badge
+              bg="green.400"
+              border-width="2px"
+              box-size="0.8em"
+            />
+          </c-avatar>
+          <c-avatar
+            name="Anthony Fu"
+            src="https://avatars.githubusercontent.com/u/11247099?v=4"
+            alt="Anthony Fu"
+            :border-color="
+              useColorModeValue(
+                `${selectedColor.color}.50`,
+                `${selectedColor.color}.900`
+              ).value
+            "
+          >
+            <c-avatar-badge
+              bg="green.400"
+              border-width="2px"
+              box-size="0.8em"
+            />
+          </c-avatar>
+          <c-avatar
+            name="Maya Shavin"
+            src="https://avatars.githubusercontent.com/u/6650139?v=4"
+            alt="Maya Shavin"
+          ></c-avatar>
+        </c-avatar-group>
+      </c-stack>
     </c-stack>
   </chakra.div>
 </template>

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

@@ -1,8 +1,5 @@
 /* eslint vue/no-side-effects-in-computed-properties: 0  */
-import {
-  useMultiStyleConfig,
-  chakra,
-} from "@chakra-ui/vue-system"
+import { useMultiStyleConfig, chakra } from "@chakra-ui/vue-system"
 import { SystemStyleObject } from "@chakra-ui/styled-system"
 import {
   getValidChildren,
@@ -45,6 +42,7 @@ export const avatarGroupProps = {
  * CAvatarGroup displays a number of avatars grouped together in a stack.
  */
 export const CAvatarGroup = defineComponent({
+  name: "CAvatarGroup",
   props: avatarGroupProps,
   setup(props, { slots, attrs }) {
     const mergedProps = computed(() => mergeWith({}, props, attrs))

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

@@ -73,7 +73,7 @@ interface ImageOptions extends NativeImageOptions {
   referrerPolicy?: ReferrerPolicy
 }
 
-export interface CImageProps extends UseImageProps, ImageOptions { }
+export interface CImageProps extends UseImageProps, ImageOptions {}
 
 export const CImage = defineComponent({
   name: "CImage",

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

@@ -1,3 +1,4 @@
+import { canUseDOM } from "@chakra-ui/utils"
 import {
   computed,
   unref,
@@ -84,6 +85,7 @@ export function useImage(props: UseImageProps) {
   }
 
   watchPostEffect(() => {
+    if (!canUseDOM()) return
     /**
      * If user opts out of the fallback/placeholder
      * logic, let's bail out.