@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/esm/MenuItem.js

@@ -21,17 +21,18 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import React__default, { forwardRef, useState, useEffect, useImperativeHandle, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { Check } from "@nutui/icons-react";
 import { O as Overlay } from "./overlay2.js";
+import { u as useClickAway } from "./use-click-away.js";
 import { C as ComponentDefaults } from "./typings.js";
+import "./index.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   columns: 1,
   direction: "down",
   icon: null,
-  closeOnClickAway: false,
   activeTitleClass: "",
   inactiveTitleClass: "",
   onChange: function onChange(value) {
@@ -45,9 +46,6 @@ var MenuItem = forwardRef(function(props, ref) {
   useEffect(function() {
     setShowPopup(show);
   }, [show]);
-  useEffect(function() {
-    getParentOffset();
-  }, [_showPopup]);
   useImperativeHandle(ref, function() {
     return {
       toggle: parent.toggleMenuItem
@@ -68,20 +66,6 @@ var MenuItem = forwardRef(function(props, ref) {
     setValue(item.value);
     onChange2 && onChange2(item);
   };
-  var _useState5 = useState({
-    top: 0,
-    height: 0
-  }), _useState6 = _slicedToArray(_useState5, 2), position = _useState6[0], setPosition = _useState6[1];
-  var getParentOffset = function getParentOffset2() {
-    setTimeout(function() {
-      var p = parent.menuRef.current;
-      var rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
-    });
-  };
   var isShow = function isShow2() {
     if (_showPopup)
       return {};
@@ -91,34 +75,38 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var getPosition = function getPosition2() {
     return direction === "down" ? {
-      top: "".concat(position.top + position.height, "px")
+      position: "absolute",
+      height: "".concat(window.innerHeight, "px")
     } : {
-      bottom: "".concat(window.innerHeight - position.top, "px"),
-      top: "auto"
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: "".concat(window.innerHeight, "px")
     };
   };
-  var placeholderStyle = function placeholderStyle2() {
-    if (direction === "down") {
-      return _objectSpread({
-        height: "".concat(position.top + position.height, "px"),
-        top: 0
-      }, isShow());
-    }
-    return _objectSpread({
-      height: "".concat(window.innerHeight - position.top, "px"),
-      bottom: "0px",
-      top: "auto"
-    }, isShow());
-  };
-  return React__default.createElement(React__default.Fragment, null, closeOnClickAway ? React__default.createElement("div", {
-    className: "placeholder-element ".concat(classNames({
-      up: direction === "up"
-    })),
-    style: placeholderStyle(),
-    onClick: function onClick() {
-      return parent.toggleMenuItem(index);
+  var micRef = useRef(null);
+  var targetSet = [micRef.current];
+  useClickAway(
+    function() {
+      parent.hideMenuItem(index);
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    targetSet,
+    "click",
+    false,
+    _showPopup,
+    closeOnClickAway
+  );
+  return React__default.createElement("div", {
+    className: "nut-menu-item-container",
+    ref: micRef,
+    style: {
+      position: "absolute",
+      left: 0,
+      right: 0
     }
-  }) : null, React__default.createElement(Overlay, {
+  }, React__default.createElement(Overlay, {
     className: "nut-menu__overlay",
     style: getPosition(),
     lockScroll: parent.lockScroll,
@@ -139,7 +127,7 @@ var MenuItem = forwardRef(function(props, ref) {
     classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, React__default.createElement("div", {
     className: "nut-menu-item__content"
-  }, options === null || options === void 0 ? void 0 : options.map(function(item, index2) {
+  }, options === null || options === void 0 ? void 0 : options.map(function(item) {
     return React__default.createElement("div", {
       className: "nut-menu-item__option ".concat(classNames({
         active: item.value === _value

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

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

package/dist/esm/NavBar/style/style.css

@@ -0,0 +1 @@
+.nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;padding:var(--nutui-navbar-padding, 13px 16px);background:var(--nutui-navbar-background, var(--nutui-gray-6, #ffffff));box-shadow:var(--nutui-navbar-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-2, #757575));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar--fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar--placeholder{display:inline-block;width:100%}.nut-navbar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar__title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-2, 14px));font-weight:var(--nutui-navbar-title-font-weight, 0);color:var(--nutui-navbar-title-font-color, var(--nutui-gray-1, #1a1a1a))}.nut-navbar__title .nut-tabs__titles{background:var(--nutui-gray-6, #ffffff)}.nut-navbar__title .nut-tabs__titles-item__text{color:var(--nutui-gray-1, #1a1a1a)}.nut-navbar__title .nut-tabpane{display:none}.nut-navbar__title ::-webkit-scrollbar{display:none}.nut-navbar__left,.nut-navbar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 16px}.nut-navbar__left{left:0}.nut-navbar__left__back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar__right{right:0}

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

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

package/dist/esm/NoticeBar/style/style.css

@@ -0,0 +1 @@
+.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-page{display:flex;padding:var(--nutui-noticebar-box-padding, 0 16px);height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);position:relative;align-items:center;background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-page.wrapable{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 16px)}.nut-noticebar .nut-noticebar-page.wrapable .wrap{height:auto}.nut-noticebar .nut-noticebar-page.wrapable .wrap .content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-page .withicon{position:relative;padding-right:40px}.nut-noticebar .nut-noticebar-page .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%}.nut-noticebar .nut-noticebar-page .right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}.nut-noticebar .nut-noticebar-page .wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-page .content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-page .content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-page .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-page .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-page .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 40px))}}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 16px);background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-vertical .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .horseLamp_list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .horseLamp_list .horseLamp_list_item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 40px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar__inner{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .go{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}

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,
@@ -406,7 +370,7 @@ var NoticeBar = function NoticeBar2(props) {
     onClick: handleClick
   }, leftIcon ? React__default.createElement("div", {
     className: "left-icon"
-  }, leftIcon) : null, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, leftIcon) : null, children ? React__default.createElement("div", {
     className: "nut-noticebar__inner",
     ref: innerRef
   }, scrollList.current.map(function(item, index) {
@@ -418,7 +382,7 @@ var NoticeBar = function NoticeBar2(props) {
         handleItemClick(e, item);
       }
     }, item);
-  }))) : React__default.createElement("div", {
+  })) : React__default.createElement("div", {
     className: "horseLamp_list",
     style: horseLampStyle
   }, scrollList.current.map(function(item, index) {
@@ -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/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-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.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, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@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-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}

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

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

package/dist/esm/Overlay/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-overflow-hidden{overflow:hidden!important}.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}}

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

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

package/dist/esm/Pagination/style/style.css

@@ -0,0 +1 @@
+.nut-pagination{display:flex;font-size:var(--nutui-pagination-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-pagination-color, var(--nutui-brand-color, #fa2c19))}.nut-pagination__contain{display:flex}.nut-pagination__simple{height:39px;width:124px;line-height:39px;text-align:center}.nut-pagination__prev,.nut-pagination__item,.nut-pagination__next{height:39px;min-width:39px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-6, #ffffff);border-radius:var(--nutui-pagination-item-border-radius, 2px);border:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb);cursor:pointer}.nut-pagination__prev,.nut-pagination__item{border-right:none}.nut-pagination__prev,.nut-pagination__next{padding:var(--nutui-pagination-prev-next-padding, 0 11px)}.nut-pagination .simple-border{border-right:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb)}.nut-pagination .active{color:var(--nutui-gray-6, #ffffff);border:none;background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%)}.nut-pagination .disabled{color:var(--nutui-pagination-disable-color, var(--nutui-gray-3, #bfbfbf));background-color:var(--nutui-pagination-disable-background-color, #f7f8fa);cursor:not-allowed}

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

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

package/dist/esm/Picker/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-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.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, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@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-picker{background-color:var(--nutui-gray-6, #ffffff);width:100%}.nut-picker__control{display:flex;height:56px;font-size:16px;align-items:center;justify-content:space-between;padding:var(--nutui-picker-bar-button-padding, 0 15px)}.nut-picker__cancel-btn{color:var(--nutui-picker-cancel-color, #808080);font-size:var(--nutui-picker-bar-cancel-font-size, 14px)}.nut-picker__confirm-btn{color:var(--nutui-picker-ok-color, var(--nutui-brand-color, #fa2c19));font-size:var(--nutui-picker-bar-ok-font-size, 14px)}.nut-picker__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--nutui-picker-bar-title-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-bar-title-font-size, 16px);font-weight:var(--nutui-picker-bar-title-font-weight, normal)}.nut-picker__panel{display:flex;position:relative}.nut-picker-indicator{position:absolute;top:108px;height:var(--nutui-picker-item-height, 36px);width:100%;border:var(--nutui-picker-item-active-line-border, 1px solid #d8d8d8);border-left:0;border-right:0;color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);z-index:3}.nut-picker-list{flex:1;position:relative;height:var(--nutui-picker-list-height, 252px);overflow:hidden;text-align:center}.nut-picker-list-panel{transform-style:preserve-3d}.nut-picker-mask{position:absolute;top:0;left:0;right:0;bottom:0;background-image:var(--picker-mask-bg-img, linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)));background-position:top,bottom;background-size:100% 108px;background-repeat:no-repeat;z-index:3}.nut-picker-view-panel{height:var(--nutui-picker-list-height, 252px);flex-grow:1}.nut-picker-content,.nut-picker-roller{position:absolute;top:108px;width:100%;height:var(--nutui-picker-item-height, 36px)}.nut-picker-content{background:#fff;z-index:2;overflow:hidden}.nut-picker-item,.nut-picker-roller-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:var(--nutui-picker-item-height, 36px);line-height:var(--nutui-picker-item-height, 36px);color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);text-align:center}.nut-picker-item{font-size:16px;background:#fff}.nut-picker-roller{z-index:1;transform-style:preserve-3d}.nut-picker-roller-item{backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;top:0;width:100%;color:var(--nutui-gray-1, #1a1a1a)}.nut-picker-roller-item-title{display:block;width:100%;height:36px;line-height:36px;text-align:center;color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-picker-bar-title-font-size, 16px)}.nut-picker-roller-item-hidden{visibility:hidden;opacity:0}.nut-picker-placeholder{height:1px}