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

package/dist/esm/NoticeBar.js

@@ -24,50 +24,44 @@ function _objectSpread(target) {
 import React__default, { useRef, useState, useMemo, useEffect } from "react";
 import { Notice, Close } from "@nutui/icons-react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  // 滚动方向  across 横向 vertical 纵向
-  direction: "across",
+  direction: "horizontal",
   list: [],
-  standTime: 1e3,
-  complexAm: false,
+  duration: 1e3,
   height: 40,
-  text: "",
-  closeMode: false,
-  wrapable: false,
+  content: "",
+  closeable: false,
+  wrap: false,
   leftIcon: null,
   rightIcon: null,
-  color: "",
-  background: "",
   delay: 1,
   scrollable: null,
   speed: 50
 });
 var NoticeBar = function NoticeBar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, direction = _defaultProps$props.direction, list = _defaultProps$props.list, standTime = _defaultProps$props.standTime, complexAm = _defaultProps$props.complexAm, height = _defaultProps$props.height, text = _defaultProps$props.text, closeMode = _defaultProps$props.closeMode, wrapable = _defaultProps$props.wrapable, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, color = _defaultProps$props.color, background = _defaultProps$props.background, delay = _defaultProps$props.delay, scrollable = _defaultProps$props.scrollable, speed = _defaultProps$props.speed, close = _defaultProps$props.close, click = _defaultProps$props.click, onClose = _defaultProps$props.onClose, onClick = _defaultProps$props.onClick, onClickItem = _defaultProps$props.onClickItem;
-  var wrap = useRef(null);
-  var content = useRef(null);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, direction = _defaultProps$props.direction, list = _defaultProps$props.list, duration = _defaultProps$props.duration, height = _defaultProps$props.height, content = _defaultProps$props.content, closeable = _defaultProps$props.closeable, wrap = _defaultProps$props.wrap, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, delay = _defaultProps$props.delay, scrollable = _defaultProps$props.scrollable, speed = _defaultProps$props.speed, close = _defaultProps$props.close, click = _defaultProps$props.click, onClose = _defaultProps$props.onClose, onClick = _defaultProps$props.onClick, onClickItem = _defaultProps$props.onClickItem;
+  var classPrefix = "nut-noticebar";
+  var wrapRef = useRef(null);
+  var contentRef = useRef(null);
   var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), showNoticeBar = _useState2[0], SetShowNoticeBar = _useState2[1];
   var scrollList = useRef([]);
   var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), wrapWidth = _useState4[0], SetWrapWidth = _useState4[1];
   var _useState5 = useState(true), _useState6 = _slicedToArray(_useState5, 2), firstRound = _useState6[0], SetFirstRound = _useState6[1];
-  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), duration = _useState8[0], SetDuration = _useState8[1];
+  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), animationDuration = _useState8[0], SetAnimationDuration = _useState8[1];
   var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), offsetWidth = _useState10[0], SetOffsetW = _useState10[1];
   var _useState11 = useState(""), _useState12 = _slicedToArray(_useState11, 2), animationClass = _useState12[0], SetAnimationClass = _useState12[1];
   var _useState13 = useState(false), _useState14 = _slicedToArray(_useState13, 2), animate = _useState14[0], SetAnimate = _useState14[1];
-  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), distance = _useState16[0], SetDistance = _useState16[1];
-  var _useState17 = useState(0), _useState18 = _slicedToArray(_useState17, 2), timer = _useState18[0], SetTimer = _useState18[1];
-  var _useState19 = useState(null), _useState20 = _slicedToArray(_useState19, 2), isCanScroll = _useState20[0], SetIsCanScroll = _useState20[1];
+  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), timer = _useState16[0], SetTimer = _useState16[1];
+  var _useState17 = useState(null), _useState18 = _slicedToArray(_useState17, 2), isCanScroll = _useState18[0], SetIsCanScroll = _useState18[1];
   var isVertical = direction === "vertical";
