feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

src/runtime/components/elements/AvatarGroup.ts

@@ -0,0 +1,80 @@
+import { h, computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { classNames } from '../../utils'
+import Avatar from './Avatar.vue'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.avatar.size).includes(value)
+      }
+    },
+    max: {
+      type: Number,
+      default: null
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.avatarGroup>>,
+      default: () => appConfig.ui.avatarGroup
+    }
+  },
+  setup (props, { slots }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.avatarGroup>>(() => defu({}, props.ui, appConfig.ui.avatarGroup))
+
+    const children = computed(() => {
+      let children = slots.default?.()
+      // @ts-ignore-next
+      if (children.length && children[0].type.name === 'ContentSlot') {
+        // @ts-ignore-next
+        children = children[0].ctx.slots.default?.()
+      }
+      return children
+    })
+
+    const max = computed(() => typeof props.max === 'string' ? parseInt(props.max, 10) : props.max)
+
+    const clones = computed(() => children.value.map((node, index) => {
+      if (!props.max || (max.value && index < max.value)) {
+        if (props.size) {
+          node.props.size = props.size
+        }
+
+        node.props.class = node.props.class || ''
+        node.props.class += ` ${classNames(
+          ui.value.ring,
+          ui.value.margin
+        )}`
+
+        return node
+      }
+
+      if (max.value !== undefined && index === max.value) {
+        return h(Avatar, {
+          size: props.size,
+          text: `+${children.value.length - max.value}`,
+          class: classNames(
+            ui.value.ring,
+            ui.value.margin
+          )
+        })
+      }
+
+      return null
+    }).filter(Boolean).reverse())
+
+    return () => h('div', { class: ui.value.wrapper }, clones.value)
+  }
+})