@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/dist/Dialog/Dialog.js +5 -6
  2. package/dist/Dialog/DialogContext.d.ts +1 -1
  3. package/dist/Dialog/DialogContext.js +1 -1
  4. package/dist/Drawer/Drawer.d.ts +2 -5
  5. package/dist/Drawer/Drawer.js +98 -35
  6. package/dist/Drawer/DrawerBody.js +6 -12
  7. package/dist/Drawer/DrawerContext.d.ts +1 -13
  8. package/dist/Drawer/DrawerContext.js +1 -11
  9. package/dist/Drawer/DrawerHeader.js +5 -18
  10. package/dist/Drawer/typings.d.ts +31 -10
  11. package/dist/InputNumber/InputNumber.d.ts +2 -2
  12. package/dist/InputNumber/InputNumber.js +3 -3
  13. package/dist/Loading/Loading.d.ts +7 -2
  14. package/dist/Loading/Loading.js +108 -57
  15. package/dist/Loading/typings.d.ts +7 -1
  16. package/dist/Message/Main.d.ts +0 -7
  17. package/dist/Message/Main.js +0 -7
  18. package/dist/Message/Message.d.ts +2 -2
  19. package/dist/Message/Message.js +4 -3
  20. package/dist/Message/index.d.ts +0 -8
  21. package/dist/Message/index.js +5 -9
  22. package/dist/MessageBox/MessageBox.js +2 -1
  23. package/dist/MessageBox/index.d.ts +5 -5
  24. package/dist/MessageBox/index.js +1 -0
  25. package/dist/Notification/Main.d.ts +0 -7
  26. package/dist/Notification/Main.js +0 -7
  27. package/dist/Popover/Popover.d.ts +3 -2
  28. package/dist/Popover/Popover.js +10 -5
  29. package/dist/Popover/typings.d.ts +0 -1
  30. package/dist/Skeleton/PlaceholderGraph.d.ts +1 -1
  31. package/dist/Skeleton/PlaceholderGraph.js +3 -3
  32. package/dist/Skeleton/PlaceholderGrid.d.ts +1 -1
  33. package/dist/Skeleton/PlaceholderGrid.js +3 -3
  34. package/dist/Skeleton/PlaceholderParagraph.d.ts +2 -2
  35. package/dist/Skeleton/PlaceholderParagraph.js +13 -8
  36. package/dist/Skeleton/Skeleton.d.ts +2 -9
  37. package/dist/Skeleton/Skeleton.js +94 -7
  38. package/dist/Skeleton/SkeletonContext.d.ts +17 -0
  39. package/dist/Skeleton/SkeletonContext.js +5 -0
  40. package/dist/Skeleton/SkeletonItem.d.ts +4 -0
  41. package/dist/Skeleton/SkeletonItem.js +47 -0
  42. package/dist/Skeleton/index.d.ts +2 -3
  43. package/dist/Skeleton/index.js +2 -1
  44. package/dist/Skeleton/typings.d.ts +29 -0
  45. package/dist/Skeleton/typings.js +1 -0
  46. package/dist/Table/Table.d.ts +0 -1
  47. package/dist/Table/Table.js +1 -1
  48. package/dist/Table/hooks/useSelection.d.ts +1 -1
  49. package/dist/Tooltip/Tooltip.d.ts +3 -3
  50. package/dist/Tooltip/Tooltip.js +6 -6
  51. package/dist/index.css +1 -1
  52. package/dist/index.d.ts +2 -2
  53. package/dist/index.js +1 -1
  54. package/package.json +1 -1
  55. package/theme-chalk/drawer/index.scss +61 -65
  56. package/theme-chalk/message/index.scss +11 -3
  57. package/theme-chalk/placeholder/index.scss +22 -37
  58. package/dist/theme-chalk/avatar/index.scss +0 -50
  59. package/dist/theme-chalk/badge/index.scss +0 -63
  60. package/dist/theme-chalk/breadcrumb/index.scss +0 -65
  61. package/dist/theme-chalk/build.scss +0 -2
  62. package/dist/theme-chalk/button/_mixins.scss +0 -317
  63. package/dist/theme-chalk/button/button-group.scss +0 -83
  64. package/dist/theme-chalk/button/button.scss +0 -382
  65. package/dist/theme-chalk/button/index.scss +0 -2
  66. package/dist/theme-chalk/calendar/date-picker.scss +0 -112
  67. package/dist/theme-chalk/calendar/date-range-picker.scss +0 -139
  68. package/dist/theme-chalk/calendar/date-table.scss +0 -156
  69. package/dist/theme-chalk/calendar/index.scss +0 -6
  70. package/dist/theme-chalk/calendar/month-table.scss +0 -92
  71. package/dist/theme-chalk/calendar/picker-panel.scss +0 -136
  72. package/dist/theme-chalk/calendar/year-table.scss +0 -107
  73. package/dist/theme-chalk/card/index.scss +0 -44
  74. package/dist/theme-chalk/carousel/index.scss +0 -237
  75. package/dist/theme-chalk/cascader/cascader-panel.scss +0 -184
  76. package/dist/theme-chalk/cascader/cascader.scss +0 -239
  77. package/dist/theme-chalk/cascader/index.scss +0 -2
  78. package/dist/theme-chalk/checkbox/index.scss +0 -255
  79. package/dist/theme-chalk/checkbox-button/index.scss +0 -117
  80. package/dist/theme-chalk/checkbox-group/index.scss +0 -33
  81. package/dist/theme-chalk/col/_mixins.scss +0 -62
  82. package/dist/theme-chalk/col/index.scss +0 -50
  83. package/dist/theme-chalk/collapse/index.scss +0 -84
  84. package/dist/theme-chalk/color-picker/index.scss +0 -340
  85. package/dist/theme-chalk/common/_var.scss +0 -6
  86. package/dist/theme-chalk/common/index.d.ts +0 -1
  87. package/dist/theme-chalk/common/index.js +0 -1
  88. package/dist/theme-chalk/common/index.scss +0 -222
  89. package/dist/theme-chalk/date-picker/index.scss +0 -253
  90. package/dist/theme-chalk/date-time-picker/index.scss +0 -3
  91. package/dist/theme-chalk/date-time-picker/time-picker.scss +0 -83
  92. package/dist/theme-chalk/date-time-picker/time-range-picker.scss +0 -32
  93. package/dist/theme-chalk/descriptions/descriptions-item.scss +0 -66
  94. package/dist/theme-chalk/descriptions/descriptions.scss +0 -160
  95. package/dist/theme-chalk/descriptions/index.scss +0 -2
  96. package/dist/theme-chalk/dev.scss +0 -2
  97. package/dist/theme-chalk/dialog/index.scss +0 -190
  98. package/dist/theme-chalk/display.scss +0 -46
  99. package/dist/theme-chalk/divider/index.scss +0 -51
  100. package/dist/theme-chalk/doc.scss +0 -2
  101. package/dist/theme-chalk/drawer/index.scss +0 -250
  102. package/dist/theme-chalk/dropdown/index.scss +0 -147
  103. package/dist/theme-chalk/empty/index.scss +0 -69
  104. package/dist/theme-chalk/fonts/fa-brands-400.ttf +0 -0
  105. package/dist/theme-chalk/fonts/fa-brands-400.woff2 +0 -0
  106. package/dist/theme-chalk/fonts/fa-duotone-900.ttf +0 -0
  107. package/dist/theme-chalk/fonts/fa-duotone-900.woff2 +0 -0
  108. package/dist/theme-chalk/fonts/fa-light-300.ttf +0 -0
  109. package/dist/theme-chalk/fonts/fa-light-300.woff2 +0 -0
  110. package/dist/theme-chalk/fonts/fa-regular-400.ttf +0 -0
  111. package/dist/theme-chalk/fonts/fa-regular-400.woff2 +0 -0
  112. package/dist/theme-chalk/fonts/fa-solid-900.ttf +0 -0
  113. package/dist/theme-chalk/fonts/fa-solid-900.woff2 +0 -0
  114. package/dist/theme-chalk/fonts/fa-thin-100.ttf +0 -0
  115. package/dist/theme-chalk/fonts/fa-thin-100.woff2 +0 -0
  116. package/dist/theme-chalk/fonts/fa-v4compatibility.ttf +0 -0
  117. package/dist/theme-chalk/fonts/fa-v4compatibility.woff2 +0 -0
  118. package/dist/theme-chalk/form/index.scss +0 -378
  119. package/dist/theme-chalk/icon/fonts.scss +0 -9
  120. package/dist/theme-chalk/icon/index.scss +0 -44
  121. package/dist/theme-chalk/icon/scss/_animated.scss +0 -205
  122. package/dist/theme-chalk/icon/scss/_bordered-pulled.scss +0 -20
  123. package/dist/theme-chalk/icon/scss/_core.scss +0 -33
  124. package/dist/theme-chalk/icon/scss/_duotone-icons.scss +0 -12
  125. package/dist/theme-chalk/icon/scss/_fixed-width.scss +0 -7
  126. package/dist/theme-chalk/icon/scss/_functions.scss +0 -57
  127. package/dist/theme-chalk/icon/scss/_icons.scss +0 -11
  128. package/dist/theme-chalk/icon/scss/_list.scss +0 -20
  129. package/dist/theme-chalk/icon/scss/_mixins.scss +0 -102
  130. package/dist/theme-chalk/icon/scss/_rotated-flipped.scss +0 -31
  131. package/dist/theme-chalk/icon/scss/_screen-reader.scss +0 -14
  132. package/dist/theme-chalk/icon/scss/_shims.scss +0 -2606
  133. package/dist/theme-chalk/icon/scss/_sizing.scss +0 -16
  134. package/dist/theme-chalk/icon/scss/_stacked.scss +0 -32
  135. package/dist/theme-chalk/icon/scss/_variables.scss +0 -9189
  136. package/dist/theme-chalk/icon/scss/brands.scss +0 -27
  137. package/dist/theme-chalk/icon/scss/duotone.scss +0 -72
  138. package/dist/theme-chalk/icon/scss/fontawesome.scss +0 -13
  139. package/dist/theme-chalk/icon/scss/index.scss +0 -15
  140. package/dist/theme-chalk/icon/scss/light.scss +0 -21
  141. package/dist/theme-chalk/icon/scss/regular.scss +0 -21
  142. package/dist/theme-chalk/icon/scss/solid.scss +0 -21
  143. package/dist/theme-chalk/icon/scss/thin.scss +0 -21
  144. package/dist/theme-chalk/icon/scss/v4-shims.scss +0 -3
  145. package/dist/theme-chalk/index.scss +0 -67
  146. package/dist/theme-chalk/input/_mixins.scss +0 -16
  147. package/dist/theme-chalk/input/index.scss +0 -3
  148. package/dist/theme-chalk/input/input-range.scss +0 -208
  149. package/dist/theme-chalk/input/input.scss +0 -577
  150. package/dist/theme-chalk/input-number/index.scss +0 -172
  151. package/dist/theme-chalk/link/index.scss +0 -99
  152. package/dist/theme-chalk/loading/index.scss +0 -94
  153. package/dist/theme-chalk/message/index.scss +0 -169
  154. package/dist/theme-chalk/message-box/index.scss +0 -184
  155. package/dist/theme-chalk/notification/index.scss +0 -155
  156. package/dist/theme-chalk/pagination/index.scss +0 -515
  157. package/dist/theme-chalk/placeholder/index.scss +0 -135
  158. package/dist/theme-chalk/popconfirm/index.scss +0 -35
  159. package/dist/theme-chalk/popover/index.scss +0 -54
  160. package/dist/theme-chalk/popper/index.scss +0 -86
  161. package/dist/theme-chalk/progress/index.scss +0 -155
  162. package/dist/theme-chalk/radio/index.scss +0 -2
  163. package/dist/theme-chalk/radio/radio-button.scss +0 -128
  164. package/dist/theme-chalk/radio/radio.scss +0 -171
  165. package/dist/theme-chalk/radio-group/index.scss +0 -31
  166. package/dist/theme-chalk/row/index.scss +0 -30
  167. package/dist/theme-chalk/scrollbar/index.scss +0 -103
  168. package/dist/theme-chalk/select/index.scss +0 -244
  169. package/dist/theme-chalk/select/option-group.scss +0 -54
  170. package/dist/theme-chalk/select/option.scss +0 -63
  171. package/dist/theme-chalk/select/select-dropdown.scss +0 -57
  172. package/dist/theme-chalk/switch/index.scss +0 -273
  173. package/dist/theme-chalk/table/index.scss +0 -714
  174. package/dist/theme-chalk/tabs/index.scss +0 -620
  175. package/dist/theme-chalk/tag/index.scss +0 -360
  176. package/dist/theme-chalk/time-line/_timeline-item.scss +0 -90
  177. package/dist/theme-chalk/time-line/_timeline.scss +0 -50
  178. package/dist/theme-chalk/time-line/index.scss +0 -2
  179. package/dist/theme-chalk/time-picker/index.scss +0 -109
  180. package/dist/theme-chalk/tooltip/index.scss +0 -13
  181. package/dist/theme-chalk/transfer/index.scss +0 -247
  182. package/dist/theme-chalk/transition/index.scss +0 -756
  183. package/dist/theme-chalk/tree/_directory.scss +0 -73
  184. package/dist/theme-chalk/tree/_tree.scss +0 -401
  185. package/dist/theme-chalk/tree/index.scss +0 -2
  186. package/dist/theme-chalk/tree-select/index.scss +0 -25
  187. package/dist/theme-chalk/upload/index.scss +0 -631
