Content.js 8.0 KB

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