Align.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.alignProps = void 0;
  7. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  8. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  9. var _vue = require("vue");
  10. var _domAlign = require("dom-align");
  11. var _addEventListener = _interopRequireDefault(require("../vc-util/Dom/addEventListener"));
  12. var _vnode = require("../_util/vnode");
  13. var _isVisible = _interopRequireDefault(require("../vc-util/Dom/isVisible"));
  14. var _util = require("./util");
  15. var _useBuffer3 = _interopRequireDefault(require("./hooks/useBuffer"));
  16. var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
  17. var alignProps = {
  18. align: Object,
  19. target: [Object, Function],
  20. onAlign: Function,
  21. monitorBufferTime: Number,
  22. monitorWindowResize: Boolean,
  23. disabled: Boolean
  24. };
  25. exports.alignProps = alignProps;
  26. function getElement(func) {
  27. if (typeof func !== 'function') return null;
  28. return func();
  29. }
  30. function getPoint(point) {
  31. if ((0, _typeof2.default)(point) !== 'object' || !point) return null;
  32. return point;
  33. }
  34. var _default = (0, _vue.defineComponent)({
  35. compatConfig: {
  36. MODE: 3
  37. },
  38. name: 'Align',
  39. props: alignProps,
  40. emits: ['align'],
  41. setup: function setup(props, _ref) {
  42. var expose = _ref.expose,
  43. slots = _ref.slots;
  44. var cacheRef = (0, _vue.ref)({});
  45. var nodeRef = (0, _vue.ref)();
  46. var _useBuffer = (0, _useBuffer3.default)(function () {
  47. var latestDisabled = props.disabled,
  48. latestTarget = props.target,
  49. latestAlign = props.align,
  50. latestOnAlign = props.onAlign;
  51. if (!latestDisabled && latestTarget && nodeRef.value) {
  52. var source = nodeRef.value;
  53. var result;
  54. var element = getElement(latestTarget);
  55. var point = getPoint(latestTarget);
  56. cacheRef.value.element = element;
  57. cacheRef.value.point = point;
  58. cacheRef.value.align = latestAlign;
  59. // IE lose focus after element realign
  60. // We should record activeElement and restore later
  61. var _document = document,
  62. activeElement = _document.activeElement;
  63. // We only align when element is visible
  64. if (element && (0, _isVisible.default)(element)) {
  65. result = (0, _domAlign.alignElement)(source, element, latestAlign);
  66. } else if (point) {
  67. result = (0, _domAlign.alignPoint)(source, point, latestAlign);
  68. }
  69. (0, _util.restoreFocus)(activeElement, source);
  70. if (latestOnAlign && result) {
  71. latestOnAlign(source, result);
  72. }
  73. return true;
  74. }
  75. return false;
  76. }, (0, _vue.computed)(function () {
  77. return props.monitorBufferTime;
  78. })),
  79. _useBuffer2 = (0, _slicedToArray2.default)(_useBuffer, 2),
  80. _forceAlign = _useBuffer2[0],
  81. cancelForceAlign = _useBuffer2[1];
  82. // ===================== Effect =====================
  83. // Listen for target updated
  84. var resizeMonitor = (0, _vue.ref)({
  85. cancel: function cancel() {}
  86. });
  87. // Listen for source updated
  88. var sourceResizeMonitor = (0, _vue.ref)({
  89. cancel: function cancel() {}
  90. });
  91. var goAlign = function goAlign() {
  92. var target = props.target;
  93. var element = getElement(target);
  94. var point = getPoint(target);
  95. if (nodeRef.value !== sourceResizeMonitor.value.element) {
  96. sourceResizeMonitor.value.cancel();
  97. sourceResizeMonitor.value.element = nodeRef.value;
  98. sourceResizeMonitor.value.cancel = (0, _util.monitorResize)(nodeRef.value, _forceAlign);
  99. }
  100. if (cacheRef.value.element !== element || !(0, _util.isSamePoint)(cacheRef.value.point, point) || !(0, _isEqual.default)(cacheRef.value.align, props.align)) {
  101. _forceAlign();
  102. // Add resize observer
  103. if (resizeMonitor.value.element !== element) {
  104. resizeMonitor.value.cancel();
  105. resizeMonitor.value.element = element;
  106. resizeMonitor.value.cancel = (0, _util.monitorResize)(element, _forceAlign);
  107. }
  108. }
  109. };
  110. (0, _vue.onMounted)(function () {
  111. (0, _vue.nextTick)(function () {
  112. goAlign();
  113. });
  114. });
  115. (0, _vue.onUpdated)(function () {
  116. (0, _vue.nextTick)(function () {
  117. goAlign();
  118. });
  119. });
  120. // Listen for disabled change
  121. (0, _vue.watch)(function () {
  122. return props.disabled;
  123. }, function (disabled) {
  124. if (!disabled) {
  125. _forceAlign();
  126. } else {
  127. cancelForceAlign();
  128. }
  129. }, {
  130. immediate: true,
  131. flush: 'post'
  132. });
  133. // Listen for window resize
  134. var winResizeRef = (0, _vue.ref)(null);
  135. (0, _vue.watch)(function () {
  136. return props.monitorWindowResize;
  137. }, function (monitorWindowResize) {
  138. if (monitorWindowResize) {
  139. if (!winResizeRef.value) {
  140. winResizeRef.value = (0, _addEventListener.default)(window, 'resize', _forceAlign);
  141. }
  142. } else if (winResizeRef.value) {
  143. winResizeRef.value.remove();
  144. winResizeRef.value = null;
  145. }
  146. }, {
  147. flush: 'post'
  148. });
  149. (0, _vue.onUnmounted)(function () {
  150. resizeMonitor.value.cancel();
  151. sourceResizeMonitor.value.cancel();
  152. if (winResizeRef.value) winResizeRef.value.remove();
  153. cancelForceAlign();
  154. });
  155. expose({
  156. forceAlign: function forceAlign() {
  157. return _forceAlign(true);
  158. }
  159. });
  160. return function () {
  161. var child = slots === null || slots === void 0 ? void 0 : slots.default();
  162. if (child) {
  163. return (0, _vnode.cloneElement)(child[0], {
  164. ref: nodeRef
  165. }, true, true);
  166. }
  167. return null;
  168. };
  169. }
  170. });
  171. exports.default = _default;