2020-05-24 15:33:25 +00:00
|
|
|
import {
|
|
|
|
computed,
|
|
|
|
defineComponent,
|
|
|
|
PropType,
|
|
|
|
} from '@vue/composition-api';
|
|
|
|
import {
|
|
|
|
BlockData,
|
|
|
|
useDynamicBlocks,
|
|
|
|
useActivation,
|
|
|
|
} 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-27 13:57:57 +00:00
|
|
|
eventUpdate: {
|
|
|
|
type: (Function as unknown) as (b?: BlockData) => void,
|
|
|
|
default: () => () => undefined,
|
|
|
|
},
|
|
|
|
eventInsertBlock: {
|
|
|
|
type: (Function as unknown) as (b?: BlockData) => void,
|
|
|
|
default: () => () => undefined,
|
|
|
|
},
|
|
|
|
eventAppendBlock: {
|
|
|
|
type: (Function as unknown) as (b?: BlockData) => void,
|
|
|
|
default: () => () => undefined,
|
|
|
|
},
|
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}) => {
|
2020-05-27 13:57:57 +00:00
|
|
|
props.eventUpdate({
|
2020-05-24 15:33:25 +00:00
|
|
|
...props.block,
|
|
|
|
data: {
|
|
|
|
...props.block.data,
|
|
|
|
...updated,
|
|
|
|
},
|
|
|
|
});
|
2020-05-20 14:21:08 +00:00
|
|
|
};
|
|
|
|
|
2020-05-27 13:57:57 +00:00
|
|
|
const Block = getBlock(props.block.name) as any;
|
2020-05-20 14:21:08 +00:00
|
|
|
|
2020-05-27 13:57:57 +00:00
|
|
|
return () => <div class={classes.value}>
|
|
|
|
<div class="sb-block__edit-cover"></div>
|
|
|
|
<div class="sb-block__mover"></div>
|
|
|
|
<Block
|
|
|
|
data={props.block.data}
|
|
|
|
block-id={props.block.blockId}
|
|
|
|
eventUpdate={onChildUpdate}
|
|
|
|
eventInsertBlock={props.eventInsertBlock}
|
|
|
|
eventAppendBlock={props.eventAppendBlock}
|
|
|
|
{...{
|
|
|
|
attrs: context.attrs,
|
|
|
|
on: {
|
|
|
|
...context.listeners,
|
|
|
|
update: onChildUpdate,
|
2020-05-24 20:39:14 +00:00
|
|
|
},
|
2020-05-27 13:57:57 +00:00
|
|
|
nativeOn: {
|
|
|
|
click: ($event: MouseEvent) => {
|
|
|
|
$event.stopPropagation();
|
|
|
|
activate();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>;
|
2020-05-20 14:21:08 +00:00
|
|
|
},
|
|
|
|
});
|