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

65 lines
1.8 KiB
TypeScript
Raw Normal View History

2022-03-17 17:59:51 +00:00
import debounce from 'lodash/debounce';
2020-05-28 20:16:35 +00:00
import {
watch,
reactive,
computed,
2020-12-30 01:32:46 +00:00
defineComponent,
2020-12-27 21:32:43 +00:00
} from 'vue';
2020-12-30 13:34:23 +00:00
import { useBlockSizing } from '../use-resize-observer';
2020-05-28 20:16:35 +00:00
2020-12-30 20:17:34 +00:00
import { SbButton } from './Button';
2020-05-28 20:16:35 +00:00
import './BlockOrdering.scss';
2020-12-30 13:34:23 +00:00
export const SbBlockOrdering = defineComponent({
2020-05-28 20:16:35 +00:00
name: 'sb-block-ordering',
props: {
2021-03-08 15:29:35 +00:00
orientation: {
2020-05-28 20:16:35 +00:00
type: String,
default: null,
},
2022-09-05 19:12:20 +00:00
eventRemove: { type: Function, default: () => {} },
eventMoveBackward: { type: Function, default: () => {} },
eventMoveForward: { type: Function, default: () => {} },
2020-05-28 20:16:35 +00:00
},
setup(props) {
const styles = reactive({
top: '',
right: '',
});
const classes = computed(() => ({
'sb-block-ordering': true,
2021-03-08 15:29:35 +00:00
[`sb-block-ordering_${props.orientation}`]: !!props.orientation,
2020-05-28 20:16:35 +00:00
}));
const { editorDimensions, blockDimensions } = useBlockSizing();
const resetStyles = debounce(() => {
if (!editorDimensions.value || !blockDimensions.value) {
return;
}
const right = editorDimensions.value.width - blockDimensions.value.left;
styles.top = `${blockDimensions.value.top}px`;
styles.right = `${right}px`;
});
watch(editorDimensions, resetStyles);
watch(blockDimensions, resetStyles);
2021-03-08 15:29:35 +00:00
watch(() => props.orientation, resetStyles);
2020-05-28 20:16:35 +00:00
return () => (
<div
class={classes.value}
style={styles}
2020-05-28 20:55:03 +00:00
onClick={($event: MouseEvent) => $event.stopPropagation()}
2020-05-28 20:16:35 +00:00
>
2022-09-05 19:12:20 +00:00
<SbButton {...{onClick: props.eventMoveBackward}}>{props.orientation === 'vertical' ? '↑' : '←'}</SbButton>
<SbButton {...{onClick: props.eventRemove}}>x</SbButton>
<SbButton {...{onClick: props.eventMoveForward}}>{props.orientation === 'vertical' ? '↓' : '→'}</SbButton>
2020-05-28 20:16:35 +00:00
</div>
);
},
});