1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 |
|
10 | var _vue = require("vue");
|
11 |
|
12 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
13 |
|
14 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _contains = _interopRequireDefault(require("../vc-util/Dom/contains"));
|
17 |
|
18 | var _classNames = _interopRequireDefault(require("../_util/classNames"));
|
19 |
|
20 | var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
|
21 |
|
22 | var _omit = _interopRequireDefault(require("../_util/omit"));
|
23 |
|
24 | var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
|
25 |
|
26 | var _propsUtil = require("../_util/props-util");
|
27 |
|
28 | var _Content = _interopRequireDefault(require("./Content"));
|
29 |
|
30 | var _IDialogPropTypes = _interopRequireDefault(require("./IDialogPropTypes"));
|
31 |
|
32 | var _Mask = _interopRequireDefault(require("./Mask"));
|
33 |
|
34 | var _util = require("./util");
|
35 |
|
36 | var _default = (0, _vue.defineComponent)({
|
37 | name: 'Dialog',
|
38 | inheritAttrs: false,
|
39 | props: (0, _propsUtil.initDefaultProps)((0, _extends2.default)((0, _extends2.default)({}, (0, _IDialogPropTypes.default)()), {
|
40 | getOpenCount: Function,
|
41 | scrollLocker: Object
|
42 | }), {
|
43 | mask: true,
|
44 | visible: false,
|
45 | keyboard: true,
|
46 | closable: true,
|
47 | maskClosable: true,
|
48 | destroyOnClose: false,
|
49 | prefixCls: 'rc-dialog',
|
50 | getOpenCount: function getOpenCount() {
|
51 | return null;
|
52 | },
|
53 | focusTriggerAfterClose: true
|
54 | }),
|
55 | setup: function setup(props, _ref) {
|
56 | var attrs = _ref.attrs,
|
57 | slots = _ref.slots;
|
58 | var lastOutSideActiveElementRef = (0, _vue.ref)();
|
59 | var wrapperRef = (0, _vue.ref)();
|
60 | var contentRef = (0, _vue.ref)();
|
61 | var animatedVisible = (0, _vue.ref)(props.visible);
|
62 | var ariaIdRef = (0, _vue.ref)("vcDialogTitle".concat((0, _util.getUUID)()));
|
63 |
|
64 | var onDialogVisibleChanged = function onDialogVisibleChanged(newVisible) {
|
65 | var _a, _b;
|
66 |
|
67 | if (newVisible) {
|
68 |
|
69 | if (!(0, _contains.default)(wrapperRef.value, document.activeElement)) {
|
70 | lastOutSideActiveElementRef.value = document.activeElement;
|
71 | (_a = contentRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
72 | }
|
73 | } else {
|
74 | var preAnimatedVisible = animatedVisible.value;
|
75 |
|
76 | animatedVisible.value = false;
|
77 |
|
78 | if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
|
79 | try {
|
80 | lastOutSideActiveElementRef.value.focus({
|
81 | preventScroll: true
|
82 | });
|
83 | } catch (e) {
|
84 | }
|
85 |
|
86 | lastOutSideActiveElementRef.value = null;
|
87 | }
|
88 |
|
89 |
|
90 | if (preAnimatedVisible) {
|
91 | (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
|
92 | }
|
93 | }
|
94 | };
|
95 |
|
96 | var onInternalClose = function onInternalClose(e) {
|
97 | var _a;
|
98 |
|
99 | (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
100 | };
|
101 |
|
102 |
|
103 | var contentClickRef = (0, _vue.ref)(false);
|
104 | var contentTimeoutRef = (0, _vue.ref)();
|
105 |
|
106 | var onContentMouseDown = function onContentMouseDown() {
|
107 | clearTimeout(contentTimeoutRef.value);
|
108 | contentClickRef.value = true;
|
109 | };
|
110 |
|
111 | var onContentMouseUp = function onContentMouseUp() {
|
112 | contentTimeoutRef.value = setTimeout(function () {
|
113 | contentClickRef.value = false;
|
114 | });
|
115 | };
|
116 |
|
117 | var onWrapperClick = function onWrapperClick(e) {
|
118 | if (!props.maskClosable) return null;
|
119 |
|
120 | if (contentClickRef.value) {
|
121 | contentClickRef.value = false;
|
122 | } else if (wrapperRef.value === e.target) {
|
123 | onInternalClose(e);
|
124 | }
|
125 | };
|
126 |
|
127 | var onWrapperKeyDown = function onWrapperKeyDown(e) {
|
128 | if (props.keyboard && e.keyCode === _KeyCode.default.ESC) {
|
129 | e.stopPropagation();
|
130 | onInternalClose(e);
|
131 | return;
|
132 | }
|
133 |
|
134 |
|
135 | if (props.visible) {
|
136 | if (e.keyCode === _KeyCode.default.TAB) {
|
137 | contentRef.value.changeActive(!e.shiftKey);
|
138 | }
|
139 | }
|
140 | };
|
141 |
|
142 | (0, _vue.watch)(function () {
|
143 | return props.visible;
|
144 | }, function () {
|
145 | if (props.visible) {
|
146 | animatedVisible.value = true;
|
147 | }
|
148 | }, {
|
149 | flush: 'post'
|
150 | });
|
151 | (0, _vue.onBeforeUnmount)(function () {
|
152 | var _a;
|
153 |
|
154 | clearTimeout(contentTimeoutRef.value);
|
155 | (_a = props.scrollLocker) === null || _a === void 0 ? void 0 : _a.unLock();
|
156 | });
|
157 | (0, _vue.watchEffect)(function () {
|
158 | var _a, _b;
|
159 |
|
160 | (_a = props.scrollLocker) === null || _a === void 0 ? void 0 : _a.unLock();
|
161 |
|
162 | if (animatedVisible.value) {
|
163 | (_b = props.scrollLocker) === null || _b === void 0 ? void 0 : _b.lock();
|
164 | }
|
165 | });
|
166 | return function () {
|
167 | var prefixCls = props.prefixCls,
|
168 | mask = props.mask,
|
169 | visible = props.visible,
|
170 | maskTransitionName = props.maskTransitionName,
|
171 | maskAnimation = props.maskAnimation,
|
172 | zIndex = props.zIndex,
|
173 | wrapClassName = props.wrapClassName,
|
174 | wrapStyle = props.wrapStyle,
|
175 | closable = props.closable,
|
176 | maskProps = props.maskProps,
|
177 | maskStyle = props.maskStyle,
|
178 | transitionName = props.transitionName,
|
179 | animation = props.animation,
|
180 | wrapProps = props.wrapProps,
|
181 | _props$title = props.title,
|
182 | title = _props$title === void 0 ? slots.title : _props$title;
|
183 | var style = attrs.style,
|
184 | className = attrs.class;
|
185 | return (0, _vue.createVNode)("div", (0, _objectSpread2.default)({
|
186 | "class": "".concat(prefixCls, "-root")
|
187 | }, (0, _pickAttrs.default)(props, {
|
188 | data: true
|
189 | })), [(0, _vue.createVNode)(_Mask.default, {
|
190 | "prefixCls": prefixCls,
|
191 | "visible": mask && visible,
|
192 | "motionName": (0, _util.getMotionName)(prefixCls, maskTransitionName, maskAnimation),
|
193 | "style": (0, _extends2.default)({
|
194 | zIndex: zIndex
|
195 | }, maskStyle),
|
196 | "maskProps": maskProps
|
197 | }, null), (0, _vue.createVNode)("div", (0, _objectSpread2.default)({
|
198 | "tabIndex": -1,
|
199 | "onKeydown": onWrapperKeyDown,
|
200 | "class": (0, _classNames.default)("".concat(prefixCls, "-wrap"), wrapClassName),
|
201 | "ref": wrapperRef,
|
202 | "onClick": onWrapperClick,
|
203 | "role": "dialog",
|
204 | "aria-labelledby": title ? ariaIdRef.value : null,
|
205 | "style": (0, _extends2.default)((0, _extends2.default)({
|
206 | zIndex: zIndex
|
207 | }, wrapStyle), {
|
208 | display: !animatedVisible.value ? 'none' : null
|
209 | })
|
210 | }, wrapProps), [(0, _vue.createVNode)(_Content.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _omit.default)(props, ['scrollLocker'])), {}, {
|
211 | "style": style,
|
212 | "class": className,
|
213 | "onMousedown": onContentMouseDown,
|
214 | "onMouseup": onContentMouseUp,
|
215 | "ref": contentRef,
|
216 | "closable": closable,
|
217 | "ariaId": ariaIdRef.value,
|
218 | "prefixCls": prefixCls,
|
219 | "visible": visible,
|
220 | "onClose": onInternalClose,
|
221 | "onVisibleChanged": onDialogVisibleChanged,
|
222 | "motionName": (0, _util.getMotionName)(prefixCls, transitionName, animation)
|
223 | }), slots)])]);
|
224 | };
|
225 | }
|
226 | });
|
227 |
|
228 | exports.default = _default; |
\ | No newline at end of file |