@qsxy/element-plus-react 1.0.2 → 2.0.0

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", "draggable", "overflow", "showInput", "inputType", "inputPlaceholder", "inputPattern", "inputErrorMessage", "inputValidator", "distinguishCancelAndClose", "classPrefix", "className", "style", "padding", "roundButton"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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", "roundButton", "dangerouslyUseHTMLString"];
 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; }
@@ -21,44 +21,58 @@ import isString from 'lodash/isString';
 import React, { cloneElement, forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from "../Button/Button";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Dialog from "../Dialog/Dialog";
 import { partitionAnimationProps, useClassNames, useControlled } from "../hooks";
 import { namespace } from "../hooks/prefix";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
-import { addUnit, isNotEmpty } from "../Util";
+import { addUnit, isNotEmpty, mergeDefaultProps } from "../Util";
 var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useConfigProvider = useConfigProvider(),
-    locale = _useConfigProvider.locale;
+  var _props2;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var boxType = props.boxType,
-    onAction = props.onAction,
-    options = props.options;
+  var locale = useMemo(function () {
+    var _props;
+    return ((_props = props) === null || _props === void 0 || (_props = _props.options) === null || _props === void 0 ? void 0 : _props.locale) || 'en';
+  }, [(_props2 = props) === null || _props2 === void 0 || (_props2 = _props2.options) === null || _props2 === void 0 ? void 0 : _props2.locale]);
+  props = mergeDefaultProps({
+    options: {}
+  }, props);
+  props.options = mergeDefaultProps({
+    width: 420,
+    showClose: true,
+    showCancelButton: true,
+    showConfirmButton: true,
+    cancelButtonText: t('el.messagebox.cancel', {
+      lng: locale
+    }),
+    confirmButtonText: t('el.messagebox.confirm', {
+      lng: locale
+    }),
+    distinguishCancelAndClose: false,
+    draggable: false,
+    buttonPosition: 'right',
+    showInput: false
+  }, props.options);
+  var _props3 = props,
+    boxType = _props3.boxType,
+    onAction = _props3.onAction,
+    options = _props3.options;
   var title = options.title,
     message = options.message,
     type = options.type,
     icon = options.icon,
-    _options$width = options.width,
-    width = _options$width === void 0 ? 420 : _options$width,
+    width = options.width,
     callback = options.callback,
-    _options$showClose = options.showClose,
-    showClose = _options$showClose === void 0 ? true : _options$showClose,
+    showClose = options.showClose,
     beforeClose = options.beforeClose,
-    _options$showCancelBu = options.showCancelButton,
-    showCancelButton = _options$showCancelBu === void 0 ? true : _options$showCancelBu,
-    _options$showConfirmB = options.showConfirmButton,
-    showConfirmButton = _options$showConfirmB === void 0 ? true : _options$showConfirmB,
-    _options$cancelButton = options.cancelButtonText,
-    cancelButtonText = _options$cancelButton === void 0 ? t('el.messagebox.cancel', {
-      lng: locale
-    }) : _options$cancelButton,
+    showCancelButton = options.showCancelButton,
+    showConfirmButton = options.showConfirmButton,
+    cancelButtonText = options.cancelButtonText,
     cancelButtonClass = options.cancelButtonClass,
     confirmButtonClass = options.confirmButtonClass,
     buttonSize = options.buttonSize,
-    _options$buttonPositi = options.buttonPosition,
-    buttonPosition = _options$buttonPositi === void 0 ? 'right' : _options$buttonPositi,
+    buttonPosition = options.buttonPosition,
     draggable = options.draggable,
     overflow = options.overflow,
     showInput = options.showInput,
@@ -72,8 +86,8 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     classPrefix = _options$classPrefix === void 0 ? 'message-box' : _options$classPrefix,
     className = options.className,
     style = options.style,
-    padding = options.padding,
     roundButton = options.roundButton,
+    dangerouslyUseHTMLString = options.dangerouslyUseHTMLString,
     rest = _objectWithoutProperties(options, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     e = _useClassNames.e,
@@ -86,9 +100,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     _useState4 = _slicedToArray(_useState3, 2),
     confirmButtonLoading = _useState4[0],
     setConfirmButtonLoading = _useState4[1];
-  var _useState5 = useState(options.confirmButtonText || t('el.messagebox.confirm', {
-      lng: locale
-    })),
+  var _useState5 = useState(options.confirmButtonText),
     _useState6 = _slicedToArray(_useState5, 2),
     confirmButtonText = _useState6[0],
     setConfirmButtonText = _useState6[1];
@@ -228,7 +240,8 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     ref: containerRef,
     classPrefix: classPrefix,
     visible: visible,
-    className: classNames('is-message-box', className)
+    modalClass: "is-message-box",
+    className: className
     // @ts-ignore
     ,
     style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, "--".concat(namespace, "-messagebox-width"), addUnit(width))),
