@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.3

package/dist/Input/typings.d.ts

@@ -3,11 +3,16 @@ import { BaseProps, FormControlBaseProps, NativeProps, TypeAttributes } from '..
 export type LiteralUnion<T extends U, U> = T | (U & {});
 export type ValueType = React.AllHTMLAttributes<HTMLInputElement>['value'];
 export type BaseInputRef = {
+    /** 获取值 */
     getValue: () => ValueType;
+    /** 设置值 */
     setValue: (value: ValueType) => void;
     onClear: (event?: any) => void;
+    /** 重置值 */
     clear: (event?: any) => void;
+    /** 使 input 组件获得焦点 */
     focus: () => void;
+    /** 使 input 组件失去焦点 */
     blur: () => void;
     showClear?: (value: ValueType) => void;
     hideClear?: () => void;
@@ -21,67 +26,123 @@ export type TextareaRef = {
 } & BaseInputRef;
 export interface InputProps extends FormControlBaseProps<ValueType>, BaseProps, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'> {
     size?: TypeAttributes.Size;
+    /** 初始值 */
     defaultValue?: ValueType;
+    /**
+     * text，textarea 和其他原生 input 的 type 值
+     * ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types */
     type?: LiteralUnion<'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+    /** 输入框头部内容，只对 type="text" 有效 */
     prefix?: React.ReactElement<any> | string | number;
+    /** 输入框尾部内容，只对 type="text" 有效 */
     suffix?: React.ReactElement<any> | string | number;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 是否可清空 */
     clearable?: boolean;
+    /** 是否显示切换密码图标 */
     showPassword?: boolean;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 输入是否防抖动 */
     debounceInput?: boolean;
+    /** 获取输入建议的防抖延时，单位为毫秒 */
     debounceTime?: number;
+    /** input自定义内联样式 */
     innerStyle?: React.CSSProperties;
+    /** 范围选择时开始输入框的占位内容 */
     startPlaceholder?: string;
+    /** 范围选择时结束输入框的占位内容 */
     endPlaceholder?: string;
+    /** 最大输入长度 */
     maxLength?: number;
+    /** 原生属性，最小输入长度 */
     minLength?: number;
+    /** 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效	 */
     showWordLimit?: boolean;
+    /** 是否隐藏值 */
     hiddenValue?: boolean;
+    /** 在点击由 clearable 属性生成的清空按钮时触发 */
     onClear?: (e: MouseEvent) => void;
+    /** 在 Input 值改变时触发 */
     onChange?: (value: ValueType, event?: React.ChangeEvent) => void;
 }
 export interface InputGroupProps extends BaseProps, NativeProps {
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
 }
 export interface TextareaProps extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'children'>, FormControlBaseProps<ValueType>, BaseProps, NativeProps {
+    /** 初始值 */
     defaultValue?: ValueType;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
     rows?: number;
+    /** input自定义内联样式 */
     innerStyle?: React.CSSProperties;
+    /** 最大输入长度 */
     maxLength?: number;
+    /** 原生属性，最小输入长度 */
     minLength?: number;
+    /** 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效	 */
     showWordLimit?: boolean;
+    /** 在 Input 值改变时触发 */
     onChange?: (value: ValueType, event?: React.ChangeEvent) => void;
 }
 export type InputRangeValueType = [string | null, string | null] | [number | null, number | null];
 export interface InputRangeProps<T = InputRangeValueType> extends Omit<FormControlBaseProps<T>, 'name' | 'onChange'>, BaseProps, NativeProps {
     name?: [string, string];
     size?: TypeAttributes.Size;
+    /** 只读 */
     readOnly?: boolean;
+    /** 是否激活状态 */
     active?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * text，textarea 和其他原生 input 的 type 值
+     * ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types */
     type?: 'text' | 'hidden' | 'number';
+    /** 输入框头部内容，只对 type="text" 有效 */
     prefix?: React.ReactElement<any> | string | number;
+    /** 输入框尾部内容，只对 type="text" 有效 */
     suffix?: React.ReactElement<any> | string | number;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 数值精度 */
     precision?: number;
+    /** 是否可清空 */
     clearable?: boolean;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
+    /** 表单校验失败 */
     error?: boolean;
+    /** 表单校验失败 */
     warning?: boolean;
+    /** 选择范围时的分隔符 */
     rangeSeparator?: string;
+    /** 输入是否防抖动 */
     debounceInput?: boolean;
+    /** input自定义内联样式 */
     innerStyle?: React.CSSProperties;
+    /** 范围选择时开始输入框的占位内容 */
     startPlaceholder?: string;
+    /** 范围选择时结束输入框的占位内容 */
     endPlaceholder?: string;
+    /** 在点击由 clearable 属性生成的清空按钮时触发 */
     onClear?: (e: MouseEvent) => void;
+    /** 选中值发生变化时触发 */
     onChange?: (value: InputRangeValueType | null, event?: Event) => void;
 }

