index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
  10. var _vue = require("vue");
  11. var _propsUtil = require("../_util/props-util");
  12. var _default = (0, _vue.defineComponent)({
  13. compatConfig: {
  14. MODE: 3
  15. },
  16. name: 'ResizeObserver',
  17. props: {
  18. disabled: Boolean,
  19. onResize: Function
  20. },
  21. emits: ['resize'],
  22. setup: function setup(props, _ref) {
  23. var slots = _ref.slots;
  24. var state = (0, _vue.reactive)({
  25. width: 0,
  26. height: 0,
  27. offsetHeight: 0,
  28. offsetWidth: 0
  29. });
  30. var currentElement = null;
  31. var resizeObserver = null;
  32. var destroyObserver = function destroyObserver() {
  33. if (resizeObserver) {
  34. resizeObserver.disconnect();
  35. resizeObserver = null;
  36. }
  37. };
  38. var onResize = function onResize(entries) {
  39. var onResize = props.onResize;
  40. var target = entries[0].target;
  41. var _target$getBoundingCl = target.getBoundingClientRect(),
  42. width = _target$getBoundingCl.width,
  43. height = _target$getBoundingCl.height;
  44. var offsetWidth = target.offsetWidth,
  45. offsetHeight = target.offsetHeight;
  46. /**
  47. * Resize observer trigger when content size changed.
  48. * In most case we just care about element size,
  49. * let's use `boundary` instead of `contentRect` here to avoid shaking.
  50. */
  51. var fixedWidth = Math.floor(width);
  52. var fixedHeight = Math.floor(height);
  53. if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
  54. var size = {
  55. width: fixedWidth,
  56. height: fixedHeight,
  57. offsetWidth: offsetWidth,
  58. offsetHeight: offsetHeight
  59. };
  60. (0, _extends2.default)(state, size);
  61. if (onResize) {
  62. // defer the callback but not defer to next frame
  63. Promise.resolve().then(function () {
  64. onResize((0, _objectSpread2.default)((0, _objectSpread2.default)({}, size), {}, {
  65. offsetWidth: offsetWidth,
  66. offsetHeight: offsetHeight
  67. }), target);
  68. });
  69. }
  70. }
  71. };
  72. var instance = (0, _vue.getCurrentInstance)();
  73. var registerObserver = function registerObserver() {
  74. var disabled = props.disabled;
  75. // Unregister if disabled
  76. if (disabled) {
  77. destroyObserver();
  78. return;
  79. }
  80. // Unregister if element changed
  81. var element = (0, _propsUtil.findDOMNode)(instance);
  82. var elementChanged = element !== currentElement;
  83. if (elementChanged) {
  84. destroyObserver();
  85. currentElement = element;
  86. }
  87. if (!resizeObserver && element) {
  88. resizeObserver = new _resizeObserverPolyfill.default(onResize);
  89. resizeObserver.observe(element);
  90. }
  91. };
  92. (0, _vue.onMounted)(function () {
  93. registerObserver();
  94. });
  95. (0, _vue.onUpdated)(function () {
  96. registerObserver();
  97. });
  98. (0, _vue.onUnmounted)(function () {
  99. destroyObserver();
  100. });
  101. (0, _vue.watch)(function () {
  102. return props.disabled;
  103. }, function () {
  104. registerObserver();
  105. }, {
  106. flush: 'post'
  107. });
  108. return function () {
  109. var _slots$default;
  110. return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)[0];
  111. };
  112. }
  113. });
  114. exports.default = _default;