@@ -19,7 +19,6 @@ import { createPortal } from 'react-dom';
19
19
  import Transition from "../Transition/Transition";
20
20
  import { PopupManager, addUnit } from "../Util";
21
21
  import { useClassNames, useControlled } from "../hooks";
22
- import { namespace } from "../hooks/prefix";
23
22
  import DialogBody from "./DialogBody";
24
23
  import { DialogContext } from "./DialogContext";
25
24
  import DialogFooter from "./DialogFooter";
@@ -135,13 +134,13 @@ function InternalElDialog(props, ref) {
135
134
  if (isTargetExists || isContainedByPopper) {
136
135
  return;
137
136
  }
138
- if (!closeOnClickModal) {
137
+ if (closeOnClickModal) {
138
+ doClose();
139
+ } else {
139
140
  addClass(dialogRef.current, b('dialog-shake', false));
140
141
  setTimeout(function () {
141
142
  removeClass(dialogRef.current, b('dialog-shake', false));
142
143
  }, 300);
143
- } else if (modal === true) {
144
- doClose();
145
144
  }
146
145
  });
147
146
  }
@@ -165,7 +164,7 @@ function InternalElDialog(props, ref) {
165
164
  });
166
165
  return /*#__PURE__*/React.createElement(DialogContext.Provider, {
167
166
  value: {
168
- backdrop: modal,
167
+ modal: modal,
169
168
  setVisible: setVisible,
170
169
  isControlled: isControlled,
171
170
  doClose: doClose,
@@ -240,7 +239,7 @@ function InternalElDialog(props, ref) {
240
239
  'align-center': alignCenter,
241
240
  fullscreen: fullscreen
242
241
  }), _defineProperty({}, m(_templateObject || (_templateObject = _taggedTemplateLiteral(["center"]))), center)),
243
- style: _objectSpread(_objectSpread({}, props.style), {}, _defineProperty(_defineProperty({}, "--".concat(namespace, "-dialog-width"), fullscreen || classPrefix !== 'dialog' ? '' : addUnit(width)), "--".concat(namespace, "-dialog-margin-top"), addUnit(top))),
242
+ style: _objectSpread(_objectSpread({}, props.style), {}, _defineProperty(_defineProperty({}, '--el-dialog-width', fullscreen || classPrefix !== 'dialog' ? '' : addUnit(width)), '--el-dialog-margin-top', addUnit(top))),
244
243
  ref: dialogRef
245
244
  }, /*#__PURE__*/React.createElement(DialogHeader, {
246
245
  ref: headerRef,
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  interface DialogContentProps {
3
3
  /** 当设置为 true,Dialog 打开时会显示背景,点击背景会关闭 Dialog,如果不想关闭 Dialog,可以设置为 'static' */
4
- backdrop: boolean | 'static';
4
+ modal: boolean;
5
5
  setVisible: (visible: boolean) => void;
6
6
  /** 隐藏时的回调函数 */
7
7
  doClose: () => void;
@@ -1,7 +1,7 @@
1
1
  import noop from 'lodash/noop';
2
2
  import { createContext } from 'react';
3
3
  export var DialogContext = /*#__PURE__*/createContext({
4
- backdrop: true,
4
+ modal: true,
5
5
  setVisible: noop,
6
6
  doClose: noop,
7
7
  isControlled: false,
@@ -1,7 +1,6 @@
1
1
  import React, { RefObject } from 'react';
2
2
  import DrawerBody from './DrawerBody';
3
3
  import DrawerFooter from './DrawerFooter';
4
- import DrawerHeader from './DrawerHeader';
5
4
  import { DrawerProps } from './typings';
6
5
  declare const Comp: (props: DrawerProps & {
7
6
  ref?: RefObject<HTMLDivElement> | React.ForwardedRef<HTMLDivElement>;
@@ -9,10 +8,8 @@ declare const Comp: (props: DrawerProps & {
9
8
  type InternalType = typeof Comp;
10
9
  interface CompInterface extends InternalType {
11
10
  displayName?: string;
12
- defaultProps?: Partial<DrawerProps>;
13
- Header: typeof DrawerHeader;
14
- Body: typeof DrawerBody;
15
- Footer: typeof DrawerFooter;
11
+ body: typeof DrawerBody;
12
+ footer: typeof DrawerFooter;
16
13
  }
17
14
  declare const Drawer: CompInterface;
18
15
  export default Drawer;
@@ -14,10 +14,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
14
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
15
  import classNames from 'classnames';
16
16
  import { addClass, removeClass } from 'dom-lib';
17
- import React, { forwardRef, useEffect, useRef } from 'react';
17
+ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
18
18
  import { createPortal } from 'react-dom';
19
19
  import Transition from "../Transition/Transition";
20
- import { PopupManager, mergeDefaultProps } from "../Util";
20
+ import { PopupManager, addUnit, mergeDefaultProps } from "../Util";
21
21
  import { useClassNames, useControlled } from "../hooks";
22
22
  import { namespace } from "../hooks/prefix";
23
23
  import DrawerBody from "./DrawerBody";
@@ -26,26 +26,46 @@ import DrawerFooter from "./DrawerFooter";
26
26
  import DrawerHeader from "./DrawerHeader";
27
27
  function InternalComp(props, ref) {
28
28
  props = mergeDefaultProps({
29
- placement: 'right',
30
- backdrop: true,
31
- size: 'small'
29
+ direction: 'right',
30
+ modal: true,
31
+ closeOnClickModal: true,
32
+ withHeader: true,
33
+ lockScroll: true,
34
+ size: '30%'
32
35
  }, props);
33
36
  var _props = props,
34
- backdrop = _props.backdrop,
37
+ modal = _props.modal,
38
+ closeOnClickModal = _props.closeOnClickModal,
39
+ title = _props.title,
40
+ withHeader = _props.withHeader,
35
41
  size = _props.size,
36
- placement = _props.placement,
42
+ direction = _props.direction,
37
43
  children = _props.children,
38
- onClose = _props.onClose,
44
+ close = _props.close,
45
+ beforeClose = _props.beforeClose,
46
+ showClose = _props.showClose,
47
+ border = _props.border,
39
48
  _props$classPrefix = _props.classPrefix,
40
- classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix;
49
+ classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
50
+ lockScroll = _props.lockScroll;
41
51
  var _useClassNames = useClassNames(classPrefix),
42
52
  b = _useClassNames.b,
43
53
  wb = _useClassNames.wb;
44
54
  var _useControlled = useControlled(props.visible, props.defaultVisible),
45
- _useControlled2 = _slicedToArray(_useControlled, 3),
55
+ _useControlled2 = _slicedToArray(_useControlled, 2),
46
56
  visible = _useControlled2[0],
47
- setVisible = _useControlled2[1],
48
- isControlled = _useControlled2[2];
57
+ setVisible = _useControlled2[1];
58
+ var sizeStyle = useMemo(function () {
59
+ if (['left', 'right'].includes(direction)) {
60
+ return {
61
+ '--el-drawer-width': addUnit(size)
62
+ };
63
+ } else if (['top', 'bottom'].includes(direction)) {
64
+ return {
65
+ '--el-drawer-height': addUnit(size)
66
+ };
67
+ }
68
+ }, [direction, size]);
49
69
 
50
70
  // 模态框容器div
51
71
  var wrapperRef = useRef(null);
@@ -53,11 +73,36 @@ function InternalComp(props, ref) {
53
73
  var drawerRef = useRef(null);
54
74
  // 遮罩div
55
75
  var backdropRef = useRef(null);
76
+ var _useState = useState({
77
+ modal: 1,
78
+ drawer: 1
79
+ }),
80
+ _useState2 = _slicedToArray(_useState, 2),
81
+ zIndex = _useState2[0],
82
+ setZIndex = _useState2[1];
83
+ var doClose = useCallback(function () {
84
+ if (beforeClose) {
85
+ beforeClose === null || beforeClose === void 0 || beforeClose(function (value) {
86
+ if (value) {
87
+ return;
88
+ }
89
+ setVisible(false);
90
+ close === null || close === void 0 || close();
91
+ });
92
+ } else {
93
+ setVisible(false);
94
+ close === null || close === void 0 || close();
95
+ }
96
+ }, [beforeClose, close, setVisible]);
56
97
 
57
98
  /**关闭对话框 */
58
99
  useEffect(function () {
59
100
  if (visible) {
60
101
  var _ref$current;
102
+ setZIndex({
103
+ modal: PopupManager.nextZIndex(),
104
+ drawer: PopupManager.nextZIndex()
105
+ });
61
106
  var mousedown;
62
107
  var shadowRef = (_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
63
108
  shadowRef === null || shadowRef === void 0 || shadowRef.addEventListener('mousedown', function (e) {
@@ -72,10 +117,9 @@ function InternalComp(props, ref) {
72
117
  if (isTargetExists || isContainedByPopper) {
73
118
  return;
74
119
  }
75
- if (backdrop === true) {
76
- setVisible(false);
77
- onClose === null || onClose === void 0 || onClose();
78
- } else if (backdrop === 'static') {
120
+ if (closeOnClickModal) {
121
+ doClose();
122
+ } else {
79
123
  addClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
80
124
  setTimeout(function () {
81
125
  removeClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
@@ -83,15 +127,12 @@ function InternalComp(props, ref) {
83
127
  }
84
128
  });
85
129
  }
86
- }, [b, backdrop, onClose, ref, setVisible, visible]);
130
+ }, [b, closeOnClickModal, modal, close, ref, setVisible, visible, doClose]);
87
131
  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
88
132
  value: {
89
- backdrop: backdrop,
90
- setVisible: setVisible,
91
- isControlled: isControlled,
92
- onClose: onClose
133
+ doClose: doClose
93
134
  }
94
- }, backdrop && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
135
+ }, modal && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
95
136
  nodeRef: backdropRef,
96
137
  visible: visible,
97
138
  transitionAppear: true,
@@ -108,7 +149,7 @@ function InternalComp(props, ref) {
108
149
  }, /*#__PURE__*/React.createElement("div", {
109
150
  className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["backdrop"]))), "".concat(namespace, "-anim-fade")),
110
151
  style: {
111
- zIndex: PopupManager.nextZIndex()
152
+ zIndex: zIndex.modal
112
153
  },
113
154
  ref: backdropRef
114
155
  })), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
@@ -121,38 +162,60 @@ function InternalComp(props, ref) {
121
162
  var _props$onOpen, _props2, _props$onEnter, _props3;
122
163
  (_props$onOpen = (_props2 = props).onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(_props2);
123
164
  (_props$onEnter = (_props3 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props3);
165
+ if (lockScroll) {
166
+ addClass(document.body, b('popup-parent--hidden', false));
167
+ }
168
+ },
169
+ afterEnter: function afterEnter() {
170
+ var _props$afterEnter, _props4, _props$onOpened, _props5;
171
+ (_props$afterEnter = (_props4 = props).afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(_props4);
172
+ (_props$onOpened = (_props5 = props).onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(_props5);
124
173
  },
125
174
  beforeLeave: function beforeLeave() {
126
- var _props$beforeLeave, _props4;
175
+ var _props$beforeLeave, _props6;
127
176
  removeClass(drawerRef.current, "".concat(namespace, "-anim-slide-in"));
128
177
  addClass(drawerRef.current, "".concat(namespace, "-anim-slide-out"));
129
- (_props$beforeLeave = (_props4 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props4);
178
+ (_props$beforeLeave = (_props6 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props6);
179
+ },
180
+ onLeave: function onLeave() {
181
+ var _props$onClose, _props7, _props$onLeave, _props8;
182
+ (_props$onClose = (_props7 = props).onClose) === null || _props$onClose === void 0 || _props$onClose.call(_props7);
183
+ (_props$onLeave = (_props8 = props).onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(_props8);
184
+ },
185
+ afterLeave: function afterLeave() {
186
+ var _props$afterLeave, _props9, _props$onClosed, _props10;
187
+ (_props$afterLeave = (_props9 = props).afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(_props9);
188
+ (_props$onClosed = (_props10 = props).onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(_props10);
189
+ if (lockScroll) {
190
+ removeClass(document.body, b('popup-parent--hidden', false));
191
+ }
130
192
  },
131
- onLeave: props.onLeave,
132
- afterLeave: props.afterLeave,
133
193
  duration: 300
134
194
  }, /*#__PURE__*/React.createElement("div", {
135
195
  className: classNames(b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), props.className),
136
196
  style: _objectSpread(_objectSpread({}, props.style), {}, {
137
- zIndex: PopupManager.nextZIndex()
197
+ zIndex: zIndex.drawer
138
198
  }),
139
199
  ref: ref || wrapperRef
140
200
  }, /*#__PURE__*/React.createElement("div", {
141
- className: classNames(wb(size, placement), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(placement)),
142
- style: {
201
+ className: classNames(wb(direction), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(direction)),
202
+ style: _objectSpread({
143
203
  display: 'block'
144
- },
204
+ }, sizeStyle),
145
205
  ref: drawerRef
146
206
  }, /*#__PURE__*/React.createElement("div", {
147
207
  className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["dialog"])))
148
208
  }, /*#__PURE__*/React.createElement("div", {
149
209
  className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
150
- }, children))))), document.body));
210
+ }, withHeader ? /*#__PURE__*/React.createElement(DrawerHeader, {
211
+ classPrefix: classPrefix,
212
+ showClose: showClose,
213
+ border: border
214
+ }, title) : null, children))))), document.body));
151
215
  }
