<template>
  <div>
    <VueDraggableNext class="dragArea" tag="ul" :list="components" :group="{ name: 'g1' }" handle=".handle">
      <BaseComponent
          v-for="(component, index) in components"
          :key="index"
          :component="component"
          :availableComponents="availableComponents"
          @deleteComponent="deleteComponent"
      />
    </VueDraggableNext>
  </div>
</template>

<script setup>
import {VueDraggableNext} from "vue-draggable-next";
import BaseComponent from "./BaseComponent.vue";

const props = defineProps({
  availableComponents: {
    type: Array,
    default: () => []
  },
  components: {
    type: Array,
    default: () => []
  },
});

const deleteComponent = (element) => {
  const index = props.components.indexOf(element);

  props.components.splice(index, 1);
}
</script>