Content.js 6.5 KB

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