@qsxy/element-plus-react 1.0.0-next.13 → 1.0.0-next.16

package/dist/Drawer/Drawer.js

@@ -14,10 +14,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import { addClass, removeClass } from 'dom-lib';
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Transition from "../Transition/Transition";
-import { PopupManager, mergeDefaultProps } from "../Util";
+import { PopupManager, addUnit, mergeDefaultProps } from "../Util";
 import { useClassNames, useControlled } from "../hooks";
 import { namespace } from "../hooks/prefix";
 import DrawerBody from "./DrawerBody";
@@ -26,26 +26,46 @@ import DrawerFooter from "./DrawerFooter";
 import DrawerHeader from "./DrawerHeader";
 function InternalComp(props, ref) {
   props = mergeDefaultProps({
-    placement: 'right',
-    backdrop: true,
-    size: 'small'
+    direction: 'right',
+    modal: true,
+    closeOnClickModal: true,
+    withHeader: true,
+    lockScroll: true,
+    size: '30%'
   }, props);
   var _props = props,
-    backdrop = _props.backdrop,
+    modal = _props.modal,
+    closeOnClickModal = _props.closeOnClickModal,
+    title = _props.title,
+    withHeader = _props.withHeader,
     size = _props.size,
-    placement = _props.placement,
+    direction = _props.direction,
     children = _props.children,
-    onClose = _props.onClose,
+    close = _props.close,
+    beforeClose = _props.beforeClose,
+    showClose = _props.showClose,
+    border = _props.border,
     _props$classPrefix = _props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix;
+    classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
+    lockScroll = _props.lockScroll;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
     wb = _useClassNames.wb;
   var _useControlled = useControlled(props.visible, props.defaultVisible),
-    _useControlled2 = _slicedToArray(_useControlled, 3),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
     visible = _useControlled2[0],
-    setVisible = _useControlled2[1],
-    isControlled = _useControlled2[2];
+    setVisible = _useControlled2[1];
+  var sizeStyle = useMemo(function () {
+    if (['left', 'right'].includes(direction)) {
+      return {
+        '--el-drawer-width': addUnit(size)
+      };
+    } else if (['top', 'bottom'].includes(direction)) {
+      return {
+        '--el-drawer-height': addUnit(size)
+      };
+    }
+  }, [direction, size]);
 
   // 模态框容器div
   var wrapperRef = useRef(null);
@@ -53,11 +73,36 @@ function InternalComp(props, ref) {
   var drawerRef = useRef(null);
   // 遮罩div
   var backdropRef = useRef(null);
+  var _useState = useState({
+      modal: 1,
+      drawer: 1
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    zIndex = _useState2[0],
+    setZIndex = _useState2[1];
+  var doClose = useCallback(function () {
+    if (beforeClose) {
+      beforeClose === null || beforeClose === void 0 || beforeClose(function (value) {
+        if (value) {
+          return;
+        }
+        setVisible(false);
+        close === null || close === void 0 || close();
+      });
+    } else {
+      setVisible(false);
+      close === null || close === void 0 || close();
+    }
+  }, [beforeClose, close, setVisible]);
 
   /**关闭对话框 */
   useEffect(function () {
     if (visible) {
       var _ref$current;
+      setZIndex({
+        modal: PopupManager.nextZIndex(),
+        drawer: PopupManager.nextZIndex()
+      });
       var mousedown;
       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;
       shadowRef === null || shadowRef === void 0 || shadowRef.addEventListener('mousedown', function (e) {
@@ -72,10 +117,9 @@ function InternalComp(props, ref) {
         if (isTargetExists || isContainedByPopper) {
           return;
         }
-        if (backdrop === true) {
-          setVisible(false);
-          onClose === null || onClose === void 0 || onClose();
-        } else if (backdrop === 'static') {
+        if (closeOnClickModal) {
+          doClose();
+        } else {
           addClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
           setTimeout(function () {
             removeClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
@@ -83,15 +127,12 @@ function InternalComp(props, ref) {
         }
       });
     }
-  }, [b, backdrop, onClose, ref, setVisible, visible]);
+  }, [b, closeOnClickModal, modal, close, ref, setVisible, visible, doClose]);
   return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
     value: {
-      backdrop: backdrop,
-      setVisible: setVisible,
-      isControlled: isControlled,
-      onClose: onClose
+      doClose: doClose
     }
-  }, backdrop && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
+  }, modal && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
     nodeRef: backdropRef,
     visible: visible,
     transitionAppear: true,
@@ -108,7 +149,7 @@ function InternalComp(props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["backdrop"]))), "".concat(namespace, "-anim-fade")),
     style: {
-      zIndex: PopupManager.nextZIndex()
+      zIndex: zIndex.modal
     },
     ref: backdropRef
   })), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
