schlechtenburg/src/App.tsx

88 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
2021-03-08 15:29:35 +00:00
import { SbMain, BlockData, SbMode } from '../packages/core/lib';
2020-12-30 13:34:23 +00:00
2021-02-22 18:13:37 +00:00
import SbLayout from '../packages/layout/lib';
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-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');
2021-03-08 15:29:35 +00:00
const block: BlockData<any> = reactive({
2020-12-30 20:17:34 +00:00
name: 'none',
2021-03-07 17:47:28 +00:00
id: '0',
2020-12-30 20:17:34 +00:00
data: null,
});
onBeforeMount(async () => {
const res = await fetch('/initial-data.json');
const data = await res.json();
block.name = data.name;
2021-03-07 17:47:28 +00:00
block.id = data.id;
2020-12-30 20:17:34 +00:00
block.data = data.data;
});
2020-12-30 13:34:23 +00:00
2021-03-08 15:29:35 +00:00
const displayedElement = computed(() => {
2020-12-30 20:17:34 +00:00
switch (activeTab.value) {
case SbMode.Edit:
2021-03-08 15:29:35 +00:00
return <SbMain
2020-12-30 20:17:34 +00:00
block={block}
2021-03-08 15:29:35 +00:00
onUpdate={(newBlock: BlockData<any>) => {
2020-12-30 20:17:34 +00:00
block.data = newBlock.data;
}}
customBlocks={[
SbLayout,
SbHeading,
SbImage,
SbParagraph,
]}
key="edit"
2021-02-22 23:12:06 +00:00
mode={SbMode.Edit}
2020-12-30 20:17:34 +00:00
/>;
2021-02-22 23:12:06 +00:00
case SbMode.Display:
2021-03-08 15:29:35 +00:00
return <SbMain
2020-12-30 20:17:34 +00:00
block={block}
2021-02-22 23:12:06 +00:00
customBlocks={[
SbLayout,
SbHeading,
SbImage,
SbParagraph,
]}
2020-12-30 20:17:34 +00:00
key="display"
2021-02-22 23:12:06 +00:00
mode={SbMode.Display}
2020-12-30 20:17:34 +00:00
/>;
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 () => {
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>
2021-03-08 15:29:35 +00:00
{displayedElement.value}
2020-12-30 20:17:34 +00:00
</div>;
};
2020-05-20 14:21:08 +00:00
},
});