import { computed, ref, defineComponent, } from 'vue'; import { useDynamicBlocks } from '../use-dynamic-blocks'; import { BlockDefinition } from '../types'; import { SbButton } from './Button'; import { SbContextMenu } from './ContextMenu'; import './BlockPicker.scss'; export const SbBlockPicker = defineComponent({ name: 'sb-block-picker', props: { onPickedBlock: { type: Function, default: () => {} }, }, setup(props, context) { const { customBlocks } = useDynamicBlocks(); const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key])); const selectBlock = (block: BlockDefinition) => () => { open.value = false; props.onPickedBlock({ name: block.name, id: `${+(new Date())}`, data: block.getDefaultData(), }); }; return () => (
context.slots.context ? context.slots.context(slotContext) : Insert a block, default: ({ close }: { close: Function }) => blockList.value.map((block: BlockDefinition) => ( { selectBlock(block); close(); }, }} >{block.name})), }} >
); }, });