@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/InputNumber/typings.d.ts

@@ -14,18 +14,18 @@ export interface InputNumberProps<V = ValueType> extends Omit<FormControlBasePro
     stepStrictly?: boolean;
     /** 数值精度 */
     precision?: number;
+    /** 是否显示控制按钮 */
+    controls?: boolean;
     /** 控制按钮位置 */
-    controlsPositionRight?: boolean;
+    controlsPosition?: '' | 'right';
+    /** 当输入框被清空时显示的值 */
+    valueOnClear?: 'min' | 'max' | number | null;
     /** 占位符 */
     placeholder?: string;
     /** 绑定值被改变时触发 */
     onChange?: (currentValue: number | string, oldValue?: number | string) => void;
     /** 样式前缀 */
     prefixCls?: string;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 输入框头部内容 */
     prefix?: React.ReactElement<any> | string | number;
     /** 输入框尾部内容 */
@@ -38,6 +38,16 @@ export interface InputNumberProps<V = ValueType> extends Omit<FormControlBasePro
     maxLength?: number;
     /** 原生属性，最小输入长度 */
     minLength?: number;
+    /** 内部输入文本对齐 */
+    align?: 'left' | 'right' | 'center';
+    /** 禁用科学计数法的输入（例如输入 'e'） */
+    disabledScientific?: boolean;
+    /** 原生 inputmode 属性 */
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /** 自定义减少按钮图标 */
+    decreaseIcon?: React.ReactNode;
+    /** 自定义增加按钮图标 */
+    increaseIcon?: React.ReactNode;
 }
 export interface InputNumberRef {
     /** 顶级div */

package/dist/Loading/Loading.js

@@ -31,6 +31,9 @@ var LoadingMain = /*#__PURE__*/forwardRef(function (props, ref) {
     b = _useClassNames.b,
     is = _useClassNames.is,
     bm = _useClassNames.bm;
+  var zIndex = useMemo(function () {
+    return PopupManager.nextZIndex();
+  }, []);
   var nodeRef = useRef(null);
   var onEnter = useCallback(function () {
     var _nodeRef$current;
@@ -72,7 +75,7 @@ var LoadingMain = /*#__PURE__*/forwardRef(function (props, ref) {
       }), props.className),
       style: _objectSpread(_objectSpread({}, props.style), {}, {
         background: background,
-        zIndex: PopupManager.nextZIndex()
+        zIndex: zIndex
       })
     }, /*#__PURE__*/React.createElement("div", {
       className: b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["spinner"])))
@@ -91,7 +94,7 @@ var LoadingMain = /*#__PURE__*/forwardRef(function (props, ref) {
     })), text && /*#__PURE__*/React.createElement("p", {
       className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text"])))
     }, text))));
-  }, [b, background, fullscreen, is, onEnter, props.className, props.style, spinner, svg, svgViewBox, text, visible]);
+  }, [b, background, fullscreen, is, onEnter, props.className, props.style, spinner, svg, svgViewBox, text, visible, zIndex]);
   return props.children ? /*#__PURE__*/React.createElement("div", {
     className: classNames(bm('parent', 'relative'), bm('parent', 'hidden'))
   }, content, props.children) : content;

package/dist/Menu/Menu.js

@@ -18,7 +18,7 @@ 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 { pick } from 'lodash';
+import pick from 'lodash/pick';
 import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { More } from "../Icon/IconList/More";
 import { mergeDefaultProps } from "../Util";
@@ -150,6 +150,29 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     onOpen === null || onOpen === void 0 || onOpen(index, indexPath, item);
   }, [addItem, collapse, mode, onOpen, removeItem, uniqueOpened]);
 
