feat: match avatar-group component to related plugin (#56)

shuriken-ui · Aug 7, 2023 · d1e7e4a · d1e7e4a
1 parent 8ac1eca
commit d1e7e4a
Showing 1 changed file with 14 additions and 44 deletions.
diff --git a/components/base/BaseAvatarGroup.vue b/components/base/BaseAvatarGroup.vue
@@ -27,34 +27,23 @@ const props = withDefaults(
     size: 'sm',
   }
 )
+
+const sizeStyle = {
+  xs: 'avatar-group-xs',
+  sm: 'avatar-group-sm',
+  md: 'avatar-group-md',
+  lg: 'avatar-group-lg',
+}
 </script>
 
 <template>
-  <div class="flex">
+  <div class="nui-avatar-group">
     <slot>
       <div
-        v-for="(avatar, index) in avatars.slice(0, props.limit)"
+        v-for="avatar in avatars.slice(0, props.limit)"
         :key="typeof avatar === 'string' ? avatar : avatar.src"
-        class="dark:bg-muted-800 relative flex shrink-0 items-center justify-center rounded-full bg-white transition-all duration-100 ease-in"
-        :class="[
-          props.size === 'xs' &&
-            'h-8 w-8 hover:-ms-2 hover:me-2 focus:-ms-2 focus:me-2',
-          index !== 0 &&
-            props.size === 'xs' &&
-            '-ms-2 hover:-ms-4 hover:me-2 focus:-ms-4 focus:me-2',
-          props.size === 'sm' && 'hover:-ms-2 hover:me-2 focus:me-2',
-          index !== 0 &&
-            props.size === 'sm' &&
-            '-ms-3 h-10 w-10 hover:-ms-5 hover:me-2 focus:-ms-5 focus:me-2',
-          props.size === 'md' && 'hover:-ms-3 hover:me-3 focus:me-3',
-          index !== 0 &&
-            props.size === 'md' &&
-            '-ms-4 h-12 w-12 hover:-ms-7 hover:me-3 focus:me-3',
-          props.size === 'lg' && 'hover:-ms-4 hover:me-4 focus:me-4',
-          index !== 0 &&
-            props.size === 'lg' &&
-            '-ms-5 h-16 w-16 hover:-ms-9 hover:me-4 focus:-ms-9 focus:me-4',
-        ]"
+        class="nui-avatar-outer"
+        :class="[sizeStyle[props.size]]"
       >
         <BaseAvatar
           v-bind="typeof avatar === 'string' ? { src: avatar } : avatar"
@@ -64,28 +53,9 @@ const props = withDefaults(
           class="bg-primary-500/20 text-primary-500 !scale-90"
         />
       </div>
-      <div
-        v-if="avatars.length > props.limit"
-        class="dark:bg-muted-800 shrink-0 rounded-full bg-white transition-all duration-100 ease-in"
-        :class="[
-          props.size === 'xs' && '-ms-2 h-8 w-8',
-          props.size === 'sm' && '-ms-3 h-10 w-10',
-          props.size === 'md' && '-ms-4 h-12 w-12',
-          props.size === 'lg' && '-ms-5 h-16 w-16',
-        ]"
-      >
-        <div
-          class="bg-muted-200 dark:border-muted-800 dark:bg-muted-700 relative inline-flex h-full w-full scale-90 items-center justify-center rounded-full border-white"
-        >
-          <span
-            class="text-muted-500 dark:text-muted-300 -ms-1 font-sans font-normal uppercase"
-            :class="[
-              props.size === 'xs' && 'text-sm',
-              props.size === 'sm' && 'text-sm',
-              props.size === 'md' && 'text-lg',
-              props.size === 'lg' && 'text-xl',
-            ]"
-          >
+      <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 }}
           </span>
         </div>