import { computed, ref, defineComponent, } from 'vue'; import { useDynamicBlocks } from '../use-dynamic-blocks'; import { IBlockDefinition } from '../types'; import { SbButton } from './Button'; import { SbContextMenu, IContextMenuSlotContext } from './ContextMenu'; import './BlockPicker.scss'; export const SbBlockPicker = defineComponent({ name: 'sb-block-picker', props: { onPickedBlock: { type: Function, default: () => {} }, }, setup(props, context) { const open = ref(false); const { customBlocks } = useDynamicBlocks(); const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key])); const selectBlock = (block: IBlockDefinition) => { 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: IBlockDefinition) => ( { selectBlock(block); close(); }, }} >{block.name})), }} >
); }, });