Browse Source

refactor(gui-v2): use `td` element as dropzone

pull/2972/head
braks 2 years ago
parent
commit
fad832e183
  1. 26
      packages/nc-gui-v2/components/cell/attachment/index.vue

26
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -4,7 +4,7 @@ import { useProvideAttachmentCell } from './utils'
import Modal from './Modal.vue'
import { useSortable } from './sort'
import Carousel from './Carousel.vue'
import { ref, useDropZone, watch } from '#imports'
import { onMounted, ref, useDropZone, watch } from '#imports'
import { isImage, openLink } from '~/utils'
import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
@ -24,11 +24,11 @@ const { modelValue } = defineProps<Props>()
const emits = defineEmits<Emits>()
const dropZoneRef = ref<HTMLDivElement>()
const dropZoneRef = ref<HTMLTableDataCellElement>()
const sortableRef = ref<HTMLDivElement>()
const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
useProvideAttachmentCell(updateModelValue)
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
@ -57,18 +57,26 @@ onKeyDown('Escape', () => {
modalVisible.value = false
isOverDropZone.value = false
})
onMounted(() => {
if (typeof document !== 'undefined') {
dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
}
})
</script>
<template>
<div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
<div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
<Carousel />
<template v-if="!isReadonly && !dragging && isOverDropZone">
<div
class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
<teleport :to="`td[data-col='${column.id}']`">
<div
class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center gap-1 bg-gray-700/75 text-white"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
</div>
</teleport>
</template>
<div

Loading…
Cancel
Save