arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Avatar): bind as to image to support NuxtImg

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-29 16:59:43 +01:00
parent b471547eb7
commit cff37bf211
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/runtime/components/Avatar.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants' import { tv, type VariantProps } from 'tailwind-variants'
import type { AvatarFallbackProps, AvatarRootProps } from 'radix-vue' import type { AvatarFallbackProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config' import _appConfig from '#build/app.config'
import theme from '#build/ui/avatar' import theme from '#build/ui/avatar'
@@ -12,7 +12,8 @@ const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
type AvatarVariants = VariantProps<typeof avatar> type AvatarVariants = VariantProps<typeof avatar>
export interface AvatarProps extends Omit<AvatarRootProps, 'asChild'>, Omit<AvatarFallbackProps, 'as' | 'asChild'> { export interface AvatarProps extends Omit<AvatarFallbackProps, 'as' | 'asChild'> {
as?: string | object
src?: string src?: string
alt?: string alt?: string
icon?: IconProps['name'] icon?: IconProps['name']
@@ -31,7 +32,6 @@ import { UIcon } from '#components'
const props = defineProps<AvatarProps>() const props = defineProps<AvatarProps>()
const rootProps = useForwardProps(reactivePick(props, 'as'))
const fallbackProps = useForwardProps(reactivePick(props, 'delayMs')) const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)) const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
@@ -40,8 +40,8 @@ const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: props.
</script> </script>
<template> <template>
<AvatarRoot v-bind="rootProps" :class="ui.root({ class: props.class })"> <AvatarRoot :class="ui.root({ class: props.class })">
<AvatarImage v-if="src" :src="src" :alt="alt" :class="ui.image()" /> <AvatarImage v-if="src" :as="as" :src="src" :alt="alt" :class="ui.image()" />
<AvatarFallback as-child v-bind="fallbackProps"> <AvatarFallback as-child v-bind="fallbackProps">
<UIcon v-if="icon" :name="icon" :class="ui.icon()" /> <UIcon v-if="icon" :name="icon" :class="ui.icon()" />