feat(AvatarGroup): preset support (#69)

src/runtime/components/elements/AvatarGroup.vue

@@ -4,21 +4,23 @@
       v-for="(avatar, index) of displayedGroup"
       :key="index"
       v-bind="avatar"
-      class="ring-2 u-ring-white -ml-1.5 first:ml-0"
       :size="size"
+      :class="avatarClass"
     />
     <Avatar
       v-if="remainingGroupSize > 0"
-      class="ring-2 u-ring-white -ml-1.5 first:ml-0 text-[10px]"
       :size="size"
       :text="`+${remainingGroupSize}`"
+      :class="avatarClass"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { classNames } from '../../utils/'
 import Avatar from './Avatar'
+import $ui from '#build/ui'
 
 const props = defineProps({
   group: {
@@ -35,6 +37,14 @@ const props = defineProps({
   max: {
     type: Number,
     default: null
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.avatarGroup.ring
+  },
+  marginClass: {
+    type: String,
+    default: () => $ui.avatarGroup.margin
   }
 })
 
@@ -55,6 +65,13 @@ const remainingGroupSize = computed(() => {
 
   return avatars.value.length - props.max
 })
+
+const avatarClass = computed(() => {
+  return classNames(
+    props.ringClass,
+    props.marginClass
+  )
+})
 </script>
 
 <script lang="ts">