e550709dabb03df8486be845002aca706b9ed3c737137739104071e4d46501c246e9e2336309c4e95b3e3a19c5abaa2ed51114a79a9016ee25a4ab5940becc 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
  2. import { useResizeObserver } from '@vueuse/core';
  3. const useAutoResize = (props) => {
  4. const sizer = ref();
  5. const width$ = ref(0);
  6. const height$ = ref(0);
  7. let resizerStopper;
  8. onMounted(() => {
  9. resizerStopper = useResizeObserver(sizer, ([entry]) => {
  10. const { width, height } = entry.contentRect;
  11. const { paddingLeft, paddingRight, paddingTop, paddingBottom } = getComputedStyle(entry.target);
  12. const left = Number.parseInt(paddingLeft) || 0;
  13. const right = Number.parseInt(paddingRight) || 0;
  14. const top = Number.parseInt(paddingTop) || 0;
  15. const bottom = Number.parseInt(paddingBottom) || 0;
  16. width$.value = width - left - right;
  17. height$.value = height - top - bottom;
  18. }).stop;
  19. });
  20. onBeforeUnmount(() => {
  21. resizerStopper == null ? void 0 : resizerStopper();
  22. });
  23. watch([width$, height$], ([width, height]) => {
  24. var _a;
  25. (_a = props.onResize) == null ? void 0 : _a.call(props, {
  26. width,
  27. height
  28. });
  29. });
  30. return {
  31. sizer,
  32. width: width$,
  33. height: height$
  34. };
  35. };
  36. export { useAutoResize };
  37. //# sourceMappingURL=use-auto-resize.mjs.map