package/dist/InputNumber/InputNumber.js

@@ -44,6 +44,16 @@ var import_Input = require("../Input");
 var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var InputNumber = (0, import_react.forwardRef)((props, ref) => {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      step: 1,
+      precision: 0,
+      max: Infinity,
+      min: -Infinity,
+      placeholder: "请输入"
+    },
+    props
+  );
   const {
     name,
     max: _maxProp,
@@ -220,12 +230,5 @@ var InputNumber = (0, import_react.forwardRef)((props, ref) => {
     }
   ));
 });
-InputNumber.defaultProps = {
-  step: 1,
-  precision: 0,
-  max: Infinity,
-  min: -Infinity,
-  placeholder: "请输入"
-};
 InputNumber.displayName = "ElInputNumber";
 var InputNumber_default = (0, import_react.memo)(InputNumber);

package/dist/InputNumber/typings.d.ts

@@ -4,28 +4,49 @@ import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
 export type LiteralUnion<T extends U, U> = T | (U & {});
 export type ValueType = number | string;
 export interface InputNumberProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<HTMLDivElement>, NativeProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'style' | 'value' | 'ref' | 'className' | 'readOnly' | 'disabled' | 'name' | 'children'> {
+    /** 设置计数器允许的最大值 */
     max?: number;
+    /** 设置计数器允许的最小值 */
     min?: number;
+    /** 计数器步长 */
     step?: number;
+    /** 是否只能输入 step 的倍数 */
     stepStrictly?: boolean;
+    /** 数值精度 */
     precision?: number;
+    /** 控制按钮位置 */
     controlsPositionRight?: boolean;
+    /** 占位符 */
     placeholder?: string;
+    /** 绑定值被改变时触发 */
     onChange?: (currentValue: number | string, oldValue?: number | string) => void;
+    /** 样式前缀 */
     prefixCls?: string;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 输入框头部内容 */
     prefix?: React.ReactElement<any> | string | number;
+    /** 输入框尾部内容 */
     suffix?: React.ReactElement<any> | string | number;
+    /** 输入框前置内容 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容 */
     append?: React.ReactElement | string | number;
+    /** 最大输入长度 */
     maxLength?: number;
+    /** 原生属性，最小输入长度 */
     minLength?: number;
 }
 export interface InputNumberRef {
+    /** 顶级div */
     ref: Ref<HTMLDivElement>;
+    /** input */
     input: Ref<InputRef>;
     getValue: () => number;
+    /** 使 input 组件获得焦点 */
     focus: () => void;
+    /** 使 input 组件失去焦点 */
     blur: () => void;
 }

