<script lang="ts" setup>
|
import { ScrollContainer } from '@jnpf/ui';
|
|
import draggable from 'vuedraggable';
|
|
import { ocrComponents } from '../helper/componentMap';
|
|
defineProps({
|
cloneComponent: { default: undefined, type: Function },
|
});
|
const emit = defineEmits(['onLeftEnd', 'addComponent']);
|
|
function onLeftEnd(e) {
|
emit('onLeftEnd', e);
|
}
|
function addComponent(e) {
|
emit('addComponent', e);
|
}
|
</script>
|
<template>
|
<ScrollContainer class="components-list p-[10px]">
|
<draggable
|
class="components-draggable"
|
v-model="ocrComponents"
|
item-key="__config__.jnpfKey"
|
filter=".disabled"
|
:sort="false"
|
draggable=".components-item"
|
:clone="cloneComponent"
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
@end="onLeftEnd">
|
<template #item="{ element }">
|
<div class="components-item" @click="addComponent(element)">
|
<div class="components-body">
|
<i :class="element.__config__.tagIcon"></i>
|
{{ element.__config__.label }}
|
</div>
|
</div>
|
</template>
|
</draggable>
|
</ScrollContainer>
|
</template>
|
