@nutui/nutui-react 2.0.0-alpha.11 → 2.0.0-alpha.13

package/dist/esm/ShortPassword.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["title", "description", "tips", "tipsIcon", "iconSize", "visible", "modelValue", "errorMsg", "noButton", "closeOnClickOverlay", "length", "style", "className", "onChange", "onOk", "onTips", "onCancel", "onClose", "onComplete", "autoFocus"];
+var _excluded = ["title", "description", "tips", "visible", "value", "error", "hideFooter", "length", "plain", "style", "className", "closeable", "autoFocus", "onFocus", "onChange", "onConfirm", "onTips", "onCancel", "onClose", "onComplete", "onClickOverlay", "onClickCloseIcon"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,171 +24,103 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useRef, useState, useEffect } from "react";
+import React__default, { useMemo, useEffect } from "react";
 import { Tips } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
+import classNames from "classnames";
 import Popup from "./Popup.js";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
+import { u as usePropsValue } from "./use-props-value.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: "",
-  description: "",
-  tips: "",
-  tipsIcon: null,
-  iconSize: 11,
+  value: "",
   visible: false,
-  modelValue: "",
-  errorMsg: "",
-  noButton: true,
-  closeOnClickOverlay: true,
+  plain: false,
+  hideFooter: true,
   length: 6,
-  className: "",
-  autoFocus: false,
-  onChange: function onChange(value) {
-  },
-  onOk: function onOk(value) {
-  },
-  onCancel: function onCancel() {
-  },
-  onClose: function onClose() {
-  },
-  onTips: function onTips() {
-  },
-  onComplete: function onComplete(value) {
-  }
+  autoFocus: false
 });
 var ShortPassword = function ShortPassword2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var title = props.title, description = props.description, tips = props.tips, tipsIcon = props.tipsIcon, iconSize = props.iconSize, visible = props.visible, modelValue = props.modelValue, errorMsg = props.errorMsg, noButton = props.noButton, closeOnClickOverlay = props.closeOnClickOverlay, length = props.length, style = props.style, className = props.className, onChange2 = props.onChange, onOk2 = props.onOk, onTips2 = props.onTips, onCancel2 = props.onCancel, onClose2 = props.onClose, onComplete2 = props.onComplete, autoFocus = props.autoFocus, reset = _objectWithoutProperties(props, _excluded);
-  var b = cn("shortpassword");
-  var textInput = useRef(null);
-  var range = function range2(val) {
-    return Math.min(Math.max(4, val), 6);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), title = _defaultProps$props.title, description = _defaultProps$props.description, tips = _defaultProps$props.tips, visible = _defaultProps$props.visible, value = _defaultProps$props.value, error = _defaultProps$props.error, hideFooter = _defaultProps$props.hideFooter, length = _defaultProps$props.length, plain = _defaultProps$props.plain, style = _defaultProps$props.style, className = _defaultProps$props.className, closeable = _defaultProps$props.closeable, autoFocus = _defaultProps$props.autoFocus, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, onConfirm = _defaultProps$props.onConfirm, onTips = _defaultProps$props.onTips, onCancel = _defaultProps$props.onCancel, onClose = _defaultProps$props.onClose, onComplete = _defaultProps$props.onComplete, onClickOverlay = _defaultProps$props.onClickOverlay, onClickCloseIcon = _defaultProps$props.onClickCloseIcon, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-shortpassword";
+  var comLen = useMemo(function() {
+    return Math.min(Math.max(4, length || 4), 6);
+  }, [length]);
+  var format = function format2(val) {
+    return val.slice(0, comLen);
   };
