schlechtenburg/packages/docs/lib/App.tsx

89 lines
2.1 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
import { SbMain, IBlockData, SbMode } from '@schlechtenburg/core';
2020-12-30 13:34:23 +00:00
2021-03-22 19:58:25 +00:00
import SbLayout from '@schlechtenburg/layout';
import SbHeading from '@schlechtenburg/heading';
import SbParagraph from '@schlechtenburg/paragraph';
import SbImage from '@schlechtenburg/image';
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');
const block: IBlockData<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 () => {
2021-03-08 15:32:00 +00:00
const res = await fetch('./initial-data.json');
2020-12-30 20:17:34 +00:00
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}
onUpdate={(newBlock: IBlockData<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 () => {
2022-03-11 18:14:50 +00:00
return <div class="app" id="app">
2020-05-27 13:57:57 +00:00
<select
2022-03-11 18:14:50 +00:00
class="app--mode"
2020-05-27 13:57:57 +00:00
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
},
});