@@ -240,46 +253,51 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     beforeClose: function beforeClose() {
       return handleAction('close');
     }
-  }, transitionProps), /*#__PURE__*/React.createElement(Dialog.body, {
-    classPrefix: classPrefix,
-    padding: padding
-  }, /*#__PURE__*/React.createElement("div", {
+  }, transitionProps, {
+    unmountOnExit: false,
+    transitionConfig: 'fade-in-linear',
+    footer: showCancelButton || showConfirmButton ? /*#__PURE__*/React.createElement(React.Fragment, null, showCancelButton && /*#__PURE__*/React.createElement(Button, {
+      className: cancelButtonClass,
+      size: buttonSize,
+      round: roundButton,
+      onClick: function onClick() {
+        return handleAction('cancel');
+      }
+    }, cancelButtonText), showConfirmButton && /*#__PURE__*/React.createElement(Button, {
+      className: confirmButtonClass,
+      type: "primary",
+      size: buttonSize,
+      round: roundButton,
+      loading: confirmButtonLoading,
+      onClick: function onClick() {
+        return handleAction('confirm');
+      }
+    }, confirmButtonText)) : null
+  }), dangerouslyUseHTMLString ? /*#__PURE__*/React.createElement("div", {
     className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["container"])))
   }, iconContent, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["message"])))
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["container"])))
+  }, iconContent, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["message"])))
   }, messageContainer)), boxType === 'prompt' && showInput && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["input"])))
+    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["input"])))
   }, /*#__PURE__*/React.createElement(Input, {
     value: inputValue,
-    type: inputType,
-    error: validateError,
+    type: inputType
+    // error={validateError}
+    ,
     placeholder: inputPlaceholder,
     onChange: function onChange(value) {
       setInputValue(value);
       validate(value);
     }
   }), validateError && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["errormsg"])))
-  }, editorErrorMessage))), (showCancelButton || showConfirmButton) && /*#__PURE__*/React.createElement(Dialog.footer, {
-    classPrefix: classPrefix,
-    position: buttonPosition
-  }, showCancelButton && /*#__PURE__*/React.createElement(Button, {
-    className: cancelButtonClass,
-    size: buttonSize,
-    round: roundButton,
-    onClick: function onClick() {
-      return handleAction('cancel');
-    }
-  }, cancelButtonText), showConfirmButton && /*#__PURE__*/React.createElement(Button, {
-    className: confirmButtonClass,
-    type: "primary",
-    size: buttonSize,
-    round: roundButton,
-    loading: confirmButtonLoading,
-    onClick: function onClick() {
-      return handleAction('confirm');
-    }
-  }, confirmButtonText)));
+    className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["errormsg"])))
+  }, editorErrorMessage))));
 }));
 MessageBox.displayName = 'ElMessageBox';
 export default MessageBox;

