feat(BaseAvatarGroup): refactor avatar group component and update app…

… configuration
shuriken-ui · Dec 17, 2023 · 210b5f9 · 210b5f9
1 parent debbe8f
commit 210b5f9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/.playground/pages/tests/images/avatar.vue b/.playground/pages/tests/images/avatar.vue
@@ -1,5 +1,26 @@
 <script setup lang="ts">
-import IconIndeterminate from '~~/../components/icon/IconIndeterminate.vue'
+const people = [
+  {
+    'data-nui-tooltip': 'Clarissa Perez',
+    src: 'https://tairo.cssninja.io/img/avatars/19.svg',
+  },
+  {
+    'data-nui-tooltip': 'Aaaron Splatter',
+    src: 'https://tairo.cssninja.io/img/avatars/16.svg',
+  },
+  {
+    'data-nui-tooltip': 'Mike Miller',
+    src: 'https://tairo.cssninja.io/img/avatars/3.svg',
+  },
+  {
+    'data-nui-tooltip': 'Benedict Kessler',
+    src: 'https://tairo.cssninja.io/img/avatars/22.svg',
+  },
+  {
+    'data-nui-tooltip': 'Maya Rosselini',
+    src: 'https://tairo.cssninja.io/img/avatars/2.svg',
+  },
+]
 
 definePageMeta({
   title: 'Avatar',
@@ -13,6 +34,11 @@ definePageMeta({
   <div
     class="flex flex-col gap-12 [&>*]:p-8 [&>:nth-child(odd)]:bg-muted-100 dark:[&>:nth-child(odd)]:bg-muted-900 pb-32"
   >
+    <div>
+      <div class="flex flex-wrap items-end gap-4">
+        <BaseAvatarGroup size="sm" :limit="5" :avatars="people" />
+      </div>
+    </div>
     <div>
       <div class="flex flex-wrap items-end gap-4">
         <BaseAvatar size="xxs">

diff --git a/app.config.ts b/app.config.ts
@@ -8,6 +8,10 @@ export default defineAppConfig({
       size: 'sm',
       rounded: 'full',
     },
+    BaseAvatarGroup: {
+      limit: 4,
+      size: 'sm',
+    },
     BaseButton: {
       variant: 'solid',
       rounded: 'sm',

diff --git a/components/base/BaseAvatarGroup.vue b/components/base/BaseAvatarGroup.vue
@@ -20,12 +20,12 @@ const props = withDefaults(
     }[]
   }>(),
   {
-    limit: 4,
-    size: 'sm',
+    limit: undefined,
+    size: undefined,
   },
 )
 
-const sizeStyle = {
+const sizes = {
   xxs: 'nui-avatar-group-xxs',
   xs: 'nui-avatar-group-xs',
   sm: 'nui-avatar-group-sm',
@@ -35,16 +35,22 @@ const sizeStyle = {
   '2xl': 'nui-avatar-group-lg',
   '3xl': 'nui-avatar-group-lg',
   '4xl': 'nui-avatar-group-lg',
-}
+} as Record<string, string>
+
+const size = useNuiDefaultProperty(props, 'BaseAvatarGroup', 'size')
+const limit = useNuiDefaultProperty(props, 'BaseAvatarGroup', 'limit')
 </script>
 
 <template>
-  <div class="nui-avatar-group" :class="[sizeStyle[props.size]]">
+  <div
+    class="nui-avatar-group"
+    :class="[props.size !== undefined ? sizes[props.size] : sizes[size]]"
+  >
     <slot>
       <div
         v-for="avatar in avatars.length <= limit
           ? avatars
-          : avatars.slice(0, props.limit - 1)"
+          : avatars.slice(0, props.limit ? props.limit - 1 : limit - 1)"
         :key="typeof avatar === 'string' ? avatar : avatar.src"
         class="nui-avatar-outer"
       >
@@ -56,10 +62,13 @@ const sizeStyle = {
           class="bg-primary-500/20 text-primary-500 !scale-90"
         />
       </div>
-      <div v-if="avatars.length > props.limit" class="nui-avatar-count">
+      <div
+        v-if="avatars.length > (props.limit || limit)"
+        class="nui-avatar-count"
+      >
         <div class="nui-avatar-count-inner">
           <span class="nui-avatar-count-text">
-            +{{ avatars.length - props.limit + 1 }}
+            +{{ avatars.length - (props.limit || limit) + 1 }}
           </span>
         </div>
       </div>

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -29,6 +29,20 @@ export default defineNuxtSchema({
          */
         rounded: 'full',
       },
+      BaseAvatarGroup: {
+        /**
+         * The limit of avatars to display.
+         *
+         * @type {number}
+         */
+        limit: 4,
+        /**
+         * The size of the avatar group.
+         *
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'}
+         */
+        size: 'sm',
+      },
       BaseButton: {
         /**
          * Default variant for the BaseButton component