-  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), innerVisible = _useState2[0], setInnerVisible = _useState2[1];
-  var _useState3 = useState(range(Number(length))), _useState4 = _slicedToArray(_useState3, 2), comLen = _useState4[0], setComLen = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), inputValue = _useState6[0], setInputValue = _useState6[1];
+  var _usePropsValue = usePropsValue({
+    value,
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), inputValue = _usePropsValue2[0], setInputValue = _usePropsValue2[1];
   useEffect(function() {
-    setInnerVisible(visible);
+    if (visible && autoFocus) {
+      onFocus && onFocus();
+    }
   }, [visible]);
   useEffect(function() {
-    if (typeof modelValue !== "undefined") {
-      setInputValue(modelValue);
-    }
-  }, [modelValue]);
-  var changeValue = function changeValue2(e) {
-    var inputValue2 = e.target.value;
-    if (String(inputValue2).length > comLen) {
-      inputValue2 = inputValue2.slice(0, comLen);
-    }
-    setInputValue(inputValue2);
-    if (String(inputValue2).length === comLen) {
-      onComplete2 && onComplete2(inputValue2);
-    }
-    onChange2 && onChange2(inputValue2);
-  };
-  var systemStyle = function systemStyle2() {
-    var u = navigator.userAgent;
-    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
-    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-    var style2 = {};
-    if (isIOS) {
-      style2 = {
-        paddingRight: "1200px"
-      };
-    }
-    if (isAndroid) {
-      style2 = {
-        opacity: 0,
-        zIndex: 10
-      };
+    var val = format(value);
+    if (val.length >= comLen) {
+      onComplete && onComplete(val);
     }
-    return style2;
-  };
-  var focus = function focus2() {
-    if (textInput.current) {
-      textInput.current.focus();
-    }
-  };
+    setInputValue(format(value));
+  }, [value]);
   var sure = function sure2() {
-    onOk2 && onOk2(inputValue);
+    onConfirm && onConfirm(inputValue);
   };
-  var renderIcon = function renderIcon2() {
-    var size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "11px";
-    return React__default.isValidElement(tipsIcon) ? React__default.cloneElement(tipsIcon, _objectSpread(_objectSpread({}, tipsIcon.props), {}, {
-      width: size,
-      height: size
-    })) : React__default.createElement(Tips, {
-      width: size,
-      height: size
-    });
-  };
-  return React__default.createElement("div", null, React__default.createElement(Popup, {
+  return React__default.createElement(Popup, _objectSpread({
     style: {
       padding: "32px 24px 28px 24px",
       borderRadius: "12px",
       textAlign: "center"
     },
-    visible: innerVisible,
+    visible,
     closeable: true,
-    "close-on-click-overlay": closeOnClickOverlay,
-    onClickOverlay: onClose2,
-    onClickCloseIcon: onClose2
-  }, React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className),
-    style: _objectSpread({}, style)
-  }, reset), React__default.createElement("div", {
-    className: b("title")
+    onClickOverlay: onClose,
+    onClickCloseIcon: onClose
+  }, rest), React__default.createElement("div", {
+    className: classNames(className, classPrefix),
+    style
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__title")
   }, title || locale.shortpassword.title), React__default.createElement("div", {
-    className: b("subtitle")
+    className: "".concat(classPrefix, "__description")
   }, description || locale.shortpassword.description), React__default.createElement("div", {
-    className: b("input")
-  }, React__default.createElement("input", {
-    ref: textInput,
-    className: b("input-real"),
-    type: "number",
-    style: systemStyle(),
-    maxLength: 6,
-    value: inputValue,
-    autoFocus,
-    onChange: function onChange3(e) {
-      return changeValue(e);
-    }
-  }), React__default.createElement("div", {
-    className: b("input-site")
+    className: "".concat(classPrefix, "__input"),
+    onClick: onFocus
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__input-site")
   }), React__default.createElement("div", {
-    className: b("input-fake"),
-    onClick: function onClick() {
-      return focus();
-    }
+    className: "".concat(classPrefix, "__input-fake")
   }, _toConsumableArray(new Array(comLen).keys()).map(function(item, index) {
     return React__default.createElement("div", {
-      className: b("input-fake__li"),
+      className: "".concat(classPrefix, "__input-fake__li"),
       key: index
-    }, String(inputValue).length > index ? React__default.createElement("div", {
-      className: b("input-fake__li__icon")
-    }) : null);
+    }, inputValue.length > index && React__default.createElement(React__default.Fragment, null, plain ? inputValue[index] : React__default.createElement("div", {
+      className: "".concat(classPrefix, "__input-fake__li__icon")
+    })));
   }))), React__default.createElement("div", {
-    className: b("message")
+    className: "".concat(classPrefix, "__message")
   }, React__default.createElement("div", {
-    className: b("message__error")
-  }, errorMsg), tips || locale.shortpassword.tips ? React__default.createElement("div", {
-    className: b("message__forget")
-  }, renderIcon(iconSize), React__default.createElement("div", {
-    className: b("message__forget-tips"),
-    onClick: onTips2
-  }, tips || locale.shortpassword.tips)) : null), !noButton ? React__default.createElement("div", {
-    className: b("footer")
+    className: "".concat(classPrefix, "__message__error")
+  }, error), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__message__forget"),
+    onClick: onTips
+  }, tips || React__default.createElement(React__default.Fragment, null, React__default.createElement(Tips, {
+    width: 11,
+    height: 11,
+    style: {
+      marginRight: "3px"
+    }
+  }), locale.shortpassword.tips))), !hideFooter && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__footer")
   }, React__default.createElement("div", {
-    className: b("footer__cancel"),
-    onClick: onCancel2
+    className: "".concat(classPrefix, "__footer__cancel"),
+    onClick: onCancel
   }, locale.cancel), React__default.createElement("div", {
-    className: b("footer__sure"),
-    onClick: function onClick() {
-      return sure();
-    }
-  }, locale.confirm)) : null)));
+    className: "".concat(classPrefix, "__footer__sure"),
+    onClick: sure
+  }, locale.confirm))));
 };
 ShortPassword.defaultProps = defaultProps;
 ShortPassword.displayName = "NutShortPassword";

