2020-05-20 14:21:08 +00:00
|
|
|
import {
|
|
|
|
defineComponent,
|
2020-05-24 15:33:25 +00:00
|
|
|
provide,
|
2020-05-20 14:21:08 +00:00
|
|
|
computed,
|
|
|
|
reactive,
|
2020-05-24 15:33:25 +00:00
|
|
|
ref,
|
|
|
|
PropType,
|
2020-05-20 14:21:08 +00:00
|
|
|
} from '@vue/composition-api';
|
2020-05-24 15:33:25 +00:00
|
|
|
import {
|
|
|
|
model,
|
|
|
|
ActiveBlock,
|
|
|
|
BlockProps,
|
|
|
|
BlockDefinition,
|
|
|
|
BlockLibraryDefinition,
|
|
|
|
BlockLibrary,
|
|
|
|
} from '@components/TreeElement';
|
|
|
|
|
|
|
|
import SbBlock from '@internal/Block';
|
2020-05-20 14:21:08 +00:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'schlechtenburg-main',
|
|
|
|
|
|
|
|
model,
|
|
|
|
|
|
|
|
props: {
|
2020-05-24 15:33:25 +00:00
|
|
|
customBlocks: { type: (null as unknown) as PropType<BlockDefinition[]>, default: () => [] },
|
2020-05-20 17:12:51 +00:00
|
|
|
block: { type: Object, required: true },
|
2020-05-20 14:21:08 +00:00
|
|
|
},
|
|
|
|
|
2020-05-24 15:33:25 +00:00
|
|
|
setup(props: BlockProps) {
|
|
|
|
const activeBlock = ref(null);
|
|
|
|
provide(ActiveBlock, activeBlock);
|
2020-05-20 14:21:08 +00:00
|
|
|
|
2020-05-24 15:33:25 +00:00
|
|
|
const blockLibrary: BlockLibraryDefinition = reactive({
|
|
|
|
'sb-layout': {
|
|
|
|
name: 'sb-layout',
|
|
|
|
edit: () => import('@user/Layout'),
|
|
|
|
display: () => import('@user/Layout'),
|
|
|
|
},
|
|
|
|
'sb-image': {
|
|
|
|
name: 'sb-image',
|
|
|
|
edit: () => import('@user/Image'),
|
|
|
|
display: () => import('@user/Image'),
|
|
|
|
},
|
|
|
|
'sb-paragraph': {
|
|
|
|
name: 'sb-paragraph',
|
|
|
|
edit: () => import('@user/Paragraph'),
|
|
|
|
display: () => import('@user/Paragraph'),
|
|
|
|
},
|
|
|
|
'sb-heading': {
|
|
|
|
name: 'sb-heading',
|
|
|
|
edit: () => import('@user/Heading'),
|
|
|
|
display: () => import('@user/Heading'),
|
|
|
|
},
|
|
|
|
...props.customBlocks.reduce(
|
|
|
|
(
|
|
|
|
blocks: BlockLibraryDefinition,
|
|
|
|
block: BlockLibraryDefinition,
|
|
|
|
) => ({ ...blocks, [block.name]: block }),
|
|
|
|
{},
|
|
|
|
),
|
|
|
|
});
|
|
|
|
provide(BlockLibrary, blockLibrary);
|
2020-05-20 14:21:08 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
2020-05-24 15:33:25 +00:00
|
|
|
console.log('render base');
|
2020-05-20 14:21:08 +00:00
|
|
|
return (
|
2020-05-24 15:33:25 +00:00
|
|
|
<SbBlock
|
2020-05-20 14:21:08 +00:00
|
|
|
class="sb-main"
|
2020-05-24 15:33:25 +00:00
|
|
|
block={this.block}
|
2020-05-20 14:21:08 +00:00
|
|
|
{...{
|
|
|
|
on: {
|
2020-05-24 15:33:25 +00:00
|
|
|
update: (block: BlockDefinition) => this.$emit('update', block),
|
2020-05-20 14:21:08 +00:00
|
|
|
},
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|