feat(api): Add component for displaying an users avatar with fallback image

This commit is contained in:
Ferdinand Thiessen 2021-12-05 23:35:32 +01:00
parent b2c70a6657
commit e9c0086859
2 changed files with 48 additions and 1 deletions

View File

@ -0,0 +1,46 @@
<template>
<q-avatar>
<slot :avatarURL="avatarURL(modelValue)">
<q-img :src="avatarURL(modelValue)" style="min-width: 100%; min-height: 100%">
<template #error>
<img :src="fallback" style="height: 100%" />
</template>
</q-img>
</slot>
</q-avatar>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
import { avatarURL } from '@flaschengeist/api';
/**
* Display an avatar for an user
*
* Slots:
* default - scope: {avatarURL}
*/
export default defineComponent({
name: 'UserAvatar',
props: {
modelValue: {
type: [Object, String] as PropType<FG.User | string>,
required: true,
},
showZoom: {
type: Boolean,
default: false,
},
fallback: {
type: String,
default: 'no-image.svg',
},
},
emits: ['error'],
setup() {
return {
avatarURL,
};
},
});
</script>

View File

@ -1,4 +1,5 @@
import IsoDateInput from './IsoDateInput.vue'; import IsoDateInput from './IsoDateInput.vue';
import PasswordInput from './PasswordInput.vue'; import PasswordInput from './PasswordInput.vue';
import UserAvatar from './UserAvatar.vue';
export { IsoDateInput, PasswordInput }; export { IsoDateInput, PasswordInput, UserAvatar };