schlechtenburg/packages/core/lib/App.tsx

53 lines
1.4 KiB
TypeScript

import { defineComponent, reactive, ref } from 'vue';
import Schlechtenburg from '/@components/Schlechtenburg';
import { Block } from '/@/blocks';
import { SbMode } from '/@/mode';
import initialData from './initial-data';
import './App.scss';
export default defineComponent({
name: 'App',
setup() {
const activeTab = ref('edit');
const block: Block<any> = reactive(initialData);
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>data</option>
</select>
{(() => {
switch (activeTab.value) {
case SbMode.Edit:
return <Schlechtenburg
block={block}
eventUpdate={(newBlock: Block<any>) => {
block.data = newBlock.data;
}}
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>;
}
})()}
</div>
);
},
});