mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-27 10:20:42 +01:00
fix(Avatar): bind $attrs on image
This commit is contained in:
@@ -12,6 +12,10 @@ const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
|
|||||||
type AvatarVariants = VariantProps<typeof avatar>
|
type AvatarVariants = VariantProps<typeof avatar>
|
||||||
|
|
||||||
export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
|
export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
|
||||||
|
/**
|
||||||
|
* The element or component this component should render as.
|
||||||
|
* @defaultValue 'img'
|
||||||
|
*/
|
||||||
as?: string | object
|
as?: string | object
|
||||||
src?: string
|
src?: string
|
||||||
alt?: string
|
alt?: string
|
||||||
@@ -30,6 +34,8 @@ import { reactivePick } from '@vueuse/core'
|
|||||||
import { UIcon } from '#components'
|
import { UIcon } from '#components'
|
||||||
import { useAvatarGroup } from '#imports'
|
import { useAvatarGroup } from '#imports'
|
||||||
|
|
||||||
|
defineOptions({ inheritAttrs: false })
|
||||||
|
|
||||||
const props = defineProps<AvatarProps>()
|
const props = defineProps<AvatarProps>()
|
||||||
|
|
||||||
const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
|
const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
|
||||||
@@ -46,7 +52,14 @@ const ui = computed(() => avatar({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AvatarRoot :class="ui.root({ class: props.class })">
|
<AvatarRoot :class="ui.root({ class: props.class })">
|
||||||
<AvatarImage v-if="src" :as="as" :src="src" :alt="alt" :class="ui.image({ class: props.ui?.image })" />
|
<AvatarImage
|
||||||
|
v-if="src"
|
||||||
|
:as="as"
|
||||||
|
:src="src"
|
||||||
|
:alt="alt"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:class="ui.image({ class: props.ui?.image })"
|
||||||
|
/>
|
||||||
|
|
||||||
<AvatarFallback as-child v-bind="fallbackProps">
|
<AvatarFallback as-child v-bind="fallbackProps">
|
||||||
<UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
|
<UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
|
||||||
|
|||||||
Reference in New Issue
Block a user