Inset border, default dropIndicator for LoadImage

This commit is contained in:
Austin Mroz
2025-12-30 22:04:37 -08:00
parent 1151350ee4
commit 9202b80ee2
2 changed files with 22 additions and 7 deletions

View File

@@ -14,7 +14,12 @@ const canAcceptDrop = ref(false)
<template>
<drop-wrapper
v-if="onDragOver && onDragDrop"
:class="cn(canAcceptDrop && 'ring-1 ring-primary-500 bg-primary-500/10')"
:class="
cn(
'rounded-lg ring-inset ring-primary-500',
canAcceptDrop && 'ring-4 bg-primary-500/10'
)
"
@dragover.prevent="(e: DragEvent) => (canAcceptDrop = onDragOver!(e))"
@dragleave="canAcceptDrop = false"
@drop.stop.prevent="
@@ -27,7 +32,7 @@ const canAcceptDrop = ref(false)
<slot />
<div
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"
class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3 py-2"
>
<span v-if="dropIndicator.label" v-text="dropIndicator.label" />
<i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />