|
|
|
@ -68,14 +68,16 @@ onKeyDown('Escape', () => {
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<div ref="dropZoneRef"> |
|
|
|
|
<div |
|
|
|
|
v-if="!isReadonly && !dragging" |
|
|
|
|
:class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']" |
|
|
|
|
class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl" |
|
|
|
|
> |
|
|
|
|
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" /> |
|
|
|
|
<div class="text-white text-3xl">Drop here</div> |
|
|
|
|
</div> |
|
|
|
|
<template v-if="!isReadonly && !dragging"> |
|
|
|
|
<general-overlay |
|
|
|
|
v-model="isOverDropZone" |
|
|
|
|
inline |
|
|
|
|
class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl" |
|
|
|
|
> |
|
|
|
|
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" /> |
|
|
|
|
<div class="text-white text-3xl">Drop here</div> |
|
|
|
|
</general-overlay> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6"> |
|
|
|
|
<div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1"> |
|
|
|
|