Content.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
  3. import { computed, ref, defineComponent, nextTick } from 'vue';
  4. import Transition, { getTransitionProps } from '../_util/transition';
  5. import dialogPropTypes from './IDialogPropTypes';
  6. import { offset } from './util';
  7. var sentinelStyle = {
  8. width: 0,
  9. height: 0,
  10. overflow: 'hidden',
  11. outline: 'none'
  12. };
  13. export default defineComponent({
  14. compatConfig: {
  15. MODE: 3
  16. },
  17. name: 'Content',
  18. inheritAttrs: false,
  19. props: _objectSpread(_objectSpread({}, dialogPropTypes()), {}, {
  20. motionName: String,
  21. ariaId: String,
  22. onVisibleChanged: Function,
  23. onMousedown: Function,
  24. onMouseup: Function
  25. }),
  26. setup: function setup(props, _ref) {
  27. var expose = _ref.expose,
  28. slots = _ref.slots,
  29. attrs = _ref.attrs;
  30. var sentinelStartRef = ref();
  31. var sentinelEndRef = ref();
  32. var dialogRef = ref();
  33. expose({
  34. focus: function focus() {
  35. var _sentinelStartRef$val;
  36. (_sentinelStartRef$val = sentinelStartRef.value) === null || _sentinelStartRef$val === void 0 ? void 0 : _sentinelStartRef$val.focus();
  37. },
  38. changeActive: function changeActive(next) {
  39. var _document = document,
  40. activeElement = _document.activeElement;
  41. if (next && activeElement === sentinelEndRef.value) {
  42. sentinelStartRef.value.focus();
  43. } else if (!next && activeElement === sentinelStartRef.value) {
  44. sentinelEndRef.value.focus();
  45. }
  46. }
  47. });
  48. var transformOrigin = ref();
  49. var contentStyleRef = computed(function () {
  50. var width = props.width,
  51. height = props.height;
  52. var contentStyle = {};
  53. if (width !== undefined) {
  54. contentStyle.width = typeof width === 'number' ? "".concat(width, "px") : width;
  55. }
  56. if (height !== undefined) {
  57. contentStyle.height = typeof height === 'number' ? "".concat(height, "px") : height;
  58. }
  59. if (transformOrigin.value) {
  60. contentStyle.transformOrigin = transformOrigin.value;
  61. }
  62. return contentStyle;
  63. });
  64. var onPrepare = function onPrepare() {
  65. nextTick(function () {
  66. if (dialogRef.value) {
  67. var elementOffset = offset(dialogRef.value);
  68. transformOrigin.value = props.mousePosition ? "".concat(props.mousePosition.x - elementOffset.left, "px ").concat(props.mousePosition.y - elementOffset.top, "px") : '';
  69. }
  70. });
  71. };
  72. var onVisibleChanged = function onVisibleChanged(visible) {
  73. props.onVisibleChanged(visible);
  74. };
  75. return function () {
  76. var _slots$footer, _slots$title, _slots$closeIcon, _slots$default;
  77. var prefixCls = props.prefixCls,
  78. _props$footer = props.footer,
  79. footer = _props$footer === void 0 ? (_slots$footer = slots.footer) === null || _slots$footer === void 0 ? void 0 : _slots$footer.call(slots) : _props$footer,
  80. _props$title = props.title,
  81. title = _props$title === void 0 ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : _props$title,
  82. ariaId = props.ariaId,
  83. closable = props.closable,
  84. _props$closeIcon = props.closeIcon,
  85. closeIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots) : _props$closeIcon,
  86. onClose = props.onClose,
  87. bodyStyle = props.bodyStyle,
  88. bodyProps = props.bodyProps,
  89. onMousedown = props.onMousedown,
  90. onMouseup = props.onMouseup,
  91. visible = props.visible,
  92. _props$modalRender = props.modalRender,
  93. modalRender = _props$modalRender === void 0 ? slots.modalRender : _props$modalRender,
  94. destroyOnClose = props.destroyOnClose,
  95. motionName = props.motionName;
  96. var footerNode;
  97. if (footer) {
  98. footerNode = _createVNode("div", {
  99. "class": "".concat(prefixCls, "-footer")
  100. }, [footer]);
  101. }
  102. var headerNode;
  103. if (title) {
  104. headerNode = _createVNode("div", {
  105. "class": "".concat(prefixCls, "-header")
  106. }, [_createVNode("div", {
  107. "class": "".concat(prefixCls, "-title"),
  108. "id": ariaId
  109. }, [title])]);
  110. }
  111. var closer;
  112. if (closable) {
  113. closer = _createVNode("button", {
  114. "type": "button",
  115. "onClick": onClose,
  116. "aria-label": "Close",
  117. "class": "".concat(prefixCls, "-close")
  118. }, [closeIcon || _createVNode("span", {
  119. "class": "".concat(prefixCls, "-close-x")
  120. }, null)]);
  121. }
  122. var content = _createVNode("div", {
  123. "class": "".concat(prefixCls, "-content")
  124. }, [closer, headerNode, _createVNode("div", _objectSpread({
  125. "class": "".concat(prefixCls, "-body"),
  126. "style": bodyStyle
  127. }, bodyProps), [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]), footerNode]);
  128. var transitionProps = getTransitionProps(motionName);
  129. return _createVNode(Transition, _objectSpread(_objectSpread({}, transitionProps), {}, {
  130. "onBeforeEnter": onPrepare,
  131. "onAfterEnter": function onAfterEnter() {
  132. return onVisibleChanged(true);
  133. },
  134. "onAfterLeave": function onAfterLeave() {
  135. return onVisibleChanged(false);
  136. }
  137. }), {
  138. default: function _default() {
  139. return [visible || !destroyOnClose ? _withDirectives(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  140. "ref": dialogRef,
  141. "key": "dialog-element",
  142. "role": "document",
  143. "style": [contentStyleRef.value, attrs.style],
  144. "class": [prefixCls, attrs.class],
  145. "onMousedown": onMousedown,
  146. "onMouseup": onMouseup
  147. }), [_createVNode("div", {
  148. "tabindex": 0,
  149. "ref": sentinelStartRef,
  150. "style": sentinelStyle,
  151. "aria-hidden": "true"
  152. }, null), modalRender ? modalRender({
  153. originVNode: content
  154. }) : content, _createVNode("div", {
  155. "tabindex": 0,
  156. "ref": sentinelEndRef,
  157. "style": sentinelStyle,
  158. "aria-hidden": "true"
  159. }, null)]), [[_vShow, visible]]) : null];
  160. }
  161. });
  162. };
  163. }
  164. });