Browse Source
feat: add size prop to avatar component and update logo component for size handling (#5684)
pull/5686/head
Netfan
11 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with
17 additions and
2 deletions
-
packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
-
packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
|
|
|
@ -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> |
|
|
|
|
|
|
|
@ -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" |
|
|
|
|