@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/esm/Signature.js

@@ -1,72 +1,62 @@
 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"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useRef, useState, useEffect } from 'react';
-import Button from './Button.js';
-import { c as cn } from './bem-893ad28d.js';
-import { useConfig } from './ConfigProvider.js';
-import '@bem-react/classname';
-var defaultProps = {
-  type: 'png',
+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) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useRef, useState, useEffect, useImperativeHandle } from "react";
+import { useConfig } from "./ConfigProvider.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  type: "png",
   lineWidth: 2,
-  strokeStyle: '#000',
-  unSupportTpl: '对不起，当前浏览器不支持Canvas，无法使用本控件！',
-  className: ''
-};
-
-var Signature = function Signature(props) {
-  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,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var b = cn('signature');
+  strokeStyle: "#000",
+  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, 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];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      canvasWidth = _useState4[0],
-      setCanvasWidth = _useState4[1];
-
+  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), canvasHeight = _useState2[0], setCanvasHeight = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), canvasWidth = _useState4[0], setCanvasWidth = _useState4[1];
   var ctx = useRef(null);
-
-  var isCanvasSupported = function isCanvasSupported() {
-    var elem = document.createElement('canvas');
-    return !!(elem.getContext && elem.getContext('2d'));
+  var isCanvasSupported = function isCanvasSupported2() {
+    var elem = document.createElement("canvas");
+    return !!(elem.getContext && elem.getContext("2d"));
   };
-
-  var isSupportTouch = ('ontouchstart' in window);
-  var events = isSupportTouch ? ['touchstart', 'touchmove', 'touchend', 'touchleave'] : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];
-  useEffect(function () {
+  var isSupportTouch = "ontouchstart" in window;
+  var events = isSupportTouch ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"];
+  useEffect(function() {
     if (isCanvasSupported() && canvasRef.current && wrapRef.current) {
-      ctx.current = canvasRef.current.getContext('2d');
+      ctx.current = canvasRef.current.getContext("2d");
       setCanvasWidth(wrapRef.current.offsetWidth);
       setCanvasHeight(wrapRef.current.offsetHeight);
       addEvent();
     }
   }, []);
-
-  var startEventHandler = function startEventHandler(event) {
+  var startEventHandler = function startEventHandler2(event) {
     event.preventDefault();
-
     if (ctx.current && canvasRef.current) {
       ctx.current.beginPath();
       ctx.current.lineWidth = lineWidth;
@@ -76,17 +66,14 @@ var Signature = function Signature(props) {
       canvasRef.current.addEventListener(events[3], leaveEventHandler, false);
     }
   };
-
-  var addEvent = function addEvent() {
+  var addEvent = function addEvent2() {
     if (canvasRef.current) {
       canvasRef.current.addEventListener(events[0], startEventHandler, false);
     }
   };
-
-  var moveEventHandler = function moveEventHandler(event) {
+  var moveEventHandler = function moveEventHandler2(event) {
     event.preventDefault();
     var evt = isSupportTouch ? event.touches[0] : event;
-
     if (canvasRef.current && ctx.current) {
       var coverPos = canvasRef.current.getBoundingClientRect();
       var mouseX = evt.clientX - coverPos.left;
@@ -95,85 +82,70 @@ var Signature = function Signature(props) {
       ctx.current.stroke();
     }
   };
-
-  var endEventHandler = function endEventHandler(event) {
+  var endEventHandler = function endEventHandler2(event) {
     event.preventDefault();
-
     if (canvasRef.current) {
       canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
-      canvasRef.current.removeEventListener(events[2], endEventHandler, false);
+      canvasRef.current.removeEventListener(events[2], endEventHandler2, false);
     }
   };
-
-  var leaveEventHandler = function leaveEventHandler(event) {
+  var leaveEventHandler = function leaveEventHandler2(event) {
     event.preventDefault();
-
     if (canvasRef.current) {
       canvasRef.current.removeEventListener(events[1], moveEventHandler, false);
       canvasRef.current.removeEventListener(events[2], endEventHandler, false);
     }
   };
-
-  var clear = function clear() {
+  var handleClearBtn = function handleClearBtn2() {
     if (canvasRef.current && ctx.current) {
       canvasRef.current.addEventListener(events[2], endEventHandler, false);
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx.current.closePath();
     }
-
-    props.clear && props.clear();
+    onClear && onClear();
   };
-
-  var confirm = function confirm() {
-    onSave(canvasRef.current);
-  };
-
-  var onSave = function onSave(canvas) {
+  var onSave = function onSave2(canvas) {
     var dataurl;
-
     switch (type) {
-      case 'png':
-        dataurl = canvas.toDataURL('image/png');
+      case "png":
+        dataurl = canvas.toDataURL("image/png");
         break;
-
-      case 'jpg':
-        dataurl = canvas.toDataURL('image/jpeg', 0.8);
+      case "jpg":
+        dataurl = canvas.toDataURL("image/jpeg", 0.8);
         break;
-
       default:
-        dataurl = canvas.toDataURL('image/png');
+        dataurl = canvas.toDataURL("image/png");
     }
-
-    clear();
-    props.confirm && props.confirm(canvas, dataurl);
+    handleClearBtn();
+    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 clear();
-    }
-  }, locale.signature.reSign), React__default.createElement(Button, {
-    className: "".concat(b('btn')),
-    type: "primary",
-    onClick: function onClick() {
-      return confirm();
-    }
-  }, 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 { Signature as default };
+Signature.displayName = "NutSignature";
+export {
+  Signature as default
+};

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

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

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

@@ -1,2 +1,2 @@
-
-require('../../../packages/skeleton/skeleton.scss')
+import '../../Avatar/style'
+import '../../../packages/skeleton/skeleton.scss'

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,110 +1,92 @@
-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"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default from 'react';
-import classNames from 'classnames';
-import Avatar from './Avatar.js';
-import { c as cn } from './bem-893ad28d.js';
-import '@bem-react/classname';
-var defaultProps = {
-  width: '100px',
-  height: '100px',
-  row: 1,
+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) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default from "react";
+import classNames from "classnames";
+import Avatar from "./Avatar.js";
+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,
-  avatarShape: 'round'
-};
-
-var Skeleton = function Skeleton(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
-  });
+  avatarSize: "50px",
+  visible: false,
+  avatarShape: "round"
+});
+var Skeleton = function Skeleton2(props) {
+  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));
-
-  var repeatLines = function repeatLines(num) {
+    avatar: true
+  }, "avatar--".concat(avatarShape), avatarShape));
+  var repeatLines = function repeatLines2(num) {
     return Array.from({
       length: num
-    }, function (v, i) {
+    }, function(v, i) {
       return i;
     });
   };
-
-  var getStyle = function getStyle() {
+  var getStyle = function getStyle2() {
     if (avatarSize) {
       return {
         width: avatarSize,
         height: avatarSize
       };
     }
-
     return {
-      width: '50px',
-      height: '50px'
+      width: "50px",
+      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,
-    bgColor: "rgb(239, 239, 239)",
     shape: avatarShape,
-    style: getStyle()
-  }), row === 1 && React__default.createElement("div", {
-    className: blockClass,
-    style: {
-      width: width,
-      height: 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: width,
-        height: height
-      }
+      className: "".concat(classPrefix, "__block"),
+      key: index
     });
   })))));
 };
