cip-components/cip-table-design/table-components/group.vue

<template>
  <div class="component-group" v-if="group.components.length>0">
    <div class="component-group__label">
      {{group.label}}
    </div>
    <vue-draggable :model-value="group.components"
                   item-key="type"
                   tag="ul"
                   :group="{name: 'components', pull: 'clone', put:false}"
                   :sort="false"
                   :clone="cloneComponent">
      <template #item="{element}">
        <form-component-item :item="element"></form-component-item>
      </template>
    </vue-draggable>
  </div>
</template>
<script>
import { inject } from 'vue'
import VueDraggable from 'vuedraggable'
import FormComponentItem from '../form-components/item'
import { getCopyRow } from '../util'

export default {
  components: { VueDraggable, FormComponentItem },
  props: {
    group: Object
  },
  setup (props) {
    const cloneMethod = inject('cloneMethod', getCopyRow)
    const cloneComponent = (component) => {
      return cloneMethod({ config: component })
    }
    return {
      cloneComponent
    }
  }
}
</script>
<style lang="less">
.component-group{
  &__label{
    font-size: 13px;
    color: rgb(102, 102, 102);
    padding: 8px 12px;
  }
  ul{
    margin:0;
    padding: 0 10px 10px;
    overflow: hidden;
    position: relative;
  }
}
</style>