@@ -121,38 +162,60 @@ function InternalComp(props, ref) {
       var _props$onOpen, _props2, _props$onEnter, _props3;
       (_props$onOpen = (_props2 = props).onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(_props2);
       (_props$onEnter = (_props3 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props3);
+      if (lockScroll) {
+        addClass(document.body, b('popup-parent--hidden', false));
+      }
+    },
+    afterEnter: function afterEnter() {
+      var _props$afterEnter, _props4, _props$onOpened, _props5;
+      (_props$afterEnter = (_props4 = props).afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(_props4);
+      (_props$onOpened = (_props5 = props).onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(_props5);
     },
     beforeLeave: function beforeLeave() {
-      var _props$beforeLeave, _props4;
+      var _props$beforeLeave, _props6;
       removeClass(drawerRef.current, "".concat(namespace, "-anim-slide-in"));
       addClass(drawerRef.current, "".concat(namespace, "-anim-slide-out"));
-      (_props$beforeLeave = (_props4 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props4);
+      (_props$beforeLeave = (_props6 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props6);
+    },
+    onLeave: function onLeave() {
+      var _props$onClose, _props7, _props$onLeave, _props8;
+      (_props$onClose = (_props7 = props).onClose) === null || _props$onClose === void 0 || _props$onClose.call(_props7);
+      (_props$onLeave = (_props8 = props).onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(_props8);
+    },
+    afterLeave: function afterLeave() {
+      var _props$afterLeave, _props9, _props$onClosed, _props10;
+      (_props$afterLeave = (_props9 = props).afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(_props9);
+      (_props$onClosed = (_props10 = props).onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(_props10);
+      if (lockScroll) {
+        removeClass(document.body, b('popup-parent--hidden', false));
+      }
     },
-    onLeave: props.onLeave,
-    afterLeave: props.afterLeave,
     duration: 300
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), props.className),
     style: _objectSpread(_objectSpread({}, props.style), {}, {
-      zIndex: PopupManager.nextZIndex()
+      zIndex: zIndex.drawer
     }),
     ref: ref || wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(wb(size, placement), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(placement)),
-    style: {
+    className: classNames(wb(direction), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(direction)),
+    style: _objectSpread({
       display: 'block'
-    },
+    }, sizeStyle),
     ref: drawerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["dialog"])))
   }, /*#__PURE__*/React.createElement("div", {
     className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
-  }, children))))), document.body));
+  }, withHeader ? /*#__PURE__*/React.createElement(DrawerHeader, {
+    classPrefix: classPrefix,
+    showClose: showClose,
+    border: border
+  }, title) : null, children))))), document.body));
 }
 var Comp = /*#__PURE__*/forwardRef(InternalComp);
 var Drawer = Comp;
-Drawer.Header = DrawerHeader;
-Drawer.Body = DrawerBody;
-Drawer.Footer = DrawerFooter;
+Drawer.body = DrawerBody;
+Drawer.footer = DrawerFooter;
 Drawer.displayName = 'Drawer';
 export default Drawer;

package/dist/Drawer/DrawerBody.js

@@ -5,9 +5,7 @@ import Scrollbar from "../Scrollbar/Scrollbar";
 import { useClassNames } from "../hooks";
 var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix,
-    _props$padding = props.padding,
-    padding = _props$padding === void 0 ? '0 20px' : _props$padding;
+    classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b;
   var scrollbarInstance = useRef(null);
