changes

components/media/FileShow.vue

@@ -0,0 +1,42 @@
+<template>
+  <p class="py-1 border-bottom" v-for="(v,i) in vfiles">
+    <a class="mr-4" @click="open(v)">{{ v.name }}</a>
+    <a class="mr-4" @click="download(v, i)">
+      <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
+    </a>
+    <a @click="remove(v, i)" v-if="show? show.delete : false">
+      <SvgIcon v-bind="{name: 'bin1.svg', type: 'dark', size: 16}"></SvgIcon>
+    </a>
+  </p>
+  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+</template>
+<script setup>
+  const { $copy, $getpath, $download } = useNuxtApp()
+  const emit = defineEmits(['remove', 'close'])
+  var props = defineProps({
+    files: Object,
+    show: Object
+  })
+  var showmodal = ref()
+  var vfiles = ref($copy(props.files))
+  function remove(v, i) {
+    vfiles.value.splice(i, 1)
+    emit('remove', {v: v, i: i})
+    emit('modalevent', {name: 'removefile', data: {v: v, i: 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()}download/?name=${v.file__file || v.file}&type=file`}}
+    return
+  }
+  window.open(`${$getpath()}download/?name=${v.file__file || v.file}&type=file`)
+}
+function download(v) {
+  $download(`${$getpath()}download/?name=${v.file}&type=file`, v.name)
+}
+watch(() => props.files, (newVal, oldVal) => {
+  vfiles.value = props.files
+})
+</script>