package/dist/Link/Link.js

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_Icon = require("../Icon");
 var import_hooks = require("../hooks");
 var Link = (0, import_react.forwardRef)((props, ref) => {
-  const { type, underline, disabled, className, style, classPrefix = "link", onClick, icon, ...rest } = props;
+  const { type = "default", underline, disabled, className, style, classPrefix = "link", onClick, icon, ...rest } = props;
   const { b, m, is } = (0, import_hooks.useClassNames)(classPrefix);
   return /* @__PURE__ */ import_react.default.createElement(
     "a",
@@ -58,7 +58,4 @@ var Link = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Link.displayName = "Link";
-Link.defaultProps = {
-  type: "default"
-};
 var Link_default = (0, import_react.memo)(Link);

package/dist/Link/typings.d.ts

@@ -2,10 +2,15 @@ import React from 'react';
 import { IconName } from '../Icon';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export type LinkType = TypeAttributes.Appearance;
-export interface LinkProps extends BaseProps, NativeProps, Omit<React.AllHTMLAttributes<HTMLAnchorElement>, 'type' | 'style' | 'children'> {
+export interface LinkProps extends BaseProps, NativeProps<'--el-link-font-size' | '--el-link-font-weight' | '--el-link-text-color' | '--el-link-hover-text-color' | '--el-link-disabled-text-color'>, Omit<React.AllHTMLAttributes<HTMLAnchorElement>, 'type' | 'style' | 'children'> {
+    /** 链接地址 */
     href?: string;
+    /** 链接类型 */
     type?: LinkType;
+    /** 是否下划线  */
     underline?: boolean;
+    /** 是否禁用状态  */
     disabled?: boolean;
+    /** 图标组件 */
     icon?: IconName;
 }

package/dist/Loading/Loading.js

@@ -41,9 +41,10 @@ var import_Transition = require("../Transition");
 var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var Main = (props) => {
-  const { visible, text, fullscreen, spinner, background } = props;
+  const { visible, text, fullscreen = true, spinner, background } = props;
   const { b, is } = (0, import_hooks.useClassNames)("loading");
-  return /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: "loading-fade", visible }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`mask`, is({ fullscreen }), props.className), style: { ...props.style, background, zIndex: import_Util.PopupManager.nextZIndex() } }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`spinner` }, spinner ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: spinner, spin: true }) : /* @__PURE__ */ import_react.default.createElement("svg", { className: "circular", viewBox: "25 25 50 50" }, /* @__PURE__ */ import_react.default.createElement("circle", { className: "path", cx: "50", cy: "50", r: "20", fill: "none" })), text && /* @__PURE__ */ import_react.default.createElement("p", { className: b`text` }, text))));
+  const nodeRef = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef, name: "loading-fade", visible }, /* @__PURE__ */ import_react.default.createElement("div", { ref: nodeRef, className: (0, import_classnames.default)(b`mask`, is({ fullscreen }), props.className), style: { ...props.style, background, zIndex: import_Util.PopupManager.nextZIndex() } }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`spinner` }, spinner ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: spinner, spin: true }) : /* @__PURE__ */ import_react.default.createElement("svg", { className: "circular", viewBox: "25 25 50 50" }, /* @__PURE__ */ import_react.default.createElement("circle", { className: "path", cx: "50", cy: "50", r: "20", fill: "none" })), text && /* @__PURE__ */ import_react.default.createElement("p", { className: b`text` }, text))));
 };
 var service = (props = {}) => {
   const { target = { current: document.body } } = props;
@@ -62,9 +63,6 @@ var Loading = (props) => {
   }
   return /* @__PURE__ */ import_react.default.createElement(Main, { ...props, visible });
 };
-Loading.defaultProps = {
-  fullscreen: true
-};
 Loading.service = service;
 Loading.displayName = "Loading";
 var Loading_default = Loading;

package/dist/Loading/typings.d.ts

@@ -2,12 +2,17 @@ import { RefObject } from 'react';
 import { IconName } from '../Icon';
 import { BaseProps, NativeProps } from '../types/common';
 export interface LoadingProps extends BaseProps, NativeProps {
+    /** Loading 需要覆盖的 DOM 节点。 可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 */
     target?: RefObject<HTMLElement>;
     visible?: boolean;
+    /** 是否让加载组件铺满整个屏幕 */
     fullscreen?: boolean;
     lock?: boolean;
+    /** 显示在加载图标下方的加载文案 */
     text?: string;
+    /** 自定义加载图标类名 */
     spinner?: IconName;
+    /** 遮罩背景色 */
     background?: string;
 }
 export type LoadingService = (props?: LoadingProps) => {

package/dist/Message/Main.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
 import { MessageProps, MessageRef } from './typings';
+/**
+ * @author	Parker
+ * @CreateTime	2022/5/2 21:15:44
+ * @LastEditor	Parker
+ * @ModifyTime	2022/5/3 12:09:53
+ * @Description
+ */
 export declare class Main {
     ref: React.RefObject<MessageRef>;
     constructor(props: MessageProps);

package/dist/Message/Message.js

@@ -41,6 +41,16 @@ var import_Util = require("../Util");
 var import_Constants = require("../config/Constants");
 var import_hooks = require("../hooks");
 var Message = (0, import_react.forwardRef)((props, ref) => {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      duration: 3e3,
+      message: "",
+      showClose: true,
+      type: "info",
+      offset: 20
+    },
+    props
+  );
   const { classPrefix = "message", center, iconClass, showClose: closable, type, onClose, duration, message, immediate, userOnClose, afterLeave } = props;
   const { b, e, m, is } = (0, import_hooks.useClassNames)(classPrefix);
   const [visible, setVisible] = (0, import_react.useState)(false);
@@ -124,7 +134,7 @@ var Message = (0, import_react.forwardRef)((props, ref) => {
   }, [b, iconClass, type]);
   const closeIcon = (0, import_react.useMemo)(() => closable && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`closeBtn`, b("icon-close", false)), onClick: handleClose }), [closable, e, b, handleClose]);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: b("message-fade", false), visible, display: "flex", unmountOnExit: true, afterEnter: startTimer, afterLeave }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: messageRef, name: b("message-fade", false), visible, display: "flex", unmountOnExit: true, afterEnter: startTimer, afterLeave }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         ref: messageRef,
