import { defineComponent, computed, watch, PropType, ref, Ref, } from 'vue'; import { Block, useDynamicBlocks, useActivation, SbMode, BlockDimensions, useResizeObserver, } from '/@components/TreeElement'; import SbBlockOrdering from './BlockOrdering'; import './Block.scss'; interface BlockProps { block: Block; eventUpdate: (b?: Block) => void; eventInsertBlock: (b?: Block) => void; eventAppendBlock: (b?: Block) => void; eventRemoveBlock: () => void; eventMoveUp: () => void; eventMoveDown: () => void; sortable: string; } export default defineComponent({ name: 'sb-block', props: { block: { type: (null as unknown) as PropType, required: true, }, sortable: { type: String, default: null, }, eventUpdate: { type: Function, default: () => {} }, eventInsertBlock: { type: Function, default: () => {} }, eventAppendBlock: { type: Function, default: () => {} }, eventRemoveBlock: { type: Function, default: () => {} }, eventMoveUp: { type: Function, default: () => {} }, eventMoveDown: { type: Function, default: () => {} }, }, setup(props: BlockProps, context) { const el: Ref = ref(null); const { mode, getBlock } = useDynamicBlocks(); const { isActive, activate } = useActivation(props.block.blockId); const classes = computed(() => ({ 'sb-block': true, 'sb-block_active': isActive.value, })); const BlockComponent = getBlock(props.block.name) as any; if (mode.value === SbMode.Display) { return () => ( ); } const { triggerSizeCalculation } = useResizeObserver(el, BlockDimensions); watch(() => props.block.data, triggerSizeCalculation); const onChildUpdate = (updated: {[key: string]: any}) => { props.eventUpdate({ ...props.block, data: { ...props.block.data, ...updated, }, }); }; return () =>
{props.sortable ? : null} { $event.stopPropagation(); activate(); }, ...context.listeners, }, }} />
; }, });