-
 Skeleton.defaultProps = defaultProps;
-Skeleton.displayName = 'NutSkeleton';
-export { Skeleton as default };
+Skeleton.displayName = "NutSkeleton";
+export {
+  Skeleton as default
+};

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

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

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

@@ -1,2 +1,2 @@
-require('../../Icon/style')
-require('../../../packages/step/step.scss')
+
+import '../../../packages/step/step.scss'

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))}

package/dist/esm/Step.js

@@ -1,73 +1,62 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "title", "content", "activeIndex", "icon", "iconColor", "size", "className", "renderContent"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useContext } from 'react';
-import classNames from 'classnames';
-import { D as DataContext } from './UserContext-68f62e66.js';
-import { c as cn } from './bem-893ad28d.js';
-import Icon from './Icon.js';
-import '@bem-react/classname';
-var defaultProps = {
-  title: '',
-  content: '',
-  activeIndex: 0,
-  icon: '',
-  iconColor: '',
-  size: '12px'
-};
-
-var Step = function Step(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
-      title = _defaultProps$props.title,
-      content = _defaultProps$props.content,
-      activeIndex = _defaultProps$props.activeIndex,
-      icon = _defaultProps$props.icon,
-      iconColor = _defaultProps$props.iconColor,
-      size = _defaultProps$props.size,
-      className = _defaultProps$props.className,
-      renderContent = _defaultProps$props.renderContent,
-      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "title", "description", "value", "icon", "className"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useContext } from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./context3.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: "",
+  description: "",
+  value: 0,
+  icon: null
+});
+var Step = function Step2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, title = _defaultProps$props.title, description = _defaultProps$props.description, value = _defaultProps$props.value, icon = _defaultProps$props.icon, className = _defaultProps$props.className, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
   var parent = useContext(DataContext);
