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

package/dist/esm/Popover.js

@@ -1,13 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "list", "theme", "location", "visible", "offset", "className", "style", "onClick", "onChoose"];
+var _excluded = ["children", "list", "location", "visible", "offset", "targetId", "overlay", "overlayStyle", "overlayClassName", "closeOnClickOutside", "closeOnClickAction", "closeOnOverlayClick", "className", "showArrow", "style", "background", "color", "onClick", "onOpen", "onClose", "onSelect"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -29,199 +23,253 @@ function _objectSpread(target) {
   }
   return target;
 }
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived), result;
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-    return _possibleConstructorReturn(this, result);
-  };
-}
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct)
-    return false;
-  if (Reflect.construct.sham)
-    return false;
-  if (typeof Proxy === "function")
-    return true;
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
-    }));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-import React__default, { useRef, useState, useEffect } from "react";
-import Overlay from "./Overlay.js";
+import React__default, { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import Popup from "./Popup.js";
 import { g as getRect } from "./use-client-rect.js";
+import { a as isFunction, u as upperCaseFirst } from "./index.js";
 import { C as ComponentDefaults } from "./typings.js";
-function fillRef(ref, node) {
-  if (typeof ref === "function") {
-    ref(node);
-  } else if (_typeof(ref) === "object" && ref && "current" in ref) {
-    ref.current = node;
-  }
-}
-function composeRef() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return function(node) {
-    refs.forEach(function(ref) {
-      fillRef(ref, node);
-    });
-  };
-}
-var Trigger = /* @__PURE__ */ function(_React__default$Compo) {
-  _inherits(Trigger2, _React__default$Compo);
-  var _super = _createSuper(Trigger2);
-  function Trigger2() {
-    _classCallCheck(this, Trigger2);
-    return _super.apply(this, arguments);
+var getTargetElement = function getTargetElement2(target) {
+  var targetElement;
+  if (isFunction(target)) {
+    targetElement = target();
+  } else if ("current" in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
   }
-  _createClass(Trigger2, [{
-    key: "fireEvents",
-    value: function fireEvents(type, e) {
-      var childCallback = this.props.children.props[type];
-      if (childCallback) {
-        childCallback(e);
-      }
-      var callback = this.props[type];
-      if (callback) {
-        callback(e);
-      }
+  return targetElement;
+};
+function useClickAway(onClickAway, target) {
+  var eventName = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "click";
+  var isListener = arguments.length > 3 ? arguments[3] : void 0;
+  var outerVar = arguments.length > 4 ? arguments[4] : void 0;
+  var handler = function handler2(event) {
+    var targets = Array.isArray(target) ? target : [target];
+    if (targets.some(function(item) {
+      var targetElement = getTargetElement(item);
+      return !targetElement || targetElement.contains(event.target);
+    })) {
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props, children = _this$props.children, _this$props$className = _this$props.className, className = _this$props$className === void 0 ? "" : _this$props$className;
-      var child = React__default.Children.only(children);
-      var newChildProps = {
-        key: "trigger"
-      };
-      if (child && child.props && child.props.className) {
-        newChildProps.className = className;
-      }
-      var cloneProps = _objectSpread({}, newChildProps);
-      cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
-      var trigger = React__default.cloneElement(child, cloneProps);
-      return trigger;
+    if (outerVar) {
+      onClickAway();
+    }
+  };
+  useEffect(function() {
+    if (isListener) {
+      window.addEventListener(eventName, handler, true);
+    } else {
+      window.removeEventListener(eventName, handler, true);
     }
-  }]);
-  return Trigger2;
-}(React__default.Component);
+    return function() {
+      window.removeEventListener(eventName, handler, true);
+    };
+  }, [target]);
+}
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   list: [],
-  theme: "light",
   location: "bottom",
   visible: false,
-  offset: 20,
+  offset: [0, 12],
+  targetId: "",
   className: "",
-  onClick: function onClick(e) {
+  background: "",
+  color: "",
+  showArrow: true,
+  duration: 0.3,
+  overlay: false,
+  overlayClassName: "",
+  overlayStyle: {},
+  closeOnClickOutside: true,
+  closeOnClickAction: true,
+  closeOnOverlayClick: true,
+  onClick: function onClick() {
+  },
+  onOpen: function onOpen() {
+  },
+  onClose: function onClose() {
   },
-  onChoose: function onChoose(item, index) {
+  onSelect: function onSelect(item, index) {
   }
 });
+var classPrefix = "nut-popover";
 var Popover = function Popover2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, list = _defaultProps$props.list, theme = _defaultProps$props.theme, location = _defaultProps$props.location, visible = _defaultProps$props.visible, offset = _defaultProps$props.offset, className = _defaultProps$props.className, style = _defaultProps$props.style, onClick2 = _defaultProps$props.onClick, onChoose2 = _defaultProps$props.onChoose, reset = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var goodItem = useRef(null);
-  setTimeout(function() {
-    if (goodItem.current && getRect(goodItem.current)) {
-      setElWidth(getRect(goodItem.current).width);
-      setElHeight(getRect(goodItem.current).height);
-    }
-  });
-  var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), classes = _useState2[0], setClasses = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, list = _defaultProps$props.list, location = _defaultProps$props.location, visible = _defaultProps$props.visible, offset = _defaultProps$props.offset, targetId = _defaultProps$props.targetId, overlay = _defaultProps$props.overlay, overlayStyle = _defaultProps$props.overlayStyle, overlayClassName = _defaultProps$props.overlayClassName, closeOnClickOutside = _defaultProps$props.closeOnClickOutside, closeOnClickAction = _defaultProps$props.closeOnClickAction, closeOnOverlayClick = _defaultProps$props.closeOnOverlayClick, className = _defaultProps$props.className, showArrow = _defaultProps$props.showArrow, style = _defaultProps$props.style, background = _defaultProps$props.background, color = _defaultProps$props.color, onClick2 = _defaultProps$props.onClick, onOpen2 = _defaultProps$props.onOpen, onClose2 = _defaultProps$props.onClose, onSelect2 = _defaultProps$props.onSelect, reset = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var popoverRef = useRef(null);
+  var popoverContentRef = useRef(null);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), showPopup = _useState2[0], setShowPopup = _useState2[1];
   var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), elWidth = _useState4[0], setElWidth = _useState4[1];
   var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), elHeight = _useState6[0], setElHeight = _useState6[1];
