mirror of
https://github.com/hay-kot/homebox.git
synced 2024-11-17 06:08:42 +00:00
32 lines
650 B
Vue
32 lines
650 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
ref="el"
|
||
|
|
class="h-24 w-full border-2 border-primary border-dashed grid place-content-center"
|
||
|
|
:class="isOverDropZone ? 'bg-primary bg-opacity-10' : ''"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps({
|
||
|
|
modelValue: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits(["update:modelValue", "drop"]);
|
||
|
|
|
||
|
|
const el = ref<HTMLDivElement>(null);
|
||
|
|
const { isOverDropZone } = useDropZone(el, files => {
|
||
|
|
emit("drop", files);
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(isOverDropZone, () => {
|
||
|
|
emit("update:modelValue", isOverDropZone.value);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|