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

package/dist/esm/ShortPassword.js

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

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

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

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

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-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/css.js

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

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

@@ -0,0 +1 @@
+.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/Signature/style/css.js

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

package/dist/esm/Signature/style/index.js

@@ -1,2 +1,2 @@
-import '../../Button/style'
+
 import '../../../packages/signature/signature.scss'

package/dist/esm/Signature/style/style.css

@@ -0,0 +1 @@
+.nut-signature .spcanvas_WEAPP{width:100%;height:100%}.nut-signature .spcanvas_WEAPP Canvas{width:100%}.nut-signature__inner{height:10rem;border:1px solid #dadada;display:flex;justify-content:center;align-items:center}.nut-signature__inner Canvas{background-color:#fff}.nut-signature__unsupport{font-size:var(--nutui-font-size-2, 14px)}

package/dist/esm/Signature.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 = ["type", "lineWidth", "strokeStyle", "unSupportTpl", "className", "confirm", "clear", "onConfirm", "onClear"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["type", "lineWidth", "strokeStyle", "unsupported", "className", "style", "onConfirm", "onClear"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,22 +23,19 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useRef, useState, useEffect } from "react";
-import Button from "./Button.js";
-import { c as cn } from "./bem.js";
+import React__default, { useRef, useState, useEffect, useImperativeHandle } from "react";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: "png",
   lineWidth: 2,
   strokeStyle: "#000",
-  unSupportTpl: "对不起，当前浏览器不支持Canvas，无法使用本控件！",
-  className: ""
-};
-var Signature = function Signature2(props) {
+  unsupported: ""
+});
+var InternalSignature = function InternalSignature2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, lineWidth = _defaultProps$props.lineWidth, strokeStyle = _defaultProps$props.strokeStyle, unSupportTpl = _defaultProps$props.unSupportTpl, className = _defaultProps$props.className, confirm = _defaultProps$props.confirm, clear = _defaultProps$props.clear, onConfirm = _defaultProps$props.onConfirm, onClear = _defaultProps$props.onClear, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("signature");
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, lineWidth = _defaultProps$props.lineWidth, strokeStyle = _defaultProps$props.strokeStyle, unsupported = _defaultProps$props.unsupported, className = _defaultProps$props.className, style = _defaultProps$props.style, onConfirm = _defaultProps$props.onConfirm, onClear = _defaultProps$props.onClear, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-signature";
   var canvasRef = useRef(null);
   var wrapRef = useRef(null);
   var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), canvasHeight = _useState2[0], setCanvasHeight = _useState2[1];
@@ -105,12 +102,8 @@ var Signature = function Signature2(props) {
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx.current.closePath();
     }
-    clear && clear();
     onClear && onClear();
   };
-  var handleConfirmBtn = function handleConfirmBtn2() {
-    onSave(canvasRef.current);
-  };
   var onSave = function onSave2(canvas) {
     var dataurl;
     switch (type) {
@@ -124,34 +117,33 @@ var Signature = function Signature2(props) {
         dataurl = canvas.toDataURL("image/png");
     }
     handleClearBtn();
-    confirm && confirm(canvas, dataurl);
     onConfirm && onConfirm(canvas, dataurl);
   };
+  useImperativeHandle(ref, function() {
+    return {
+      confirm: function confirm() {
+        onSave(canvasRef.current);
+      },
+      clear: function clear() {
+        handleClearBtn();
+      }
+    };
+  });
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className)
+    className: "".concat(classPrefix, " ").concat(className),
+    style
   }, rest), React__default.createElement("div", {
-    className: "".concat(b("inner")),
+    className: "".concat(classPrefix, "__inner"),
     ref: wrapRef
   }, isCanvasSupported() ? React__default.createElement("canvas", {
     ref: canvasRef,
     height: canvasHeight,
     width: canvasWidth
-  }) : React__default.createElement("p", {
-    className: "".concat(b("unsopport"))
-  }, locale.signature.unSupportTpl || unSupportTpl)), React__default.createElement(Button, {
-    className: "".concat(b("btn")),
-    type: "default",
-    onClick: function onClick() {
-      return handleClearBtn();
-    }
-  }, locale.signature.reSign), React__default.createElement(Button, {
-    className: "".concat(b("btn")),
-    type: "primary",
-    onClick: function onClick() {
-      return handleConfirmBtn();
-    }
-  }, locale.confirm));
+  }) : React__default.createElement(React__default.Fragment, null, unsupported || React__default.createElement("p", {
+    className: "".concat(classPrefix, "__unsupport")
+  }, locale.signature.unsupported))));
 };
