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; class?: ClassType;
dot?: boolean; dot?: boolean;
dotClass?: ClassType; dotClass?: ClassType;
size?: number;
} }
defineOptions({ defineOptions({
@ -32,10 +33,23 @@ const props = withDefaults(defineProps<Props>(), {
const text = computed(() => { const text = computed(() => {
return props.alt.slice(-2).toUpperCase(); 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> </script>
<template> <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"> <Avatar :class="props.class" class="size-full">
<AvatarImage :alt="alt" :src="src" /> <AvatarImage :alt="alt" :src="src" />
<AvatarFallback>{{ text }}</AvatarFallback> <AvatarFallback>{{ text }}</AvatarFallback>

View File

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