feat(AvatarGroup): preset support (#69)

docs/pages/migration.vue

@@ -78,6 +78,7 @@ const components = [
     to: '/components/AvatarGroup',
     nuxt3: true,
     capi: true,
+    preset: true,
     typescript: true
   },
   {

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">

src/runtime/presets/default.ts

@@ -373,6 +373,11 @@ export default (variantColors: string[]) => {
     }
   }
 
+  const avatarGroup = {
+    ring: 'ring-2 u-ring-white',
+    margin: '-ml-1.5 first:ml-0'
+  }
+
   const slideover = {
     overlay: 'bg-gray-500/75 dark:bg-gray-600/75',
     base: 'relative flex-1 flex flex-col w-full focus:outline-none',
@@ -404,6 +409,7 @@ export default (variantColors: string[]) => {
     tabs,
     pills,
     avatar,
+    avatarGroup,
     slideover
   }
 }