+var Signature = React__default.forwardRef(InternalSignature);
 Signature.defaultProps = defaultProps;
 Signature.displayName = "NutSignature";
 export {

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

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

package/dist/esm/Skeleton/style/style.css

@@ -0,0 +1 @@
+.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}.nut-avatar{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto;text-align:center}.nut-avatar .avatar-img{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);flex-shrink:0}.nut-avatar .icon{background-size:100% 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-avatar .nut-icon__img{width:100%;height:100%}.nut-avatar .text{display:inline-block;width:100%;height:100%;text-align:center;overflow:hidden}.nut-avatar-large{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px);line-height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px);line-height:var(--nutui-avatar-small-height, 32px)}.nut-avatar-normal{width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px);line-height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:50%;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}.nut-skeleton{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;width:100%}.nut-skeleton__content{display:flex}.nut-skeleton__content .avatar{margin-right:20px;background:var(--nutui-skeleton-background, rgb(239, 239, 239))!important}.nut-skeleton__content .nut-skeleton__block{width:var(--nutui-skeleton-line-width, 100%);height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239));margin-top:10px;border-radius:var(--nutui-skeleton-line-border-radius, 0)}.nut-skeleton__content .nut-skeleton__block:last-child{width:70%}.nut-skeleton__content-line{width:100%;display:flex;flex-direction:column}.nut-skeleton__content-line .nut-skeleton__title{width:30%;height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239))}.nut-skeleton__animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 80%);background-repeat:no-repeat;animation:nut-skeleton 2s ease-in-out 0s infinite}@keyframes nut-skeleton{0%{background-position-x:-500px}to{background-position-x:calc(500px + 100%)}}

package/dist/esm/Skeleton.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "width", "height", "animated", "row", "title", "avatar", "avatarSize", "round", "loading", "children", "avatarShape"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "animated", "rows", "title", "avatar", "avatarSize", "visible", "children", "avatarShape"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -25,31 +25,23 @@ function _objectSpread(target) {
 import React__default from "react";
 import classNames from "classnames";
 import Avatar from "./Avatar.js";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
-  width: "100px",
-  height: "100px",
-  row: 1,
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  rows: 1,
   animated: false,
   title: false,
   avatar: false,
-  round: false,
   avatarSize: "50px",
-  loading: false,
+  visible: false,
   avatarShape: "round"
-};
+});
 var Skeleton = function Skeleton2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, width = _defaultProps$props.width, height = _defaultProps$props.height, animated = _defaultProps$props.animated, row = _defaultProps$props.row, title = _defaultProps$props.title, avatar = _defaultProps$props.avatar, avatarSize = _defaultProps$props.avatarSize, round = _defaultProps$props.round, loading = _defaultProps$props.loading, children = _defaultProps$props.children, avatarShape = _defaultProps$props.avatarShape, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("skeleton");
