schlechtenburg/src/components/internal/Block.tsx

74 lines
1.7 KiB
TypeScript
Raw Normal View History

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