@@ -145,11 +155,4 @@ var Message = (0, import_react.forwardRef)((props, ref) => {
     document.body
   );
 });
-Message.defaultProps = {
-  duration: 3e3,
-  message: "",
-  showClose: true,
-  type: "info",
-  offset: 20
-};
 var Message_default = (0, import_react.memo)(Message);

package/dist/Message/index.d.ts

@@ -1,6 +1,14 @@
 import { RefObject } from 'react';
 import { MessageMethod, MessageQueue } from './typings';
 export declare const instances: MessageQueue;
+/**
+ * 消息提示组件
+ * @author	Parker
+ * @CreateTime	2022/3/10 12:45:48
+ * @LastEditor	Parker
+ * @ModifyTime	2022/5/3 12:10:04
+ * @Description	Element Plus 消息提示组件魔改过来的，源代码见：https://github.com/element-plus/element-plus
+ */
 export declare const Message: MessageMethod;
 export declare function close(id: string, userOnClose?: (el?: RefObject<HTMLElement>) => void): void;
 export declare function closeAll(): void;

package/dist/Message/typings.d.ts

@@ -6,15 +6,25 @@ export interface MessageHandle {
 }
 export interface MessageProps extends BaseProps, NativeProps, AnimationEventProps {
     id?: string;
+    /** 文字是否居中 */
     center?: boolean;
+    /** 显示时间，单位为毫秒。 设为 0 则不会自动关闭 */
     duration?: number;
+    /** 自定义图标 */
     iconClass?: string;
+    /** 消息文字 */
     message?: string | React.ReactElement;
+    /** Message 距离窗口顶部的偏移量 */
     offset?: number;
+    /** 关闭时的回调函数, 参数为被关闭的 message 实例 */
     onClose?: (el?: RefObject<HTMLElement>) => void;
+    /** 是否显示关闭按钮 */
     showClose?: boolean;
+    /** 消息类型 */
     type?: 'success' | 'warning' | 'info' | 'error' | '';
+    /** 是否立即执行onClose方法 */
     immediate?: boolean;
+    /** 合并内容相同的消息，不支持 VNode 类型的消息 */
     grouping?: boolean;
     userOnClose?: (el?: RefObject<HTMLElement>) => void;
 }
@@ -37,6 +47,7 @@ export interface MessageRef {
     message: string | React.ReactElement;
     close: () => void;
     setOffset: (val: number) => void;
+    /** 设置重复数量 */
     setReapetNum: () => void;
 }
 export type MessageQueue = Array<RefObject<MessageRef>>;

package/dist/MessageBox/Main.js

