50 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
},
|
|
});
|