feat(Avatar): infer width / height on <img> based on size prop

This commit is contained in:
Benjamin Canac
2024-11-07 14:49:39 +01:00
parent ffb551ab54
commit c9adf333be
31 changed files with 232 additions and 218 deletions

View File

@@ -52,6 +52,18 @@ const { size } = useAvatarGroup(props)
const ui = computed(() => avatar({
size: size.value
}))
const sizePx = computed(() => ({
'3xs': 16,
'2xs': 20,
'xs': 24,
'sm': 28,
'md': 32,
'lg': 36,
'xl': 40,
'2xl': 44,
'3xl': 48
})[props.size || 'md'])
</script>
<template>
@@ -61,6 +73,8 @@ const ui = computed(() => avatar({
:as="ImageComponent"
:src="src"
:alt="alt"
:width="sizePx"
:height="sizePx"
v-bind="$attrs"
:class="ui.image({ class: props.ui?.image })"
/>