+  /** 激活菜单项 */
+  var activeMenu = useCallback(function (index) {
+    var menu = menuItemsRef.current.find(function (item) {
+      return item.index === index;
+    });
+    if (menu && menu.indexPath.length > 1) {
+      setActive(menu.indexPath);
+      menu.indexPath.reduce(function (prev, item) {
+        handleOpenMenu(item, [].concat(_toConsumableArray(prev), [item]), {
+          index: item,
+          indexPath: [].concat(_toConsumableArray(prev), [item])
+        });
+        return [].concat(_toConsumableArray(prev), [item]);
+      }, []);
+    } else {
+      setActive([]);
+      subMenuRef.current.forEach(function (item) {
+        item.closeMenu(item.index, item.indexPath);
+        removeItem(item);
+      });
+    }
+  }, [handleOpenMenu, removeItem, setActive]);
+
   /** 激活菜单项 */
   var activeMenus = useCallback(function () {
     if (defaultActive) {
@@ -237,7 +260,8 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       open: open,
-      close: close
+      close: close,
+      activeMenu: activeMenu
     };
   });
   return (

package/dist/Menu/MenuItem.js

@@ -47,11 +47,13 @@ var MenuItem = function MenuItem(props) {
     });
     onOpen === null || onOpen === void 0 || onOpen(index, indexPath, {
       index: index,
-      indexPath: indexPath
+      indexPath: indexPath,
+      route: route
     });
     onSelect === null || onSelect === void 0 || onSelect(index, indexPath, {
       index: index,
-      indexPath: indexPath
+      indexPath: indexPath,
+      route: route
     });
     if (router) {
       navigate === null || navigate === void 0 || navigate(route !== null && route !== void 0 ? route : index);

package/dist/Menu/SubMenu.js

@@ -248,7 +248,7 @@ var SubMenu = function SubMenu(props) {
     name: "el-menu-collapse",
     nodeRef: ulRef,
     disabled: disabled,
-    duration: 300,
+    duration: 10,
     visible: expand,
     beforeEnter: beforeEnter,
     onEnter: onEnter,
@@ -258,7 +258,7 @@ var SubMenu = function SubMenu(props) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("ul", {
     ref: ulRef,
-    className: classNames(mb(), mm(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["inline"])))),
+    className: classNames(mb(), mm(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["inline"]))), 'collapse-transition'),
     style: {
       '--el-menu-level': level
     }

package/dist/Menu/SubMenuCollapseTransition.js

