import { onBeforeMount, computed, defineComponent, reactive, ref, } from 'vue'; import { SbMain, IBlockData, SbMode } from '@schlechtenburg/core'; import SbLayout from '@schlechtenburg/layout'; import SbHeading from '@schlechtenburg/heading'; import SbParagraph from '@schlechtenburg/paragraph'; import SbImage from '@schlechtenburg/image'; import './App.scss'; export default defineComponent({ name: 'App', setup() { const activeTab = ref('edit'); const block: IBlockData = reactive({ name: 'none', id: '0', data: null, }); onBeforeMount(async () => { const res = await fetch('./initial-data.json'); const data = await res.json(); block.name = data.name; block.id = data.id; block.data = data.data; }); const displayedElement = computed(() => { switch (activeTab.value) { case SbMode.Edit: return ) => { block.data = newBlock.data; }} availableBlocks={[ SbLayout, SbHeading, SbImage, SbParagraph, ]} key="edit" mode={SbMode.Edit} />; case SbMode.Display: return ; case 'data': return
{ JSON.stringify(block, null, 2) }
; } }); return () => { return
{displayedElement.value}
; }; }, });