package/dist/esm/SideNavBar/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}.nut-popup-slide-center-enter,.nut-popup-slide-center-exit{opacity:0}.nut-popup-slide-center-enter-active{opacity:1;transition:opacity .5s ease}.nut-popup-slide-top-enter{transform:translateY(-100%)}.nut-popup-slide-top-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-top-exit{transform:translate(0)}.nut-popup-slide-top-exit-active,.nut-popup-slide-top-exit-done{transform:translateY(-100%);transition:transform .5s}.nut-popup-slide-right-enter{transform:translate(100%)}.nut-popup-slide-right-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-right-exit{transform:translate(0)}.nut-popup-slide-right-exit-active,.nut-popup-slide-right-exit-done{transform:translate(100%);transition:transform .5s}.nut-popup-slide-bottom-enter{transform:translateY(100%)}.nut-popup-slide-bottom-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-bottom-exit{transform:translate(0)}.nut-popup-slide-bottom-exit-active,.nut-popup-slide-bottom-exit-done{transform:translateY(100%);transition:transform .5s}.nut-popup-slide-left-enter{transform:translate(-100%)}.nut-popup-slide-left-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-left-exit{transform:translate(0)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{transform:translate(-100%);transition:transform .5s}.nut-overflow-hidden{overflow:hidden!important}.nut-sidenavbar{color:#1d1d21;font-size:14px;height:100%;overflow:auto;display:block;background-color:var(--nutui-gray-6, #ffffff)}.nut-sidenavbar .arrow-icon{position:absolute;width:0;height:0;right:16px;top:18px;cursor:pointer}.nut-sidenavbar .arrow-down{border-top:4px solid #909ca4;border-left:4px solid transparent;border-right:4px solid transparent}.nut-sidenavbar .arrow-up{border-bottom:4px solid #909ca4;border-left:4px solid transparent;border-right:4px solid transparent}.nut-sidenavbar__head{height:40px;background:#eeeff2;padding:10px}.nut-sidenavbar__title{height:40px;padding:10px 8px 10px 20px;background:var(--nutui-gray-4, #f4f4f4);color:var(--nutui-gray-1, #1a1a1a)}.nut-sidenavbar__content{position:relative;display:block}.nut-sidenavbar__list.nutShow .nut-sidenavbar__content{height:auto;overflow:inherit}.nut-sidenavbar__list.nutHide .nut-sidenavbar__content{height:0;overflow:hidden}.nut-sidenavbar .border-bt{position:relative}.nut-sidenavbar .border-bt:after{content:"";position:absolute;width:100%;height:1px;background:#eeeff2;transform:scaleY(.5);left:0;bottom:0}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-sidenavbar{color:#1d1d21;font-size:14px;height:100%;overflow:auto;display:block;background-color:var(--nutui-gray-6, #ffffff)}.nut-sidenavbar .arrow-icon{position:absolute;width:0;height:0;right:16px;top:18px;cursor:pointer}.nut-sidenavbar .arrow-down{border-top:4px solid #909ca4;border-left:4px solid transparent;border-right:4px solid transparent}.nut-sidenavbar .arrow-up{border-bottom:4px solid #909ca4;border-left:4px solid transparent;border-right:4px solid transparent}.nut-sidenavbar__head{height:40px;background:#eeeff2;padding:10px}.nut-sidenavbar__title{height:40px;padding:10px 8px 10px 20px;background:var(--nutui-gray-4, #f4f4f4);color:var(--nutui-gray-1, #1a1a1a)}.nut-sidenavbar__content{position:relative;display:block}.nut-sidenavbar__list.nutShow .nut-sidenavbar__content{height:auto;overflow:inherit}.nut-sidenavbar__list.nutHide .nut-sidenavbar__content{height:0;overflow:hidden}.nut-sidenavbar .border-bt{position:relative}.nut-sidenavbar .border-bt:after{content:"";position:absolute;width:100%;height:1px;background:#eeeff2;transform:scaleY(.5);left:0;bottom:0}

package/dist/esm/TimeSelect/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}.nut-popup-slide-center-enter,.nut-popup-slide-center-exit{opacity:0}.nut-popup-slide-center-enter-active{opacity:1;transition:opacity .5s ease}.nut-popup-slide-top-enter{transform:translateY(-100%)}.nut-popup-slide-top-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-top-exit{transform:translate(0)}.nut-popup-slide-top-exit-active,.nut-popup-slide-top-exit-done{transform:translateY(-100%);transition:transform .5s}.nut-popup-slide-right-enter{transform:translate(100%)}.nut-popup-slide-right-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-right-exit{transform:translate(0)}.nut-popup-slide-right-exit-active,.nut-popup-slide-right-exit-done{transform:translate(100%);transition:transform .5s}.nut-popup-slide-bottom-enter{transform:translateY(100%)}.nut-popup-slide-bottom-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-bottom-exit{transform:translate(0)}.nut-popup-slide-bottom-exit-active,.nut-popup-slide-bottom-exit-done{transform:translateY(100%);transition:transform .5s}.nut-popup-slide-left-enter{transform:translate(-100%)}.nut-popup-slide-left-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-left-exit{transform:translate(0)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{transform:translate(-100%);transition:transform .5s}.nut-overflow-hidden{overflow:hidden!important}.nut-theme-dark .nut-timepannel{background-color:#141414;color:#828282}.nut-theme-dark .nut-timepannel--curr{background-color:#141414;color:#e6e6e6}.nut-timepannel{height:var(--nutui-timeselect-timepannel-height, 40px);line-height:40px;text-align:center;color:var(--nutui-timeselect-timepannel-text-color, var(--nutui-gray-2, #757575));font-size:var(--nutui-timeselect-timepannel-font-size, var(--nutui-font-size-2, 14px))}.nut-theme-dark .nut-timedetail{background-color:#1f1f1f}.nut-theme-dark .nut-timedetail__detail__list__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__detail__list__item--curr{color:var(--nutui-timeselect-timedetail-item-cur-text-color, var(--nutui-brand-color, #fa2c19))}.nut-timedetail{display:flex;align-content:flex-start;flex-wrap:wrap;padding:0 0 50px 13px}.nut-timedetail__item{width:100px;height:50px;line-height:50px;text-align:center;margin-right:10px;margin-bottom:10px;background-color:var(--nutui-gray-4, #f4f4f4);color:var(--nutui-gray-1, #1a1a1a);border-radius:5px;font-size:14px;border:1px solid transparent;font-weight:700}.nut-timedetail__item-active{background-color:#fa2c19}.nut-timedetail__item-active{background-color:var(--nutui-brand-color-opacity);border:1px solid var(--nutui-brand-color, #fa2c19);color:var(--nutui-brand-color, #fa2c19)}.nut-theme-dark .nut-timeselect{background-color:#1f1f1f}.nut-theme-dark .nut-timeselect__title{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left{background-color:#141414;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left .nut-timepannel-active{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item-active{background-color:#fa2c19}.nut-timeselect{background-color:var(--nutui-gray-6, #ffffff);display:flex;flex-direction:column;height:100%}.nut-timeselect__title{height:var(--nutui-timeselect-title-height, 50px);line-height:var(--nutui-timeselect-title-line-height, 50px);margin-bottom:10px;font-size:var(--nutui-timeselect-title-font-size, var(--nutui-font-size-2, 14px));background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);text-align:center}.nut-timeselect__content{display:flex;flex:1}.nut-timeselect__content-left{width:140px;min-width:140px;height:100%;overflow:auto;background-color:var(--nutui-gray-5, #f8f8f8);color:var(--nutui-gray-1, #1a1a1a)}.nut-timeselect__content-left .nut-timepannel-active{background-color:var(--nutui-brand-color, #fa2c19)}.nut-timeselect .nut-timepannel-active{background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);font-weight:700}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-theme-dark .nut-timepannel{background-color:#141414;color:#828282}.nut-theme-dark .nut-timepannel--curr{background-color:#141414;color:#e6e6e6}.nut-timepannel{height:var(--nutui-timeselect-timepannel-height, 40px);line-height:40px;text-align:center;color:var(--nutui-timeselect-timepannel-text-color, var(--nutui-gray-2, #757575));font-size:var(--nutui-timeselect-timepannel-font-size, var(--nutui-font-size-2, 14px))}.nut-theme-dark .nut-timedetail{background-color:#1f1f1f}.nut-theme-dark .nut-timedetail__detail__list__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__detail__list__item--curr{color:var(--nutui-timeselect-timedetail-item-cur-text-color, var(--nutui-brand-color, #fa2c19))}.nut-timedetail{display:flex;align-content:flex-start;flex-wrap:wrap;padding:0 0 50px 13px}.nut-timedetail__item{width:100px;height:50px;line-height:50px;text-align:center;margin-right:10px;margin-bottom:10px;background-color:var(--nutui-gray-4, #f4f4f4);color:var(--nutui-gray-1, #1a1a1a);border-radius:5px;font-size:14px;border:1px solid transparent;font-weight:700}.nut-timedetail__item-active{background-color:#fa2c19}.nut-timedetail__item-active{background-color:var(--nutui-brand-color-opacity);border:1px solid var(--nutui-brand-color, #fa2c19);color:var(--nutui-brand-color, #fa2c19)}.nut-theme-dark .nut-timeselect{background-color:#1f1f1f}.nut-theme-dark .nut-timeselect__title{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left{background-color:#141414;color:#e6e6e6}.nut-theme-dark .nut-timeselect__content-left .nut-timepannel-active{background-color:#1f1f1f;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item{background-color:#0a0a0a;color:#e6e6e6}.nut-theme-dark .nut-timedetail__item-active{background-color:#fa2c19}.nut-timeselect{background-color:var(--nutui-gray-6, #ffffff);display:flex;flex-direction:column;height:100%}.nut-timeselect__title{height:var(--nutui-timeselect-title-height, 50px);line-height:var(--nutui-timeselect-title-line-height, 50px);margin-bottom:10px;font-size:var(--nutui-timeselect-title-font-size, var(--nutui-font-size-2, 14px));background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);text-align:center}.nut-timeselect__content{display:flex;flex:1}.nut-timeselect__content-left{width:140px;min-width:140px;height:100%;overflow:auto;background-color:var(--nutui-gray-5, #f8f8f8);color:var(--nutui-gray-1, #1a1a1a)}.nut-timeselect__content-left .nut-timepannel-active{background-color:var(--nutui-brand-color, #fa2c19)}.nut-timeselect .nut-timepannel-active{background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);font-weight:700}

package/dist/esm/Toast/style/style.css

@@ -1 +1 @@
-@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.nut-toast{position:fixed;left:0;bottom:150px;width:100%;text-align:center;pointer-events:none;z-index:9999}.nut-toast-small .nut-toast__inner{font-size:var(--nutui-font-size-1, 12px)}.nut-toast-large .nut-toast__inner{font-size:var(--nutui-font-size-3, 16px)}.nut-toast-cover{display:flex;align-items:center;justify-content:center;pointer-events:auto;height:100%;background:var(--nutui-toast-cover-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-toast__inner{display:inline-block;font-size:var(--nutui-toast-text-font-size, 14px);min-width:40%;max-width:65%;text-align:center;padding:var(--nutui-toast-inner-padding, 24px 30px);word-break:break-all;background:var(--nutui-toast-inner-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, 12px);color:var(--nutui-toast-font-color, #fff)}.nut-toast-text{font-size:var(--nutui-toast-text-font-size, 14px)}.nut-toast-text:empty{margin-bottom:-8px}.nut-toast-title{font-size:var(--nutui-toast-title-font-size, 16px)}.nut-toast-title:empty{margin-bottom:-8px}.nut-toast-has-icon .nut-toast__icon-wrapper{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.nut-toast-center{top:50%;transform:translateY(-50%)}.nut-toast-loading .nut-toast__inner{display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.nut-toast-loading .nut-toast__icon-wrapper{animation:rotation 2s linear infinite}.toast-fade-enter-active,.toast-fade-leave-active{transition:opacity .3s}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0}
+@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.nut-toast{position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;pointer-events:none;z-index:9999}.nut-toast__overlay-default{--nutui-overlay-bg-color: rgba(0, 0, 0, 0)}.nut-toast-small .nut-toast__inner{font-size:var(--nutui-font-size-1, 12px)}.nut-toast-large .nut-toast__inner{font-size:var(--nutui-font-size-3, 16px)}.nut-toast-cover{display:flex;align-items:center;justify-content:center;pointer-events:none;height:100%;background:var(--nutui-toast-cover-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-toast__inner{display:inline-block;font-size:var(--nutui-toast-text-font-size, 14px);min-width:40%;max-width:65%;text-align:var(--nutui-toast-inner-text-align, "center");padding:var(--nutui-toast-inner-padding, 24px 30px);word-break:break-all;background:var(--nutui-toast-inner-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, 12px);color:var(--nutui-toast-font-color, #fff);position:absolute;left:50%;top:var(--nutui-toast-inner-top, 50%);transform:translate(-50%,-50%)}.nut-toast-center{top:var(--nutui-toast-inner-top, 50%)}.nut-toast-bottom{top:var(--nutui-toast-inner-top, 80%)}.nut-toast-top{top:var(--nutui-toast-inner-top, 20%)}.nut-toast-text{font-size:var(--nutui-toast-text-font-size, 14px)}.nut-toast-text:empty{margin-bottom:-8px}.nut-toast-title{font-size:var(--nutui-toast-title-font-size, 16px)}.nut-toast-title:empty{margin-bottom:-8px}.nut-toast-has-icon .nut-toast__icon-wrapper{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.nut-toast-loading .nut-toast__inner{display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.nut-toast-loading .nut-toast__icon-wrapper{animation:rotation 2s linear infinite}.toast-fade-enter-active,.toast-fade-leave-active{transition:opacity .3s}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0}

package/dist/esm/Toast.js

@@ -56,11 +56,12 @@ function _isNativeReflectConstruct() {
 }
 import * as React from "react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { r as render, u as unmount } from "./render.js";
-import { Loading } from "@nutui/icons-react";
-import "@bem-react/classname";
+import { O as Overlay } from "./overlay2.js";
+import { Issue, Failure, Loading, Check } from "@nutui/icons-react";
+import { C as ComponentDefaults } from "./typings.js";
 import "react-dom";
+var classPrefix = "nut-toast";
 var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   _inherits(Notification2, _React$PureComponent);
   var _super = _createSuper(Notification2);
@@ -104,11 +105,39 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   }, {
     key: "clickCover",
     value: function clickCover() {
-      var closeOnClickOverlay = this.props.closeOnClickOverlay;
-      if (closeOnClickOverlay) {
+      var closeOnOverlayClick = this.props.closeOnOverlayClick;
+      if (closeOnOverlayClick) {
         this.close();
       }
     }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon() {
+      var icon = this.props.icon;
+      if (typeof icon === "string") {
+        var iconNode = null;
+        switch (icon) {
+          case "success":
+            iconNode = React.createElement(Check, null);
+            break;
+          case "loading":
+            iconNode = React.createElement(Loading, {
+              className: "nut-icon-loading"
+            });
+            break;
+          case "fail":
+            iconNode = React.createElement(Failure, null);
+            break;
+          case "warn":
+            iconNode = React.createElement(Issue, null);
+            break;
+        }
+        return React.createElement("p", {
+          className: "".concat(classPrefix, "__icon-wrapper")
+        }, iconNode);
+      }
+      return icon;
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -122,38 +151,31 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   }, {
     key: "render",
     value: function render2() {
-      var _classNames, _this3 = this;
-      var _this$props = this.props, id = _this$props.id, style = _this$props.style, icon = _this$props.icon, title = _this$props.title, msg = _this$props.msg, bottom = _this$props.bottom, center = _this$props.center, bgColor = _this$props.bgColor, coverColor = _this$props.coverColor, textAlignCenter = _this$props.textAlignCenter, size = _this$props.size, customClass = _this$props.customClass, cover = _this$props.cover, type = _this$props.type;
-      var toastBem = cn("toast");
-      var classes = classNames((_classNames = {
-        "nut-toast-center": center,
-        "nut-toast-has-icon": icon,
-        "nut-toast-cover": cover,
-        "nut-toast-loading": type === "loading"
-      }, _defineProperty(_classNames, "".concat(customClass), true), _defineProperty(_classNames, "nut-toast-".concat(size), true), _classNames));
-      return React.createElement(React.Fragment, null, React.createElement("div", {
-        className: "".concat(toastBem(), " ").concat(classes),
-        id: "toast-".concat(id),
-        style: _objectSpread({
-          bottom: center ? "auto" : "".concat(bottom),
-          backgroundColor: cover ? coverColor : ""
-        }, style),
+      var _this3 = this;
+      var _this$props = this.props, id = _this$props.id, icon = _this$props.icon, title = _this$props.title, content = _this$props.content, position = _this$props.position, size = _this$props.size, closeOnOverlayClick = _this$props.closeOnOverlayClick, style = _this$props.style, className = _this$props.className, contentClassName = _this$props.contentClassName, contentStyle = _this$props.contentStyle;
+      var classes = classNames(_defineProperty({
+        "nut-toast-has-icon": icon
+      }, "nut-toast-".concat(size), true));
+      return React.createElement(React.Fragment, null, React.createElement(Overlay, {
+        visible: true,
+        style,
+        className: "".concat(classPrefix, "__overlay-default ").concat(className),
         onClick: function onClick() {
+          console.log("onclick");
           _this3.clickCover();
-        }
+        },
+        closeOnOverlayClick
       }, React.createElement("div", {
-        className: toastBem("inner"),
-        style: {
-          textAlign: textAlignCenter ? "center" : "left",
-          backgroundColor: bgColor
-        }
-      }, icon ? React.createElement("p", {
-        className: toastBem("icon-wrapper")
-      }, icon) : null, title ? React.createElement("div", {
-        className: "nut-toast-title"
+        className: "".concat(classPrefix, " ").concat(classes),
+        id: "toast-".concat(id)
+      }, React.createElement("div", {
+        className: "".concat(classPrefix, "__inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName),
+        style: contentStyle
+      }, this.renderIcon(), title ? React.createElement("div", {
+        className: "".concat(classPrefix, "-title")
       }, title) : null, React.createElement("span", {
-        className: toastBem("text")
-      }, msg))));
+        className: "".concat(classPrefix, "-text")
+      }, content)))));
     }
   }]);
   return Notification2;
@@ -184,29 +206,18 @@ Notification.newInstance = function(properties, callback) {
   })), element);
 };
 var messageInstance = null;
-var options = {
-  msg: "",
+var options = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   id: "",
-  style: {},
-  duration: 1.5,
-  center: true,
-  type: "text",
+  duration: 2,
+  position: "center",
   title: "",
-  customClass: "",
-  bottom: "30px",
   size: "base",
   icon: null,
-  iconSize: "20",
-  textAlignCenter: true,
-  loadingRotate: true,
-  bgColor: "rgba(0, 0, 0, .8)",
   onClose: function onClose() {
   },
-  cover: false,
-  coverColor: "rgba(0, 0, 0, 0)",
-  closeOnClickOverlay: false
-  // 是否点击遮罩可关闭
-};
+  closeOnOverlayClick: false,
+  contentClassName: ""
+});
 function getInstance(props, callback) {
   if (messageInstance) {
     messageInstance.destroy();
@@ -221,6 +232,7 @@ function notice(opts) {
     if (messageInstance) {
       messageInstance.destroy();
       messageInstance = null;
+      opts.onClose && opts.onClose();
     }
   }
   var opts2 = _objectSpread(_objectSpread(_objectSpread({}, options), opts), {}, {
@@ -235,59 +247,31 @@ var errorMsg = function errorMsg2(msg) {
     console.warn("[NutUI Toast]: msg cannot be null");
   }
 };
+function show(option) {
+  if (typeof option === "string") {
+    errorMsg(option);
+    return notice({
+      content: option
+    });
+  }
+  errorMsg(option.content);
+  return notice(_objectSpread({}, option));
+}
+function config(config2) {
+  if (config2.duration !== void 0) {
+    options.duration = config2.duration;
+  }
+  if (config2.position !== void 0) {
+    options.position = config2.position;
+  }
+  if (config2.closeOnOverlayClick !== void 0) {
+    options.closeOnOverlayClick = config2.closeOnOverlayClick;
+  }
+}
 var Toast = {
-  text: function text(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      type: "text"
-    }, option));
-  },
-  success: function success(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "success",
-      type: "success"
-    }, option));
-  },
-  fail: function fail(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "failure",
-      type: "fail"
-    }, option));
-  },
-  loading: function loading(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: React.createElement(Loading, null),
-      type: "loading"
-    }, option));
-  },
-  warn: function warn(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "tips",
-      type: "warn"
-    }, option));
-  },
-  customIcon: function customIcon(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg
-    }, option));
-  },
-  hide: function hide() {
+  show,
+  config,
+  clear: function clear() {
     if (messageInstance) {
       messageInstance.destroy();
       messageInstance = null;

package/dist/esm/TrendArrow/style/style.css

@@ -1 +1 @@
-.nut-trendarrow{display:inline-block;font-size:var(--nutui-trendarrow-font-size, 14px)}.nut-trendarrow__icon-before{margin-right:var(--nutui-trendarrow-before-icon-margin, 4px)}.nut-trendarrow__icon-after{margin-left:var(--nutui-trendarrow-before-icon-margin, 4px)}.nut-trendarrow__rate{vertical-align:middle;display:inline}.nut-trendarrow .nut-icon{vertical-align:middle}
+.nut-trendarrow{display:inline-flex;align-items:center;font-size:var(--nutui-trendarrow-font-size, 14px)}.nut-trendarrow__icon-before{margin-right:var(--nutui-trendarrow-icon-margin, 4px)}.nut-trendarrow__icon-after{margin-left:var(--nutui-trendarrow-icon-margin, 4px)}.nut-trendarrow__rate{vertical-align:middle;display:inline}.nut-trendarrow .nut-icon{vertical-align:middle}