Merge pull request #123 from selemondev/avatarGroup

fix(app): avatarGroup margin

Author: selemondev

packages/nuxt-ui-vue/src/App.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const isOpen = ref(false)
 </script>
 
 <template>
   <div class="grid place-items-center min-h-screen w-full">
-    <UButton label="Open" @click="isOpen = true" />
-    <UModal v-model="isOpen" fullscreen>
-      <!-- Content -->
-    </UModal>
+    <UAvatarGroup size="sm" :max="2">
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+    </UAvatarGroup>
   </div>
 </template>

packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue

@@ -152,7 +152,6 @@ const attrsOmitted = omit(attrs, ['class'])
 <script lang="ts">
 export default defineComponent({
   name: Components.UAvatar,
-  inheritAttrs: false,
 })
 </script>
 

packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatarGroup.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 import { cloneVNode, computed, defineComponent, h } from 'vue'
 import type { PropType, VNode } from 'vue'
 import classNames from 'classnames'
@@ -64,4 +64,71 @@ export default defineComponent({
     return () => h('div', { class: nuxtLabsTheme.UAvatarGroup.base.root }, clones.value)
   },
 })
+</script> -->
+
+<script lang="ts">
+import { cloneVNode, computed, defineComponent, h } from 'vue'
+import type { PropType, VNode } from 'vue'
+import classNames from 'classnames'
+import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
+import { getSlotsFromChildren } from './Types'
+import UAvatar from './UAvatar.vue'
+import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
+import type { UAvatarGroup } from '@/Types/componentsTypes/components'
+import { Components } from '@/Types/enums/Components'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
+export default defineComponent({
+  name: Components.UAvatarGroup,
+  ...getVariantPropsWithClassesList<UAvatarGroup>(),
+
+  props: {
+    size: {
+      type: String as PropType<AvatarSize>,
+      default: 'md',
+    },
+    max: {
+      type: Number,
+      default: null,
+    },
+  },
+  setup(props, { slots }) {
+    const children = computed(() => getSlotsFromChildren(slots))
+
+    // if max is passed as a string, we go ahead and convert it into an integer
+
+    const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max) : props.max)
+
+    const clones = computed(() => children.value.map((node: VNode<unknown, unknown, { [key: string]: any }>, index: number) => {
+      const vProps: Record<string, string> = {}
+
+      if (!props.max || (max.value && index < max.value)) {
+        if (props.size)
+          vProps.size = props.size
+
+        vProps.class = node.props?.class || ''
+        vProps.class += `${classNames(
+          nuxtLabsTheme.UAvatarGroup.base.avatarGroupMargin,
+        )}`
+
+        return cloneVNode(node, vProps)
+      }
+
+      if (max.value !== undefined && index === max.value) {
+        return h(UAvatar, {
+          size: props.size,
+          text: `${children.value.length - max.value}`,
+          name: `${children.value.length - max.value}`,
+        })
+      }
+
+      return null
+    }).filter(Boolean).reverse())
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return () => h('div', { class: nuxtLabsTheme.UAvatarGroup.base.root }, clones.value)
+  },
+})
 </script>

packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts

@@ -124,13 +124,13 @@ export default {
   },
   UAvatarGroup: {
     base: {
-      root: 'flex flex-row-reverse',
+      root: 'flex flex-row-reverse justify-end',
       avatarGroupMargin: '-mx-2.5',
     },
 
     variants: {
-      root: 'flex flex-row-reverse',
-      avatarGroupMargin: 'mx-6',
+      root: 'flex flex-row-reverse justify-end',
+      avatarGroupMargin: '-mx-2.5',
     },
   },