fix: 💄 Remove extra bg value on Avatar inner images

This commit is contained in:
Jesse Wierzbinski 2024-06-20 18:53:34 -10:00
parent 21fcdd8f64
commit bba222a2fc
No known key found for this signature in database
3 changed files with 21 additions and 16 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center"> <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none"> <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt" /> <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
</Skeleton> </Skeleton>
</div> </div>
</template> </template>

View file

@ -1,4 +1,7 @@
<template> <template>
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{ <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
left: `${x}px`, left: `${x}px`,
top: `${y}px`, top: `${y}px`,
@ -13,6 +16,7 @@
</div> </div>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</div> </div>
</Transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View file

@ -2,7 +2,8 @@
<AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis" <AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
:distance-function="distance"> :distance-function="distance">
<template #default="{ suggestion }"> <template #default="{ suggestion }">
<Avatar :src="(suggestion.value as Emoji).url" class="w-full h-full [&>img]:object-contain rounded" <Avatar :src="(suggestion.value as Emoji).url"
class="w-full h-full [&>img]:object-contain !bg-transparent rounded"
:alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" /> :alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
</template> </template>
</AutocompleteSuggestbox> </AutocompleteSuggestbox>