feat: add size prop to avatar component and update logo component for size handling (#5684)

This commit is contained in:
Netfan 2025-03-08 11:37:02 +08:00 committed by GitHub
parent 89d963c81a
commit e2a577de24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 2 deletions

View File

@ -16,6 +16,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
class?: ClassType;
dot?: boolean;
dotClass?: ClassType;
size?: number;
}
defineOptions({
@ -32,10 +33,23 @@ const props = withDefaults(defineProps<Props>(), {
const text = computed(() => {
return props.alt.slice(-2).toUpperCase();
});
const rootStyle = computed(() => {
return props.size !== undefined && props.size > 0
? {
height: `${props.size}px`,
width: `${props.size}px`,
}
: {};
});
</script>
<template>
<div :class="props.class" class="relative flex flex-shrink-0 items-center">
<div
:class="props.class"
:style="rootStyle"
class="relative flex flex-shrink-0 items-center"
>
<Avatar :class="props.class" class="size-full">
<AvatarImage :alt="alt" :src="src" />
<AvatarFallback>{{ text }}</AvatarFallback>

View File

@ -52,7 +52,8 @@ withDefaults(defineProps<Props>(), {
v-if="src"
:alt="text"
:src="src"
class="relative w-8 rounded-none bg-transparent"
:size="logoSize"
class="relative rounded-none bg-transparent"
/>
<span
v-if="!collapsed"