| 123456789101112131415161718192021222324252627282930313233343536373839 |
- import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
- import { useResizeObserver } from '@vueuse/core';
- const useAutoResize = (props) => {
- const sizer = ref();
- const width$ = ref(0);
- const height$ = ref(0);
- let resizerStopper;
- onMounted(() => {
- resizerStopper = useResizeObserver(sizer, ([entry]) => {
- const { width, height } = entry.contentRect;
- const { paddingLeft, paddingRight, paddingTop, paddingBottom } = getComputedStyle(entry.target);
- const left = Number.parseInt(paddingLeft) || 0;
- const right = Number.parseInt(paddingRight) || 0;
- const top = Number.parseInt(paddingTop) || 0;
- const bottom = Number.parseInt(paddingBottom) || 0;
- width$.value = width - left - right;
- height$.value = height - top - bottom;
- }).stop;
- });
- onBeforeUnmount(() => {
- resizerStopper == null ? void 0 : resizerStopper();
- });
- watch([width$, height$], ([width, height]) => {
- var _a;
- (_a = props.onResize) == null ? void 0 : _a.call(props, {
- width,
- height
- });
- });
- return {
- sizer,
- width: width$,
- height: height$
- };
- };
- export { useAutoResize };
- //# sourceMappingURL=use-auto-resize.mjs.map
|