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

56 lines
1.2 KiB
TypeScript
Raw Normal View History

2020-12-30 20:17:34 +00:00
import { debounce } from 'lodash-es';
2020-05-28 20:16:35 +00:00
import {
defineComponent,
watch,
reactive,
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-20 14:21:08 +00:00
import './Toolbar.scss';
2022-03-13 22:12:18 +00:00
/**
* Toolbar in the schlechtenburg theme
* @sbui
*/
2020-12-30 13:34:23 +00:00
export const SbToolbar = defineComponent({
2020-05-20 14:21:08 +00:00
name: 'sb-toolbar',
2020-12-30 01:32:46 +00:00
setup(_, context) {
2020-05-28 20:16:35 +00:00
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);
2020-05-25 21:10:21 +00:00
return () => (
2020-05-28 20:16:35 +00:00
<div
class="sb-toolbar"
style={styles}
2020-05-28 20:55:03 +00:00
onClick={($event: MouseEvent) => $event.stopPropagation()}
2020-05-28 20:16:35 +00:00
>
2022-03-13 22:12:18 +00:00
{
/**
* The toolbar contents
* @slot default
*/
context.slots.default?.()
}
2020-05-20 14:21:08 +00:00
</div>
);
},
});