Feature/avatar updates (#258)

* avatar status indicator fixed

* fix for missing placeholder

src/components/FwbAvatar/FwbAvatar.vue

@@ -1,18 +1,23 @@
 <template>
   <div class="relative">
-    <img
-      v-if="img && !imageError"
-      :alt="alt"
-      :class="avatarClasses"
-      :src="img"
-      @error="setImageError"
-    >
     <div
-      v-else
       :class="avatarPlaceholderWrapperClasses"
     >
+      <img
+        v-if="img && !imageError"
+        :alt="alt"
+        :class="avatarClasses"
+        :src="img"
+        @error="setImageError"
+      >
+      <div
+        v-else-if="!initials && hasPlaceholder"
+        :class="avatarPlaceholderClasses"
+      >
+        <slot name="placeholder" />
+      </div>
       <svg
-        v-if="!initials && !hasPlaceholder"
+        v-else-if="!img && !initials"
         :class="avatarPlaceholderClasses"
         fill="currentColor"
         viewBox="0 0 20 20"
@@ -24,24 +29,18 @@
           fill-rule="evenodd"
         />
       </svg>
-      <div
-        v-if="!initials && hasPlaceholder"
-        :class="avatarPlaceholderClasses"
-      >
-        <slot name="placeholder" />
-      </div>
       <div
         v-else
         :class="avatarPlaceholderInitialsClasses"
       >
         {{ initials }}
       </div>
-      <span
-        v-if="status"
-        :class="avatarDotClasses"
-        :data-pos="statusPosition"
-      />
     </div>
+    <span
+      v-if="status"
+      :class="avatarDotClasses"
+      :data-pos="statusPosition"
+    />
   </div>
 </template>
 

src/components/FwbAvatar/composables/useAvatarClasses.ts

@@ -6,7 +6,7 @@ import type {
   AvatarStatusPosition,
   AvatarType,
 } from '@/components/FwbAvatar/types'
-import classNames from 'classnames'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
 const avatarSizeClasses: Record<AvatarSize, string> = {
   xs: 'w-6 h-6',
@@ -39,7 +39,8 @@ const avatarStatusDotPositionClasses: Record<avatarDotIndicatorPositionClasses,
 }
 
 const avatarPlaceholderDefaultClasses = 'absolute w-auto h-auto text-gray-400'
-const avatarPlaceholderWrapperDefaultClasses = 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600'
+const avatarPlaceholderWrapperDefaultClasses = 'flex overflow-hidden relative justify-center items-center'
+const avatarPlaceholderWrapperBackgroundClasses = 'bg-gray-100 dark:bg-gray-600'
 const avatarPlaceholderInitialsDefaultClasses = 'font-medium text-gray-600 dark:text-gray-300'
 const avatarPlaceholderSizes = {
   xs: 'bottom-0',
@@ -67,41 +68,42 @@ export function useAvatarClasses (props: UseAvatarClassesProps): {
     avatarPlaceholderWrapperClasses: Ref<string>
     avatarPlaceholderInitialsClasses: Ref<string>
 } {
-  const avatarClasses = computed<string>(() => {
-    return classNames(
+  const avatarClasses = computed<string>(() =>
+    useMergeClasses([
       avatarSizeClasses[props.size.value],
       avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
       props.bordered.value ? avatarBorderedClasses : '',
       props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
-    )
-  })
+    ]),
+  )
   const avatarDotClasses = computed<string>(() => {
     const avatarType = `${props.statusPosition.value}-${props.rounded.value ? 'rounded' : 'default'}`
-    return classNames(
+    return useMergeClasses([
       avatarStatusDotDefaultClasses,
       avatarStatusDotClasses[props.status.value],
       avatarStatusDotPositionClasses[avatarType as avatarDotIndicatorPositionClasses],
-    )
+    ])
   })
-  const avatarPlaceholderClasses = computed<string>(() => {
-    return classNames(
+  const avatarPlaceholderClasses = computed<string>(() =>
+    useMergeClasses([
       avatarPlaceholderDefaultClasses,
       avatarPlaceholderSizes[props.size.value],
-    )
-  })
-  const avatarPlaceholderWrapperClasses = computed<string>(() => {
-    return classNames(
+    ]),
+  )
+  const avatarPlaceholderWrapperClasses = computed<string>(() =>
+    useMergeClasses([
       avatarPlaceholderWrapperDefaultClasses,
       avatarSizeClasses[props.size.value],
       avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
-    )
-  })
-  const avatarPlaceholderInitialsClasses = computed<string>(() => {
-    return classNames(
+      (props.img.value && props.bordered.value) ? '' : avatarPlaceholderWrapperBackgroundClasses,
+      props.bordered.value ? ' overflow-visible' : '',
+    ]),
+  )
+  const avatarPlaceholderInitialsClasses = computed<string>(() =>
+    useMergeClasses([
       avatarPlaceholderInitialsDefaultClasses,
-    )
-  })
-  // TODO: Avatar Initials
+    ]),
+  )
 
   return {
     avatarClasses,

src/composables/useMergeClasses.ts

@@ -1,4 +1,4 @@
 import { twMerge } from 'tailwind-merge'
 
-export const useMergeClasses = (componentClasses: string): string =>
+export const useMergeClasses = (componentClasses: string | string[]): string =>
   twMerge(componentClasses)