182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useAppStore } from 'stores/app';
|
|
|
|
import ImageEditor from 'src/components/ui/ImageEditor.vue';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const props = defineProps({
|
|
baseURL: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
storage: {
|
|
type: [String, Number],
|
|
default: 'Images'
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'full'
|
|
},
|
|
zoomSize: {
|
|
type: String,
|
|
required: false,
|
|
default: 'lg'
|
|
},
|
|
id: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
rounded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fullRounded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
editSchema: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
editImageName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
alwaysShowEditButton: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
|
|
const app = useAppStore();
|
|
const showZoom = ref(false);
|
|
const showEditForm = ref(false);
|
|
const url = computed(() => {
|
|
return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="relative-position main-image-container">
|
|
<QBtn
|
|
v-if="props.editable"
|
|
icon="add_a_photo"
|
|
class="show-edit-button absolute-top-left"
|
|
:class="{ hide: !props.alwaysShowEditButton }"
|
|
round
|
|
text-color="black"
|
|
@click.stop.prevent="showEditForm = !showEditForm"
|
|
>
|
|
<QTooltip>{{ t('addOrEditImage') }}</QTooltip>
|
|
</QBtn>
|
|
<QImg
|
|
:class="{
|
|
zoomIn: props.zoomSize,
|
|
rounded: props.rounded,
|
|
'full-rounded': props.fullRounded
|
|
}"
|
|
class="main-image"
|
|
:src="url"
|
|
v-bind="$attrs"
|
|
@click="showZoom = !showZoom"
|
|
spinner-color="primary"
|
|
:width="props.width"
|
|
:height="props.height"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="full-width full-height flex justify-center items-center"
|
|
>
|
|
<QIcon name="image" size="sm" />
|
|
</div>
|
|
</template>
|
|
</QImg>
|
|
</div>
|
|
|
|
<QDialog v-if="props.zoomSize" v-model="showZoom">
|
|
<QImg
|
|
:src="url"
|
|
size="full"
|
|
class="img_zoom"
|
|
v-bind="$attrs"
|
|
spinner-color="primary"
|
|
/>
|
|
</QDialog>
|
|
<QDialog v-if="props.editable" v-model="showEditForm">
|
|
<ImageEditor
|
|
class="all-pointer-events"
|
|
:schema="props.editSchema"
|
|
:image-name="props.editImageName"
|
|
@close="showEditForm = false"
|
|
/>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-image-container {
|
|
&:hover {
|
|
.show-edit-button {
|
|
visibility: visible !important;
|
|
}
|
|
.main-image {
|
|
filter: brightness(80%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-image {
|
|
&.zoomIn {
|
|
cursor: zoom-in;
|
|
}
|
|
min-width: 50px;
|
|
}
|
|
|
|
.hide {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.show-edit-button {
|
|
cursor: pointer;
|
|
background-color: $gray-light;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 0.6em;
|
|
}
|
|
.full-rounded {
|
|
border-radius: 50px;
|
|
}
|
|
.img_zoom {
|
|
border-radius: 0%;
|
|
}
|
|
</style>
|
|
|
|
<i18n lang="yaml">
|
|
en-US:
|
|
addOrEditImage: Add or update an image
|
|
es-ES:
|
|
addOrEditImage: Añadir o actualizar imagen
|
|
ca-ES:
|
|
addOrEditImage: Afegir o actualitzar Imatge
|
|
fr-FR:
|
|
addOrEditImage: Ajouter our mettre à jour l'image
|
|
pt-PT:
|
|
addOrEditImage: Adicionar ou atualizar imagem
|
|
</i18n>
|