66 lines
2.3 KiB
Vue
66 lines
2.3 KiB
Vue
<script setup>
|
|
import { defineProps, ref } from 'vue';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
blocks: Array
|
|
});
|
|
|
|
const open = ref(false)
|
|
|
|
const clone = (block) => {
|
|
return {
|
|
...block,
|
|
uuid: uuidv4()
|
|
};
|
|
};
|
|
|
|
function handleDragStart(event, block) {
|
|
event.dataTransfer.setData('application/json', JSON.stringify(block));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="accordion-blocks" data-accordion="collapse">
|
|
<div class="border border-gray-200 dark:border-gray-700 rounded-md">
|
|
<h2>
|
|
<button
|
|
@click="open = !open"
|
|
type="button"
|
|
class="flex items-center justify-between w-full px-4 py-2 font-medium text-left text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
{{ title }}
|
|
<svg
|
|
:class="{ 'rotate-180': open }"
|
|
class="w-4 h-4 transform transition-transform duration-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
</h2>
|
|
<div v-show="open" class="px-4 pb-4 space-y-4 border-t border-gray-200 dark:border-gray-700">
|
|
<div
|
|
v-for="block in blocks"
|
|
:key="block.uuid"
|
|
class="cursor-move border rounded p-2 bg-white dark:bg-gray-700 shadow hover:bg-gray-50 dark:hover:bg-gray-600"
|
|
draggable="true"
|
|
@dragstart="handleDragStart($event, block)"
|
|
>
|
|
<span class="block text-xs font-medium text-gray-900 dark:text-white">{{ block.description }}</span>
|
|
<img :src="block.thumbUrl" class="mt-2 w-full object-cover rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.collapse {
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style> |