schlechtenburg/packages/core/lib/App.tsx
2020-12-27 22:32:43 +01:00

50 lines
1.3 KiB
TypeScript

import { defineComponent, reactive, ref } from 'vue';
import Schlechtenburg from '/@components/Schlechtenburg';
import { Block, SbMode } from '/@components/TreeElement';
import initialData from './initial-data.json';
import './App.scss';
export default defineComponent({
name: 'App',
setup() {
const activeTab = ref('edit');
const block = reactive(initialData) as Block;
return () => (
<div id="app">
<select
value={activeTab.value}
onchange={($event: Event) => { activeTab.value = ($event.target as HTMLSelectElement).value; }}
>
<option>edit</option>
<option>display</option>
<option>json</option>
</select>
<Schlechtenburg
v-show={activeTab.value === 'edit'}
block={block}
eventUpdate={(newBlock: Block) => {
block.name = newBlock.name;
block.blockId = newBlock.blockId;
block.data = newBlock.data;
}}
/>
<Schlechtenburg
v-show={activeTab.value === 'display'}
block={block}
mode={SbMode.Display}
/>
<pre v-show={activeTab.value === 'json'}>
<code>{JSON.stringify(block, null, 2)}</code>
</pre>
</div>
);
},
});