80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
|
<p
|
|
v-for="(v, i) in vfiles"
|
|
class="py-1"
|
|
>
|
|
<a
|
|
class="mr-4"
|
|
@click="open(v)"
|
|
>{{ v.name }}</a
|
|
>
|
|
<a
|
|
class="mr-4"
|
|
@click="download(v, i)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:download-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</a>
|
|
<a
|
|
v-if="show?.delete"
|
|
@click="remove(v, i)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</a>
|
|
</p>
|
|
<Modal
|
|
v-if="showmodal"
|
|
v-bind="showmodal"
|
|
@close="showmodal = undefined"
|
|
/>
|
|
</template>
|
|
<script setup>
|
|
const { $copy, $getpath, $download } = useNuxtApp();
|
|
const emit = defineEmits(["remove", "close"]);
|
|
const props = defineProps({
|
|
files: Object,
|
|
show: Object,
|
|
});
|
|
const showmodal = ref();
|
|
const vfiles = ref($copy(props.files));
|
|
function remove(v, i) {
|
|
vfiles.value.splice(i, 1);
|
|
emit("remove", { v, i });
|
|
emit("modalevent", { name: "removefile", data: { v, i } });
|
|
if (vfiles.value.length === 0) emit("close");
|
|
}
|
|
function open(v) {
|
|
if (v.name.indexOf(".png") >= 0 || v.name.indexOf(".jpg") >= 0 || v.name.indexOf(".jpeg") >= 0) {
|
|
showmodal.value = {
|
|
title: v.file__file || v.file,
|
|
component: "media/ChipImage",
|
|
vbind: {
|
|
extend: false,
|
|
file: v,
|
|
image: `${$getpath()}static/files/${v.file__file || v.file}`,
|
|
},
|
|
};
|
|
return;
|
|
}
|
|
window.open(`${$getpath()}static/files/${v.file__file || v.file}`);
|
|
}
|
|
function download(v) {
|
|
window.open(`${$getpath()}static/files/${v.file}`, v.name);
|
|
}
|
|
watch(
|
|
() => props.files,
|
|
() => {
|
|
vfiles.value = props.files;
|
|
},
|
|
);
|
|
</script>
|