Feature/avatar updates (#258)

* avatar status indicator fixed

* fix for missing placeholder

src/components/FwbAvatar/FwbAvatar.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="relative">
+    <div
+      :class="avatarPlaceholderWrapperClasses"
+    >
       <img
         v-if="img && !imageError"
         :alt="alt"
@@ -8,11 +11,13 @@
         @error="setImageError"
       >
       <div
-      v-else
+        v-else-if="!initials && hasPlaceholder"
-      :class="avatarPlaceholderWrapperClasses"
+        :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,25 +29,19 @@
           fill-rule="evenodd"
         />
       </svg>
-      <div
-        v-if="!initials && hasPlaceholder"
-        :class="avatarPlaceholderClasses"
-      >
-        <slot name="placeholder" />
-      </div>
       <div
         v-else
         :class="avatarPlaceholderInitialsClasses"
       >
         {{ initials }}
       </div>
+    </div>
     <span
       v-if="status"
       :class="avatarDotClasses"
       :data-pos="statusPosition"
     />
   </div>
-  </div>
 </template>
 
 <script lang="ts" setup>

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>(() => {
+  const avatarClasses = computed<string>(() =>
-    return classNames(
+    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>(() => {
+  const avatarPlaceholderClasses = computed<string>(() =>
-    return classNames(
+    useMergeClasses([
       avatarPlaceholderDefaultClasses,
       avatarPlaceholderSizes[props.size.value],
+    ]),
   )
-  })
+  const avatarPlaceholderWrapperClasses = computed<string>(() =>
-  const avatarPlaceholderWrapperClasses = computed<string>(() => {
+    useMergeClasses([
-    return classNames(
       avatarPlaceholderWrapperDefaultClasses,
       avatarSizeClasses[props.size.value],
       avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
+      (props.img.value && props.bordered.value) ? '' : avatarPlaceholderWrapperBackgroundClasses,
+      props.bordered.value ? ' overflow-visible' : '',
+    ]),
   )
-  })
+  const avatarPlaceholderInitialsClasses = computed<string>(() =>
-  const avatarPlaceholderInitialsClasses = computed<string>(() => {
+    useMergeClasses([
-    return classNames(
       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)