88aa0c748711fa8b952a12c7b576b4bcf7daec665d3940f11ead9e85020343656abe576a2e21f471ce80e3f60967edf809a262075f63dd3e68664dc029064a 1.2 KB

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