152
216
  var Comp = /*#__PURE__*/forwardRef(InternalComp);
153
217
  var Drawer = Comp;
154
- Drawer.Header = DrawerHeader;
155
- Drawer.Body = DrawerBody;
156
- Drawer.Footer = DrawerFooter;
218
+ Drawer.body = DrawerBody;
219
+ Drawer.footer = DrawerFooter;
157
220
  Drawer.displayName = 'Drawer';
158
221
  export default Drawer;
@@ -5,9 +5,7 @@ import Scrollbar from "../Scrollbar/Scrollbar";
5
5
  import { useClassNames } from "../hooks";
6
6
  var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
7
7
  var _props$classPrefix = props.classPrefix,
8
- classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix,
9
- _props$padding = props.padding,
10
- padding = _props$padding === void 0 ? '0 20px' : _props$padding;
8
+ classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix;
11
9
  var _useClassNames = useClassNames(classPrefix),
12
10
  b = _useClassNames.b;
13
11
  var scrollbarInstance = useRef(null);
@@ -22,17 +20,13 @@ var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
22
20
  };
23
21
  // eslint-disable-next-line react-hooks/exhaustive-deps
24
22
  }, []);
25
- return /*#__PURE__*/React.createElement("div", {
23
+ return /*#__PURE__*/React.createElement(Scrollbar, {
24
+ ref: scrollbarInstance
25
+ }, /*#__PURE__*/React.createElement("div", {
26
26
  className: classNames(b(), props.className),
27
27
  ref: ref,
28
28
  style: props.style
29
- }, /*#__PURE__*/React.createElement(Scrollbar, {
30
- ref: scrollbarInstance
31
- }, /*#__PURE__*/React.createElement("div", {
32
- style: {
33
- padding: padding
34
- }
35
- }, props.children)));
29
+ }, props.children));
36
30
  });
