schlechtenburg/packages/core/lib/components/BlockPlaceholder.tsx

33 lines
774 B
TypeScript
Raw Normal View History

2020-12-27 21:32:43 +00:00
import { defineComponent } from 'vue';
import { IBlockData } from '../types';
2020-12-30 13:34:23 +00:00
2020-12-30 20:17:34 +00:00
import { SbBlockPicker } from './BlockPicker';
2020-05-20 14:21:08 +00:00
import './BlockPlaceholder.scss';
2022-03-13 22:12:18 +00:00
/**
* A placeholder for a block.
* Displays a placeholder for a block, allowing the user to select a block to insert.
* @sbui
*/
2020-12-30 20:17:34 +00:00
export const SbBlockPlaceholder = defineComponent({
2020-05-20 14:21:08 +00:00
name: 'sb-block-placeholder',
2021-03-08 15:29:35 +00:00
props: {
2022-03-13 22:12:18 +00:00
/**
* Called when the user picked a block that should be inserted here.
*/
2022-09-05 19:12:20 +00:00
eventInsertBlock: { type: Function, default: () => {} },
2021-03-08 15:29:35 +00:00
},
setup(props) {
2020-05-25 21:10:21 +00:00
return () => (
2020-05-20 14:21:08 +00:00
<div class="sb-block-placeholder">
2020-12-30 13:34:23 +00:00
<SbBlockPicker
2022-09-05 19:12:20 +00:00
eventPickedBlock={(block: IBlockData<any>) => props.eventInsertBlock(block)}
2020-05-24 20:00:14 +00:00
/>
2020-05-20 14:21:08 +00:00
</div>
);
},
});