86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<div class="avatar avatar-xxl position-relative mx-auto mb-3">
|
|
<img
|
|
v-if="avatarUrl"
|
|
:src="avatarUrl"
|
|
:alt="alt"
|
|
class="w-100 border-radius-lg shadow-sm"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="avatar-placeholder w-100 border-radius-lg shadow-sm d-flex align-items-center justify-content-center bg-gradient-primary"
|
|
>
|
|
<span class="text-white text-lg font-weight-bold">
|
|
{{ initials }}
|
|
</span>
|
|
</div>
|
|
<!-- Edit Avatar Button -->
|
|
<div class="position-absolute bottom-0 end-0 mb-n2 me-n2 d-flex gap-1">
|
|
<a
|
|
v-if="editable"
|
|
href="javascript:;"
|
|
class="btn btn-sm btn-icon-only bg-gradient-light"
|
|
@click="$emit('edit')"
|
|
>
|
|
<i
|
|
class="fa fa-pen"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Modifier l'image"
|
|
></i>
|
|
</a>
|
|
|
|
<!-- Save Avatar Button -->
|
|
<a
|
|
v-if="hasUnsavedChanges"
|
|
href="javascript:;"
|
|
class="btn btn-sm btn-icon-only bg-gradient-success"
|
|
@click="$emit('save')"
|
|
>
|
|
<i
|
|
class="fa fa-save"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Enregistrer l'image"
|
|
></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from "vue";
|
|
defineProps({
|
|
avatarUrl: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
initials: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: "Avatar",
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hasUnsavedChanges: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
defineEmits(["edit", "save"]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.avatar-placeholder {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 2rem;
|
|
}
|
|
</style>
|