|
@@ -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>
|