feat(VAvatar): add variant support (#15717)

vuetifyjs · Sep 7, 2022 · a6fc62b · a6fc62b
1 parent c3233e1
commit a6fc62b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass
@@ -19,7 +19,7 @@
   @include avatar-sizes($avatar-sizes)
   @include avatar-density(('height', 'width'), $avatar-density)
   @include tools.rounded($avatar-border-radius)
-  @include tools.theme($avatar-theme...)
+  @include tools.variant($avatar-variants...)
 
   &--rounded
     @include tools.rounded($avatar-rounded-border-radius)
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx
@@ -6,19 +6,17 @@ import { VIcon } from '@/components/VIcon'
 import { VImg } from '@/components/VImg'
 
 // Composables
+import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'
+import { IconValue } from '@/composables/icons'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeSizeProps, useSize } from '@/composables/size'
 import { makeTagProps } from '@/composables/tag'
-import { useBackgroundColor } from '@/composables/color'
-import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { defineComponent, propsFactory, useRender } from '@/util'
-import { toRef } from 'vue'
 
 export const makeVAvatarProps = propsFactory({
-  color: String,
   start: Boolean,
   end: Boolean,
   icon: IconValue,
@@ -28,6 +26,7 @@ export const makeVAvatarProps = propsFactory({
   ...makeRoundedProps(),
   ...makeSizeProps(),
   ...makeTagProps(),
+  ...makeVariantProps({ variant: 'text' } as const),
 })
 
 export const VAvatar = defineComponent({
@@ -36,7 +35,7 @@ export const VAvatar = defineComponent({
   props: makeVAvatarProps(),
 
   setup (props, { slots }) {
-    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
+    const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
     const { roundedClasses } = useRounded(props)
     const { sizeClasses, sizeStyles } = useSize(props)
@@ -49,22 +48,25 @@ export const VAvatar = defineComponent({
             'v-avatar--start': props.start,
             'v-avatar--end': props.end,
           },
-          backgroundColorClasses.value,
+          colorClasses.value,
           densityClasses.value,
           roundedClasses.value,
           sizeClasses.value,
+          variantClasses.value,
         ]}
         style={[
-          backgroundColorStyles.value,
+          colorStyles.value,
           sizeStyles.value,
         ]}
       >
         { props.image
-          ? (<VImg src={ props.image } alt="" />)
+          ? (<VImg key="image" src={ props.image } alt="" />)
           : props.icon
-            ? (<VIcon icon={ props.icon } />)
+            ? (<VIcon key="icon" icon={ props.icon } />)
             : slots.default?.()
         }
+
+        { genOverlays(false, 'v-avatar') }
       </props.tag>
     ))
 

diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss
@@ -3,12 +3,14 @@
 @use "../../styles/tools/functions";
 
 // Defaults
-$avatar-background: transparent !default;
+$avatar-background: var(--v-theme-surface) !default;
 $avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
 $avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$avatar-elevation: 1 !default;
 $avatar-height: 40px !default;
 $avatar-line-height: normal !default;
+$avatar-plain-opacity: .62 !default;
 $avatar-rounded-border-radius: variables.$border-radius-root !default;
 $avatar-vertical-align: middle !default;
 $avatar-width: 40px !default;
@@ -22,7 +24,10 @@ $avatar-sizes: functions.map-deep-merge(
   $avatar-sizes
 );
 
-$avatar-theme: (
+$avatar-variants: (
   $avatar-background,
-  $avatar-color
-) !default;
+  $avatar-color,
+  $avatar-elevation,
+  $avatar-plain-opacity,
+  'v-avatar'
+);