-  var _useState21 = useState(null), _useState22 = _slicedToArray(_useState21, 2), rect = _useState22[0], setRect = _useState22[1];
+  var _useState19 = useState(null), _useState20 = _slicedToArray(_useState19, 2), rect = _useState20[0], setRect = _useState20[1];
   var active = 0;
-  var _useState23 = useState(false), _useState24 = _slicedToArray(_useState23, 2), ready = _useState24[0], setReady = _useState24[1];
+  var _useState21 = useState(false), _useState22 = _slicedToArray(_useState21, 2), ready = _useState22[0], setReady = _useState22[1];
   var container = useRef(null);
   var innerRef = useRef(null);
-  var _swiper = useRef({
+  var swiperRef = useRef({
     moving: false,
     autoplayTimer: null,
     width: 0,
@@ -75,8 +69,8 @@ var NoticeBar = function NoticeBar2(props) {
     offset: 0,
     size: 0
   });
-  var _useState25 = useState([]), _useState26 = _slicedToArray(_useState25, 2), childOffset = _useState26[0], setChildOffset = _useState26[1];
-  var _useState27 = useState(0), _useState28 = _slicedToArray(_useState27, 2), offset = _useState28[0], setOffset = _useState28[1];
+  var _useState23 = useState([]), _useState24 = _slicedToArray(_useState23, 2), childOffset = _useState24[0], setChildOffset = _useState24[1];
+  var _useState25 = useState(0), _useState26 = _slicedToArray(_useState25, 2), offset = _useState26[0], setOffset = _useState26[1];
   var _useMemo = useMemo(function() {
     var childCount2 = 0;
     var childs2 = React__default.Children.map(children, function(child) {
@@ -106,7 +100,6 @@ var NoticeBar = function NoticeBar2(props) {
         scrollList.current = [].concat(list);
         startRollEasy();
       }
-      complexAm && startRoll();
     } else {
       initScrollWrap();
     }
@@ -116,7 +109,7 @@ var NoticeBar = function NoticeBar2(props) {
   }, []);
   useEffect(function() {
     initScrollWrap();
-  }, [text]);
+  }, [content]);
   useEffect(function() {
     if (list && list.length) {
       scrollList.current = [].concat(list);
@@ -127,17 +120,17 @@ var NoticeBar = function NoticeBar2(props) {
       return;
     }
     setTimeout(function() {
-      if (!wrap.current || !content.current) {
+      if (!wrapRef.current || !contentRef.current) {
         return;
       }
-      var wrapW = getRect(wrap.current).width;
-      var offsetW = getRect(content.current).width;
+      var wrapW = getRect(wrapRef.current).width;
+      var offsetW = getRect(contentRef.current).width;
       var canScroll = scrollable == null ? offsetW > wrapW : scrollable;
       SetIsCanScroll(canScroll);
       if (canScroll) {
         SetWrapWidth(wrapW);
         SetOffsetW(offsetW);
-        SetDuration(offsetW / speed);
+        SetAnimationDuration(offsetW / speed);
         SetAnimationClass("play");
       } else {
         SetAnimationClass("");
@@ -150,21 +143,21 @@ var NoticeBar = function NoticeBar2(props) {
   };
   var onClickIcon = function onClickIcon2(event) {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   var onAnimationEnd = function onAnimationEnd2() {
     SetFirstRound(false);
     setTimeout(function() {
-      SetDuration((offsetWidth + wrapWidth) / speed);
+      SetAnimationDuration((offsetWidth + wrapWidth) / speed);
       SetAnimationClass("play-infinite");
     }, 0);
   };
   var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
   var startRollEasy = function startRollEasy2() {
     showhorseLamp();
-    var timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
+    var timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
     SetTimer(timerCurr);
   };
   var showhorseLamp = function showhorseLamp2() {
@@ -175,55 +168,29 @@ var NoticeBar = function NoticeBar2(props) {
       SetAnimate(false);
     }, time);
   };
-  var startRoll = function startRoll2() {
-    var timerCurr = window.setInterval(function() {
-      var chunk = 100;
-      for (var i = 0; i < chunk; i++) {
-        scroll(i, !(i < chunk - 1));
-      }
-    }, Number(standTime) + 100 * speed);
-    SetTimer(timerCurr);
-  };
-  var scroll = function scroll2(n, last) {
-    SetAnimate(true);
-    setTimeout(function() {
-      var _long = distance;
-      _long -= height / 100;
-      SetDistance(_long);
-      if (last) {
-        scrollList.current.push(scrollList.current[0]);
-        scrollList.current.shift();
-        SetDistance(0);
-        SetAnimate(false);
-      }
-    }, n * speed);
-  };
   var handleClickIcon = function handleClickIcon2(event) {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   var isEllipsis = function isEllipsis2() {
     if (isCanScroll == null) {
-      return wrapable;
+      return wrap;
     }
-    return !isCanScroll && !wrapable;
+    return !isCanScroll && !wrap;
   };
   var contentStyle = {
     animationDelay: "".concat(firstRound ? delay : 0, "s"),
-    animationDuration: "".concat(duration, "s"),
+    animationDuration: "".concat(animationDuration, "s"),
     transform: "translateX(".concat(firstRound ? 0 : "".concat(wrapWidth, "px"), ")")
   };
   var barStyle = {
-    color,
-    background,
     height: isVertical ? "".concat(height, "px") : ""
   };
   var duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
   var noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
   var horseLampStyle = {
-    transform: complexAm ? "translateY(".concat(distance, "px)") : "",
     transition: animate ? "all ".concat(duringTime === 0 ? noDuring : duringTime, "s") : "",
     marginTop: animate ? "-".concat(height, "px") : ""
   };
@@ -234,9 +201,9 @@ var NoticeBar = function NoticeBar2(props) {
     var _height = rects.height;
     trackSize = childCount * Number(_height);
     var targetOffset = getOffset(_active);
-    _swiper.current.moving = true;
+    swiperRef.current.moving = true;
     if (ready) {
-      _swiper.current.moving = false;
+      swiperRef.current.moving = false;
     }
     active2 = _active;
     setRect(rects);
@@ -260,17 +227,17 @@ var NoticeBar = function NoticeBar2(props) {
     }
   }, [children, container === null || container === void 0 ? void 0 : container.current]);
   var stopAutoPlay = function stopAutoPlay2() {
-    clearTimeout(_swiper.current.autoplayTimer);
-    _swiper.current.autoplayTimer = null;
+    clearTimeout(swiperRef.current.autoplayTimer);
+    swiperRef.current.autoplayTimer = null;
   };
   var autoplay = function autoplay2() {
     if (childCount <= 1)
       return;
     stopAutoPlay();
-    _swiper.current.autoplayTimer = setTimeout(function() {
+    swiperRef.current.autoplayTimer = setTimeout(function() {
       next();
       autoplay2();
-    }, Number(standTime) + 100 * speed);
+    }, Number(duration) + 100 * speed);
   };
   var move = function move2(_ref) {
     var _ref$pace = _ref.pace, pace = _ref$pace === void 0 ? 0 : _ref$pace, _ref$offset = _ref.offset, offset2 = _ref$offset === void 0 ? 0 : _ref$offset;
@@ -295,7 +262,7 @@ var NoticeBar = function NoticeBar2(props) {
     resettPosition();
     requestFrame(function() {
       requestFrame(function() {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         move({
           pace: 1
         });
@@ -311,7 +278,7 @@ var NoticeBar = function NoticeBar2(props) {
     var _offset = 0;
     var val = rect.height - height;
     _offset = moveOffset + Number(active === childCount - 1 && val / 2);
-    target.style.transitionDuration = "".concat(_swiper.current.moving ? 0 : standTime, "ms");
+    target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : duration, "ms");
     target.style.height = "".concat(Number(height) * childCount, "px");
     target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
   };
@@ -347,7 +314,7 @@ var NoticeBar = function NoticeBar2(props) {
     return Math.min(Math.max(num, min), max);
   };
   var resettPosition = function resettPosition2() {
-    _swiper.current.moving = true;
+    swiperRef.current.moving = true;
     if (active <= -1) {
       move({
         pace: childCount
@@ -359,12 +326,11 @@ var NoticeBar = function NoticeBar2(props) {
       });
     }
   };
-  var b = cn("noticebar");
   var noticebarClass = classNames({
     "nut-noticebar-page": true,
-    withicon: closeMode,
-    close: closeMode,
-    wrapable
+    withicon: closeable,
+    close: closeable,
+    wrapable: wrap
   });
   useEffect(function() {
     return function() {
@@ -372,9 +338,9 @@ var NoticeBar = function NoticeBar2(props) {
     };
   }, []);
   return React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className || ""),
+    className: "".concat(classPrefix, " ").concat(className || ""),
     style
-  }, showNoticeBar && direction === "across" ? React__default.createElement("div", {
+  }, showNoticeBar && direction === "horizontal" ? React__default.createElement("div", {
     className: noticebarClass,
     style: barStyle,
     onClick: handleClick
@@ -382,23 +348,21 @@ var NoticeBar = function NoticeBar2(props) {
     className: "left-icon"
   }, leftIcon || React__default.createElement(Notice, {
     width: 16,
-    height: 16,
-    color
+    height: 16
   })), React__default.createElement("div", {
-    ref: wrap,
+    ref: wrapRef,
     className: "wrap"
   }, React__default.createElement("div", {
-    ref: content,
+    ref: contentRef,
     className: "content ".concat(animationClass, " ").concat(isEllipsis() ? "nut-ellipsis" : ""),
     style: contentStyle,
     onAnimationEnd
-  }, children, text)), closeMode || rightIcon ? React__default.createElement("div", {
+  }, children, content)), closeable || rightIcon ? React__default.createElement("div", {
     className: "right-icon",
     onClick: onClickIcon
   }, rightIcon || React__default.createElement(Close, {
     width: 12,
-    height: 12,
-    color
+    height: 12
   })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle,
@@ -440,10 +404,9 @@ var NoticeBar = function NoticeBar2(props) {
     onClick: function onClick2(e) {
       handleClickIcon(e);
     }
-  }, rightIcon || (closeMode ? React__default.createElement(Close, {
+  }, rightIcon || (closeable ? React__default.createElement(Close, {
     width: 12,
-    height: 12,
-    color
+    height: 12
   }) : null))) : null);
 };
 NoticeBar.defaultProps = defaultProps;

package/dist/esm/Notify/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Notify/style/style.css

@@ -0,0 +1 @@
+.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity 1s}.fade-enter-done,.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity 1s}.fade-exit-done,.fade-appear{opacity:0}.fade-appear-active{opacity:1;transition:opacity 1s}.nut-notify{box-sizing:border-box;padding:var(--nutui-notify-padding, 12px 0);color:var(--nutui-notify-text-color, var(--nutui-gray-6, #ffffff));font-size:var(--nutui-notify-font-size, 14px);white-space:pre-wrap;text-align:center;word-wrap:break-word;height:var(--nutui-notify-height, 44px);line-height:var(--nutui-notify-line-height, auto)}.nut-notify--popup-top{position:fixed;top:0;left:0;width:100%;overflow-y:auto;transition:transform .3s;z-index:9999}.nut-notify--popup-bottom{position:fixed;bottom:0;left:0;width:100%;overflow-y:auto;transition:transform .3s;z-index:9999}.nut-notify--base{background:var(--nutui-notify-base-background-color, linear-gradient(135deg, var(--nutui-brand-color, #fa2c19) 0%, var(--nutui-brand-color-end, #fa2c19) 100%))}.nut-notify--primary{background:var(--nutui-notify-primary-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%))}.nut-notify--success{background:var(--nutui-notify-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%))}.nut-notify--danger{background:var(--nutui-notify-danger-background-color, rgb(250, 50, 25))}.nut-notify--warning{background:var(--nutui-notify-warning-background-color, linear-gradient(135deg, rgb(255, 93, 13) 0%, rgb(255, 154, 13) 100%))}

package/dist/esm/Notify.js

@@ -55,12 +55,12 @@ function _isNativeReflectConstruct() {
   }
 }
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
-import { c as cn } from "./bem.js";
-import { r as render } from "./render.js";
-import "@bem-react/classname";
+import { r as render, u as unmount } from "./render.js";
+import { C as ComponentDefaults } from "./typings.js";
+import "react-dom";
+var classPrefix = "nut-notify";
 var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   _inherits(Notification2, _React$PureComponent);
   var _super = _createSuper(Notification2);
@@ -89,7 +89,7 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
         var element = document.getElementById(this.props.id);
         element && element.parentNode && element.parentNode.removeChild(element);
       }
-      this.props.onClosed();
+      this.props.onClose();
     }
   }, {
     key: "startCloseTimer",
@@ -128,30 +128,22 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   }, {
     key: "render",
     value: function render2() {
-      var _this$props = this.props, children = _this$props.children, style = _this$props.style, msg = _this$props.msg, color = _this$props.color, background = _this$props.background, type = _this$props.type, className = _this$props.className, position = _this$props.position, isWrapTeleport = _this$props.isWrapTeleport;
-      this.state;
-      cn("notify");
-      var classes = classNames(_defineProperty({
-        "nut-notify--popup-top": position === "top",
-        "nut-notify--popup-bottom": position === "bottom",
-        "nut-notify": true
-      }, "nut-notify--".concat(type), true));
+      var _classNames;
+      var _this$props = this.props, style = _this$props.style, message = _this$props.message, type = _this$props.type, className = _this$props.className, position = _this$props.position;
+      var show = this.state.show;
+      var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "--popup-top"), position === "top"), _defineProperty(_classNames, "".concat(classPrefix, "--popup-bottom"), position === "bottom"), _defineProperty(_classNames, "".concat(classPrefix), true), _defineProperty(_classNames, "".concat(classPrefix, "--").concat(type), true), _classNames));
       return React.createElement(React.Fragment, null, React.createElement(CSSTransition, {
-        "in": this.state.show,
+        "in": show,
         timeout: 300,
         classNames: "fade",
         unmountOnExit: true,
         appear: true,
-        position,
-        isWrapTeleport
+        position
       }, React.createElement("div", {
         className: "".concat(classes, " ").concat(className),
-        style: {
-          color: "".concat(color || ""),
-          background: "".concat(background || "")
-        },
+        style,
         onClick: this.clickCover
-      }, children || msg)));
+      }, message)));
     }
   }]);
   return Notification2;
@@ -173,7 +165,7 @@ Notification.newInstance = function(properties, callback) {
       component: instance,
       destroy: function destroy() {
         setTimeout(function() {
-          ReactDOM.unmountComponentAtNode(element);
+          unmount(element);
           element && element.parentNode && element.parentNode.removeChild(element);
         }, 300);
       }
@@ -184,19 +176,16 @@ Notification.newInstance = function(properties, callback) {
   })), element);
 };
 var messageInstance = null;
