Add click handler to DropZone

This commit is contained in:
Austin Mroz
2026-01-05 13:39:03 -08:00
parent 24500415cf
commit 5cf57ff8e8
2 changed files with 14 additions and 3 deletions

View File

@@ -6,7 +6,11 @@ import { cn } from '@/utils/tailwindUtil'
defineProps<{ defineProps<{
onDragOver?: (e: DragEvent) => boolean onDragOver?: (e: DragEvent) => boolean
onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
dropIndicator?: { label?: string; iconClass?: string } dropIndicator?: {
label?: string
iconClass?: string
onClick?: (e: MouseEvent) => void
}
}>() }>()
const canAcceptDrop = ref(false) const canAcceptDrop = ref(false)
@@ -32,7 +36,13 @@ const canAcceptDrop = ref(false)
<slot /> <slot />
<div <div
v-if="dropIndicator" v-if="dropIndicator"
class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2" :class="
cn(
'flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2',
dropIndicator?.onClick && 'cursor-pointer'
)
"
@click.prevent="(e: MouseEvent) => dropIndicator!.onClick?.(e)"
> >
<span v-if="dropIndicator.label" v-text="dropIndicator.label" /> <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
<i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" /> <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />

View File

@@ -86,7 +86,8 @@ const nodeDatas = computed(() => {
? undefined ? undefined
: { : {
iconClass: 'icon-[lucide--image]', iconClass: 'icon-[lucide--image]',
label: t('Click to browse or drag an image') label: t('Click to browse or drag an image'),
onClick: node.widgets?.[1]?.callback
} }
//Only widgets is actually used //Only widgets is actually used
return { return {