70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
@drop="onDrop"
|
|
@dragover.prevent="onDragOver"
|
|
@dragleave="onDragLeave"
|
|
@dragenter="onDragEnter"
|
|
>
|
|
<slot :isDragOver="isDragOver"></slot>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
|
|
import { ref } from 'vue';
|
|
import {VirtualFile} from '../../model/FileSystem/types';
|
|
|
|
const isDragOver = ref(false);
|
|
const emit = defineEmits<{
|
|
dropFile: [VirtualFile],
|
|
}>();
|
|
|
|
defineProps<{
|
|
accept?: string,
|
|
}>();
|
|
|
|
// const slot = defineSlots<{
|
|
// default(props: {isDragOver: boolean}): any
|
|
// }>()
|
|
|
|
function onDragEnter() {
|
|
isDragOver.value = true;
|
|
}
|
|
|
|
function onDragLeave() {
|
|
isDragOver.value = false;
|
|
}
|
|
|
|
function onDragOver(event: DragEvent) {
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
function parseMeta(event: DragEvent): VirtualFile | null {
|
|
try {
|
|
const file = event.dataTransfer?.files?.[0];
|
|
if (file) {
|
|
return {
|
|
type: 'file',
|
|
source: 'drop',
|
|
path: [] as string[],
|
|
name: file.name,
|
|
mimeType: file.type
|
|
} as const;
|
|
} else if (event.dataTransfer?.getData('application/json')) {
|
|
return JSON.parse(event.dataTransfer?.getData('application/json'));
|
|
}
|
|
} catch (e) {
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
function onDrop(event: DragEvent) {
|
|
event.preventDefault();
|
|
isDragOver.value = false;
|
|
const drop = parseMeta(event);
|
|
if (drop) {
|
|
emit('dropFile', drop);
|
|
}
|
|
}
|
|
</script> |