37
- DrawerBody.displayName = 'DrawerBody';
31
+ DrawerBody.displayName = 'ElDrawerBody';
38
32
  export default DrawerBody;
@@ -1,19 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  interface DrawerContentProps {
3
- /** 当设置为 true,Drawer 打开时会显示背景,点击背景会关闭 Drawer,如果不想关闭 Drawer,可以设置为 'static' */
4
- backdrop: boolean | 'static';
5
- setVisible: (visible: boolean) => void;
6
3
  /** 隐藏时的回调函数 */
7
- onClose: () => void;
8
- /** 是否可控 */
9
- isControlled: boolean;
4
+ doClose: () => void;
10
5
  }
11
- /**
12
- * @author Parker
13
- * @CreateTime 2022/3/20下午3:10:40
14
- * @LastEditor Parker
15
- * @ModifyTime 2022/5/3 22:55:13
16
- * @Description 模态框上下文
17
- */
18
6
  export declare const DrawerContext: import("react").Context<DrawerContentProps>;
19
7
  export {};
@@ -1,15 +1,5 @@
1
1
  import noop from 'lodash/noop';
2
2
  import { createContext } from 'react';
3
- /**
4
- * @author Parker
5
- * @CreateTime 2022/3/20下午3:10:40
6
- * @LastEditor Parker
7
- * @ModifyTime 2022/5/3 22:55:13
8
- * @Description 模态框上下文
9
- */
10
3
  export var DrawerContext = /*#__PURE__*/createContext({
11
- backdrop: true,
12
- setVisible: noop,
13
- onClose: noop,
14
- isControlled: false
4
+ doClose: noop
15
5
  });
