hedera-web/src/components/ui/VnImg.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
    },
    roundedBorders: {
        type: String,
        default: 'none'
    },
    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}`;
});

const zoomUrl = computed(() => {
    return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.zoomSize}/${props.id}`;
});

const rounded = computed(() => {
    const roundedMap = {
        none: '',
        default: 'rounded',
        full: 'full-rounded',
        top: 'top-rounded',
        bottom: 'bottom-rounded'
    };
    return roundedMap[props.roundedBorders];
});
</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="[rounded, { zoomIn: props.zoomSize }]"
            class="main-image"
            :src="url"
            v-bind="$attrs"
            @click.stop.prevent="showZoom = !showZoom"
            spinner-color="primary"
            :width="props.width"
            :height="props.height"
            draggable
        >
            <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="zoomUrl"
            size="full"
            class="img_zoom"
            v-bind="$attrs"
            spinner-color="primary"
            draggable
        />
    </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;
}

.rounded-bottom {
    border-radius: 0.6em 0.6em 0 0;
}

.rounded-top {
    border-radius: 0 0 0.6em 0.6em;
}

.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>