<script setup>
import { animations } from "@formkit/drag-and-drop";
import { getCurrentInstance, watch } from "vue";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const model = defineModel();
const props = defineProps({
  name: String
});
const doFind = (instance) => {
  if (instance.type.__name === "l-drag-drop-group") {
    return instance;
  }
  if (instance.parent) {
    return doFind(instance.parent);
  }
  return null;
};
const group = doFind(getCurrentInstance());
const allItems = group.exposed.findAllItems();
const group_name = group.exposed.getGroupName();
const group_model = group.exposed.getModelByName(props.name);
if (model.value == void 0) {
  model.value = group_model;
}
const filteredItem = allItems.filter((item) => {
  return model.value.includes(item.props.name);
});
const [parent, items] = useDragAndDrop(filteredItem, {
  plugins: [animations()],
  group: group_name,
  dragHandle: group.props.dragHandle
});
watch(items, () => {
  model.value = items.value.map((item) => {
    return item.props.name ?? /* @__PURE__ */ Symbol();
  });
  group.exposed.updateModel(props.name, model.value);
});
</script>

<template>
    <div ref="parent" style="min-height: 150px;">
        <template v-for="item in items" :key="item">
            <component :is="item" />
        </template>
    </div>
</template>
