Skip to content

Commit

Permalink
feat(VAvatar): add border prop support
Browse files Browse the repository at this point in the history
  • Loading branch information
johnleider committed May 6, 2024
1 parent 6aea5e4 commit 9dbc30a
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/vuetify/src/components/VAvatar/VAvatar.sass
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

@include avatar-sizes($avatar-sizes)
@include avatar-density(('height', 'width'), $avatar-density)
@include tools.border($avatar-border...)
@include tools.rounded($avatar-border-radius)
@include tools.variant($avatar-variants...)

Expand Down
4 changes: 4 additions & 0 deletions packages/vuetify/src/components/VAvatar/VAvatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon'
import { VImg } from '@/components/VImg'

// Composables
import { makeBorderProps, useBorder } from '@/composables/border'
import { makeComponentProps } from '@/composables/component'
import { makeDensityProps, useDensity } from '@/composables/density'
import { IconValue } from '@/composables/icons'
Expand All @@ -26,6 +27,7 @@ export const makeVAvatarProps = propsFactory({
image: String,
text: String,

...makeBorderProps(),
...makeComponentProps(),
...makeDensityProps(),
...makeRoundedProps(),
Expand All @@ -42,6 +44,7 @@ export const VAvatar = genericComponent()({

setup (props, { slots }) {
const { themeClasses } = provideTheme(props)
const { borderClasses } = useBorder(props)
const { colorClasses, colorStyles, variantClasses } = useVariant(props)
const { densityClasses } = useDensity(props)
const { roundedClasses } = useRounded(props)
Expand All @@ -56,6 +59,7 @@ export const VAvatar = genericComponent()({
'v-avatar--end': props.end,
},
themeClasses.value,
borderClasses.value,
colorClasses.value,
densityClasses.value,
roundedClasses.value,
Expand Down
13 changes: 13 additions & 0 deletions packages/vuetify/src/components/VAvatar/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
@use "sass:map";
@use '../../styles/settings';
@use "../../styles/settings/variables";
@use "../../styles/tools/functions";

// Defaults
$avatar-background: var(--v-theme-surface) !default;
$avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
$avatar-border-color: settings.$border-color-root !default;
$avatar-border-radius: map.get(settings.$rounded, 0) !default;
$avatar-border-style: settings.$border-style-root !default;
$avatar-border-thin-width: thin !default;
$avatar-border-width: thin !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;
Expand All @@ -26,6 +32,13 @@ $avatar-sizes: functions.map-deep-merge(
$avatar-sizes
);

$avatar-border: (
$avatar-border-color,
$avatar-border-style,
$avatar-border-width,
$avatar-border-thin-width
) !default;

$avatar-variants: (
$avatar-background,
$avatar-color,
Expand Down

0 comments on commit 9dbc30a

Please sign in to comment.