@@ -51,7 +51,9 @@ var Main = class {
           options: {
             ...options,
             afterLeave: () => {
-              root.unmount();
+              setTimeout(() => {
+                root.unmount();
+              }, 200);
             }
           },
           ...other,

package/dist/MessageBox/index.d.ts

@@ -2,8 +2,22 @@ import React from 'react';
 import { MessageBoxData, MessageBoxProps } from './typings';
 export declare const MessageBox: {
     (options?: MessageBoxProps): Promise<unknown>;
-    alert: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
-    confirm: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
-    prompt: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
+    /**
+     * 消息弹窗提示
+     * @param message 消息内容
+     * @param title 标题
+     * @param options 其他设置项
+     * @returns
+     */
+    alert: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<MessageBoxData>;
+    /**
+     * 确认消息
+     * @param message 消息内容
+     * @param title 标题
+     * @param options 其他设置项
+     * @returns
+     */
+    confirm: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<MessageBoxData>;
+    prompt: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<MessageBoxData>;
 };
 export type { Action as MessageBoxAction, MessageBoxMethod, MessageBoxProps, MessageBoxRef } from './typings';

package/dist/MessageBox/index.js

@@ -41,7 +41,6 @@ var MESSAGE_BOX_DEFAULT_OPTS = {
 };
 var instanceFactory = (boxType) => {
   return (message, title, options) => {
-    const { distinguishCancelAndClose } = options;
     let titleOrOpts = "";
     if ((0, import_Util.isObject)(title)) {
       options = title;
@@ -51,6 +50,7 @@ var instanceFactory = (boxType) => {
     } else {
       titleOrOpts = title;
     }
+    const { distinguishCancelAndClose } = options ?? {};
     return new Promise((resolve, reject) => {
       new import_Main.default({
         boxType,

package/dist/MessageBox/typings.d.ts

@@ -3,37 +3,70 @@ import { DialogFooterProps, DialogProps } from '../Dialog/typings';
 import { IconName, IconProps } from '../Icon';
 import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventProps {
+    /** 标题 */
     title?: string | React.ReactElement;
+    /** 消息正文内容 */
     message?: string | React.ReactElement;
+    /** 是否将 message 属性作为 HTML 片段处理 */
+    /** 消息类型，用于显示图标 */
     type?: 'success' | 'info' | 'warning' | 'error';
+    /** 消息自定义图标，该属性会覆盖 type 的图标 */
     icon?: IconName | React.ReactElement<IconProps>;
+    /** 遮罩的自定义类名 */
     modalClass?: string;
+    /** 自定义确认按钮及取消按钮的大小 */
     width?: DialogProps['width'];
+    /** 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调函数, instance 为 MessageBox 实例， 可以通过它访问实例上的属性和方法 */
     callback?: (value: string, action: Action) => any | ((action: Action) => any);
+    /** 是否显示右上角关闭按钮 */
     showClose?: boolean;
+    /** 是否可以通过点击 modal 关闭 MessageBox */
     closeOnClickModal?: boolean;
+    /** 关闭前的回调，会暂停消息弹出框的关闭过程；instance为 MessageBox 实例，可以通过它访问实例上的属性和方法；done用于关闭 MessageBox 实例 */
     beforeClose?: (action?: Action, done?: () => void, ref?: RefObject<MessageBoxRef>) => void;
+    /** 是否显示取消按钮（以 confirm 和 prompt 方式调用时为 true） */
     showCancelButton?: boolean;
+    /** 是否显示确定按钮 */
     showConfirmButton?: boolean;
+    /** 取消按钮的文本内容 */
     cancelButtonText?: string;
+    /** 确定按钮的文本内容 */
     confirmButtonText?: string;
+    /** 取消按钮的自定义类名 */
     cancelButtonClass?: string;
+    /** 确定按钮的自定义类名 */
     confirmButtonClass?: string;
+    /** 自定义确认和取消按钮的尺寸 */
     buttonSize?: TypeAttributes.Size;
+    /** 按钮位置 */
     buttonPosition?: DialogFooterProps['position'];
+    /** 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 */
     distinguishCancelAndClose?: boolean;
+    /** 内容区域padding */
     padding?: string | number;
+    /** 是否在 MessageBox 出现时将 body 滚动锁定 */
     lockScroll?: boolean;
+    /** 是否显示输入框 */
     showInput?: boolean;
+    /** 输入框占位文本 */
     inputPlaceholder?: string;
+    /** 输入框的类型 */
     inputType?: string;
+    /** 输入框的初始文本 */
     inputValue?: string;
+    /** 输入框的校验表达式 */
     inputPattern?: RegExp;
+    /** 输入框的校验函数。 应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage 用于向用户展示错误消息。 */
     inputValidator?: (value: string) => boolean | string;
+    /** 校验未通过时的提示文本 */
     inputErrorMessage?: string;
+    /** 是否居中布局 */
     center?: boolean;
+    /** 为 MessageBox 启用可拖拽功能 */
     draggable?: boolean;
+    /** 拖动范围可以超出可视区 */
     overflow?: boolean;
+    /** 是否使用圆角按钮 */
     roundButton?: boolean;
 }
 export type MessageState = {
@@ -51,13 +84,30 @@ export interface MessageBoxInputData {
 export type ElMessageBoxShortcutMethod = (((message: MessageBoxProps['message'], title: MessageBoxProps['title'], options?: Omit<MessageBoxProps, 'message' | 'title'>) => Promise<MessageBoxData>) & ((message: MessageBoxProps['message'], options?: Omit<MessageBoxProps, 'message' | 'title'>) => Promise<MessageBoxData>));
 export interface MessageBoxMethod {
     (options?: MessageBoxProps): Promise<MessageBoxData>;
+    /**
+     * 消息弹窗提示
+     * @param message 消息内容
+     * @param title 标题
+     * @param options 其他设置项
+     * @returns
+     */
     alert: ElMessageBoxShortcutMethod;
+    /**
+     * 确认消息
+     * @param message 消息内容
+     * @param title 标题
+     * @param options 其他设置项
+     * @returns
+     */
     confirm: ElMessageBoxShortcutMethod;
     prompt: ElMessageBoxShortcutMethod;
 }
 export interface MessageBoxRef {
     ref: RefObject<HTMLDivElement>;
+    /** 关闭方法 */
     close: () => void;
+    /** 设置确认按钮是否加载状态 */
     setConfirmButtonLoading: (value: boolean) => void;
+    /** 修改确认按钮文本方法 */
     setConfirmButtonText: (value: string) => void;
 }

package/dist/Notification/Main.d.ts

@@ -1,5 +1,12 @@
 import { RefObject } from 'react';
 import { NotificationProps, NotificationRef } from './typings';
+/**
+ * @author	Parker
+ * @CreateTime	2022/3/10 12:45:48
+ * @LastEditor	Parker
+ * @ModifyTime	2022/5/3 12:24:58
+ * @Description
+ */
 export declare class Main {
     ref: RefObject<NotificationRef>;
     constructor(props: NotificationProps);

package/dist/Notification/Notification.js

@@ -40,6 +40,22 @@ var import_Util = require("../Util");
 var import_Constants = require("../config/Constants");
 var import_hooks = require("../hooks");
 var Notification = (0, import_react.forwardRef)((props, ref) => {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      duration: 4500,
+      // default 4500
+      message: "",
+      onClose: null,
+      onClick: null,
+      afterLeave: null,
+      offset: 0,
+      // defaults 0
+      position: "top-right",
+      // default top-right
+      showClose: true
+    },
+    props
+  );
   const { iconClass, message, position, showClose, type, title, classPrefix = "notification", onClose, duration, onSuccess, afterLeave } = props;
   const { b, e } = (0, import_hooks.useClassNames)(classPrefix);
   const [visible, setVisible] = (0, import_react.useState)(false);
@@ -115,7 +131,7 @@ var Notification = (0, import_react.forwardRef)((props, ref) => {
   }, [b, iconClass, type]);
   const closeIcon = (0, import_react.useMemo)(() => showClose && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`closeBtn`, b("icon-close", false)), onClick: handleClose }), [showClose, e, b, handleClose]);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: b("notification-fade", false), visible, display: "flex", afterLeave }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: notificationRef, name: b("notification-fade", false), visible, display: "flex", afterLeave }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         ref: notificationRef,
@@ -133,18 +149,5 @@ var Notification = (0, import_react.forwardRef)((props, ref) => {
     document.body
   );
 });
-Notification.defaultProps = {
-  duration: 4500,
-  // default 4500
-  message: "",
-  onClose: null,
-  onClick: null,
-  afterLeave: null,
-  offset: 0,
-  // defaults 0
-  position: "top-right",
-  // default top-right
-  showClose: true
-};
 Notification.displayName = "ElNotification";
 var Notification_default = Notification;

package/dist/Notification/index.d.ts

@@ -1,5 +1,20 @@
 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;
+/**
+ *
+ * @param id
+ * @param position
+ * @param userOnClose
+ * @returns
+ */
 export declare function close(id: string, position: Position, userOnClose?: (vm: NotificationRef) => void): void;
 export declare function closeAll(): void;
 export type { INotification, INotificationHandle, NotificationProps as INotificationOptions } from './typings';