schlechtenburg/src/components/internal/Block.tsx

64 lines
1.5 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-25 21:10:21 +00:00
block: { type: (null as unknown) as PropType<BlockData>, required: true },
2020-05-20 14:21:08 +00:00
},
setup(props, context) {
2020-05-25 21:10:21 +00:00
const { isActive, activate } = 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}) => {
context.emit('update', {
...props.block,
data: {
...props.block.data,
...updated,
},
});
2020-05-20 14:21:08 +00:00
};
2020-05-25 21:10:21 +00:00
const Block = getBlock(props.block.name).edit as any;
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
return () => <Block
class={classes.value}
data={props.block.data}
block-id={props.block.blockId}
2020-05-24 15:33:25 +00:00
{...{
2020-05-25 21:10:21 +00:00
attrs: context.attrs,
2020-05-24 15:33:25 +00:00
on: {
2020-05-25 21:10:21 +00:00
...context.listeners,
update: onChildUpdate,
'insert-block': (block: BlockDefinition) => context.emit('insert-block', block),
'append-block': (block: BlockDefinition) => context.emit('append-block', block),
2020-05-24 15:33:25 +00:00
},
2020-05-24 20:39:14 +00:00
nativeOn: {
2020-05-25 21:10:21 +00:00
click: ($event: MouseEvent) => {
2020-05-24 20:39:14 +00:00
$event.stopPropagation();
2020-05-25 21:10:21 +00:00
activate();
2020-05-24 20:39:14 +00:00
},
},
2020-05-24 15:33:25 +00:00
}}
/>;
2020-05-20 14:21:08 +00:00
},
});