schlechtenburg/src/components/internal/Block.tsx

89 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-05-24 15:33:25 +00:00
import {
computed,
defineComponent,
PropType,
} from '@vue/composition-api';
import {
2020-05-27 15:06:14 +00:00
Block,
2020-05-24 15:33:25 +00:00
useDynamicBlocks,
useActivation,
2020-05-27 15:32:35 +00:00
SbMode,
2020-05-24 15:33:25 +00:00
} from '@components/TreeElement';
2020-05-20 14:21:08 +00:00
import './Block.scss';
2020-05-27 15:06:14 +00:00
interface BlockProps {
block: Block;
eventUpdate: (b?: Block) => void;
eventInsertBlock: (b?: Block) => void;
eventAppendBlock: (b?: Block) => void;
2020-05-27 18:36:46 +00:00
eventRemoveBlock: () => void;
2020-05-27 15:06:14 +00:00
}
2020-05-20 14:21:08 +00:00
export default defineComponent({
name: 'sb-block',
props: {
2020-05-27 15:06:14 +00:00
block: {
type: (null as unknown) as PropType<Block>,
required: true,
2020-05-27 13:57:57 +00:00
},
2020-05-27 15:06:14 +00:00
eventUpdate: { type: Function, default: () => {} },
eventInsertBlock: { type: Function, default: () => {} },
eventAppendBlock: { type: Function, default: () => {} },
2020-05-27 18:36:46 +00:00
eventRemoveBlock: { type: Function, default: () => {} },
2020-05-20 14:21:08 +00:00
},
2020-05-27 15:06:14 +00:00
setup(props: BlockProps, context) {
2020-05-25 21:10:21 +00:00
const { isActive, activate } = useActivation(props.block.blockId);
2020-05-27 15:32:35 +00:00
const { mode, 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 15:06:14 +00:00
const BlockComponent = getBlock(props.block.name) as any;
2020-05-27 15:32:35 +00:00
if (mode.value === SbMode.Display) {
return () => (
<BlockComponent
data={props.block.data}
block-id={props.block.blockId}
/>
);
}
2020-05-27 15:06:14 +00:00
return () => (<div class={classes.value}>
2020-05-27 13:57:57 +00:00
<div class="sb-block__edit-cover"></div>
<div class="sb-block__mover"></div>
2020-05-27 15:06:14 +00:00
<BlockComponent
2020-05-27 13:57:57 +00:00
data={props.block.data}
block-id={props.block.blockId}
eventUpdate={onChildUpdate}
eventInsertBlock={props.eventInsertBlock}
eventAppendBlock={props.eventAppendBlock}
2020-05-27 18:36:46 +00:00
eventRemoveBlock={props.eventRemoveBlock}
2020-05-27 13:57:57 +00:00
{...{
attrs: context.attrs,
2020-05-27 18:36:46 +00:00
nativeOn: {
click: ($event: MouseEvent) => {
$event.stopPropagation();
activate();
},
...context.listeners,
},
2020-05-27 13:57:57 +00:00
}}
/>
2020-05-27 15:06:14 +00:00
</div>);
2020-05-20 14:21:08 +00:00
},
});