fix(components): ui prop override with class (#136)

This commit is contained in:
Benjamin Canac
2024-07-03 14:35:58 +02:00
committed by GitHub
parent 5a22c62b2a
commit 235556d3e0
50 changed files with 383 additions and 375 deletions

View File

@@ -38,16 +38,19 @@ const fallback = computed(() => props.text || (props.alt || '').split(' ').map(w
const { size } = useAvatarGroup(props)
const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: size.value }))
// eslint-disable-next-line vue/no-dupe-keys
const ui = computed(() => avatar({
size: size.value
}))
</script>
<template>
<AvatarRoot :class="ui.root({ class: props.class })">
<AvatarImage v-if="src" :as="as" :src="src" :alt="alt" :class="ui.image()" />
<AvatarImage v-if="src" :as="as" :src="src" :alt="alt" :class="ui.image({ class: props.ui?.image })" />
<AvatarFallback as-child v-bind="fallbackProps">
<UIcon v-if="icon" :name="icon" :class="ui.icon()" />
<span v-else :class="ui.fallback()">{{ fallback }}</span>
<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>
</AvatarFallback>
</AvatarRoot>
</template>