114 lines
3.5 KiB
Vue
114 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
|
{{ header }}
|
|
</h3>
|
|
<Draggable
|
|
v-model="items"
|
|
class="pt-4 space-y-4"
|
|
tag="transition-group"
|
|
ghost-class="opacity-50"
|
|
handle=".handle"
|
|
:animation="200"
|
|
:component-data="{tag: 'div', type: 'transition-group'}"
|
|
:item-key="((item) => items.indexOf(item))"
|
|
>
|
|
<template #item="{ element, index }">
|
|
<div class="group flex items-start space-x-3">
|
|
<button
|
|
class="py-4 text-red-500 hover:text-gray-600 opacity-100 group-hover:opacity-100 transition-opacity hover:scale-110 lg:opacity-0 handle"
|
|
type="button"
|
|
>
|
|
<ViewGridIcon class="w-5 h-5 text-gray-500" />
|
|
</button>
|
|
<Disclosure
|
|
v-slot="{ open }"
|
|
as="div"
|
|
class="flex-1 border border-gray-200"
|
|
>
|
|
<div class="flex">
|
|
<DisclosureButton class="transition transition-colors rounded-md group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500 hover:text-blumilk-500 transition transition-colors rounded-md focus:outline-none">
|
|
<div class="break-all line-clamp-1 text-md">
|
|
<slot
|
|
name="itemHeader"
|
|
:element="element"
|
|
:index="index"
|
|
/>
|
|
</div>
|
|
<div class="ml-2">
|
|
<svg
|
|
:class="[open ? '-rotate-90' : 'rotate-90', 'h-6 w-6 transform transition-transform ease-in-out duration-150']"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
d="M6 6L14 10L6 14V6Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</DisclosureButton>
|
|
</div>
|
|
<DisclosurePanel
|
|
as="div"
|
|
class="py-2 px-4 border-t border-gray-200"
|
|
>
|
|
<slot
|
|
name="form"
|
|
:element="element"
|
|
:index="index"
|
|
/>
|
|
</DisclosurePanel>
|
|
</Disclosure>
|
|
<button
|
|
class="py-4 text-red-500 hover:text-red-600 opacity-100 group-hover:opacity-100 transition-opacity hover:scale-110 lg:opacity-0"
|
|
type="button"
|
|
@click="removeItem(index)"
|
|
>
|
|
<TrashIcon class="w-5 h-5 text-red-500" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Draggable>
|
|
<div class="px-8">
|
|
<button
|
|
type="button"
|
|
class="p-4 mx-auto mt-4 w-full font-semibold text-center text-blumilk-600 hover:bg-blumilk-25 focus:outline-none transition-colors"
|
|
@click="addItem()"
|
|
>
|
|
{{ addLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
|
import { TrashIcon, ViewGridIcon } from '@heroicons/vue/outline'
|
|
import Draggable from 'vuedraggable'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
header: String,
|
|
addLabel: String,
|
|
modelValue: Object,
|
|
itemHeader: [Function, String],
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'addItem', 'removeItem'])
|
|
|
|
const items = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', value)
|
|
},
|
|
})
|
|
|
|
function addItem() {
|
|
emit('addItem')
|
|
}
|
|
|
|
function removeItem(index) {
|
|
emit('removeItem', index)
|
|
}
|
|
</script>
|