469 lines
13 KiB
Vue
469 lines
13 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import AppBox from './app/AppBox.vue';
|
|
import { CancelButton, ClearButton, SaveButton } from './button';
|
|
import { dialog } from 'src/stores/utils';
|
|
|
|
defineExpose({ browse });
|
|
const props = defineProps<{
|
|
changeDisabled?: boolean;
|
|
clearButtonDisabled?: boolean;
|
|
clearButton?: boolean;
|
|
hiddenFooter?: boolean;
|
|
defaultUrl?: string;
|
|
onCreate?: boolean;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
(e: 'save', file: File | null, url: string | null): void;
|
|
(e: 'addImage', file: File | null): void;
|
|
(e: 'removeImage', name: string): void;
|
|
(e: 'submit', name: string): void;
|
|
}>();
|
|
|
|
const imageUrl = defineModel<string>('imageUrl', {
|
|
required: false,
|
|
default: '',
|
|
});
|
|
const fallbackUrl = defineModel<string>('fallbackUrl', {
|
|
required: false,
|
|
default: '',
|
|
});
|
|
const dialogState = defineModel<boolean>('dialogState', {
|
|
required: false,
|
|
default: true,
|
|
});
|
|
const file = defineModel<File | null>('file', {
|
|
required: true,
|
|
});
|
|
const dataList = defineModel<{ selectedImage: string; list: string[] }>(
|
|
'dataList',
|
|
{
|
|
required: false,
|
|
default: { selectedImage: '', list: [] },
|
|
},
|
|
);
|
|
const onCreateData = defineModel<{
|
|
selectedImage: string;
|
|
list: { url: string; imgFile: File | null; name: string }[];
|
|
}>('onCreateDataList', {
|
|
required: false,
|
|
default: { selectedImage: '', list: [] },
|
|
});
|
|
|
|
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
|
const reader = new FileReader();
|
|
const inputFile = (() => {
|
|
const _element = document.createElement('input');
|
|
_element.type = 'file';
|
|
_element.accept = 'image/*';
|
|
_element.addEventListener('change', change);
|
|
return _element;
|
|
})();
|
|
|
|
const selectedImg = ref('');
|
|
const currentImag = ref('');
|
|
const tempImage = ref<string | null>('');
|
|
|
|
reader.addEventListener('load', () => {
|
|
if (typeof reader.result === 'string') {
|
|
tempImage.value = reader.result;
|
|
if (props.onCreate) {
|
|
onCreateData.value.list.push({
|
|
url: reader.result,
|
|
imgFile: file.value,
|
|
name: Date.now().toString(),
|
|
});
|
|
onCreateData.value.selectedImage =
|
|
onCreateData.value.list[onCreateData.value.list.length - 1].name;
|
|
selectedImg.value = reader.result;
|
|
} else {
|
|
emit('addImage', file.value);
|
|
}
|
|
}
|
|
});
|
|
|
|
function browse() {
|
|
inputFile?.click();
|
|
}
|
|
|
|
function change(e: Event) {
|
|
const _element = e.target as HTMLInputElement | null;
|
|
const _file = _element?.files?.[0];
|
|
|
|
if (_file) {
|
|
file.value = _file;
|
|
reader.readAsDataURL(_file);
|
|
if (!dialogState.value) {
|
|
emit('save', _file, tempImage.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function downloadImage(url: string | null) {
|
|
if (!url) return;
|
|
const res = await fetch(url);
|
|
const blob = await res.blob();
|
|
|
|
let extension = '';
|
|
|
|
if (blob.type === 'image/jpeg') extension = '.jpg';
|
|
else if (blob.type === 'image/png') extension = '.png';
|
|
else return;
|
|
|
|
let a = document.createElement('a');
|
|
a.download = `download${extension}`;
|
|
a.href = window.URL.createObjectURL(blob);
|
|
a.click();
|
|
a.remove();
|
|
}
|
|
|
|
function selectImg(name: string) {
|
|
if (props.onCreate) {
|
|
selectedImg.value = name;
|
|
tempImage.value = name;
|
|
onCreateData.value.selectedImage =
|
|
onCreateData.value.list.find((v) => v.url === name)?.name || '';
|
|
} else {
|
|
selectedImg.value = name.split('/').pop() || '';
|
|
tempImage.value = `${apiBaseUrl}/${name}`;
|
|
}
|
|
}
|
|
|
|
function closeCheckToDefault() {
|
|
let imgNameList: string[];
|
|
let inList: boolean;
|
|
|
|
if (props.onCreate) {
|
|
imgNameList = onCreateData.value.list.map((v) => v.url || '');
|
|
} else {
|
|
imgNameList = dataList.value.list.map((v) => v.split('/').pop() || '');
|
|
}
|
|
|
|
inList = imgNameList.includes(currentImag.value);
|
|
|
|
if (!inList && currentImag.value !== '') {
|
|
selectImg('');
|
|
emit('submit', selectedImg.value);
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => dialogState.value,
|
|
() => {
|
|
if (dialogState.value) {
|
|
if (props.onCreate) {
|
|
tempImage.value = imageUrl.value;
|
|
selectedImg.value = imageUrl.value;
|
|
currentImag.value = imageUrl.value;
|
|
} else {
|
|
tempImage.value = `${imageUrl.value}?ts=${Date.now()}`;
|
|
selectedImg.value = dataList.value.selectedImage;
|
|
currentImag.value = dataList.value.selectedImage;
|
|
}
|
|
} else {
|
|
tempImage.value = '';
|
|
selectedImg.value = '';
|
|
}
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => dataList.value.list,
|
|
(n, o) => {
|
|
if (n.length > o.length) {
|
|
selectImg(n[n.length - 1]);
|
|
}
|
|
},
|
|
{ deep: true },
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="dialogState" @before-hide="closeCheckToDefault">
|
|
<AppBox class="image-dialog-content column">
|
|
<!-- header -->
|
|
<div class="row items-center q-py-sm q-px-md bordered-b">
|
|
<div style="width: 38.61px" />
|
|
<div style="flex: 1"><slot name="title" /></div>
|
|
<div>
|
|
<CancelButton icon-only v-close-popup @click="closeCheckToDefault" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div class="q-px-lg surface-2 col row full-width">
|
|
<div
|
|
class="image-dialog-body q-my-lg relative-position rounded surface-1 flex items-center"
|
|
>
|
|
<img
|
|
:src="tempImage || fallbackUrl"
|
|
v-if="tempImage || fallbackUrl"
|
|
style="object-fit: contain; width: 100%"
|
|
@error="
|
|
() => {
|
|
tempImage = '';
|
|
}
|
|
"
|
|
/>
|
|
<div
|
|
style="object-fit: contain; height: 100%; width: 100%"
|
|
v-if="!tempImage && !fallbackUrl"
|
|
>
|
|
<slot name="error"></slot>
|
|
</div>
|
|
<div class="absolute-top-left q-pa-md">
|
|
<q-btn
|
|
class="upload-image-btn q-mr-md"
|
|
icon="mdi-camera-plus-outline"
|
|
id="btn-add-img"
|
|
size="md"
|
|
unelevated
|
|
round
|
|
v-if="!changeDisabled"
|
|
@click="
|
|
() => {
|
|
inputFile?.click();
|
|
}
|
|
"
|
|
style="color: hsla(var(--stone-0-hsl) / 0.7)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="!onCreate"
|
|
class="upload-image-btn"
|
|
icon="mdi-download-outline"
|
|
id="btn-download-img"
|
|
size="md"
|
|
unelevated
|
|
round
|
|
@click="downloadImage(tempImage)"
|
|
style="color: hsla(var(--stone-0-hsl) / 0.7)"
|
|
></q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!hiddenFooter"
|
|
class="col q-ml-md q-pt-sm q-my-md"
|
|
style="width: 40em; height: 30em; overflow: auto"
|
|
>
|
|
<div class="row items-center q-gutter-sm">
|
|
<div
|
|
class="rounded surface-1 relative-position"
|
|
:class="{
|
|
'selected-img': selectedImg === '',
|
|
}"
|
|
style="
|
|
object-fit: cover;
|
|
height: 5vw;
|
|
width: 5vw;
|
|
overflow: hidden;
|
|
"
|
|
@click="selectImg('')"
|
|
>
|
|
<slot name="error"></slot>
|
|
</div>
|
|
|
|
<template v-if="dataList">
|
|
<div
|
|
v-for="(img, n) in onCreate
|
|
? onCreateData.list.map((item) => item.url)
|
|
: dataList.list"
|
|
:key="n"
|
|
class="rounded surface-1 relative-position"
|
|
:class="{
|
|
'selected-img':
|
|
selectedImg && onCreate
|
|
? selectedImg === img
|
|
: selectedImg === img.split('/').pop(),
|
|
}"
|
|
style="height: 5vw; width: 5vw"
|
|
@click="selectImg(img)"
|
|
>
|
|
<q-btn
|
|
icon="mdi-close"
|
|
class="absolute-top-right"
|
|
rounded
|
|
padding="0"
|
|
size="sm"
|
|
style="
|
|
z-index: 2;
|
|
top: -5px;
|
|
right: -5px;
|
|
background: var(--surface-1);
|
|
color: hsl(var(--negative-bg));
|
|
"
|
|
@click.stop="
|
|
() => {
|
|
if (onCreate) {
|
|
const v = onCreateData.list.splice(n, 1);
|
|
if (v[0].url === selectedImg) {
|
|
if (onCreateData.list.length === 0 || n === 0) {
|
|
selectImg('');
|
|
} else {
|
|
selectImg(onCreateData.list[n - 1].url);
|
|
}
|
|
}
|
|
} else {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: $t('dialog.title.confirmDelete'),
|
|
actionText: $t('general.delete'),
|
|
message: $t('dialog.message.confirmDelete'),
|
|
action: async () => {
|
|
$emit('removeImage', img);
|
|
const index = dataList.list.indexOf(img);
|
|
if (img.split('/').pop() === selectedImg) {
|
|
if (dataList.list.length === 0 || index === 0) {
|
|
selectImg('');
|
|
} else {
|
|
selectImg(dataList.list[index - 1]);
|
|
}
|
|
}
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
}
|
|
"
|
|
></q-btn>
|
|
<div
|
|
class="rounded full-width full-height surface-1"
|
|
style="overflow: hidden"
|
|
>
|
|
<img
|
|
v-if="img"
|
|
:src="onCreate ? img : `${apiBaseUrl}/${img}`"
|
|
class=""
|
|
style="object-fit: cover; height: 100%; width: 100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div
|
|
class="row items-center justify-end q-py-sm q-px-md bordered-t"
|
|
v-if="!hiddenFooter"
|
|
>
|
|
<ClearButton
|
|
outlined
|
|
@click="
|
|
inputFile && (inputFile.value = ''),
|
|
(imageUrl = defaultUrl || fallbackUrl || ''),
|
|
(file = null)
|
|
"
|
|
class="q-px-md q-mr-auto"
|
|
:disabled="
|
|
clearButtonDisabled ||
|
|
imageUrl === fallbackUrl ||
|
|
imageUrl === defaultUrl ||
|
|
!imageUrl
|
|
"
|
|
v-if="clearButton"
|
|
/>
|
|
<!-- <CancelButton
|
|
id="btn-cancel-img"
|
|
outlined
|
|
class="q-px-md q-mr-sm"
|
|
@click="
|
|
inputFile && (inputFile.value = ''),
|
|
(tempImage = defaultUrl || fallbackUrl || ''),
|
|
(file = null)
|
|
"
|
|
v-close-popup
|
|
/> -->
|
|
<SaveButton
|
|
id="btn-save-img"
|
|
outlined
|
|
:disabled="currentImag === selectedImg"
|
|
:label="$t('general.apply')"
|
|
@click="$emit('submit', selectedImg)"
|
|
/>
|
|
<!-- @click="$emit('save', inputFile?.files?.[0] || null, tempImage)" -->
|
|
</div>
|
|
</AppBox>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.image-dialog-content {
|
|
padding: 0;
|
|
border-radius: var(--radius-2);
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.image-dialog-content {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
.image-dialog-body {
|
|
/* overflow-y: auto;
|
|
background-color: var(--surface-1) !important;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1; */
|
|
overflow: hidden;
|
|
width: 30em;
|
|
height: 30em;
|
|
}
|
|
|
|
.upload-image-btn {
|
|
transition: 0.3s background-color ease-in-out;
|
|
background-color: hsla(0 0% 0% / 0.2);
|
|
|
|
backdrop-filter: blur(1px);
|
|
|
|
&:not(:hover) {
|
|
color: hsla(0 0% 40% / 1);
|
|
background-color: hsla(0 0% 0% / 0.2);
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
width: 100%;
|
|
height: calc(100vh - 200px);
|
|
min-height: 480px;
|
|
|
|
& > :deep(*) {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.image-container > :deep(*:not(:first-child)) {
|
|
display: none;
|
|
}
|
|
|
|
.close-btn {
|
|
color: hsl(var(--negative-bg));
|
|
background-color: hsla(var(--negative-bg) / 0.1);
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
|
|
.selected-img {
|
|
position: relative;
|
|
border: 2px solid hsl(var(--info-bg));
|
|
}
|
|
|
|
.selected-img:before {
|
|
content: ' ';
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
border: 2px solid var(--surface-1);
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|