schlechtenburg/packages/core/lib/components/Schlechtenburg.tsx

88 lines
2 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-12-27 21:32:43 +00:00
shallowReactive,
2020-05-24 15:33:25 +00:00
ref,
2020-12-30 20:17:34 +00:00
watch,
2020-05-24 15:33:25 +00:00
PropType,
2020-05-28 20:16:35 +00:00
Ref,
2020-12-27 21:32:43 +00:00
} from 'vue';
2020-05-24 15:33:25 +00:00
import {
model,
2020-05-27 15:06:14 +00:00
Block,
2020-05-24 15:33:25 +00:00
BlockDefinition,
BlockLibraryDefinition,
2020-12-30 13:34:23 +00:00
} from '../blocks';
import { Mode, SbMode } from '../mode';
import { BlockLibrary } from '../use-dynamic-blocks';
import { EditorDimensions, useResizeObserver } from '../use-resize-observer';
import { ActiveBlock } from '../use-activation';
2020-05-24 15:33:25 +00:00
2021-02-22 18:13:37 +00:00
import { SbMainMenu } from './MainMenu';
2020-12-30 20:17:34 +00:00
import { SbBlock } from './Block';
2020-05-24 20:00:14 +00:00
2020-05-27 13:57:57 +00:00
import './Schlechtenburg.scss';
2020-05-25 21:10:21 +00:00
export interface SchlechtenburgProps {
customBlocks: BlockDefinition[];
2021-02-22 18:13:37 +00:00
onUpdate: (b: Block<any>) => void;
2020-12-30 01:32:46 +00:00
block: Block<any>;
2020-05-27 13:57:57 +00:00
mode: SbMode;
2020-05-25 21:10:21 +00:00
}
2020-12-30 13:34:23 +00:00
export const Schlechtenburg = defineComponent({
2020-05-20 14:21:08 +00:00
name: 'schlechtenburg-main',
model,
props: {
2020-05-27 13:57:57 +00:00
customBlocks: { type: Array as PropType<BlockDefinition[]>, default: () => [] },
2020-12-30 01:32:46 +00:00
block: { type: Object as PropType<Block<any>>, required: true },
2021-02-22 18:13:37 +00:00
onUpdate: { type: Function, default: () => {} },
2020-05-27 13:57:57 +00:00
mode: {
2020-12-30 01:32:46 +00:00
type: String as PropType<SbMode>,
validator(value: any) {
2020-12-27 21:32:43 +00:00
return Object.values(SbMode).includes(value);
2020-05-27 13:57:57 +00:00
},
2020-12-27 21:32:43 +00:00
default: SbMode.Edit,
2020-05-27 13:57:57 +00:00
},
2020-05-20 14:21:08 +00:00
},
2020-12-30 01:44:42 +00:00
setup(props: SchlechtenburgProps) {
2020-05-28 20:16:35 +00:00
const el: Ref<null|HTMLElement> = ref(null);
useResizeObserver(el, EditorDimensions);
2020-05-27 13:57:57 +00:00
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-12-27 21:32:43 +00:00
const blockLibrary: BlockLibraryDefinition = shallowReactive({
2020-05-24 15:33:25 +00:00
...props.customBlocks.reduce(
2020-12-30 01:32:46 +00:00
(blocks: {[name: string]: Block<any>}, block: Block<any>) => ({ ...blocks, [block.name]: block }),
2020-05-24 15:33:25 +00:00
{},
),
});
2020-12-27 21:32:43 +00:00
2020-05-24 15:33:25 +00:00
provide(BlockLibrary, blockLibrary);
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
return () => (
2020-05-28 20:16:35 +00:00
<div
class="sb-main"
ref={el}
>
2021-02-22 23:12:06 +00:00
{
mode.value === SbMode.Edit
? <SbMainMenu block={props.block} />
: null
}
2020-05-27 13:57:57 +00:00
<SbBlock
block={props.block}
2021-02-22 18:13:37 +00:00
onUpdate={props.onUpdate}
2020-05-27 13:57:57 +00:00
/>
</div>
2020-05-20 14:21:08 +00:00
);
},
});