-var options = {
-  msg: "",
+var options = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   id: "",
   duration: 3e3,
-  color: "",
   type: "danger",
-  className: "",
   position: "top",
-  onClosed: function onClosed() {
+  onClose: function onClose() {
   },
   onClick: function onClick() {
   }
-};
+});
 function getInstance(props, callback) {
   if (messageInstance) {
     messageInstance.destroy();
@@ -212,49 +201,49 @@ function notice(opts) {
     messageInstance = notification;
   });
 }
-var errorMsg = function errorMsg2(msg) {
-  if (!msg) {
-    console.warn("[NutUI Notify]: msg不能为空");
+var errorMsg = function errorMsg2(message) {
+  if (!message) {
+    console.warn("[NutUI Notify]: message不能为空");
   }
 };
 var Notify = {
-  text: function text(msg) {
+  text: function text(message) {
     var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
+    errorMsg(message);
     return notice(_objectSpread({
-      msg,
+      message,
       type: "base"
     }, option));
   },
-  success: function success(msg) {
+  success: function success(message) {
     var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
+    errorMsg(message);
     return notice(_objectSpread({
-      msg,
+      message,
       type: "success"
     }, option));
   },
-  primary: function primary(msg) {
+  primary: function primary(message) {
     var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
+    errorMsg(message);
     return notice(_objectSpread({
-      msg,
+      message,
       type: "primary"
     }, option));
   },
-  danger: function danger(msg) {
+  danger: function danger(message) {
     var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
+    errorMsg(message);
     return notice(_objectSpread({
-      msg,
+      message,
       type: "danger"
     }, option));
   },
-  warn: function warn(msg) {
+  warn: function warn(message) {
     var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
+    errorMsg(message);
     return notice(_objectSpread({
-      msg,
+      message,
       type: "warning"
     }, option));
   },

package/dist/esm/NumberKeyboard/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/NumberKeyboard/style/style.css

@@ -0,0 +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-numberkeyboard{width:var(--nutui-numberkeyboard-width, 100%);padding:var(--nutui-numberkeyboard-padding, 0 0 22px 0);background-color:var(--nutui-numberkeyboard-background-color, #f2f3f5);user-select:none;background-color:var(--nutui-gray-4, #f4f4f4)}.nut-numberkeyboard__header{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--nutui-numberkeyboard-header-height, 34px);padding:var(--nutui-numberkeyboard-header-padding, 6px 0 0 0);color:var(--nutui-numberkeyboard-header-color, #646566);font-size:var(--nutui-numberkeyboard-header-font-size, 16px)}.nut-numberkeyboard__header__title{color:var(--nutui-gray-1, #1a1a1a);display:inline-block}.nut-numberkeyboard__header__close{position:absolute;display:block;right:0;padding:var(--nutui-numberkeyboard-header-close-padding, 0 16px);color:var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-2, #757575));font-size:var(--nutui-numberkeyboard-header-close-font-size, 14px);background-color:var(--nutui-numberkeyboard-header-close-background-color, transparent);border:none;cursor:pointer}.nut-numberkeyboard__body{display:flex;padding:6px 0 0 6px}.nut-numberkeyboard__body__keys{display:flex;flex:3;flex-wrap:wrap}.nut-numberkeyboard__body__wrapper{position:relative;flex:1;flex-basis:33%;box-sizing:border-box;padding:0 6px 6px 0;background-color:var(--nutui-gray-5, #f8f8f8)}.nut-numberkeyboard__body__wrapper .key{display:flex;align-items:center;justify-content:center;height:var(--nutui-numberkeyboard-key-height, 48px);font-size:var(--nutui-numberkeyboard-key-font-size, 28px);line-height:var(--nutui-numberkeyboard-key-line-height, 1.5);background-color:var(--nutui-numberkeyboard-key-background-color, #fff);color:var(--nutui-numberkeyboard-key-font-color, #333);border-radius:var(--nutui-numberkeyboard-key-border-radius, 8px);cursor:pointer}.nut-numberkeyboard__body__wrapper .key.active{background-color:var(--nutui-numberkeyboard-key-active-background-color, #ebedf0)}.nut-numberkeyboard__sidebar{display:flex;flex:1;flex-direction:column}.nut-numberkeyboard__sidebar .nut-numberkeyboard__body__wrapper .key{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.nut-numberkeyboard__sidebar .nut-numberkeyboard__body__wrapper .confirm{font-size:var(--nutui-numberkeyboard-key-confirm-font-size, 16px);color:var(--nutui-numberkeyboard-key-confirm-font-color, #fff);background-color:var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-brand-color, #fa2c19))}.nut-numberkeyboard__sidebar .nut-numberkeyboard__body__wrapper .confirm.active{background-color:#ff0000b3}