@@ -1,14 +1,13 @@
1
1
  var _templateObject, _templateObject2, _templateObject3;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import classNames from 'classnames';
4
- import React, { useCallback, useContext } from 'react';
4
+ import React, { useContext } from 'react';
5
5
  import Icon from "../Icon/Icon";
6
6
  import { useClassNames } from "../hooks";
7
7
  import { DrawerContext } from "./DrawerContext";
8
8
  var DrawerHeader = function DrawerHeader(props) {
9
- var _props$closeButton = props.closeButton,
10
- closeButton = _props$closeButton === void 0 ? true : _props$closeButton,
11
- onCloseHeader = props.onClose,
9
+ var _props$showClose = props.showClose,
10
+ closeButton = _props$showClose === void 0 ? true : _props$showClose,
12
11
  _props$classPrefix = props.classPrefix,
13
12
  classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
14
13
  border = props.border;
@@ -16,19 +15,7 @@ var DrawerHeader = function DrawerHeader(props) {
16
15
  b = _useClassNames.b,
17
16
  is = _useClassNames.is;
18
17
  var _useContext = useContext(DrawerContext),
19
- setVisible = _useContext.setVisible,
20
- isControlled = _useContext.isControlled,
21
- onClose = _useContext.onClose;
22
-
23
- /**关闭对话框 */
24
- var handleCloseDialog = useCallback(function () {
25
- if (isControlled) {
26
- onClose === null || onClose === void 0 || onClose();
27
- onCloseHeader === null || onCloseHeader === void 0 || onCloseHeader();
28
- } else {
29
- setVisible(false);
30
- }
31
- }, [isControlled, onClose, onCloseHeader, setVisible]);
18
+ doClose = _useContext.doClose;
32
19
  return /*#__PURE__*/React.createElement("div", {
33
20
  className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))), props.className, is({
34
21
  border: border
@@ -39,7 +26,7 @@ var DrawerHeader = function DrawerHeader(props) {
39
26
  style: props.titleStyle
40
27
  }, props.children), closeButton && /*#__PURE__*/React.createElement("span", {
41
28
  className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["header-close"]))),
42
- onClick: handleCloseDialog
29
+ onClick: doClose
43
30
  }, /*#__PURE__*/React.createElement(Icon, {
44
31
  name: 'xmark'
45
32
  })));