-  var _useState7 = useState(""), _useState8 = _slicedToArray(_useState7, 2), popoverContent = _useState8[0], setPopoverContent = _useState8[1];
-  var _useState9 = useState(""), _useState10 = _slicedToArray(_useState9, 2), popoverArrow = _useState10[0], setPopoverArrow = _useState10[1];
+  var _useState7 = useState(), _useState8 = _slicedToArray(_useState7, 2), rootPosition = _useState8[0], setRootPosition = _useState8[1];
   useEffect(function() {
-    setClasses(classesSelf());
-    setPopoverContent(popoverContentSelf());
-    setPopoverArrow(popoverArrowSelf());
-  }, [list, theme]);
-  var getStyle = function getStyle2() {
-    var offNumer = Number(offset) ? Number(offset) : 0;
-    var style2 = {};
-    if (location.includes("top")) {
-      style2.bottom = "".concat(elHeight + offNumer, "px");
-    } else if (location.includes("right")) {
-      style2.left = "".concat(elWidth + offNumer, "px");
-    } else if (location.includes("left")) {
-      style2.right = "".concat(elWidth + offNumer, "px");
+    setShowPopup(visible);
+    if (visible) {
+      setTimeout(function() {
+        getContentWidth();
+      }, 0);
+    }
+  }, [visible]);
+  var targetSet = [targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current, popoverContentRef.current];
+  useClickAway(function() {
+    props.onClick && props.onClick();
+    onClose2 && onClose2();
+  }, targetSet, "touchstart", visible, closeOnClickOutside);
+  var getContentWidth = function getContentWidth2() {
+    var rect = getRect(popoverRef.current);
+    if (targetId) {
+      setTimeout(function() {
+        rect = getRect(document.querySelector("#".concat(targetId)));
+        setRootPosition({
+          width: rect.width,
+          height: rect.height,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right
+        });
+        if (popoverContentRef.current) {
+          setElWidth(popoverContentRef.current.clientWidth);
+          setElHeight(popoverContentRef.current.clientHeight);
+        }
+      }, 0);
     } else {
-      style2.top = "".concat(elHeight + offNumer, "px");
+      setRootPosition({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right
+      });
+      if (popoverContentRef.current) {
+        setElWidth(popoverContentRef.current.clientWidth);
+        setElHeight(popoverContentRef.current.clientHeight);
+      }
     }
-    return style2;
-  };
-  var classesSelf = function classesSelf2() {
-    var prefixCls = "nut-popover";
-    return "".concat(prefixCls, " ").concat(theme ? "".concat(prefixCls, "--").concat(theme) : "");
   };