package/dist/MessageBox/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Action, MessageBoxInputData, MessageBoxProps } from './typings';
+import { Action, MessageBoxData, MessageBoxInputData, MessageBoxProps, MessageState } from './typings';
+export declare const instanceFactory: <T extends MessageBoxData>(boxType: MessageState['boxType'], locale?: 'en' | 'zh-CN') => (message: string | React.ReactElement, title?: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<T>;
 export declare const MessageBox: {
     (options?: MessageBoxProps): Promise<Action>;
     /**

package/dist/MessageBox/index.js

@@ -8,7 +8,8 @@ import { isObject, isUndefined } from "../Util";
 import Main from "./Main";
 var MESSAGE_BOX_DEFAULT_OPTS = {
   alert: {
-    closeOnClickModal: false
+    closeOnClickModal: false,
+    showCancelButton: false
   },
   confirm: {
     showCancelButton: true
@@ -18,7 +19,7 @@ var MESSAGE_BOX_DEFAULT_OPTS = {
     showInput: true
   }
 };
-var instanceFactory = function instanceFactory(boxType) {
+export var instanceFactory = function instanceFactory(boxType, locale) {
   return function (message, title, options) {
     var _options;
     var titleOrOpts = '';
@@ -36,6 +37,7 @@ var instanceFactory = function instanceFactory(boxType) {
       new Main({
         boxType: boxType,
         options: _objectSpread(_objectSpread({
+          locale: locale,
           message: message,
           title: titleOrOpts
         }, MESSAGE_BOX_DEFAULT_OPTS[boxType]), options),

package/dist/MessageBox/typings.d.ts

@@ -8,6 +8,7 @@ export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventP
     /** 消息正文内容 */
     message?: string | React.ReactElement;
     /** 是否将 message 属性作为 HTML 片段处理 */
+    dangerouslyUseHTMLString?: boolean;
     /** 消息类型，用于显示图标 */
     type?: 'success' | 'info' | 'warning' | 'error';
     /** 消息自定义图标，该属性会覆盖 type 的图标 */
@@ -43,7 +44,6 @@ export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventP
     /** 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 */
     distinguishCancelAndClose?: boolean;
     /** 内容区域padding */
-    padding?: string | number;
     /** 是否在 MessageBox 出现时将 body 滚动锁定 */
     lockScroll?: boolean;
     /** 是否显示输入框 */
@@ -68,6 +68,8 @@ export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventP
     overflow?: boolean;
     /** 是否使用圆角按钮 */
     roundButton?: boolean;
+    /** 国际化 */
+    locale?: 'en' | 'zh-CN';
 }
 export type MessageState = {
     boxType: '' | 'prompt' | 'alert' | 'confirm';

package/dist/Notification/Notification.js

@@ -2,10 +2,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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); }
-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(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -15,9 +15,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import Icon from "../Icon/Icon";
 import Transition from "../Transition/Transition";
 import { PopupManager, mergeDefaultProps } from "../Util";
-import { EVENT_CODE, TypeMap } from "../config/Constants";
+import { EVENT_CODE, TypeComponentsMap } from "../config/Constants";
 import { useClassNames } from "../hooks";
 var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
@@ -48,6 +49,7 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave = _props.afterLeave;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
+    m = _useClassNames.m,
     e = _useClassNames.e;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -61,7 +63,12 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
   var timer = useRef(null);
   var notificationRef = useRef(null);
   var contentRef = useRef(null);
-  var verticalProperty = position.startsWith('top') ? 'top' : 'bottom';
+  var horizontalProperty = useMemo(function () {
+    return position.endsWith('right') ? 'right' : 'left';
+  }, [position]);
+  var verticalProperty = useMemo(function () {
+    return position.startsWith('top') ? 'top' : 'bottom';
+  }, [position]);
   var handleClose = useCallback(function () {
     setVisible(false);
     onClose === null || onClose === void 0 || onClose();
@@ -124,20 +131,20 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
-
-  /** 前缀图标 */
-  var typeClass = useMemo(function () {
-    var _type = !iconClass && type;
-    return _type && TypeMap[_type] ? b("icon-".concat(TypeMap[_type]), false) : '';
-  }, [b, iconClass, type]);
+  var positionStyle = useMemo(function () {
+    return _defineProperty(_defineProperty({}, verticalProperty, "".concat(offset, "px")), "zIndex", PopupManager.nextZIndex());
+  }, [offset, verticalProperty]);
 
   /** 关闭图标 */
+  // const closeIcon = useMemo(() => showClose && <div className={classNames(e`closeBtn`, b('icon-close', false))} onClick={handleClose} />, [showClose, e, b, handleClose]);
   var closeIcon = useMemo(function () {
-    return showClose && /*#__PURE__*/React.createElement("div", {
-      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"]))), b('icon-close', false)),
+    return showClose && /*#__PURE__*/React.createElement(Icon, {
+      name: "xmark",
+      prefix: "fal",
+      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"])))),
       onClick: handleClose
     });
-  }, [showClose, e, b, handleClose]);
+  }, [showClose, e, handleClose]);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
     nodeRef: notificationRef,
     name: b('notification-fade', false),
@@ -146,19 +153,19 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("div", {
     ref: notificationRef,
-    className: classNames(b(), position.indexOf('right') > 1 ? 'right' : 'left', props.className),
-    style: _objectSpread(_defineProperty(_defineProperty({}, verticalProperty, offset), "zIndex", PopupManager.nextZIndex()), props.style)
+    className: classNames(b(), horizontalProperty, props.className),
+    style: _objectSpread(_objectSpread({}, props.style), positionStyle)
     // 鼠标悬浮停止自动关闭
     ,
     onMouseEnter: clearTimer,
     onMouseLeave: startTimer,
     onClick: props.onClick
-  }, (type || iconClass) && /*#__PURE__*/React.createElement("i", {
-    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"]))), typeClass, iconClass)
+  }, (type || iconClass) && /*#__PURE__*/React.createElement(Icon, {
+    name: TypeComponentsMap[type],
+    prefix: "fas",
+    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"]))), _defineProperty({}, m(type), type && TypeComponentsMap[type]), iconClass)
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["group"]))), {
-      'is-with-icon': typeClass || iconClass
-    })
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["group"]))))
   }, /*#__PURE__*/React.createElement("h2", {
     className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["title"])))
   }, title), /*#__PURE__*/React.createElement("div", {

package/dist/Notification/typings.d.ts

@@ -32,7 +32,7 @@ export interface NotificationProps extends BaseProps, NativeProps, AnimationEven
     showClose?: boolean;
     /** 关闭时的回调函数 */
     onClose?: () => void;
-    /**  */
+    /** 自定义图标类名，用于自定义图标样式 */
     iconClass?: string;
     /**  */
     id?: string;

package/dist/PageHeader/PageHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PageHeaderProps } from './typings';
+/**
+ * @description PageHeader 页面头部组件
+ * 用于展示页面的标题、面包屑和操作区域
+ */
+declare const PageHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>>;
+export default PageHeader;

package/dist/PageHeader/PageHeader.js

@@ -0,0 +1,91 @@
+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 _excluded = ["icon", "title", "content", "onBack", "breadcrumb", "extra", "className", "style", "children"];
+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 _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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import Divider from "../Divider/Divider";
+import { useClassNames } from "../hooks";
+import Icon from "../Icon/Icon";
+/**
+ * @description PageHeader 页面头部组件
+ * 用于展示页面的标题、面包屑和操作区域
+ */
+var PageHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? 'arrow-left' : _props$icon,
+    title = props.title,
+    _props$content = props.content,
+    content = _props$content === void 0 ? '' : _props$content,
+    onBack = props.onBack,
+    breadcrumb = props.breadcrumb,
+    extra = props.extra,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useClassNames = useClassNames('page-header'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    m = _useClassNames.m;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+
+  /**
+   * @description 处理返回按钮点击事件
+   */
+  var handleClick = useCallback(function () {
+    onBack === null || onBack === void 0 || onBack();
+  }, [onBack]);
+  var hasBreadcrumb = useMemo(function () {
+    return !!breadcrumb;
+  }, [breadcrumb]);
+  var hasExtra = useMemo(function () {
+    return !!extra;
+  }, [extra]);
+  var hasContent = useMemo(function () {
+    return !!children;
+  }, [children]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames(b(), e('contentful', hasContent), _defineProperty({}, m('has-breadcrumb'), hasBreadcrumb), _defineProperty({}, m('has-extra'), hasExtra), className),
+    style: style
+  }, rest), hasBreadcrumb && /*#__PURE__*/React.createElement("div", {
+    className: e('breadcrumb')
+  }, breadcrumb), /*#__PURE__*/React.createElement("div", {
+    className: e('header')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e('left')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e('back'),
+    role: "button",
+    tabIndex: 0,
+    onClick: handleClick
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: e('icon')
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: e('title')
+  }, title || t('el.pageHeader.title', {
+    lng: locale
+  }))), /*#__PURE__*/React.createElement(Divider, {
+    direction: "vertical"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: e('content')
+  }, content)), hasExtra && /*#__PURE__*/React.createElement("div", {
+    className: e('extra')
+  }, extra)), hasContent && /*#__PURE__*/React.createElement("div", {
+    className: e('main')
+  }, children));
+}));
+PageHeader.displayName = 'ElPageHeader';
+export default PageHeader;

