fix: avatar group and background color

Author: codebender828

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

@@ -0,0 +1,122 @@
+import {
+  ThemingProps,
+  useMultiStyleConfig,
+  chakra,
+  ComponentWithProps,
+  SystemProps,
+  SystemStyleObject,
+} from "@chakra-ui/vue-system"
+import {
+  createContext,
+  getValidChildren,
+  SNAO,
+  vueThemingProps,
+  useThemingProps
+} from "@chakra-ui/vue-utils"
+import { filterUndefined, mergeWith } from "@chakra-ui/utils"
+
+import { h, defineComponent, computed, ComputedRef, PropType, cloneVNode } from "vue"
+import { baseStyle } from './c-avatar'
+
+type AvatarGroupContext = ComputedRef<ThemingProps>
+
+const [AvatarGroupProvider, useAvatarGroup] = createContext<AvatarGroupContext>(
+  {
+    strict: false,
+    name: "AvatarGroupContext",
+  }
+)
+
+export { useAvatarGroup }
+
+
+export const avatarGroupProps = {
+  max: {
+    type: Number,
+    default: 2,
+  },
+  spacing: {
+    type: SNAO as PropType<SystemProps["margin"]>,
+    default: "-0.75rem"
+  },
+  borderRadius: {
+    type: SNAO as PropType<SystemProps["borderRadius"]>,
+    default: "full"
+  },
+  borderColor: SNAO as PropType<SystemProps["borderColor"]>,
+  ...vueThemingProps,
+}
+
+/**
+ * CAvatarGroup displays a number of avatars grouped together in a stack.
+ */
+// @ts-ignore complex type
+export const CAvatarGroup = defineComponent({
+  props: avatarGroupProps,
+  setup(props, { slots, attrs }) {
+    const mergedProps = computed(() => mergeWith({}, props, attrs))
+    const themingProps = useThemingProps(mergedProps.value)
+    const styles = useMultiStyleConfig("Avatar", themingProps.value)
+
+    const validChildren = computed(() => getValidChildren(slots))
+    const visibleChildren = computed(() =>
+      validChildren.value.slice(0, props.max)
+    )
+    const excessChildrenCount = computed(() => validChildren.value.length - props.max)
+
+    /**
+     * Reversing the children is a great way to avoid using zIndex
+     * to overlap the avatars
+     */
+    const reversedVisibleChildren = computed(() =>
+      visibleChildren.value.reverse()
+    )
+
+    const clonedChildren = computed(() => reversedVisibleChildren.value.map((vnode, index) => {
+      const isFirstAvatar = index === 0
+
+      const childProps = filterUndefined({
+        marginEnd: isFirstAvatar ? 0 : props.spacing,
+        size: props.size,
+        borderColor: vnode?.props?.borderColor ?? props.borderColor,
+        showBorder: true,
+      })
+
+      console.log("childProps", childProps)
+
+      return cloneVNode(vnode, childProps)
+    }))
+
+    const groupStyles = computed<SystemStyleObject>(() => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flexDirection: "row-reverse",
+      ...styles.value.group,
+    }))
+
+    const excessStyles = computed<SystemStyleObject>(() => ({
+      borderRadius: props.borderRadius,
+      marginStart: props.spacing,
+      ...baseStyle,
+      ...styles.value.excessLabel,
+    }))
+
+    return () => (
+      <chakra.div
+        role="group"
+        __label='avatar__group'
+        __css={groupStyles.value}
+      >
+        <>
+          {excessChildrenCount.value > 0 && (
+            <chakra.span __label="avatar__excess" __css={excessStyles.value}>
+              {`+${excessChildrenCount.value}`}
+            </chakra.span>
+          )}
+          {clonedChildren.value}
+        </>
+      </chakra.div>
+    )
+  },
+})

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

@@ -164,7 +164,10 @@ export const CAvatar = defineComponent({
 
     const isLoaded = ref(false)
 
-    const styles = useMultiStyleConfig("Avatar", themingProps)
+    const styles = useMultiStyleConfig("Avatar", computed(() => ({
+      ...themingProps.value,
+      name: props.name
+    })))
 
     function handleLoaded(value: unknown) {
       if (value) {

packages/c-avatar/src/index.tsx

@@ -1,2 +1,3 @@
 export * from "./c-avatar"
-export * from "./c-avatar-badge"
+export * from "./c-avatar-badge"
+export * from "./c-avatar-group"

playground/src/App.vue

@@ -25,17 +25,24 @@
           <!-- </transition> -->
         </router-view>
       </c-square>
-      <c-icon-button
-        color="inherit"
-        pos="absolute"
-        @click="toggleColorMode"
-        top="10"
-        right="10"
-        :aria-label="`Switch to ${
-          colorMode === 'light' ? 'dark' : 'light'
-        } mode`"
-        :icon="colorMode === 'light' ? 'moon' : 'sun'"
-      />
+      <c-h-stack top="10" right="10" pos="absolute">
+        <c-link is-external href="https://github.com/chakra-ui/chakra-ui-vue-next">
+          <c-icon-button
+            color="inherit"
+            @click="toggleColorMode"
+            aria-label="Go to github"
+            icon="github"
+          />
+        </c-link>
+        <c-icon-button
+          color="inherit"
+          @click="toggleColorMode"
+          :aria-label="`Switch to ${
+            colorMode === 'light' ? 'dark' : 'light'
+          } mode`"
+          :icon="colorMode === 'light' ? 'moon' : 'sun'"
+        />
+      </c-h-stack>
     </c-center>
   </chakra.section>
 </template>

playground/src/main.ts

@@ -12,6 +12,7 @@ import { MotionPlugin } from "@vueuse/motion"
 import App from "./App.vue"
 import router from "./router"
 import { mode } from "@chakra-ui/theme-tools"
+import { feGithub } from 'feather-icons-paths'
 
 console.log({ router })
 
@@ -26,6 +27,7 @@ const app = createApp(App)
         library: {
           feActivity,
           feUser,
+          feGithub
         },
         extend: {
           discord: {