-  var popoverContentSelf = function popoverContentSelf2() {
-    var prefixCls = "popover-content";
-    return "".concat(prefixCls, "-show ").concat(prefixCls, " ").concat(location ? "".concat(prefixCls, "--").concat(location) : "");
+  var classes = classNames(_defineProperty({}, "".concat(classPrefix), true), className);
+  var customStyle = function customStyle2() {
+    var styles = {};
+    if (background) {
+      styles.background = background;
+    }
+    if (color) {
+      styles.color = color;
+    }
+    return styles;
   };
-  var filter = function filter2() {
-    var ms = ["top", "bottom", "left", "right"];
-    return ms.filter(function(m) {
-      return location.includes(m);
-    })[0];
+  var popoverArrow = function popoverArrow2() {
+    var prefixCls = "nut-popover-arrow";
+    var loca = location;
+    var direction = loca.split("-")[0];
+    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "--").concat(loca);
   };
-  var popoverArrowSelf = function popoverArrowSelf2() {
-    var prefixCls = "popover-arrow";
-    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(filter(), " ").concat(location ? "".concat(prefixCls, "--").concat(location) : "");
+  var popoverArrowStyle = function popoverArrowStyle2() {
+    var styles = {};
+    var background2 = props.background;
+    var direction = location.split("-")[0];
+    if (background2) {
+      styles["border".concat(upperCaseFirst(direction), "Color")] = background2;
+    }
+    return styles;
   };
-  var handleClick = function handleClick2(e) {
-    if (props.onClick) {
-      props.onClick(e);
+  var getRootPosition = function getRootPosition2() {
+    var styles = {};
+    if (!rootPosition)
+      return {};
+    var contentWidth = elWidth;
+    var contentHeight = elHeight;
+    var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+    var direction = location.split("-")[0];
+    var skew = location.split("-")[1];
+    var cross = 0;
+    var parallel = 0;
+    if (Array.isArray(offset) && offset.length == 2) {
+      cross += +offset[1];
+      parallel += +offset[0];
     }
+    if (width) {
+      if (["bottom", "top"].includes(direction)) {
+        var h = direction == "bottom" ? height + cross : -(contentHeight + cross);
+        styles.top = "".concat(top + h, "px");
+        if (!skew) {
+          styles.left = "".concat(-(contentWidth - width) / 2 + left + parallel, "px");
+        }
+        if (skew == "start") {
+          styles.left = "".concat(left + parallel, "px");
+        }
+        if (skew == "end") {
+          styles.left = "".concat(right + parallel, "px");
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        var contentW = direction == "left" ? -(contentWidth + cross) : width + cross;
+        styles.left = "".concat(left + contentW, "px");
+        if (!skew) {
+          styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
+        }
+        if (skew == "start") {
+          styles.top = "".concat(top + parallel, "px");
+        }
+        if (skew == "end") {
+          styles.top = "".concat(top + height + parallel, "px");
+        }
+      }
+    }
+    return styles;
   };
-  var handleChoose = function handleChoose2(item, index) {
+  var handleSelect = function handleSelect2(item, index) {
     if (!item.disabled) {
-      onChoose2(item, index);
+      onSelect2(item, index);
     }
-  };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
-    style: _objectSpread({}, style)
-  }, reset), React__default.createElement(Trigger, {
-    forwardedRef: goodItem
-  }, React__default.createElement("div", {
-    onClick: function onClick3(e) {
-      return handleClick(e);
+    if (closeOnClickAction) {
+      props.onClick && props.onClick();
+      onClose2 && onClose2();
     }
-  }, Array.isArray(children) ? children[0] : children, visible ? React__default.createElement("div", {
-    className: "".concat(popoverContent),
-    style: getStyle()
+  };
+  return React__default.createElement(React__default.Fragment, null, !targetId && React__default.createElement("div", {
+    className: "nut-popover-wrapper",
+    ref: popoverRef,
+    onClick: function onClick3() {
+      props.onClick && props.onClick();
+      if (!visible) {
+        onOpen2 && onOpen2();
+      } else {
+        onClose2 && onClose2();
+      }
+    },
+    style
+  }, Array.isArray(children) ? children[0] : children), React__default.createElement("div", _objectSpread({
+    className: classes,
+    style: getRootPosition()
+  }, reset), React__default.createElement(Popup, {
+    className: "nut-popover-content nut-popover-content--".concat(location),
+    style: customStyle(),
+    position: "default",
+    overlay,
+    overlayStyle,
+    overlayClassName,
+    closeOnOverlayClick,
+    visible: showPopup
   }, React__default.createElement("div", {
-    className: "".concat(popoverArrow)
-  }), Array.isArray(children) ? children[1] : "", React__default.createElement("div", null, list.map(function(item, i) {
+    className: "nut-popover-content-group",
+    ref: popoverContentRef
+  }, showArrow && React__default.createElement("div", {
+    className: popoverArrow(),
+    style: popoverArrowStyle()
+  }), Array.isArray(children) ? children[1] : "", list.map(function(item, index) {
     return React__default.createElement("div", {
-      key: item.name,
-      className: "popover-menu-item ".concat(item.disabled ? "disabled" : ""),
+      className: classNames({
+        "nut-popover-menu-item": true,
+        "nut-popover-menu-disabled": item.disabled
+      }, item.className),
+      key: item.key,
       onClick: function onClick3() {
-        handleChoose(item, i);
+        return handleSelect(item, index);
       }
     }, item.icon ? item.icon : null, React__default.createElement("div", {
-      className: "popover-menu-item-name"
+      className: "nut-popover-menu-item-name"
     }, item.name));
-  }))) : null))), visible ? React__default.createElement(Overlay, {
-    visible,
-    onClick: function onClick3(e) {
-      return handleClick(e);
-    },
-    style: {
-      background: "transparent"
-    }
-  }) : null);
+  })))));
 };
 Popover.defaultProps = defaultProps;
 Popover.displayName = "NutPopover";

