schlechtenburg/packages/docs/lib/App.tsx

89 lines
2.1 KiB
TypeScript

import {
onBeforeMount,
computed,
defineComponent,
reactive,
ref,
} from 'vue';
import { SbMain, IBlockData, SbMode } from '@schlechtenburg/core';
import SbLayout from '@schlechtenburg/layout';
import SbHeading from '@schlechtenburg/heading';
import SbParagraph from '@schlechtenburg/paragraph';
import SbImage from '@schlechtenburg/image';
import './App.scss';
export default defineComponent({
name: 'App',
setup() {
const activeTab = ref('edit');
const block: IBlockData<any> = reactive({
name: 'none',
id: '0',
data: null,
});
onBeforeMount(async () => {
const res = await fetch('./initial-data.json');
const data = await res.json();
block.name = data.name;
block.id = data.id;
block.data = data.data;
});
const displayedElement = computed(() => {
switch (activeTab.value) {
case SbMode.Edit:
return <SbMain
block={block}
onUpdate={(newBlock: IBlockData<any>) => {
block.data = newBlock.data;
}}
availableBlocks={[
SbLayout,
SbHeading,
SbImage,
SbParagraph,
]}
key="edit"
mode={SbMode.Edit}
/>;
case SbMode.Display:
return <SbMain
block={block}
availableBlocks={[
SbLayout,
SbHeading,
SbImage,
SbParagraph,
]}
key="display"
mode={SbMode.Display}
/>;
case 'data':
return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
}
});
return () => {
return <div class="app">
<select
class="app--mode"
value={activeTab.value}
onChange={($event: Event) => {
activeTab.value = ($event.target as HTMLSelectElement).value;
}}
>
<option>edit</option>
<option>display</option>
<option>data</option>
</select>
{displayedElement.value}
</div>;
};
},
});