56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import { debounce } from 'lodash-es';
|
|
import {
|
|
defineComponent,
|
|
watch,
|
|
reactive,
|
|
} from 'vue';
|
|
import { useBlockSizing } from '../use-resize-observer';
|
|
|
|
import './Toolbar.scss';
|
|
|
|
/**
|
|
* Toolbar in the schlechtenburg theme
|
|
* @sbui
|
|
*/
|
|
export const SbToolbar = defineComponent({
|
|
name: 'sb-toolbar',
|
|
|
|
setup(_, context) {
|
|
const styles = reactive({
|
|
bottom: '',
|
|
left: '',
|
|
maxWidth: '',
|
|
});
|
|
|
|
const { editorDimensions, blockDimensions } = useBlockSizing();
|
|
const resetStyles = debounce(() => {
|
|
if (!editorDimensions.value || !blockDimensions.value) {
|
|
return;
|
|
}
|
|
|
|
const bottom = editorDimensions.value.height - blockDimensions.value.top;
|
|
styles.bottom = `${bottom}px`;
|
|
styles.left = `${blockDimensions.value.left}px`;
|
|
styles.maxWidth = `${blockDimensions.value.width}px`;
|
|
});
|
|
watch(editorDimensions, resetStyles);
|
|
watch(blockDimensions, resetStyles);
|
|
|
|
return () => (
|
|
<div
|
|
class="sb-toolbar"
|
|
style={styles}
|
|
onClick={($event: MouseEvent) => $event.stopPropagation()}
|
|
>
|
|
{
|
|
/**
|
|
* The toolbar contents
|
|
* @slot default
|
|
*/
|
|
context.slots.default?.()
|
|
}
|
|
</div>
|
|
);
|
|
},
|
|
});
|