import { computed, mergeProps, toHandlers, watch, cloneVNode, createVNode, Fragment } from "vue";
import "./styles/draggable-sortable.scss";
import { makeDraggableSortableProps, useDraggableSortable } from "../../composables/draggable-sortable/index.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { isComponentInstance } from "../../utils/dist/index.mjs";
const DraggableSortable = defineComponent({
  name: "VeDraggableSortable",
  inheritAttrs: false,
  props: {
    ...makeDraggableSortableProps()
  },
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots
  }) {
    const {
      model,
      modelEls,
      active,
      pointerEvents,
      keyToIndex,
      indexToKey,
      ghostVNode,
      genGhost
    } = useDraggableSortable(props);
    const vnodes = computed(() => {
      return model.value.map((value, index) => {
        var _a;
        const key = indexToKey(index);
        const draggable = mergeProps(toHandlers(pointerEvents.value), {
          style: {
            cursor: "move"
          }
        });
        const droppable = {
          ref: (v) => {
            modelEls.set(key, isComponentInstance(v) ? v.$el : v);
          }
        };
        const vnode = (_a = slots.item) == null ? void 0 : _a.call(slots, {
          item: value,
          draggable,
          droppable,
          props: mergeProps(draggable, droppable)
        });
        if (vnode && vnode[0]) {
          if (!vnode[0].key)
            vnode[0].key = key;
          vnode[0].props = mergeProps(vnode[0].props || {}, {
            class: {
              "ve-draggable-sortable--active": key === active.value
            }
          });
        }
        return vnode;
      });
    });
    watch(active, (val) => {
      var _a;
      const vnode = (_a = vnodes.value[keyToIndex(val)]) == null ? void 0 : _a[0];
      if (vnode) {
        ghostVNode.value = cloneVNode(vnode);
      } else {
        ghostVNode.value = void 0;
      }
    });
    return () => {
      return createVNode(Fragment, null, [vnodes.value, ghostVNode.value && genGhost()]);
    };
  }
});
export {
  DraggableSortable
};
//# sourceMappingURL=draggable-sortable.mjs.map
