fix(BaseAvatarGroup): allow same sizes as BaseAvatar

shuriken-ui · Aug 30, 2023 · b28bc88 · b28bc88
1 parent cb5ddd7
commit b28bc88
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/components/base/BaseAvatar.vue b/components/base/BaseAvatar.vue
@@ -72,7 +72,7 @@ const props = withDefaults(
     mask: undefined,
     dot: false,
     ring: false,
-  }
+  },
 )
 const appConfig = useAppConfig()
 const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.avatar)

diff --git a/components/base/BaseAvatarGroup.vue b/components/base/BaseAvatarGroup.vue
@@ -4,8 +4,8 @@ const props = withDefaults(
     /** The maximum number of avatars to display. */
     limit?: number
 
-    /** The size of the avatars. Can be 'xs', 'sm', 'md', or 'lg'. */
-    size?: 'xs' | 'sm' | 'md' | 'lg'
+    /** The size of the avatars. */
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
 
     /** An array of avatar objects. */
     avatars: {
@@ -17,30 +17,34 @@ const props = withDefaults(
 
       /** The text to display as the avatar. */
       text?: string
-
-      /** The tooltip to display when hovering over the avatar. */
-      tooltip?: string
     }[]
   }>(),
   {
     limit: 4,
     size: 'sm',
-  }
+  },
 )
 
 const sizeStyle = {
+  xxs: 'nui-avatar-group-xxs',
   xs: 'nui-avatar-group-xs',
   sm: 'nui-avatar-group-sm',
   md: 'nui-avatar-group-md',
   lg: 'nui-avatar-group-lg',
+  xl: 'nui-avatar-group-lg',
+  '2xl': 'nui-avatar-group-lg',
+  '3xl': 'nui-avatar-group-lg',
+  '4xl': 'nui-avatar-group-lg',
 }
 </script>
 
 <template>
   <div class="nui-avatar-group" :class="[sizeStyle[props.size]]">
     <slot>
       <div
-        v-for="avatar in avatars.slice(0, props.limit)"
+        v-for="avatar in avatars.length <= limit
+          ? avatars
+          : avatars.slice(0, props.limit - 1)"
         :key="typeof avatar === 'string' ? avatar : avatar.src"
         class="nui-avatar-outer"
       >
@@ -55,7 +59,7 @@ const sizeStyle = {
       <div v-if="avatars.length > props.limit" class="nui-avatar-count">
         <div class="nui-avatar-count-inner">
           <span class="nui-avatar-count-text">
-            +{{ avatars.length - props.limit }}
+            +{{ avatars.length - props.limit + 1 }}
           </span>
         </div>
       </div>