@@ -22,17 +20,13 @@ var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Scrollbar, {
+    ref: scrollbarInstance
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames(b(), props.className),
     ref: ref,
     style: props.style
-  }, /*#__PURE__*/React.createElement(Scrollbar, {
-    ref: scrollbarInstance
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: padding
-    }
-  }, props.children)));
+  }, props.children));
 });
-DrawerBody.displayName = 'DrawerBody';
+DrawerBody.displayName = 'ElDrawerBody';
 export default DrawerBody;

package/dist/Drawer/DrawerContext.d.ts

@@ -1,19 +1,7 @@
 /// <reference types="react" />
 interface DrawerContentProps {
-    /** 当设置为 true，Drawer 打开时会显示背景，点击背景会关闭 Drawer，如果不想关闭 Drawer，可以设置为 'static' */
-    backdrop: boolean | 'static';
-    setVisible: (visible: boolean) => void;
     /** 隐藏时的回调函数 */
-    onClose: () => void;
-    /** 是否可控 */
-    isControlled: boolean;
+    doClose: () => void;
 }
-/**
- * @author	Parker
- * @CreateTime	2022/3/20下午3:10:40
- * @LastEditor	Parker
- * @ModifyTime	2022/5/3 22:55:13
- * @Description 模态框上下文
- */
 export declare const DrawerContext: import("react").Context<DrawerContentProps>;
 export {};

package/dist/Drawer/DrawerContext.js

@@ -1,15 +1,5 @@
 import noop from 'lodash/noop';
 import { createContext } from 'react';
-/**
- * @author	Parker
- * @CreateTime	2022/3/20下午3:10:40
- * @LastEditor	Parker
- * @ModifyTime	2022/5/3 22:55:13
- * @Description 模态框上下文
- */
 export var DrawerContext = /*#__PURE__*/createContext({
-  backdrop: true,
-  setVisible: noop,
-  onClose: noop,
-  isControlled: false
+  doClose: noop
 });

package/dist/Drawer/DrawerHeader.js

@@ -1,14 +1,13 @@
 var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import classNames from 'classnames';
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import Icon from "../Icon/Icon";
 import { useClassNames } from "../hooks";
 import { DrawerContext } from "./DrawerContext";
 var DrawerHeader = function DrawerHeader(props) {
-  var _props$closeButton = props.closeButton,
-    closeButton = _props$closeButton === void 0 ? true : _props$closeButton,
-    onCloseHeader = props.onClose,
+  var _props$showClose = props.showClose,
+    closeButton = _props$showClose === void 0 ? true : _props$showClose,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
     border = props.border;
@@ -16,19 +15,7 @@ var DrawerHeader = function DrawerHeader(props) {
     b = _useClassNames.b,
     is = _useClassNames.is;
   var _useContext = useContext(DrawerContext),
-    setVisible = _useContext.setVisible,
-    isControlled = _useContext.isControlled,
-    onClose = _useContext.onClose;
-
-  /**关闭对话框 */
-  var handleCloseDialog = useCallback(function () {
-    if (isControlled) {
-      onClose === null || onClose === void 0 || onClose();
-      onCloseHeader === null || onCloseHeader === void 0 || onCloseHeader();
-    } else {
-      setVisible(false);
-    }
-  }, [isControlled, onClose, onCloseHeader, setVisible]);
+    doClose = _useContext.doClose;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))), props.className, is({
       border: border
@@ -39,7 +26,7 @@ var DrawerHeader = function DrawerHeader(props) {
     style: props.titleStyle
   }, props.children), closeButton && /*#__PURE__*/React.createElement("span", {
     className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["header-close"]))),
-    onClick: handleCloseDialog
+    onClick: doClose
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'xmark'
   })));

package/dist/Drawer/typings.d.ts

@@ -1,26 +1,48 @@
 import React from 'react';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
