chore(AvatarGroup): enhance avatars overlap (#75)

src/runtime/components/elements/AvatarGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="flex">
+  <div class="flex flex-row-reverse">
+    <Avatar
+      v-if="remainingGroupSize > 0"
+      :size="size"
+      :text="`+${remainingGroupSize}`"
+      :class="avatarClass"
+    />
     <Avatar
       v-for="(avatar, index) of displayedGroup"
       :key="index"
@@ -7,12 +13,6 @@
       :size="size"
       :class="avatarClass"
     />
-    <Avatar
-      v-if="remainingGroupSize > 0"
-      :size="size"
-      :text="`+${remainingGroupSize}`"
-      :class="avatarClass"
-    />
   </div>
 </template>
 
@@ -55,9 +55,9 @@ const avatars = computed(() => {
 })
 
 const displayedGroup = computed(() => {
-  if (!props.max) { return avatars.value }
+  if (!props.max) { return [...avatars.value].reverse() }
 
-  return avatars.value.slice(0, props.max)
+  return avatars.value.slice(0, props.max).reverse()
 })
 
 const remainingGroupSize = computed(() => {

src/runtime/presets/default.ts

@@ -383,7 +383,7 @@ export default (variantColors: string[]) => {
 
   const avatarGroup = {
     ring: 'ring-2 u-ring-white',
-    margin: '-ml-1.5 first:ml-0'
+    margin: '-mr-1.5 first:mr-0'
   }
 
   const slideover = {