@@ -4,7 +4,7 @@ export var beforeEnter = function beforeEnter(el) {
   el.style.opacity = '0';
 };
 export var onEnter = function onEnter(el) {
-  addClass(el, 'collapse-transition');
+  // addClass(el, 'collapse-transition');
   el.dataset.oldOverflow = el.style.overflow;
   if (el.scrollHeight !== 0) {
     el.style.height = "".concat(el.scrollHeight, "px");
@@ -16,12 +16,14 @@ export var onEnter = function onEnter(el) {
   addClass(closest(el, 'li'), 'open');
 };
 export var afterEnter = function afterEnter(el) {
-  removeClass(el, 'collapse-transition');
-  el.style.height = '';
-  el.style.overflow = el.dataset.oldOverflow;
+  // removeClass(el, 'collapse-transition');
+  setTimeout(function () {
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  }, 300);
 };
 export var beforeLeave = function beforeLeave(el) {
-  addClass(el, 'collapse-transition');
+  // addClass(el, 'collapse-transition');
   if (!el.dataset) {
     el.dataset = {};
   }
@@ -35,10 +37,13 @@ export var onLeave = function onLeave(el) {
   el.style.height = 0;
 };
 export var afterLeave = function afterLeave(el) {
-  el.style.height = '';
-  el.style.overflow = el.dataset.oldOverflow;
-  el.style.display = '';
-  removeClass(closest(el, 'li'), 'open');
+  el.style.display = 'block';
+  setTimeout(function () {
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.display = '';
+    removeClass(closest(el, 'li'), 'open');
+  }, 300);
 };
 var closest = function closest(el, selector) {
   var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

package/dist/Menu/typings.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IconName } from '../Icon';
 import { BaseProps, NativeProps } from '../types/common';
 export interface MenuRef {
     open: MenuOpenEvent;
     close: MenuCloseEvent;
+    activeMenu: (index: string) => void;
 }
 export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-color' | '--el-menu-text-color' | '--el-menu-hover-text-color' | '--el-menu-bg-color' | '--el-menu-hover-bg-color' | '--el-menu-item-height' | '--el-menu-sub-item-height' | '--el-menu-horizontal-height' | '--el-menu-horizontal-sub-item-height' | '--el-menu-item-font-size' | '--el-menu-item-hover-fill' | '--el-menu-border-color' | '--el-menu-base-level-padding' | '--el-menu-level-padding' | '--el-menu-icon-width'> {
     /** 菜单展示模式 */
@@ -24,7 +24,7 @@ export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-colo
     uniqueOpened?: boolean;
     /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
     menuTrigger?: 'hover' | 'click';
-    /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 defaultActive 来设置加载时的激活项。 */
+    /** 是否启用 react-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 defaultActive 来设置加载时的激活项。 */
     router?: boolean;
     /** 是否开启折叠动画 */
     collapseTransition?: boolean;
@@ -48,27 +48,18 @@ export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-colo
 export interface SubMenuProps extends BaseProps, NativeProps {
     /** 唯一标志 */
     index: string;
+    /** 标题内容 */
     title: string | React.ReactElement;
     /** 为 popper 添加类名 */
     popperClass?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
     /** 子菜单出现之前的延迟，(继承 menu 的 `showTimeout` 配置) */
     showTimeout?: number;
     /** 子菜单消失之前的延迟，(继承 menu 的 `hideTimeout` 配置) */
     hideTimeout?: number;
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 是否将弹出菜单挂载到 body 上，第一级 SubMenu 默认值为 true，其他 SubMenus 的值为 false */
-    appendToBody?: boolean;
     /** 弹出窗口的偏移量 (覆盖 `popper`的菜单) */
     popperOffset?: number;
-    /** 父菜单展开且子菜单关闭时的图标， `expandCloseIcon` 和 `expandOpenIcon` 需要一起配置才能生效 */
-    expandCloseIcon?: IconName | React.ReactElement;
-    /** 父菜单展开且子菜单打开时的图标， `expandOpenIcon` 和 `expandCloseIcon` 需要一起配置才能生效 */
-    expandOpenIcon?: IconName | React.ReactElement;
-    /** 父菜单收起且子菜单关闭时的图标， `collapseCloseIcon` 和 `collapseOpenIcon` 需要一起配置才能生效 */
-    collapseCloseIcon?: IconName | React.ReactElement;
-    /** 父菜单收起且子菜单打开时的图标， `collapseOpenIcon` 和 `collapseCloseIcon` 需要一起配置才能生效 */
-    collapseOpenIcon?: IconName | React.ReactElement;
 }
 export interface MenuItemProps extends BaseProps, NativeProps {
     /** 唯一标志 */

package/dist/Message/Message.js

@@ -20,9 +20,10 @@ import classNames from 'classnames';
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Badge from "../Badge/Badge";
+import { Icon } from "../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";
 // import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 
@@ -31,16 +32,18 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
     duration: 3000,
     message: '',
-    showClose: true,
+    showClose: false,
     type: 'info',
-    offset: 20
+    offset: 20,
+    placement: 'top'
   }, props);
   var _props = props,
     _props$classPrefix = _props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
-    center = _props.center,
+    plain = _props.plain,
+    placement = _props.placement,
     iconClass = _props.iconClass,
-    closable = _props.showClose,
+    showClose = _props.showClose,
     type = _props.type,
     onClose = _props.onClose,
     duration = _props.duration,
@@ -52,6 +55,7 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     b = _useClassNames.b,
     e = _useClassNames.e,
     m = _useClassNames.m,
+    bm = _useClassNames.bm,
     is = _useClassNames.is;
   // const { message: messageConfig } = useContext(ConfigProvider);
 
@@ -147,19 +151,41 @@ var Message = /*#__PURE__*/memo( /*#__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]);
+  // const lastOffset = useMemo(() => getLastOffset(id, placement), [id, placement]);
+  // const offsetValue = useMemo(() => getOffsetOrSpace(id, offset, placement) + lastOffset, [id, offset, placement]);
+  // const bottom = useMemo(() => height + offsetValue, [height, offsetValue]);
+
+  var badgeType = useMemo(function () {
+    return type === 'error' ? 'danger' : type;
+  }, [type]);
+  var horizontalClass = useMemo(function () {
+    if (placement.includes('left')) {
+      return is('left');
+    }
+    if (placement.includes('right')) {
+      return is('right');
+    }
+    return is('center');
+  }, [is, placement]);
+  var verticalProperty = useMemo(function () {
+    return placement.startsWith('top') ? 'top' : 'bottom';
+  }, [placement]);
+  var customStyle = useMemo(function () {
+    return {
+      //   [verticalProperty]: `${offsetValue}px`,
+      zIndex: PopupManager.nextZIndex()
+    };
+  }, []);
 
   /** 关闭图标 */
   var closeIcon = useMemo(function () {
-    return closable && /*#__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
     });
-  }, [closable, e, b, handleClose]);
+  }, [showClose, e, handleClose]);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
     nodeRef: messageRef,
     name: b('message-fade', false),
@@ -170,24 +196,26 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("div", {
     ref: messageRef,
-    className: classNames(b(), _defineProperty({}, m(type), type && !iconClass), is({
-      center: center,
-      closable: closable
-    }), props.className),
+    className: classNames(b(), _defineProperty({}, m(type), type && !iconClass), is('center', {
+      closable: showClose,
+      plain: plain,
+      bottom: verticalProperty === 'bottom'
+    }), horizontalClass, props.className),
     style: _objectSpread(_objectSpread({}, (_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.style), {}, {
-      top: offset,
-      zIndex: PopupManager.nextZIndex()
-    })
+      top: offset
+    }, customStyle)
     // 鼠标悬浮停止自动关闭
     ,
     onMouseEnter: clearTimer,
     onMouseLeave: startTimer
   }, repeatNum > 1 && /*#__PURE__*/React.createElement(Badge, {
     value: repeatNum,
-    type: type || 'info',
+    type: badgeType,
     className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["badge"])))
-  }), (type || iconClass) && /*#__PURE__*/React.createElement("i", {
-    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["icon"]))), typeClass, iconClass)
+  }), (type || iconClass) && /*#__PURE__*/React.createElement(Icon, {
+    name: TypeComponentsMap[type],
+    prefix: "fas",
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["icon"]))), _defineProperty({}, bm('icon', type), type && TypeComponentsMap[type]), iconClass)
   }), /*#__PURE__*/React.createElement("p", {
     className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
   }, message), closeIcon)), document.body);