-export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps {
+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'> {
     /** 是否显示抽屉（可控） */
     visible?: boolean;
     /** 默认是否显示抽屉 */
     defaultVisible?: boolean;
     /** 当设置为 true，Drawer 打开时会显示背景，点击背景会关闭 Drawer，如果不想关闭 Drawer，可以设置为 'static' */
-    backdrop?: boolean | 'static';
+    modal?: boolean;
+    /** 是否可以通过点击 modal 关闭 Drawer */
+    closeOnClickModal?: boolean;
+    /** 是否在 Drawer 出现时将 body 滚动锁定 */
+    lockScroll?: boolean;
     /** 应用于 backdrop DOM 节点的 css class */
-    backdropClassName?: string;
+    modalClassName?: string;
+    /** Drawer 对话框 Drawer 的标题 */
+    title?: string | React.ReactElement;
+    /** 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title 属性不生效 */
+    withHeader?: boolean;
+    /** 当设置为 true, 显示关闭按钮 */
+    showClose?: boolean;
+    /** 标题是否有边框 */
+    border?: boolean;
     /** 设置 Drawer 尺寸 */
-    size?: 'full' | 'large' | 'md' | 'small' | 'xs';
+    size?: number | string;
     /** 设置 Drawer 显示的位置 */
-    placement?: 'top' | 'bottom' | 'right' | 'left';
-    /** 显示时的回调函数 */
+    direction?: 'top' | 'bottom' | 'right' | 'left';
+    /** Drawer 打开的回调 */
     onOpen?: () => void;
-    /** 隐藏时的回调函数 */
+    /** Drawer 打开动画结束时的回调 */
+    onOpened?: () => void;
+    /** Drawer 关闭的回调 */
     onClose?: () => void;
+    /** Drawer 关闭动画结束时的回调 */
+    onClosed?: () => void;
+    /** 关闭弹窗函数 */
+    close: () => void;
+    /** 关闭前的回调，会暂停 Drawer 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
+    beforeClose?: DrawerBeforeCloseFn;
 }
+type DoneFn = (cancel?: boolean) => void;
+export type DrawerBeforeCloseFn = (done: DoneFn) => void;
 export interface DrawerHeaderProps extends BaseProps, NativeProps {
     /** 当设置为 true, 显示关闭按钮 */
-    closeButton?: boolean;
+    showClose?: boolean;
     /** 标题是否有边框 */
     border?: boolean;
     /** 组件 CSS 类的前缀 */
@@ -33,10 +55,9 @@ export interface DrawerHeaderProps extends BaseProps, NativeProps {
 export interface DrawerBodyProps extends BaseProps, NativeProps {
     /** 组件 CSS 类的前缀 */
     classPrefix?: string;
-    /** 内容区域padding */
-    padding?: string | number;
 }
 export interface DrawerFooterProps extends BaseProps, NativeProps {
     /** 组件 CSS 类的前缀 */
     classPrefix?: string;
 }
+export {};

package/dist/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 var _templateObject;
-var _excluded = ["menu", "classPrefix", "showTimeout", "hideTimeout", "offset", "trigger", "hideOnClick", "onClick", "visiblechange", "onEnter", "onMouseEnter", "onMouseLeave", "disabled"];
+var _excluded = ["menu", "classPrefix", "showTimeout", "hideTimeout", "offset", "trigger", "hideOnClick", "onClick", "onVisiblechange", "onEnter", "onMouseEnter", "onMouseLeave", "disabled"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -34,7 +34,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger = _props.trigger,
     hideOnClick = _props.hideOnClick,
     onClick = _props.onClick,
-    visiblechange = _props.visiblechange,
+    onVisiblechange = _props.onVisiblechange,
     onEnter = _props.onEnter,
     onMouseEnter = _props.onMouseEnter,
     onMouseLeave = _props.onMouseLeave,
@@ -59,14 +59,14 @@ var Dropdown = /*#__PURE__*/forwardRef(function (props, ref) {
   /** 显示 */
   var handleMouseEnter = useCallback(function (event) {
     onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event);
-    visiblechange === null || visiblechange === void 0 || visiblechange(true);
-  }, [onMouseEnter, visiblechange]);
+    onVisiblechange === null || onVisiblechange === void 0 || onVisiblechange(true);
+  }, [onMouseEnter, onVisiblechange]);
 
   /** 隐藏 */
   var handleMouseLeave = useCallback(function (event) {
     onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event);
-    visiblechange === null || visiblechange === void 0 || visiblechange(false);
-  }, [onMouseLeave, visiblechange]);
+    onVisiblechange === null || onVisiblechange === void 0 || onVisiblechange(false);
+  }, [onMouseLeave, onVisiblechange]);
   useImperativeHandle(ref, function () {
     return {
       ref: containerRef,
@@ -101,5 +101,5 @@ var Dropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     unmountOnExit: true
   }, popperProps, transitionProps)));
 });
