schlechtenburg/src/App.tsx

87 lines
2 KiB
TypeScript
Raw Normal View History

2020-12-30 20:17:34 +00:00
import {
onBeforeMount,
computed,
defineComponent,
reactive,
ref,
} from 'vue';
2020-05-20 14:21:08 +00:00
2020-12-30 13:34:23 +00:00
import { Schlechtenburg, Block, SbMode } from '../packages/core/lib';
2020-12-30 20:17:34 +00:00
/*
2020-12-30 13:34:23 +00:00
import SbHeading from '../packages/heading/lib';
2020-12-30 20:17:34 +00:00
import SbParagraph from '../packages/paragraph/lib';
2020-12-30 13:34:23 +00:00
import SbImage from '../packages/image/lib';
2020-12-30 20:17:34 +00:00
*/
import SbLayout from '../packages/layout/lib';
2020-05-27 15:32:35 +00:00
2020-05-20 14:21:08 +00:00
import './App.scss';
export default defineComponent({
name: 'App',
setup() {
2020-05-27 13:57:57 +00:00
const activeTab = ref('edit');
2020-12-30 20:17:34 +00:00
const block: Block<any> = 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;
});
2020-12-30 13:34:23 +00:00
2020-12-30 20:17:34 +00:00
const Example = computed(() => {
switch (activeTab.value) {
case SbMode.Edit:
return <Schlechtenburg
block={block}
eventUpdate={(newBlock: Block<any>) => {
block.data = newBlock.data;
}}
customBlocks={[
SbLayout,
/*
SbHeading,
SbImage,
SbParagraph,
*/
]}
key="edit"
mode="edit"
/>;
case SbMode.Edit:
return <Schlechtenburg
block={block}
key="display"
mode="display"
/>;
case 'data':
return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
}
});
2020-05-20 14:21:08 +00:00
2020-12-30 20:17:34 +00:00
return () => {
console.log('render App');
return <div id="app">
2020-05-27 13:57:57 +00:00
<select
value={activeTab.value}
2020-12-30 01:44:42 +00:00
onChange={($event: Event) => {
activeTab.value = ($event.target as HTMLSelectElement).value;
}}
2020-05-27 13:57:57 +00:00
>
<option>edit</option>
<option>display</option>
2020-12-30 01:32:46 +00:00
<option>data</option>
2020-05-27 13:57:57 +00:00
</select>
2020-12-30 20:17:34 +00:00
<Example.value />
</div>;
};
2020-05-20 14:21:08 +00:00
},
});