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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.0.0-alpha.12
+`2023-05-26`
+
+* 🛠 refactor: actionSheet (#1053) @xiaoyatong
+* 🛠 refactor: countdown (#1040) @拧巴的猫
+* 🛠 refactor: searchBar (#1047) @xiaoyatong
+* 🛠 refactor: shortPassword (#1046) @Eiinu
+* 🛠 refactor: toast (#1026) @justExplore
+* 🛠 refactor: virtualList (#1056) @Eiinu
+* :sparkles: feat: ellipsis add width attribute (#1038) @Zhu Da Shuai
+* :sparkles: feat: 导出主题中的 CSS 变量类型 (#1050) @oasis-cloud
+* 📖 docs: import touch-emulator (#1045) @oasis-cloud
+
+
 # v2.0.0-alpha.11
 `2023-05-24`
 

package/dist/esm/ActionSheet/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-actionsheet{background-color:#141414;color:#e6e6e6}.nut-theme-dark .nut-actionsheet__menu .nut-actionsheet__item{background-color:#141414;color:#e6e6e6!important}.nut-theme-dark .nut-actionsheet__menu .nut-actionsheet__item .subdesc{color:#828282}.nut-theme-dark .nut-actionsheet__menu .nut-actionsheet__item:hover{background-color:#141414}.nut-theme-dark .nut-actionsheet .nut-actionsheet__cancel{background-color:#141414;color:#828282;border-top:none}.nut-theme-dark .nut-actionsheet .nut-actionsheet__title{background-color:#141414;color:#e6e6e6;border-top:none}.nut-theme-dark .nut-actionsheet .description{background-color:#141414;color:#828282}.nut-actionsheet{display:block;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.nut-actionsheet .nut-actionsheet__title{display:block;padding:10px;margin:0;text-align:center;background-color:var(--nutui-gray-6, #ffffff);border-bottom:1px solid var(--nutui-light-color, #f6f6f6);font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-gray-1, #1a1a1a)}.nut-actionsheet .nut-actionsheet-modal .nut-actionsheet__title,.nut-actionsheet .nut-actionsheet-modal .nut-actionsheet-sub-title{padding:5px 0}.nut-actionsheet .nut-actionsheet-modal .nut-actionsheet-sub-title{display:block;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-1, #1a1a1a);margin-inline-start:0px}.nut-actionsheet .nut-actionsheet__menu{display:block;list-style:none;padding:0;margin:0}.nut-actionsheet .nut-actionsheet__cancel,.nut-actionsheet .nut-actionsheet__item{display:block;padding:10px;line-height:24px;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-gray-1, #1a1a1a);text-align:center;background-color:var(--nutui-gray-6, #ffffff);cursor:pointer}.nut-actionsheet .description{font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-gray-2, #757575)}.nut-actionsheet .subdesc{display:block;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-actionsheet .nut-actionsheet__item-disabled{color:#e1e1e1!important;cursor:not-allowed}.nut-actionsheet .nut-actionsheet__cancel{margin-top:5px;border-top:1px solid var(--nutui-light-color, #f6f6f6)}
+.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-actionsheet{display:block;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);text-align:center}.nut-actionsheet .nut-actionsheet__title{display:block;padding:10px;margin:0;background-color:var(--nutui-gray-6, #ffffff);border-bottom:1px solid var(--nutui-actionsheet-border-color, #f6f6f6);font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a)}.nut-actionsheet .nut-actionsheet__description{padding:10px;display:block;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-gray-2, #757575);margin-inline-start:0px}.nut-actionsheet .nut-actionsheet__list{display:block;list-style:none;padding:0;margin:0}.nut-actionsheet .nut-actionsheet__cancel,.nut-actionsheet .nut-actionsheet__item{display:block;padding:10px;text-align:var(--nutui-actionsheet-item-text-align, center);line-height:var(--nutui-actionsheet-item-line-height, 24px);font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-actionsheet-item-color, var(--nutui-gray-1, #1a1a1a));background-color:var(--nutui-gray-6, #ffffff);cursor:pointer}.nut-actionsheet .nut-actionsheet__cancel-description,.nut-actionsheet .nut-actionsheet__item-description{display:block;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-actionsheet .nut-actionsheet__cancel.danger,.nut-actionsheet .nut-actionsheet__item.danger{color:var(--nutui-actionsheet-item-danger, var(--nutui-brand-color, #fa2c19))}.nut-actionsheet .nut-actionsheet__cancel.disabled,.nut-actionsheet .nut-actionsheet__item.disabled{color:#e1e1e1!important;cursor:not-allowed}.nut-actionsheet .nut-actionsheet__cancel{margin-top:5px;border-top:1px solid var(--nutui-actionsheet-border-color, #f6f6f6)}

package/dist/esm/ActionSheet.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "cancelText", "optionTag", "optionSubTag", "chooseTagValue", "title", "color", "description", "menuItems", "onCancel", "onChoose", "visible", "className", "style"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "cancelText", "optionKey", "title", "description", "options", "onCancel", "onSelect", "visible", "className", "style"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,37 +24,31 @@ function _objectSpread(target) {
 }
 import React__default from "react";
 import Popup from "./Popup.js";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
-  cancelText: "",
-  optionTag: "name",
-  optionSubTag: "subname",
-  chooseTagValue: "",
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  visible: false,
   title: "",
-  color: "#ee0a24",
   description: "",
-  menuItems: [],
-  onCancel: function onCancel() {
+  options: [],
+  optionKey: {
+    name: "name",
+    description: "description"
   },
-  onChoose: function onChoose() {
+  cancelText: "",
+  onCancel: function onCancel() {
   },
-  visible: false,
-  className: "",
-  style: {}
-};
+  onSelect: function onSelect() {
+  }
+});
 var ActionSheet = function ActionSheet2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, cancelText = _defaultProps$props.cancelText, optionTag = _defaultProps$props.optionTag, optionSubTag = _defaultProps$props.optionSubTag, chooseTagValue = _defaultProps$props.chooseTagValue, title = _defaultProps$props.title, color = _defaultProps$props.color, description = _defaultProps$props.description, menuItems = _defaultProps$props.menuItems, onCancel2 = _defaultProps$props.onCancel, onChoose2 = _defaultProps$props.onChoose, visible = _defaultProps$props.visible, className = _defaultProps$props.className, style = _defaultProps$props.style, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("actionsheet");
-  var isHighlight = function isHighlight2(item) {
-    return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || "name"] ? props.color : "$dark1";
-  };
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, cancelText = _defaultProps$props.cancelText, optionKey = _defaultProps$props.optionKey, title = _defaultProps$props.title, description = _defaultProps$props.description, options = _defaultProps$props.options, onCancel2 = _defaultProps$props.onCancel, onSelect2 = _defaultProps$props.onSelect, visible = _defaultProps$props.visible, className = _defaultProps$props.className, style = _defaultProps$props.style, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-actionsheet";
   var cancelActionSheet = function cancelActionSheet2() {
     onCancel2 && onCancel2();
   };
   var chooseItem = function chooseItem2(item, index) {
     if (!item.disable) {
-      onChoose2 && onChoose2(item, index);
+      onSelect2 && onSelect2(item, index);
     }
   };
   return React__default.createElement(Popup, {
@@ -65,29 +59,26 @@ var ActionSheet = function ActionSheet2(props) {
       onCancel2 && onCancel2();
     }
   }, React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className),
+    className: "".concat(classPrefix, " ").concat(className),
     style
   }, rest), title && React__default.createElement("div", {
-    className: b("title")
+    className: "".concat(classPrefix, "__title")
   }, title), description && React__default.createElement("div", {
-    className: "".concat(b("item"), " description")
-  }, description), menuItems.length ? React__default.createElement("div", {
-    className: b("menu")
-  }, menuItems.map(function(item, index) {
+    className: "".concat(classPrefix, "__description")
+  }, description), options.length ? React__default.createElement("div", {
+    className: "".concat(classPrefix, "__list")
+  }, options.map(function(item, index) {
     return React__default.createElement("div", {
-      className: "".concat(b("item"), " ").concat(item.disable ? b("item-disabled") : ""),
-      style: {
-        color: isHighlight(item)
-      },
+      className: "".concat(classPrefix, "__item ").concat(item.disable ? "disabled" : "", " ").concat(item.danger ? "danger" : ""),
       key: index,
       onClick: function onClick() {
         return chooseItem(item, index);
       }
-    }, item[optionTag], React__default.createElement("div", {
-      className: "subdesc"
-    }, item[optionSubTag]));
+    }, item[optionKey.name], React__default.createElement("div", {
+      className: "".concat(classPrefix, "__item-description")
+    }, item[optionKey.description]));
   })) : children, cancelText && React__default.createElement("div", {
-    className: b("cancel"),
+    className: "".concat(classPrefix, "__cancel"),
     onClick: function onClick() {
       return cancelActionSheet();
     }

package/dist/esm/CountDown/style/style.css

@@ -1 +1 @@
-.nut-countdown{display:var(--nutui-countdown-display, flex)}
+.nut-countdown{display:var(--nutui-countdown-display, flex);color:var(--nutui-countdown-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-countdown-font-size, 14px)}

package/dist/esm/CountDown.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["paused", "startTime", "endTime", "millisecond", "format", "autoStart", "time", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["paused", "startTime", "endTime", "remainingTime", "millisecond", "format", "autoStart", "time", "destroy", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,22 +24,23 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useState, useRef, useImperativeHandle, useEffect } from "react";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
+  remainingTime: 0,
   millisecond: false,
   format: "HH:mm:ss",
   autoStart: true,
-  time: 0
-};
+  time: 0,
+  destroy: false
+});
 var InternalCountDown = function InternalCountDown2(props, ref) {
   useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), paused = _defaultProps$props.paused, startTime = _defaultProps$props.startTime, endTime = _defaultProps$props.endTime, millisecond = _defaultProps$props.millisecond, format = _defaultProps$props.format, autoStart = _defaultProps$props.autoStart, time = _defaultProps$props.time, className = _defaultProps$props.className, style = _defaultProps$props.style, onEnd = _defaultProps$props.onEnd, onPaused = _defaultProps$props.onPaused, onRestart = _defaultProps$props.onRestart, onUpdate = _defaultProps$props.onUpdate, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("countdown");
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), paused = _defaultProps$props.paused, startTime = _defaultProps$props.startTime, endTime = _defaultProps$props.endTime, remainingTime = _defaultProps$props.remainingTime, millisecond = _defaultProps$props.millisecond, format = _defaultProps$props.format, autoStart = _defaultProps$props.autoStart, time = _defaultProps$props.time, destroy = _defaultProps$props.destroy, className = _defaultProps$props.className, style = _defaultProps$props.style, onEnd = _defaultProps$props.onEnd, onPaused = _defaultProps$props.onPaused, onRestart = _defaultProps$props.onRestart, onUpdate = _defaultProps$props.onUpdate, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-countdown";
   var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), restTimeStamp = _useState2[0], setRestTime = _useState2[1];
   var stateRef = useRef({
     pauseTime: 0,
@@ -61,8 +62,12 @@ var InternalCountDown = function InternalCountDown2(props, ref) {
     return new Date(t).getTime();
   };
   var initTime = function initTime2() {
-    stateRef.current.handleEndTime = endTime;
-    stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    if (remainingTime) {
+      stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+    } else {
+      stateRef.current.handleEndTime = endTime;
+      stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    }
     if (!stateRef.current.counting)
       stateRef.current.counting = true;
     tick();
@@ -204,7 +209,7 @@ var InternalCountDown = function InternalCountDown2(props, ref) {
     if (stateRef.current.isIninted) {
       initTime();
     }
-  }, [endTime, startTime]);
+  }, [endTime, startTime, remainingTime]);
   useEffect(function() {
     if (autoStart) {
       initTime();
@@ -218,16 +223,16 @@ var InternalCountDown = function InternalCountDown2(props, ref) {
     return componentWillUnmount;
   }, []);
   var componentWillUnmount = function componentWillUnmount2() {
-    clearInterval(stateRef.current.timer);
+    destroy && cancelAnimationFrame(stateRef.current.timer);
   };
   var renderTime = function() {
     return formatRemainTime(stateRef.current.restTime);
   }();
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className || ""),
+    className: "".concat(classPrefix, " ").concat(className),
     style: _objectSpread({}, style)
   }, rest), children || React__default.createElement("div", {
-    className: b("block"),
+    className: "".concat(classPrefix, "__block"),
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: "".concat(renderTime)

package/dist/esm/Ellipsis/style/style.css

@@ -1 +1 @@
-.nut-ellipsis{display:flex}.nut-ellipsis .nut-ellipsis-text{cursor:pointer;color:var(--nutui-ellipsis-expand-collapse-color, #3460fa);display:inline}.nut-ellipsis .nut-ellipsis-wordbreak{word-break:break-all}.nut-ellipsis-copy{position:absolute;top:-999999px}
+.nut-ellipsis{display:flex}.nut-ellipsis .nut-ellipsis-text{cursor:pointer;color:var(--nutui-ellipsis-expand-collapse-color, #3460fa);display:inline}.nut-ellipsis .nut-ellipsis-wordbreak{word-break:break-all}.nut-ellipsis-copy{position:absolute;top:-999999px}.nut-ellipsis-width{width:fit-content}

package/dist/esm/SearchBar/style/style.css

@@ -1 +1 @@
-.nut-theme-dark .nut-searchbar{background:#141414}.nut-theme-dark .nut-searchbar__label,.nut-theme-dark .nut-searchbar__action-text,.nut-theme-dark .nut-searchbar .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close{color:#e6e6e6}.nut-theme-dark .nut-searchbar .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close:hover{cursor:pointer;color:#e6e6e6}.nut-theme-dark .nut-searchbar__right-search-icon,.nut-theme-dark .nut-searchbar__left-search-icon,.nut-theme-dark .nut-searchbar__leftout-icon i,.nut-theme-dark .nut-searchbar__rightout-icon i{color:#e6e6e6}.val-text{font-size:12px;color:var(--nutui-gray-2, #757575);padding:0 20px}.nut-searchbar{display:flex;align-items:center;width:var(--nutui-searchbar-width, 100%);padding:var(--nutui-searchbar-padding, 9px 16px);background:var(--nutui-searchbar-background, var(--nutui-gray-6, #ffffff));color:var(--nutui-gray-1, #1a1a1a);box-sizing:border-box}.nut-searchbar__content{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:var(--nutui-searchbar-input-height, 32px);background:var(--nutui-searchbar-input-background, #f7f7f7);border-radius:var(--nutui-searchbar-content-border-radius, 2px)}.nut-searchbar__icon{padding:0 5px 0 10px}.nut-searchbar__rightin-icon{padding:0 5px}.nut-searchbar .nut-searchbar__input-box{display:flex;align-items:center;flex:1}.nut-searchbar__input{border:0;outline:0;box-sizing:border-box;width:var(--nutui-searchbar-input-width, 100%);height:var(--nutui-searchbar-input-height, 32px);line-height:var(--nutui-searchbar-input-height, 32px);width:100%;padding:var(--nutui-searchbar-input-padding, 0 5px);border-radius:0;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-searchbar-input-text-color, var(--nutui-gray-1, #1a1a1a));caret-color:var(--nutui-searchbar-input-curror-color, var(--nutui-gray-1, #1a1a1a));background:transparent}.nut-searchbar__round{border-radius:var(--nutui-searchbar-input-border-radius, 16px)}.nut-searchbar__disabled{cursor:not-allowed}.nut-searchbar__clear{padding:var(--nutui-searchbar-clear-icon-padding, 0 10px 0 5px)}.nut-searchbar__clear i{color:var(--nutui-gray-1, #1a1a1a)!important}.nut-searchbar .pos-right{right:40px}.nut-searchbar__left{text-align:left}.nut-searchbar__right{text-align:right}.nut-searchbar__center{text-align:center}.nut-searchbar__label{padding:var(--nutui-searchbar-label-padding, 0 12px 0 0);font-size:var(--nutui-searchbar-label-fontsize, 12px);color:var(--nutui-searchbar-label-color, var(--nutui-gray-1, #1a1a1a))}.nut-searchbar__action-text{padding:var(--nutui-searchbar-action-text-padding, 0 0 0 8px);font-size:var(--nutui-searchbar-action-text-fontsize, 14px);color:var(--nutui-searchbar-action-text-color, var(--nutui-gray-1, #1a1a1a))}.nut-searchbar__leftout-icon{margin-right:10px}.nut-searchbar__rightout-icon{margin-left:10px}
+.nut-searchbar{display:flex;align-items:center;width:var(--nutui-searchbar-width, 100%);padding:var(--nutui-searchbar-padding, 9px 10px);background:var(--nutui-searchbar-background, #fff);color:var(--nutui-gray-1, #1a1a1a);box-sizing:border-box;justify-content:center}.nut-searchbar__content{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:var(--nutui-searchbar-input-height, 32px);background:var(--nutui-searchbar-input-background, #f7f7f7);border-radius:var(--nutui-searchbar-content-border-radius, 2px)}.nut-searchbar__icon{padding:0 5px 0 10px}.nut-searchbar__rightin{display:flex;padding:0 5px}.nut-searchbar__input-box{display:flex;align-items:center;flex:1}.nut-searchbar__input{border:0;outline:0;box-sizing:border-box;width:var(--nutui-searchbar-input-width, 100%);height:var(--nutui-searchbar-input-height, 32px);line-height:var(--nutui-searchbar-input-height, 32px);width:100%;padding:var(--nutui-searchbar-input-padding, 0 5px);border-radius:0;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-searchbar-input-text-color, var(--nutui-gray-1, #1a1a1a));caret-color:var(--nutui-searchbar-input-curror-color, var(--nutui-gray-1, #1a1a1a));background:transparent;text-align:var(--nutui-searchbar-input-text-align, left)}.nut-searchbar__round{border-radius:var(--nutui-searchbar-input-border-radius, 16px)}.nut-searchbar__disabled{cursor:not-allowed}.nut-searchbar__clear{padding:var(--nutui-searchbar-clear-icon-padding, 0 10px 0 5px)}.nut-searchbar__clear i{color:var(--nutui-gray-1, #1a1a1a)!important}.nut-searchbar .pos-right{right:40px}.nut-searchbar__left{display:flex;padding:var(--nutui-searchbar-left-padding, 0 12px 0 0);font-size:var(--nutui-searchbar-left-fontsize, 12px);color:var(--nutui-searchbar-left-color, var(--nutui-gray-1, #1a1a1a))}.nut-searchbar__right{display:flex;padding:var(--nutui-searchbar-right-padding, 0 0 0 8px);font-size:var(--nutui-searchbar-right-fontsize, 14px);color:var(--nutui-searchbar-right-color, var(--nutui-gray-1, #1a1a1a))}

package/dist/esm/SearchBar.js

@@ -23,35 +23,32 @@ function _objectSpread(target) {
 }
 import React__default, { useRef, useState, useEffect } from "react";
 import { Search, CircleClose } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   placeholder: "",
   shape: "square",
   disabled: false,
   maxLength: 9999,
   clearable: true,
-  clearSize: "12px",
-  align: "left",
-  readonly: true,
+  readOnly: false,
   autoFocus: false,
-  label: "",
-  leftinIcon: React__default.createElement(Search, {
+  left: "",
+  right: "",
+  rightIn: "",
+  leftIn: React__default.createElement(Search, {
     width: "12",
     height: "12"
   })
 });
 var SearchBar = function SearchBar2(props) {
-  var searchbarBem = cn("searchbar");
+  var classPrefix = "nut-searchbar";
   var _useConfig = useConfig(), locale = _useConfig.locale;
   var searchRef = useRef(null);
   var _useState = useState(function() {
     return props.value;
   }), _useState2 = _slicedToArray(_useState, 2), value = _useState2[0], setValue = _useState2[1];
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), placeholder = _defaultProps$props.placeholder, shape = _defaultProps$props.shape, className = _defaultProps$props.className, disabled = _defaultProps$props.disabled, maxLength = _defaultProps$props.maxLength, clearable = _defaultProps$props.clearable, clearSize = _defaultProps$props.clearSize, align = _defaultProps$props.align, readOnly = _defaultProps$props.readOnly, autoFocus = _defaultProps$props.autoFocus, label = _defaultProps$props.label, actionText = _defaultProps$props.actionText, leftinIcon = _defaultProps$props.leftinIcon, rightinIcon = _defaultProps$props.rightinIcon, leftoutIcon = _defaultProps$props.leftoutIcon, rightoutIcon = _defaultProps$props.rightoutIcon, onChange = _defaultProps$props.onChange, onFocus = _defaultProps$props.onFocus, onBlur = _defaultProps$props.onBlur, onClear = _defaultProps$props.onClear, onCancel = _defaultProps$props.onCancel, onSearch = _defaultProps$props.onSearch, onClickInput = _defaultProps$props.onClickInput, onClickLeftinIcon = _defaultProps$props.onClickLeftinIcon, onClickLeftoutIcon = _defaultProps$props.onClickLeftoutIcon, onClickRightinIcon = _defaultProps$props.onClickRightinIcon, onClickRightoutIcon = _defaultProps$props.onClickRightoutIcon;
-  var alignClass = "".concat(align);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), placeholder = _defaultProps$props.placeholder, shape = _defaultProps$props.shape, className = _defaultProps$props.className, disabled = _defaultProps$props.disabled, maxLength = _defaultProps$props.maxLength, clearable = _defaultProps$props.clearable, readOnly = _defaultProps$props.readOnly, autoFocus = _defaultProps$props.autoFocus, right = _defaultProps$props.right, left = _defaultProps$props.left, leftIn = _defaultProps$props.leftIn, rightIn = _defaultProps$props.rightIn, onChange = _defaultProps$props.onChange, onFocus = _defaultProps$props.onFocus, onBlur = _defaultProps$props.onBlur, onClear = _defaultProps$props.onClear, onSearch = _defaultProps$props.onSearch, onClickInput = _defaultProps$props.onClickInput;
   var forceFocus = function forceFocus2() {
     var searchSelf = searchRef.current;
     searchSelf && searchSelf.focus();
@@ -79,7 +76,7 @@ var SearchBar = function SearchBar2(props) {
   }, [autoFocus]);
   var renderField = function renderField2() {
     return React__default.createElement("input", {
-      className: "".concat(searchbarBem("input"), "  ").concat(searchbarBem(alignClass), " ").concat(shape === "round" ? searchbarBem("round") : "", " ").concat(clearable ? searchbarBem("input-clear") : ""),
+      className: "".concat(classPrefix, "__input ").concat(shape === "round" ? "".concat(classPrefix, "__round") : "", " ").concat(clearable ? "".concat(classPrefix, "__input-clear") : ""),
       ref: searchRef,
       style: _objectSpread({}, props.style),
       value: value || "",
@@ -105,70 +102,44 @@ var SearchBar = function SearchBar2(props) {
   var clickInput = function clickInput2(e) {
     onClickInput && onClickInput(e);
   };
-  var renderLeftinIcon = function renderLeftinIcon2() {
-    if (!leftinIcon)
+  var renderLeftIn = function renderLeftIn2() {
+    if (!leftIn)
       return null;
     return React__default.createElement("div", {
-      className: "".concat(searchbarBem("leftin-icon"), " ").concat(searchbarBem("icon")),
-      onClick: function onClick(e) {
-        return clickLeftIcon("in-left", e);
-      }
-    }, leftinIcon);
+      className: "".concat(classPrefix, "__leftin ").concat(classPrefix, "__icon")
+    }, leftIn);
   };
-  var renderLeftoutIcon = function renderLeftoutIcon2() {
-    if (!leftoutIcon)
+  var renderLeft = function renderLeft2() {
+    if (!left)
       return null;
     return React__default.createElement("div", {
-      className: "".concat(searchbarBem("leftout-icon")),
-      onClick: function onClick(e) {
-        return clickLeftIcon("out-left", e);
-      }
-    }, leftoutIcon);
+      className: "".concat(classPrefix, "__left")
+    }, left);
   };
-  var clickLeftIcon = function clickLeftIcon2(flag, event) {
-    if (flag === "in-left") {
-      onClickLeftinIcon && onClickLeftinIcon(value, event);
-    } else {
-      onClickLeftoutIcon && onClickLeftoutIcon(value, event);
-    }
-  };
-  var renderRightinIcon = function renderRightinIcon2() {
-    if (!rightinIcon)
+  var renderRightIn = function renderRightIn2() {
+    if (!rightIn)
       return null;
     return React__default.createElement("div", {
-      className: "".concat(searchbarBem("rightin-icon"), " ").concat(searchbarBem("icon")),
-      onClick: function onClick(e) {
-        return clickRightIcon("in-right", e);
-      }
-    }, rightinIcon);
+      className: "".concat(classPrefix, "__rightin ").concat(classPrefix, "__icon")
+    }, rightIn);
   };
-  var renderRightoutIcon = function renderRightoutIcon2() {
-    if (!rightoutIcon)
+  var renderRight = function renderRight2() {
+    if (!right)
       return null;
     return React__default.createElement("div", {
-      className: "".concat(searchbarBem("rightout-icon")),
-      onClick: function onClick(e) {
-        return clickRightIcon("out-right", e);
-      }
-    }, rightoutIcon);
-  };
-  var clickRightIcon = function clickRightIcon2(flag, event) {
-    if (flag === "in-left") {
-      onClickRightinIcon && onClickRightinIcon(value, event);
-    } else {
-      onClickRightoutIcon && onClickRightoutIcon(value, event);
-    }
+      className: "".concat(classPrefix, "__right")
+    }, right);
   };
   var handleClear = function handleClear2() {
     return React__default.createElement("div", {
-      className: "".concat(searchbarBem("clear"), " ").concat(rightinIcon ? "pos-right" : ""),
+      className: "".concat(classPrefix, "__clear ").concat(rightIn ? "pos-right" : ""),
       onClick: function onClick(e) {
         return clearaVal(e);
       }
     }, React__default.createElement(CircleClose, {
-      width: clearSize,
-      height: clearSize,
-      color: "#555"
+      color: "#555",
+      width: 12,
+      height: 12
     }));
   };
   var clearaVal = function clearaVal2(event) {
@@ -179,15 +150,6 @@ var SearchBar = function SearchBar2(props) {
     onClear && onClear(event);
     forceFocus();
   };
-  var renderRightLabel = function renderRightLabel2() {
-    if (actionText) {
-      return React__default.createElement("div", {
-        className: searchbarBem("action-text"),
-        onClick: search
-      }, actionText);
-    }
-    return null;
-  };
   var onKeypress = function onKeypress2(e) {
     if (e.key === "Enter") {
       var event = e.nativeEvent;
@@ -197,28 +159,12 @@ var SearchBar = function SearchBar2(props) {
       onSearch && onSearch(value);
     }
   };
-  var search = function search2() {
-    onSearch && onSearch(value);
-  };
-  var renderLabel = function renderLabel2() {
-    if (label) {
-      return React__default.createElement("div", {
-        className: searchbarBem("label")
-      }, label);
-    }
-    return null;
-  };
   return React__default.createElement("div", {
-    className: "".concat(searchbarBem(), " ").concat(disabled ? searchbarBem("disabled") : "", "  ").concat(className || ""),
-    style: _objectSpread(_objectSpread({}, props.style), {}, {
-      background: props.background
-    })
-  }, renderLeftoutIcon(), renderLabel(), React__default.createElement("div", {
-    className: "".concat(searchbarBem("content")),
-    style: {
-      background: props.inputBackground
-    }
-  }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
+    className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "__disabled") : "", "  ").concat(className || ""),
+    style: _objectSpread({}, props.style)
+  }, renderLeft(), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__content")
+  }, renderLeftIn(), renderField(), renderRightIn(), clearable && value && handleClear()), renderRight());
 };
 SearchBar.defaultProps = defaultProps;
 SearchBar.displayName = "NutSearchBar";

package/dist/esm/ShortPassword/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-shortpassword__title{color:#e6e6e6}.nut-theme-dark .nut-shortpassword__subtitle{color:#828282}.nut-theme-dark .nut-shortpassword__message__forget{color:#404040}.nut-theme-dark .nut-shortpassword__input-real{background-color:#1f1f1f;border-radius:4px}.nut-theme-dark .nut-shortpassword__input-site{background-color:#1f1f1f}.nut-theme-dark .nut-shortpassword__input-fake{border:none;background-color:#0a0a0a}.nut-theme-dark .nut-shortpassword__input-fake__li__icon{background-color:#e6e6e6}.nut-theme-dark .nut-shortpassword__message__forget{color:#828282}.nut-shortpsd-title{line-height:1;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a)}.nut-shortpsd-subtitle{display:block;margin-top:12px;margin-bottom:24px;line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-shortpsdWx-subtitle{display:block;margin-top:12px;line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-input-w{padding:24px 0 10px;text-align:center;position:relative}.nut-input-w .nut-input-site{width:247px;height:41px;border-radius:4px}.nut-input-w .nut-input-real{position:absolute;right:247px;width:247px;height:41px;outline:0 none;border:0;text-decoration:none}.nut-shortpassword__title{line-height:1;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a)}.nut-shortpassword__subtitle{margin-top:12px;margin-bottom:24px;line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-shortpassword__input{padding:0 0 10px;text-align:center;position:relative;overflow:hidden}.nut-shortpassword__input-real{position:absolute;right:0;width:247px;height:41px;outline:0 none;border:0;text-decoration:none;z-index:-99}.nut-shortpassword__input-site{width:247px;height:41px;border-radius:4px}.nut-shortpassword__input-fake{top:5%;width:100%;height:41px;margin:0 auto;box-sizing:border-box;background:var(--nutui-shortpassword-background-color, rgb(245, 245, 245));border-radius:4px;border:1px solid var(--nutui-shortpassword-border-color, #ddd);display:flex;position:absolute;left:0}.nut-shortpassword__input-fake__li{flex:1;display:flex;justify-content:center;align-items:center}.nut-shortpassword__input-fake__li__icon{height:6px;width:6px;border-radius:50%;background:#000;display:inline-block}.nut-shortpassword__message{margin-top:9px;display:flex;justify-content:space-between;width:247px}.nut-shortpassword__message__error{line-height:1;font-size:var(--nutui-font-size-0, 10px);color:var(--nutui-shortpassword-error, var(--nutui-brand-color, #fa2c19))}.nut-shortpassword__message__forget{line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-shortpassword-forget, rgb(128, 128, 128));display:flex;align-items:center}.nut-shortpassword__message__forget-tips{margin-left:3px}.nut-shortpassword__footer{display:flex;justify-content:space-between;margin-top:20px}.nut-shortpassword__footer__cancel{background:var(--nutui-gray-6, #ffffff);border:1px solid var(--nutui-brand-color, #fa2c19);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-color, #fa2c19)}.nut-shortpassword__footer__sure{background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-text-color, #ffffff)}
+.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-shortpassword__title{line-height:1;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a)}.nut-shortpassword__description{margin-top:12px;margin-bottom:24px;line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-shortpassword__input{padding:0 0 10px;text-align:center;position:relative;overflow:hidden}.nut-shortpassword__input-real{position:absolute;right:0;width:247px;height:41px;outline:0 none;border:0;text-decoration:none;z-index:-99}.nut-shortpassword__input-site{width:247px;height:41px;border-radius:4px}.nut-shortpassword__input-fake{top:5%;width:100%;height:41px;margin:0 auto;box-sizing:border-box;background:var(--nutui-shortpassword-background-color, rgb(245, 245, 245));border-radius:4px;border:1px solid var(--nutui-shortpassword-border-color, #ddd);display:flex;position:absolute;left:0}.nut-shortpassword__input-fake__li{flex:1;display:flex;justify-content:center;align-items:center}.nut-shortpassword__input-fake__li__icon{height:6px;width:6px;border-radius:50%;background:#000;display:inline-block}.nut-shortpassword__message{margin-top:9px;display:flex;justify-content:space-between;width:247px}.nut-shortpassword__message__error{line-height:1;font-size:var(--nutui-font-size-0, 10px);color:var(--nutui-shortpassword-error, var(--nutui-brand-color, #fa2c19))}.nut-shortpassword__message__forget{line-height:1;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-shortpassword-forget, rgb(128, 128, 128));display:flex;align-items:center}.nut-shortpassword__footer{display:flex;justify-content:space-between;margin-top:20px}.nut-shortpassword__footer__cancel{background:var(--nutui-gray-6, #ffffff);border:1px solid var(--nutui-brand-color, #fa2c19);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-color, #fa2c19)}.nut-shortpassword__footer__sure{background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border-radius:15px;padding:8px 38px;line-height:1;font-size:var(--nutui-font-size-2, 14px);color:var(--nutui-brand-text-color, #ffffff)}