jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #138 from jfkriz/feature/avatar-component-override-default-placeholder

Browse Source 
Avatar - Allow placeholder override, and handle image errors
This commit is contained in:
Ilya Artamonov
2023-06-04 12:40:04 +03:00
committed by GitHub
parent c0ea08d60d a1bac4bebb
commit f095262fd6
3 changed files with 68 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Avatar/Avatar.vue
View File

@@ -1,21 +1,32 @@
<template>
<div class="relative">
<div v-if="!img" :class="avatarPlaceholderWrapperClasses">
<svg v-if="!initials" :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<img v-if="img && !imageError" :class="avatarClasses" :src="img" :alt="alt" @error="setImageError">
<div v-else :class="avatarPlaceholderWrapperClasses">
<svg v-if="!initials && !hasPlaceholder" :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
<div v-if="!initials && hasPlaceholder" :class="avatarPlaceholderClasses">
<slot name="placeholder" />
</div>
<div v-else :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
<span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
</div>
<img v-else :class="avatarClasses" :src="img" :alt="alt">
<span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
</div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
import { computed, ref, toRefs, useSlots } from 'vue'
import type { PropType } from 'vue'
import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from './types'
import { useAvatarClasses } from '@/components/Avatar/composables/useAvatarClasses'
const imageError = ref(false)
function setImageError() {
imageError.value = true
}
const slots = useSlots()
const hasPlaceholder = computed(() => slots.placeholder)
const props = defineProps({
alt: {
type: String,