39 lines
935 B
TypeScript
39 lines
935 B
TypeScript
import { computed, defineComponent } from '@vue/composition-api';
|
|
import {
|
|
useDynamicBlocks,
|
|
BlockDefinition,
|
|
} from '../TreeElement';
|
|
|
|
import './BlockPicker.scss';
|
|
|
|
export default defineComponent({
|
|
name: 'sb-block-picker',
|
|
|
|
props: {},
|
|
|
|
setup(props, context) {
|
|
const { customBlocks } = useDynamicBlocks();
|
|
|
|
const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
|
|
|
|
return () => (
|
|
<div class="sb-block-picker">
|
|
{...blockList.value.map((block: BlockDefinition) => (
|
|
<button
|
|
type="button"
|
|
{...{
|
|
on: {
|
|
click: () => context.emit('picked-block', {
|
|
name: block.name,
|
|
blockId: `${+(new Date())}`,
|
|
data: block.getDefaultData(),
|
|
}),
|
|
},
|
|
}}
|
|
>{block.name}</button>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
});
|