-Dropdown.displayName = 'Dropdown';
+Dropdown.displayName = 'ElDropdown';
 export default Dropdown;

package/dist/Dropdown/DropdownItem.js

@@ -38,5 +38,5 @@ var DropdownItem = function DropdownItem(props) {
     }
   }, props.children));
 };
-DropdownItem.displayName = 'DropdownItem';
+DropdownItem.displayName = 'ElDropdownItem';
 export default DropdownItem;

package/dist/Dropdown/DropdownMenu.d.ts

@@ -1,4 +1,7 @@
-import { FC } from 'react';
+import React from 'react';
 import { DropdownMenuProps } from './typings';
-declare const DropdownMenu: FC<DropdownMenuProps>;
+declare const DropdownMenu: {
+    (props: DropdownMenuProps): React.JSX.Element;
+    displayName: string;
+};
 export default DropdownMenu;

package/dist/Dropdown/DropdownMenu.js

@@ -8,7 +8,8 @@ import { TooltipContext } from "../Tooltip/TooltipContext";
 import { useClassNames } from "../hooks";
 var DropdownMenu = function DropdownMenu(props) {
   var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix;
+    classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,
+    maxHeight = props.maxHeight;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
     e = _useClassNames.e;
@@ -17,7 +18,8 @@ var DropdownMenu = function DropdownMenu(props) {
     onMouseLeave = _useContext.onMouseLeave,
     trigger = _useContext.trigger;
   return /*#__PURE__*/React.createElement(Scrollbar, {
-    viewClass: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["list"])))
+    viewClass: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["list"]))),
+    height: maxHeight
   }, /*#__PURE__*/React.createElement("ul", {
     onMouseEnter: trigger === 'hover' ? onMouseEnter : noop,
     onMouseLeave: trigger === 'hover' ? onMouseLeave : noop,
@@ -25,5 +27,5 @@ var DropdownMenu = function DropdownMenu(props) {
     style: props.style
   }, props.children));
 };
-DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenu.displayName = 'ElDropdownMenu';
 export default DropdownMenu;

package/dist/Dropdown/typings.d.ts

@@ -24,10 +24,12 @@ export interface DropdownProps extends BaseProps<React.ReactElement>, NativeProp
     /** 点击菜单项触发的事件回调 */
     onClick?: (command: string | number | object) => void;
     /** 下拉框出现/隐藏时触发: 出现则为 true，隐藏则为 false */
