<script setup>
import { animations } from "@formkit/drag-and-drop";
import { useSlots, watch } from "vue";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const slots = useSlots();
const model = defineModel();
const props = defineProps({
  group: { type: [String, Symbol], required: false },
  dragHandle: { type: String, required: false }
});
const [parent, items] = useDragAndDrop(slots.default(), {
  plugins: [animations()],
  group: props.group,
  dragHandle: props.dragHandle
});
if (model.value === null) {
  model.value = items.value.map((item) => {
    return item.props.name;
  });
} else {
  items.value = model.value.map((name) => {
    return items.value.find((item) => item.props.name === name);
  });
}
watch(items, () => {
  model.value = items.value.map((item) => {
    return item.props.name ?? /* @__PURE__ */ Symbol();
  });
});
</script>

<template>
    <div ref="parent">
        <template v-for="item in items" :key="item">
            <component :is="item" />
        </template>

    </div>
</template>