package/dist/esm/Popup/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-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-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}

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-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)}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}@keyframes popup-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-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)}

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

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

package/dist/esm/SideNavBar.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "visible", "width", "position", "children", "className", "showhead", "onClose"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["title", "visible", "width", "position", "children", "className", "onClose"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,16 +23,18 @@ function _objectSpread(target) {
   return target;
 }
 import React__default from "react";
+import classNames from "classnames";
 import Popup from "./Popup.js";
-import { h as handleClick, O as OffsetContext } from "./offsetContext.js";
-var defaultProps = {
-  showhead: false,
+import { h as handleClick, O as OffsetContext } from "./context.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   position: "left",
   width: "80%"
-};
+});
 var SideNavBar = function SideNavBar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), title = _defaultProps$props.title, visible = _defaultProps$props.visible, width = _defaultProps$props.width, position = _defaultProps$props.position, children = _defaultProps$props.children, className = _defaultProps$props.className, showhead = _defaultProps$props.showhead, onClose = _defaultProps$props.onClose, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var offset = props.offset ? Number(props.offset) : 20;
+  var classPrefix = "nut-sidenavbar";
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), title = _defaultProps$props.title, visible = _defaultProps$props.visible, width = _defaultProps$props.width, position = _defaultProps$props.position, children = _defaultProps$props.children, className = _defaultProps$props.className, onClose = _defaultProps$props.onClose, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var indent = props.indent ? Number(props.indent) : 20;
   return React__default.createElement(Popup, {
     visible,
     style: {
@@ -42,23 +44,23 @@ var SideNavBar = function SideNavBar2(props) {
     position,
     onClose
   }, React__default.createElement("div", _objectSpread({
-    className: className ? "".concat(className, " nut-sidenavbar") : "nut-sidenavbar"
+    className: classNames(className, classPrefix)
   }, rest), React__default.createElement("div", {
-    className: "nut-sidenavbar__content"
+    className: "".concat(classPrefix, "__content")
   }, React__default.createElement("div", {
-    className: "nut-sidenavbar__list nutShow",
+    className: "".concat(classPrefix, "__list sidenavbar-show"),
     onClick: handleClick
   }, React__default.createElement("div", {
-    className: "nut-sidenavbar__title border-bt ",
+    className: "".concat(classPrefix, "__title ").concat(classPrefix, "-border-bt"),
     style: {
-      paddingLeft: "".concat(offset, "px")
+      paddingLeft: "".concat(indent, "px")
     }
   }, title, " ", React__default.createElement("i", {
     className: "arrow-icon arrow-down"
   })), React__default.createElement(OffsetContext.Provider, {
-    value: offset
+    value: indent
   }, React__default.createElement("div", {
-    className: "nut-sidenavbar__content"
+    className: "".concat(classPrefix, "__content")
   }, children))))));
 };
 SideNavBar.defaultProps = defaultProps;

package/dist/esm/SideNavBarItem/style/style.css

@@ -1 +1 @@
-.nut-theme-dark .nut-subsidenavbar__item{background-color:#1f1f1f;color:#828282}.nut-subsidenavbar__item{height:40px;color:var(--nutui-gray-2, #757575);padding:10px 8px 10px 55px}.nut-subsidenavbar__title{background-color:var(--nutui-gray-5, #f8f8f8);color:var(--nutui-gray-1, #1a1a1a)}.nut-subsidenavbar__list{background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-2, #757575)}
+.nut-subsidenavbar__item{height:var(--nutui-sidenavbar-item-height, 40px);color:var(--nutui-sidenavbar-sub-item-color, var(--nutui-gray-2, #757575));padding:var(--nutui-sidenavbar-sub-item-padding, 10px 8px 10px 55px);box-sizing:border-box}.nut-subsidenavbar__list{background-color:var(--nutui-sidenavbar-sub-list-background, var(--nutui-gray-6, #ffffff));color:var(--nutui-sidenavbar-sub-list-background, var(--nutui-gray-2, #757575))}

package/dist/esm/SideNavBarItem.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "key", "children", "onClick"];
+var _excluded = ["title", "value", "children", "onClick"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,16 +24,17 @@ function _objectSpread(target) {
 }
 import React__default from "react";
 var SideNavBarItem = function SideNavBarItem2(props) {
-  var title = props.title, key = props.key, children = props.children, onClick = props.onClick, rest = _objectWithoutProperties(props, _excluded);
+  var classPrefix = "nut-subsidenavbar";
+  var title = props.title, value = props.value, children = props.children, onClick = props.onClick, rest = _objectWithoutProperties(props, _excluded);
   var clickFn = function clickFn2(e) {
     e.stopPropagation();
     onClick && onClick({
       title,
-      key
+      value
     });
   };
   return React__default.createElement("div", _objectSpread({
-    className: "nut-subsidenavbar__item border-bt",
+    className: "".concat(classPrefix, "__item ").concat(classPrefix, "-border-bt"),
     onClick: clickFn
   }, rest), title);
 };

package/dist/esm/Step.js

@@ -24,7 +24,7 @@ function _objectSpread(target) {
 }
 import React__default, { useContext } from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./context2.js";
+import { D as DataContext } from "./context3.js";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   title: "",