62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import {
|
|
computed,
|
|
ref,
|
|
defineComponent,
|
|
} from 'vue';
|
|
import { useDynamicBlocks } from '../use-dynamic-blocks';
|
|
import { IBlockDefinition } from '../types';
|
|
import { generateBlockId } from '../block-helpers';
|
|
|
|
import { SbButton } from './Button';
|
|
import { SbContextMenu, IContextMenuSlotContext } from './ContextMenu';
|
|
|
|
import './BlockPicker.scss';
|
|
|
|
export const SbBlockPicker = defineComponent({
|
|
name: 'sb-block-picker',
|
|
|
|
props: {
|
|
eventPickedBlock: { 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<any>) => {
|
|
open.value = false;
|
|
props.eventPickedBlock({
|
|
name: block.name,
|
|
id: generateBlockId(),
|
|
data: block.getDefaultData(),
|
|
});
|
|
};
|
|
|
|
return () => (
|
|
<div class="sb-block-picker">
|
|
<SbContextMenu
|
|
class="sb-tree-block-select"
|
|
v-slots={{
|
|
context: (slotContext:IContextMenuSlotContext) => context.slots.context
|
|
? context.slots.context(slotContext)
|
|
: <SbButton {...{ onClick: slotContext.toggle }}>Insert a block</SbButton>,
|
|
default: ({ close }: { close: Function }) => blockList.value.map((block: IBlockDefinition<any>) => (
|
|
<SbButton
|
|
{...{
|
|
type: 'button',
|
|
onClick: () => {
|
|
selectBlock(block);
|
|
close();
|
|
},
|
|
}}
|
|
>{block.name}</SbButton>)),
|
|
}}
|
|
></SbContextMenu>
|
|
</div>
|
|
);
|
|
},
|
|
});
|