package/dist/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './typings';

package/dist/PageHeader/index.js

@@ -0,0 +1 @@
+export { default as PageHeader } from "./PageHeader";

package/dist/PageHeader/typings.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconName } from '../Icon';
+import { BaseProps, NativeProps } from '../types/common';
+/**
+ * @description PageHeader 页面头部组件属性
+ */
+export interface PageHeaderProps extends BaseProps, NativeProps {
+    /**
+     * @description 页面头部的图标组件
+     * @default Left 图标
+     */
+    icon?: IconName;
+    /**
+     * @description 页面头部的主标题
+     */
+    title?: string | React.ReactNode;
+    /**
+     * @description 页面头部的内容
+     * @default ''
+     */
+    content?: string | React.ReactNode;
+    /**
+     * @description 点击返回图标时触发的回调函数
+     */
+    onBack?: () => void;
+    /**
+     * @description 面包屑插槽内容
+     */
+    breadcrumb?: React.ReactNode;
+    /**
+     * @description 额外内容插槽（右侧）
+     */
+    extra?: React.ReactNode;
+}

package/dist/PageHeader/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/Pagination/typings.d.ts

@@ -11,7 +11,7 @@ export interface PaginationRef {
     /** 设置每页条数 */
     setPageSize: (value: number) => void;
 }
