import { computed, defineComponent, PropType, } from '@vue/composition-api'; import { BlockData, useDynamicBlocks, useActivation, BlockDefinition, } from '@components/TreeElement'; import './Block.scss'; export default defineComponent({ name: 'sb-block', props: { block: { type: (null as unknown) as PropType, default: false }, }, setup(props, context) { const { isActive, activate, requestActivation } = useActivation(props.block.blockId); const { getBlock } = useDynamicBlocks(); const classes = computed(() => ({ 'sb-block': true, 'sb-block_active': isActive.value, })); const onChildUpdate = (updated: {[key: string]: any}) => { console.log('child update', updated); context.emit('update', { ...props.block, data: { ...props.block.data, ...updated, }, }); }; return { getBlock, classes, onChildUpdate, activate, }; }, render() { console.log('render block', this.block); const Block = this.getBlock(this.block.name).edit; return this.$emit('insert-block', block), 'append-block': (block: BlockDefinition) => this.$emit('append-block', block), }, nativeOn: { click: ($event) => { $event.stopPropagation(); this.activate(); }, }, }} />; }, });