-  var dot = parent.propSteps.progressDot;
-
-  var getCurrentStatus = function getCurrentStatus() {
-    var index = activeIndex;
-    if (index < +parent.propSteps.current) return 'finish';
-    return index === +parent.propSteps.current ? 'process' : 'wait';
+  var dot = parent.propSteps.dot;
+  var getCurrentStatus = function getCurrentStatus2() {
+    var index = value;
+    if (index < +parent.propSteps.value)
+      return "finish";
+    return index === +parent.propSteps.value ? "process" : "wait";
   };
-
-  var handleClickStep = function handleClickStep() {
-    var _parent$propSteps;
-
-    if ((_parent$propSteps = parent.propSteps) !== null && _parent$propSteps !== void 0 && _parent$propSteps.clickStep) {
-      var _parent$propSteps2;
-
-      (_parent$propSteps2 = parent.propSteps) === null || _parent$propSteps2 === void 0 ? void 0 : _parent$propSteps2.clickStep(activeIndex);
-    }
+  var handleClickStep = function handleClickStep2() {
+    var _parent$propSteps, _parent$propSteps2;
+    ((_parent$propSteps = parent.propSteps) === null || _parent$propSteps === void 0 ? void 0 : _parent$propSteps.onStepClick) && ((_parent$propSteps2 = parent.propSteps) === null || _parent$propSteps2 === void 0 ? void 0 : _parent$propSteps2.onStepClick(value));
   };
-
-  var b = cn('step');
-  var classes = classNames(_defineProperty({}, "".concat(b(''), "-").concat(getCurrentStatus()), true), className, b(''));
-
-  var renderIconClass = function renderIconClass() {
-    if (!dot && icon) {
-      return 'nut-step-icon is-icon';
+  var classPrefix = "nut-step";
+  var classes = classNames(_defineProperty({}, "".concat(classPrefix, "-").concat(getCurrentStatus()), true), className, classPrefix);
+  var renderIconClass = function renderIconClass2() {
+    if (icon) {
+      return "".concat(classPrefix, "-icon is-icon");
     }
-
     if (!dot && !icon) {
-      return 'nut-step-icon is-text';
+      return "".concat(classPrefix, "-icon is-text");
     }
-
-    return 'nut-step-icon';
+    return "".concat(classPrefix, "-icon");
   };
-
   return React__default.createElement("div", _objectSpread(_objectSpread({
     className: classes
   }, restProps), {}, {
@@ -78,24 +67,18 @@ var Step = function Step(props) {
     className: "nut-step-line"
   }), React__default.createElement("div", {
     className: renderIconClass()
-  }, icon ? React__default.createElement(Icon, {
-    className: "nut-step-icon-inner",
-    color: iconColor,
-    name: icon,
-    size: size
-  }) : !dot && React__default.createElement("span", {
+  }, icon || !dot && React__default.createElement("span", {
     className: "nut-step-inner"
-  }, activeIndex))), React__default.createElement("div", {
+  }, value))), React__default.createElement("div", {
     className: "nut-step-main"
   }, React__default.createElement("span", {
     className: "nut-step-title"
-  }, title), content && React__default.createElement("span", {
-    className: "nut-step-content"
-  }, content), renderContent && React__default.createElement("span", {
-    className: "nut-step-content"
-  }, renderContent())));
+  }, title), description && React__default.createElement("span", {
+    className: "nut-step-description"
+  }, description)));
 };
-
 Step.defaultProps = defaultProps;
-Step.displayName = 'NutStep';
-export { Step as default };
+Step.displayName = "NutStep";
+export {
+  Step as default
+};

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

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

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

@@ -1,2 +1,2 @@
-
-require('../../../packages/steps/steps.scss')
+import '../../Step/style'
+import '../../../packages/steps/steps.scss'