-export interface PaginationProps extends BaseProps, NativeProps {
+export interface PaginationProps extends BaseProps, NativeProps<'--el-pagination-font-size' | '--el-pagination-bg-color' | '--el-pagination-text-color' | '--el-pagination-border-radius' | '--el-pagination-button-color' | '--el-pagination-button-width' | '--el-pagination-button-height' | '--el-pagination-button-disabled-color' | '--el-pagination-button-disabled-bg-color' | '--el-pagination-button-bg-color' | '--el-pagination-hover-color' | '--el-pagination-font-size-small' | '--el-pagination-button-width-small' | '--el-pagination-button-height-small' | '--el-pagination-button-width-large' | '--el-pagination-button-height-large' | '--el-pagination-item-gap'> {
     /** 当前页数 */
     currentPage?: number;
     /** 当前页数的默认初始值，不设置时默认为 1 */

package/dist/Popover/Popover.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;
-var _excluded = ["title", "classPrefix", "plain", "width", "showTimeout", "hideTimeout", "offset", "trigger", "content", "onEnter", "onMouseEnter", "onMouseLeave", "placement"];
+var _excluded = ["title", "classPrefix", "plain", "width", "showAfter", "hideAfter", "offset", "trigger", "content", "onEnter", "onMouseEnter", "onMouseLeave", "placement"];
 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; }
@@ -25,8 +25,8 @@ var Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
     placement: 'bottom',
     showArrow: true,
-    showTimeout: 0,
-    hideTimeout: 100,
+    showAfter: 0,
+    hideAfter: 100,
     width: 200,
     trigger: 'click'
   }, props);
@@ -36,8 +36,8 @@ var Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'popover' : _props$classPrefix,
     plain = _props.plain,
     width = _props.width,
-    showTimeout = _props.showTimeout,
-    hideTimeout = _props.hideTimeout,
+    showAfter = _props.showAfter,
+    hideAfter = _props.hideAfter,
     offset = _props.offset,
     trigger = _props.trigger,
     content = _props.content,
@@ -82,8 +82,8 @@ var Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     effect: "light",
     placement: placement,
     offset: offset,
-    showAfter: showTimeout,
-    hideAfter: hideTimeout,
+    showAfter: showAfter,
+    hideAfter: hideAfter,
     trigger: trigger,
     onEnter: onEnter,
     onMouseEnter: handleMouseEnter,

package/dist/Popover/typings.d.ts

@@ -10,15 +10,15 @@ export interface PopoverProps extends BaseProps<React.ReactElement>, NativeProps
     /** 显示的内容 */
     content?: string | React.ReactElement;
     /** 默认提供的主题 */
-    theme?: 'light' | 'dark' | string;
+    effect?: 'light' | 'dark' | string;
     /** 宽度 */
     width?: number | string;
     /** Popover 是否可用 */
     disabled?: boolean;
     /** 展开下拉菜单的延时，仅在 trigger 为 hover 时有效 */
-    showTimeout?: number;
+    showAfter?: number;
     /** 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） */
-    hideTimeout?: number;
+    hideAfter?: number;
     /** 状态是否可见 */
     visible?: boolean;
     /** 初始值 */