-  var classes = classNames(className, b());
-  var blockClass = classNames({
-    blockClass: true,
-    "blockClass--round": round
-  });
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, animated = _defaultProps$props.animated, rows = _defaultProps$props.rows, title = _defaultProps$props.title, avatar = _defaultProps$props.avatar, avatarSize = _defaultProps$props.avatarSize, visible = _defaultProps$props.visible, children = _defaultProps$props.children, avatarShape = _defaultProps$props.avatarShape, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-skeleton";
+  var classes = classNames(className, classPrefix);
   var avatarClass = classNames(_defineProperty({
-    avatarClass: true
-  }, "avatarClass--".concat(avatarShape), avatarShape));
+    avatar: true
+  }, "avatar--".concat(avatarShape), avatarShape));
   var repeatLines = function repeatLines2(num) {
     return Array.from({
       length: num
@@ -69,35 +61,27 @@ var Skeleton = function Skeleton2(props) {
       height: "50px"
     };
   };
-  return React__default.createElement(React__default.Fragment, null, loading ? React__default.createElement("div", null, children) : React__default.createElement("div", _objectSpread({
+  return React__default.createElement(React__default.Fragment, null, visible ? React__default.createElement("div", null, children) : React__default.createElement("div", _objectSpread({
     className: classes
-  }, restProps), animated && React__default.createElement("div", {
-    className: "skeleton-animation"
+  }, rest), animated && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__animation")
   }), React__default.createElement("div", {
-    className: "nut-skeleton-content"
+    className: "".concat(classPrefix, "__content")
   }, avatar && React__default.createElement(Avatar, {
     className: avatarClass,
-    background: "rgb(239, 239, 239)",
     shape: avatarShape,
-    style: getStyle()
-  }), row === 1 && React__default.createElement("div", {
-    className: blockClass,
-    style: {
-      width,
-      height
-    }
-  }), React__default.createElement("div", {
-    className: "skeleton-content-line"
+    style: getStyle(),
+    icon: "null"
+  }), rows === 1 ? React__default.createElement("div", {
+    className: "".concat(classPrefix, "__block")
+  }) : React__default.createElement("div", {
+    className: "".concat(classPrefix, "__content-line")
   }, title && React__default.createElement("div", {
-    className: "skeleton-title"
-  }), repeatLines(row).map(function(item, index) {
+    className: "".concat(classPrefix, "__title")
+  }), repeatLines(rows).map(function(item, index) {
     return React__default.createElement("div", {
-      className: blockClass,
-      key: index,
-      style: {
-        width,
-        height
-      }
+      className: "".concat(classPrefix, "__block"),
+      key: index
     });
   })))));
 };

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

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

package/dist/esm/Step/style/style.css

@@ -0,0 +1 @@
+.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 100%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 100%);background:var(--nutui-steps-base-line-background, #909ca4)}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, 13px);background-color:var(--nutui-steps-wait-icon-bg-color, #959fb1);border-color:var(--nutui-steps-wait-icon-bg-color, #959fb1);color:var(--nutui-steps-wait-icon-color, var(--nutui-gray-6, #ffffff));z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{display:inline-block;padding-left:10%;padding-right:10%;text-align:center}.nut-step-main .nut-step-description{color:var(--nutui-gray-1, #1a1a1a)}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, 14px);color:var(--nutui-steps-base-title-color, var(--nutui-gray-1, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, 12px);color:var(--nutui-steps-base-description-color, var(--nutui-gray-2, #757575))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-color, #fa2c19));color:var(--nutui-steps-process-icon-color, var(--nutui-gray-6, #ffffff))}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-brand-color, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, 14px);font-weight:var(--nutui-steps-process-title-font-weight, 400)}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-2, #757575))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-2, #757575))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-brand-text-color, #ffffff));border-color:var(--nutui-steps-finish-icon-color, var(--nutui-brand-color, #fa2c19));color:var(--nutui-steps-finish-icon-color, var(--nutui-brand-color, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-brand-color, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-brand-color, #fa2c19))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 7px 0 0 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-brand-text-color, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-2, #757575))}.nut-steps-dot .nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-2, #757575))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-brand-text-color, #ffffff));border-color:var(--nutui-steps-finish-icon-color, var(--nutui-brand-color, #fa2c19))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative;background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-color, #fa2c19))}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-brand-color-end, #fa2c19);border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:100%;background:#909ca4}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:left}.nut-steps-vertical .nut-step-main .nut-step-description{color:var(--nutui-steps-base-description-color, var(--nutui-gray-2, #757575))}