package/dist/Message/index.js

@@ -5,30 +5,30 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { isValidElement } from 'react';
-import { isEmpty, mergeDefaultProps } from "../Util";
+import { isEmpty } from "../Util";
 import Main from "./Main";
 export var instances = [];
 var seed = 1;
 export var Message = function Message() {
   var _opts, _ref$current, _ref$current2;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var ll = localStorage.getItem('__el__message__config__provider__');
-  var configProvider = ll ? JSON.parse(ll) : {};
   if (typeof opts === 'string' || /*#__PURE__*/isValidElement(opts)) {
-    opts = _objectSpread(_objectSpread({}, configProvider), {}, {
+    opts = {
       message: opts
-    });
+    };
   }
   if (isEmpty(opts)) {
-    opts = _objectSpread(_objectSpread({}, configProvider), {}, {
+    opts = {
       message: ''
-    });
+    };
   }
   var options = opts;
   var verticalOffset = typeof opts !== 'string' && ! /*#__PURE__*/isValidElement(opts) ? ((_opts = opts) === null || _opts === void 0 ? void 0 : _opts.offset) || 20 : 20;
-  instances.forEach(function (inst) {
-    var _inst$current$el$curr;
-    verticalOffset += (((_inst$current$el$curr = inst.current.el.current) === null || _inst$current$el$curr === void 0 ? void 0 : _inst$current$el$curr.offsetHeight) || 52) + 16;
+  instances.filter(function (inst) {
+    return inst.current;
+  }).forEach(function (inst) {
+    var _inst$current;
+    verticalOffset += (((_inst$current = inst.current) === null || _inst$current === void 0 || (_inst$current = _inst$current.el.current) === null || _inst$current === void 0 ? void 0 : _inst$current.offsetHeight) || 52) + 16;
   });
   verticalOffset += 16;
   var id = 'message_' + seed++;
@@ -38,13 +38,13 @@ export var Message = function Message() {
     userOnClose = null;
     options.userOnClose = options.onClose;
   }
-  options = mergeDefaultProps(configProvider, _objectSpread(_objectSpread({}, options), {}, {
+  options = _objectSpread(_objectSpread({}, options), {}, {
     onClose: function onClose() {
       close(id, userOnClose);
     },
     offset: verticalOffset,
     id: id
-  }));
+  });
   if (options.grouping && instances.length) {
     var instance = instances.find(function (inst) {
       return inst.current.message === options.message;
@@ -99,7 +99,7 @@ export function closeAll() {
     instance.close();
   }
 }
-['success', 'warning', 'info', 'error'].forEach(function (type) {
+['primary', 'success', 'warning', 'info', 'error'].forEach(function (type) {
   Message[type] = function (options) {
     if (typeof options === 'string' || /*#__PURE__*/isValidElement(options)) {
       options = {

package/dist/Message/typings.d.ts

@@ -1,13 +1,13 @@
 import React, { RefObject } from 'react';
-import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
+import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface MessageHandle {
     close: () => void;
     el: RefObject<HTMLElement>;
 }
 export interface MessageProps extends BaseProps, NativeProps, AnimationEventProps {
     id?: string;
-    /** 文字是否居中 */
-    center?: boolean;
+    /** 是否纯色 */
+    plain?: boolean;
     /** 显示时间，单位为毫秒。 设为 0 则不会自动关闭 */
     duration?: number;
     /** 自定义图标 */
@@ -21,19 +21,22 @@ export interface MessageProps extends BaseProps, NativeProps, AnimationEventProp
     /** 是否显示关闭按钮 */
     showClose?: boolean;
     /** 消息类型 */
-    type?: 'success' | 'warning' | 'info' | 'error' | '';
+    type?: TypeAttributes.Appearance;
     /** 是否立即执行onClose方法 */
     immediate?: boolean;
     /** 合并内容相同的消息，不支持 VNode 类型的消息 */
     grouping?: boolean;
+    /** 消息放置位置 */
+    placement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
     userOnClose?: (el?: RefObject<HTMLElement>) => void;
 }
-export type MessageType = 'success' | 'warning' | 'info' | 'error' | '';
+export type MessageType = 'primary' | 'success' | 'warning' | 'info' | 'error' | '';
 export type MessageDispatcher = (options?: MessageProps | string | React.ReactElement) => MessageHandle;
 export type MessageParams = MessageProps | string | React.ReactElement;
 export type TypedMessageParams = Omit<MessageProps, 'type'> | string | React.ReactElement;
 export interface MessageMethod {
     (options?: MessageParams): MessageHandle;
+    primary: (options?: TypedMessageParams) => MessageHandle;
     success: (options?: TypedMessageParams) => MessageHandle;
     warning: (options?: TypedMessageParams) => MessageHandle;
     info: (options?: TypedMessageParams) => MessageHandle;