42 lines
818 B
TypeScript
42 lines
818 B
TypeScript
import {
|
|
defineComponent,
|
|
inject,
|
|
reactive,
|
|
ref,
|
|
} from 'vue';
|
|
import { SymBlockLibrary } from '../use-dynamic-blocks';
|
|
|
|
import './Block.scss';
|
|
|
|
export const SbBlock = defineComponent({
|
|
name: 'sb-block',
|
|
|
|
props: {
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
setup(props, context) {
|
|
const el = ref(null);
|
|
const customBlocks = inject(SymBlockLibrary, reactive({}));
|
|
const getBlock = (name) => customBlocks[name];
|
|
|
|
return () => {
|
|
const BlockComponent = getBlock(props.block.name)?.component || <span>Missing block {name}</span>;
|
|
|
|
return <div
|
|
ref={el}
|
|
class="sb-block"
|
|
>
|
|
<BlockComponent
|
|
data={props.block.data}
|
|
blockId={props.block.id}
|
|
{...context.attrs}
|
|
/>
|
|
</div>;
|
|
};
|
|
},
|
|
});
|