import { onBeforeMount, computed, defineComponent, reactive, ref, } from 'vue'; import { Schlechtenburg, Block, SbMode } from '../packages/core/lib'; /* import SbHeading from '../packages/heading/lib'; import SbParagraph from '../packages/paragraph/lib'; import SbImage from '../packages/image/lib'; */ import SbLayout from '../packages/layout/lib'; import './App.scss'; export default defineComponent({ name: 'App', setup() { const activeTab = ref('edit'); const block: Block = reactive({ name: 'none', blockId: '0', data: null, }); onBeforeMount(async () => { const res = await fetch('/initial-data.json'); const data = await res.json(); block.name = data.name; block.blockId = data.blockId; block.data = data.data; }); const Example = computed(() => { switch (activeTab.value) { case SbMode.Edit: return ) => { block.data = newBlock.data; }} customBlocks={[ SbLayout, /* SbHeading, SbImage, SbParagraph, */ ]} key="edit" mode="edit" />; case SbMode.Edit: return ; case 'data': return
{ JSON.stringify(block, null, 2) }
; } }); return () => { console.log('render App'); return
; }; }, });