schlechtenburg/src/components/Schlechtenburg.tsx

88 lines
1.9 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
defineComponent,
2020-05-24 15:33:25 +00:00
provide,
2020-05-20 14:21:08 +00:00
reactive,
2020-05-24 15:33:25 +00:00
ref,
PropType,
2020-05-20 14:21:08 +00:00
} from '@vue/composition-api';
2020-05-24 15:33:25 +00:00
import {
model,
ActiveBlock,
2020-05-25 21:10:21 +00:00
BlockData,
2020-05-27 13:57:57 +00:00
SbMode,
Mode,
2020-05-24 15:33:25 +00:00
BlockDefinition,
BlockLibraryDefinition,
BlockLibrary,
} from '@components/TreeElement';
import SbBlock from '@internal/Block';
2020-05-20 14:21:08 +00:00
2020-05-24 20:00:14 +00:00
import SbLayout from '@user/Layout/index';
import SbParagraph from '@user/Paragraph/index';
import SbImage from '@user/Image/index';
import SbHeading from '@user/Heading/index';
2020-05-27 13:57:57 +00:00
import './Schlechtenburg.scss';
2020-05-25 21:10:21 +00:00
export interface SchlechtenburgProps {
customBlocks: BlockDefinition[];
2020-05-27 13:57:57 +00:00
eventUpdate: (b?: BlockData) => void;
2020-05-25 21:10:21 +00:00
block: BlockData;
2020-05-27 13:57:57 +00:00
mode: SbMode;
2020-05-25 21:10:21 +00:00
}
2020-05-20 14:21:08 +00:00
export default defineComponent({
name: 'schlechtenburg-main',
model,
props: {
2020-05-27 13:57:57 +00:00
customBlocks: { type: Array as PropType<BlockDefinition[]>, default: () => [] },
block: { type: Object as PropType<BlockData>, required: true },
eventUpdate: {
type: (Function as unknown) as (b?: BlockData) => void,
default: () => () => undefined,
},
mode: {
type: String,
validator(value: string) {
return ['edit', 'display'].includes(value);
},
default: 'edit',
},
2020-05-20 14:21:08 +00:00
},
2020-05-27 13:57:57 +00:00
setup(props: SchlechtenburgProps, context) {
const mode = ref(props.mode);
provide(Mode, mode);
2020-05-24 15:33:25 +00:00
const activeBlock = ref(null);
provide(ActiveBlock, activeBlock);
2020-05-20 14:21:08 +00:00
2020-05-24 15:33:25 +00:00
const blockLibrary: BlockLibraryDefinition = reactive({
2020-05-24 20:00:14 +00:00
'sb-layout': SbLayout,
'sb-image': SbImage,
'sb-paragraph': SbParagraph,
'sb-heading': SbHeading,
2020-05-24 15:33:25 +00:00
...props.customBlocks.reduce(
(
2020-05-25 21:10:21 +00:00
blocks,
block,
2020-05-24 15:33:25 +00:00
) => ({ ...blocks, [block.name]: block }),
{},
),
});
provide(BlockLibrary, blockLibrary);
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
return () => (
2020-05-27 13:57:57 +00:00
<div class="sb-main">
<SbBlock
block={props.block}
eventUpdate={props.eventUpdate}
/>
</div>
2020-05-20 14:21:08 +00:00
);
},
});