feat(Avatar): add default slot for fallback

This commit is contained in:
Benjamin Canac
2024-12-05 15:16:28 +01:00
parent bc80a0121f
commit b741ef3313
4 changed files with 17 additions and 5 deletions

View File

@@ -27,6 +27,10 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
ui?: Partial<typeof avatar.slots>
}
export interface AvatarSlots {
default(props?: {}): any
}
extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
</script>
@@ -80,8 +84,10 @@ const sizePx = computed(() => ({
/>
<AvatarFallback as-child v-bind="fallbackProps">
<UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
<span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
<slot>
<UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
<span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
</slot>
</AvatarFallback>
</AvatarRoot>
</template>