-    visiblechange?: (visible: boolean) => void;
+    onVisiblechange?: (visible: boolean) => void;
 }
 export interface DropdownMenuProps extends BaseProps, NativeProps {
     classPrefix?: string;
+    /** 菜单最大高度 */
+    maxHeight?: number;
 }
 /** Dropdown-Item 属性 */
 export interface DropdownItemProps extends BaseProps, NativeProps {

package/dist/MessageBox/MessageBox.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var _excluded = ["title", "message", "type", "icon", "width", "callback", "showClose", "beforeClose", "showCancelButton", "showConfirmButton", "cancelButtonText", "cancelButtonClass", "confirmButtonClass", "buttonSize", "buttonPosition", "overflow", "showInput", "inputType", "inputPlaceholder", "inputPattern", "inputErrorMessage", "inputValidator", "distinguishCancelAndClose", "classPrefix", "className", "style", "padding"];
+var _excluded = ["title", "message", "type", "icon", "width", "callback", "showClose", "beforeClose", "showCancelButton", "showConfirmButton", "cancelButtonText", "cancelButtonClass", "confirmButtonClass", "buttonSize", "buttonPosition", "draggable", "overflow", "showInput", "inputType", "inputPlaceholder", "inputPattern", "inputErrorMessage", "inputValidator", "distinguishCancelAndClose", "classPrefix", "className", "style", "padding", "roundButton"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -51,6 +51,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     buttonSize = options.buttonSize,
     _options$buttonPositi = options.buttonPosition,
     buttonPosition = _options$buttonPositi === void 0 ? 'right' : _options$buttonPositi,
+    draggable = options.draggable,
     overflow = options.overflow,
     showInput = options.showInput,
     inputType = options.inputType,
@@ -64,6 +65,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     className = options.className,
     style = options.style,
     padding = options.padding,
+    roundButton = options.roundButton,
     rest = _objectWithoutProperties(options, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     e = _useClassNames.e,
@@ -220,6 +222,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     ,
     style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, "--".concat(namespace, "-messagebox-width"), addUnit(width))),
     modal: true,
+    draggable: draggable,
     overflow: overflow,
     showClose: showClose,
     title: title,
@@ -252,6 +255,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
   }, showCancelButton && /*#__PURE__*/React.createElement(Button, {
     className: cancelButtonClass,
     size: buttonSize,
+    round: roundButton,
     onClick: function onClick() {
       return handleAction('cancel');
     }
@@ -259,6 +263,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     className: confirmButtonClass,
     type: "primary",
     size: buttonSize,
+    round: roundButton,
     loading: confirmButtonLoading,
     onClick: function onClick() {
       return handleAction('confirm');

package/dist/MessageBox/index.d.ts

@@ -9,7 +9,7 @@ export declare const MessageBox: {
      * @param options 其他设置项
      * @returns
      */
-    alert: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<Action>;
+    alert: (message: string | React.ReactElement, title?: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<Action>;
     /**
      * 确认消息
      * @param message 消息内容
@@ -17,7 +17,7 @@ export declare const MessageBox: {
      * @param options 其他设置项
      * @returns
      */
-    confirm: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<Action>;
-    prompt: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<MessageBoxInputData>;
+    confirm: (message: string | React.ReactElement, title?: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<Action>;
+    prompt: (message: string | React.ReactElement, title?: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<MessageBoxInputData>;
 };
 export type { Action as MessageBoxAction, MessageBoxMethod, MessageBoxProps, MessageBoxRef } from './typings';

package/dist/Notification/Notification.js

@@ -1,5 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -144,12 +146,13 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("div", {
     ref: notificationRef,
-    className: classNames(b(), position.indexOf('right') > 1 ? 'right' : 'left'),
-    style: _defineProperty(_defineProperty({}, verticalProperty, offset), "zIndex", PopupManager.nextZIndex())
+    className: classNames(b(), position.indexOf('right') > 1 ? 'right' : 'left', props.className),
+    style: _objectSpread(_defineProperty(_defineProperty({}, verticalProperty, offset), "zIndex", PopupManager.nextZIndex()), props.style)
     // 鼠标悬浮停止自动关闭
     ,
     onMouseEnter: clearTimer,
-    onMouseLeave: startTimer
+    onMouseLeave: startTimer,
+    onClick: props.onClick
   }, (type || iconClass) && /*#__PURE__*/React.createElement("i", {
     className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"]))), typeClass, iconClass)
   }), /*#__PURE__*/React.createElement("div", {

package/dist/Notification/index.d.ts

@@ -1,12 +1,4 @@
 import type { INotification, NotificationRef, Position } from './typings';
-/**
- * 通知组件
- * @author	Parker
- * @CreateTime	2022/3/10 12:45:48
- * @LastEditor	Parker
- * @ModifyTime	2022/5/3 13:43:28
- * @Description	Element Plus 通知组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
- */
 export declare const Notification: INotification;
 /**
  *

package/dist/Notification/index.js

@@ -16,15 +16,6 @@ var notifications = {
 // the gap size between each notification
 var GAP_SIZE = 16;
 var seed = 1;
-
-/**
- * 通知组件
- * @author	Parker
- * @CreateTime	2022/3/10 12:45:48
- * @LastEditor	Parker
- * @ModifyTime	2022/5/3 13:43:28
- * @Description	Element Plus 通知组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
- */
 export var Notification = function Notification(options) {
   var _ref$current, _ref$current2;
   var position = options.position || 'top-right';