@@ -1,26 +1,48 @@
1
1
  import React from 'react';
2
2
  import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
3
- export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps {
3
+ export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps<'--el-drawer-width' | '--el-drawer-height' | '--el-drawer-margin-top' | '--el-drawer-bg-color' | '--el-drawer-box-shadow' | '--el-drawer-title-font-size' | '--el-drawer-content-font-size' | '--el-drawer-font-line-height' | '--el-drawer-padding-primary' | '--el-drawer-border-radius'> {
4
4
  /** 是否显示抽屉(可控) */
5
5
  visible?: boolean;
6
6
  /** 默认是否显示抽屉 */
7
7
  defaultVisible?: boolean;
8
8
  /** 当设置为 true,Drawer 打开时会显示背景,点击背景会关闭 Drawer,如果不想关闭 Drawer,可以设置为 'static' */
9
- backdrop?: boolean | 'static';
9
+ modal?: boolean;
10
+ /** 是否可以通过点击 modal 关闭 Dialog */
11
+ closeOnClickModal?: boolean;
12
+ /** 是否在 Dialog 出现时将 body 滚动锁定 */
13
+ lockScroll?: boolean;
10
14
  /** 应用于 backdrop DOM 节点的 css class */
11
- backdropClassName?: string;
15
+ modalClassName?: string;
16
+ /** Dialog 对话框 Dialog 的标题, 也可通过ElDialog.header传入 */
17
+ title?: string | React.ReactElement;
18
+ /** 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title 属性不生效 */
19
+ withHeader?: boolean;
20
+ /** 当设置为 true, 显示关闭按钮 */
21
+ showClose?: boolean;
22
+ /** 标题是否有边框 */
23
+ border?: boolean;
12
24
  /** 设置 Drawer 尺寸 */
13
- size?: 'full' | 'large' | 'md' | 'small' | 'xs';
25
+ size?: number | string;
14
26
  /** 设置 Drawer 显示的位置 */
15
- placement?: 'top' | 'bottom' | 'right' | 'left';
16
- /** 显示时的回调函数 */
27
+ direction?: 'top' | 'bottom' | 'right' | 'left';
28
+ /** Dialog 打开的回调 */
17
29
  onOpen?: () => void;
18
- /** 隐藏时的回调函数 */
30
+ /** Dialog 打开动画结束时的回调 */
31
+ onOpened?: () => void;
32
+ /** Dialog 关闭的回调 */
19
33
  onClose?: () => void;
34
+ /** Dialog 关闭动画结束时的回调 */
35
+ onClosed?: () => void;
36
+ /** 关闭弹窗函数 */
37
+ close: () => void;
38
+ /** 关闭前的回调,会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
39
+ beforeClose?: DialogBeforeCloseFn;
20
40
  }
41
+ type DoneFn = (cancel?: boolean) => void;
42
+ export type DialogBeforeCloseFn = (done: DoneFn) => void;
21
43
  export interface DrawerHeaderProps extends BaseProps, NativeProps {
22
44
  /** 当设置为 true, 显示关闭按钮 */
23
- closeButton?: boolean;
45
+ showClose?: boolean;
24
46
  /** 标题是否有边框 */
25
47
  border?: boolean;
26
48
  /** 组件 CSS 类的前缀 */
@@ -33,10 +55,9 @@ export interface DrawerHeaderProps extends BaseProps, NativeProps {
33
55
  export interface DrawerBodyProps extends BaseProps, NativeProps {
34
56
  /** 组件 CSS 类的前缀 */
35
57
  classPrefix?: string;
36
- /** 内容区域padding */
37
- padding?: string | number;
38
58
  }
39
59
  export interface DrawerFooterProps extends BaseProps, NativeProps {
40
60
  /** 组件 CSS 类的前缀 */
41
61
  classPrefix?: string;
42
62
  }
63
+ export {};
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { InputNumberProps, InputNumberRef } from './typings';
3
- declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputNumberProps<import("./typings").ValueType> & React.RefAttributes<InputNumberRef>>>;
4
- export default _default;
3
+ declare const InputNumber: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputNumberProps<import("./typings").ValueType> & React.RefAttributes<InputNumberRef>>>;
4
+ export default InputNumber;
@@ -25,7 +25,7 @@ import Icon from "../Icon/Icon";
25
25
  import Input from "../Input/Input";
26
26
  import { floatAdd, floatSub, formatNumber, isEmpty, isNotEmpty, mergeDefaultProps } from "../Util";
27
27
  import { partitionHTMLProps, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
28
- var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
28
+ var InputNumber = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
29
29
  props = mergeDefaultProps({
30
30
  step: 1,
31
31
  precision: 0,
@@ -250,6 +250,6 @@ var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
250
250
  }, []),
251
251
  ref: inputRef
252
252
  }, omit(htmlInputProps, ['disabled', 'size', 'onInput', 'onKeyDown', 'onKeyUp', 'size', 'onChange', 'style', 'className', 'type', 'name', 'prefix', 'readOnly', 'maxLength', 'minLength']))));
253
- });
253
+ }));
254
254
  InputNumber.displayName = 'ElInputNumber';
255
- export default /*#__PURE__*/memo(InputNumber);
255
+ export default InputNumber;
@@ -1,9 +1,14 @@
1
- import { FC } from 'react';
1
+ import { FC, RefObject } from 'react';
2
2
  import { LoadingProps, LoadingService } from './typings';
3
+ export declare class Main {
4
+ ref: RefObject<any>;
5
+ root: any;
6
+ constructor(props: LoadingProps);
7
+ render(props: LoadingProps): void;
8
+ }
3
9
  declare const Loading: CompInterface;
4
10
  interface CompInterface extends FC<LoadingProps> {
5
11
  displayName?: string;
6
- defaultProps?: Partial<LoadingProps>;
7
12
  service: LoadingService;
8
13
  }
9
14
  export default Loading;