<template>
  <div class="widget-cate">{{ title }}</div>
  <!-- group 两组名要相同， pull: 'clone' 以克隆的方式拖出，这个组的数据不会有问题，  put: false 禁止拖入-->
  <Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false" :list="list">
    <template #item="{ element }">
      <li class="form-edit-widget-label" :class="{ 'no-put': element.tpye === 'divider' }">
        <a>
          <SvgIcon :iconClass="element.type" />
          <span>{{ element.label }}</span>
        </a>
      </li>
    </template>
  </Draggable>
</template>

<script lang="ts" setup>
import Draggable from 'vuedraggable'
import SvgIcon from './SvgIcon.vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  list: {
    required: true
  }
})
</script>
