68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import {
|
|
computed,
|
|
ref,
|
|
defineComponent,
|
|
} from 'vue';
|
|
import { useDynamicBlocks } from '../use-dynamic-blocks';
|
|
import { BlockDefinition } from '../types';
|
|
|
|
import { SbButton } from './Button';
|
|
import { SbModal } from './Modal';
|
|
|
|
import './BlockPicker.scss';
|
|
|
|
export const SbBlockPicker = defineComponent({
|
|
name: 'sb-block-picker',
|
|
|
|
props: {
|
|
onPickedBlock: { type: Function, default: () => {} },
|
|
},
|
|
|
|
setup(props) {
|
|
const open = ref(false);
|
|
const { customBlocks } = useDynamicBlocks();
|
|
|
|
const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
|
|
|
|
const selectBlock = (block: BlockDefinition<any>) => () => {
|
|
open.value = false;
|
|
props.onPickedBlock({
|
|
name: block.name,
|
|
id: `${+(new Date())}`,
|
|
data: block.getDefaultData(),
|
|
});
|
|
};
|
|
|
|
return () => (
|
|
<div class="sb-block-picker">
|
|
<SbButton
|
|
class="sb-block-picker__add-button"
|
|
{...{
|
|
type: 'button',
|
|
onClick: ($event: MouseEvent) => {
|
|
open.value = true;
|
|
$event.stopPropagation();
|
|
},
|
|
}}
|
|
>+</SbButton>
|
|
<SbModal
|
|
open={open.value}
|
|
onClose={() => {
|
|
open.value = false;
|
|
}}
|
|
{...{ onClick: ($event: MouseEvent) => $event.stopPropagation() }}
|
|
>
|
|
{...blockList.value.map((block: BlockDefinition<any>) => (
|
|
<SbButton
|
|
{...{
|
|
type: 'button',
|
|
onClick: () => selectBlock(block),
|
|
}}
|
|
>{block.name}</SbButton>
|
|
))}
|
|
</SbModal>
|
|
</div>
|
|
);
|
|
},
|
|
});
|