@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/es/packages/step/style-jrkf/style.css

@@ -3,195 +3,121 @@
 /* #ifndef harmony */
 /* #endif */
 .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, 70%)) / 2);
-  height: var(--nutui-steps-base-line-height, 1px);
-  width: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-color-border));
+.nut-step-last .nut-step-line {
+  display: none;
 }
-.nut-step-icon {
+.nut-step-head {
   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, var(--nutui-font-text-small));
-  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-default));
-  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-default));
-  color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help));
+  height: var(--nutui-steps-base-head-height, 14px);
+  position: relative;
   z-index: 1;
 }
-.nut-step-icon .nut-icon {
-  width: 100%;
-  height: 100%;
+.nut-step-head-text {
+  height: var(--nutui-steps-base-head-text-size, 12px);
+  width: var(--nutui-steps-base-head-text-size, 12px);
+  background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-surface-1));
+  color: var(--nutui-steps-base-head-color, var(--nutui-color-text));
+  font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-text-mini));
 }
-.nut-step-icon.is-text {
-  border-radius: 50%;
-  border-width: 1px;
-  border-style: solid;
+.nut-step-head-icon {
+  height: var(--nutui-steps-base-head-icon-size, 16px);
+  width: var(--nutui-steps-base-head-icon-size, 16px);
+  background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-surface-1));
+}
+.nut-step-head-icon .nut-icon {
+  color: white;
+}
+.nut-step-head-dot {
+  height: var(--nutui-steps-base-head-dot-size, 6px);
+  width: var(--nutui-steps-base-head-dot-size, 6px);
+  background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled));
 }
-.nut-step-icon.is-icon {
+.nut-step-head-dot, .nut-step-head-icon, .nut-step-head-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
-  border-width: 1px;
-  border-style: solid;
+  box-sizing: border-box;
+  border: var(--nutui-steps-base-head-border, none);
+}
+.nut-step-line {
+  position: absolute;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nut-step-line-inner {
+  display: flex;
+  flex: 1;
+  height: var(--nutui-steps-base-line-height, 1px);
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-border));
 }
 .nut-step-main {
-  padding: 0 10%;
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  min-height: var(--nutui-steps-base-head-height, 14px);
+}
+.nut-step-line, .nut-step-title {
+  background-color: #ffffff;
+}
+.nut-step-title {
+  position: relative;
+  z-index: 1;
 }
 .nut-step-title {
-  display: block;
-  margin-bottom: var(--nutui-steps-base-title-margin-bottom, 0);
-  font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text));
+  height: 14px;
+  line-height: 14px;
+  font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text-small));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title));
+  overflow: hidden;
+  white-space: nowrap;
 }
 .nut-step-description {
-  display: block;
-  font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-text-small));
-  color: var(--nutui-steps-base-description-color, var(--nutui-color-text));
-}
-.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-color-primary, #ff6666));
-  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff6666));
-  color: var(--nutui-steps-process-icon-color, #ffffff);
-}
-.nut-step.nut-step-process .nut-step-title {
-  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff6666));
-  font-size: var(--nutui-steps-process-title-font-size, var(--nutui-font-text));
-  font-weight: var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold));
-}
-.nut-step.nut-step-process .nut-step-description {
-  color: var(--nutui-steps-process-description-color, var(--nutui-color-text));
-}
-.nut-step.nut-step-wait .nut-step-title {
-  color: var(--nutui-steps-wait-title-color, var(--nutui-color-text-help));
-}
-.nut-step.nut-step-wait .nut-step-description {
-  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text-help));
-}
-.nut-step.nut-step-finish .nut-step-icon {
-  background-color: var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-light, #ffe5e5));
-  border-color: var(--nutui-steps-finish-icon-border-color, transparent);
-  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff6666));
-}
-.nut-step.nut-step-finish .nut-step-line {
-  background: var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #ff6666));
-}
-.nut-step.nut-step-finish .nut-step-title {
-  color: var(--nutui-steps-finish-title-color, var(--nutui-color-title));
-}
-.nut-step.nut-step-finish .nut-step-description {
-  color: var(--nutui-steps-finish-description-color, var(--nutui-color-text));
+  height: 16px;
+  line-height: 16px;
+  margin-top: var(--nutui-steps-base-title-margin-bottom, 2px);
+  font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-text-mini));
+  color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help));
+  overflow: hidden;
+}
+.nut-step.nut-step-process .nut-step-head-icon,
+.nut-step.nut-step-process .nut-step-head-text,
+.nut-step.nut-step-process .nut-step-head-dot {
+  background-color: var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-step.nut-step-process .nut-step-head-text {
+  color: var(--nutui-steps-process-color, #ffffff);
+}
+.nut-step.nut-step-wait .nut-step-head-icon .nut-icon {
+  color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help));
 }
-
-.nut-steps-dot .nut-step-head {
-  margin: var(--nutui-steps-dot-head-margin, 10px 0);
+.nut-step.nut-step-finish .nut-step-head-icon .nut-icon {
+  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help));
 }
-.nut-steps-dot .nut-step-line {
-  top: 7px;
+.nut-step.nut-step-business .nut-step-head-text {
+  color: var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed));
 }
-.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-color-border-shade));
-  border-radius: 50%;
-  box-sizing: content-box;
+.nut-step.nut-step-business .nut-step-title {
+  color: var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed));
 }
-.nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: var(--nutui-steps-dot-wait-icon-bg-color, #ffffff);
+.nut-step.nut-step-business .nut-step-description {
+  color: var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed));
 }
-.nut-steps-dot .nut-step-finish .nut-step-icon {
-  background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff6666));
+.nut-step.nut-step-business .nut-step-head-dot {
+  background-color: var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed));
 }
-.nut-steps-dot .nut-step-process .nut-step-icon {
-  position: relative;
+.nut-step.nut-step-business .nut-step-head-icon,
+.nut-step.nut-step-business .nut-step-head-text {
+  background-color: var(--nutui-steps-business-head-background-color, var(--nutui-color-service));
 }
-.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-steps-process-icon-before-bg-color, none);
-  border-radius: 50%;
-  opacity: 0.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: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-color-border));
-  top: calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);
-  left: calc(50% - 1px);
-}
-.nut-steps-vertical.nut-steps-dot .nut-step-line {
-  top: calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
-}
-.nut-steps-vertical .nut-step-main {
-  display: inline-block;
-  padding-left: 6%;
-  text-align: start;
-}
-
-[dir=rtl] .nut-step-line,
-.nut-rtl .nut-step-line {
-  left: auto;
-  right: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
-}
-
-[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
-.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
-  left: auto;
-  right: 50%;
-  margin-left: 0;
-  margin-right: -7px;
-}
-
-[dir=rtl] .nut-steps-vertical .nut-step-line,
-.nut-rtl .nut-steps-vertical .nut-step-line {
-  left: auto;
-  right: calc(50% - 1px);
-}
-[dir=rtl] .nut-steps-vertical .nut-step-main,
-.nut-rtl .nut-steps-vertical .nut-step-main {
-  padding-left: 0;
-  padding-right: 6%;
+.nut-step.nut-step-business .nut-step-head-icon .nut-icon {
+  color: var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed));
 }

package/dist/es/packages/steps/steps.js

@@ -7,18 +7,23 @@ import classNames from "classnames";
 import { DataContext } from "./context";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    value: 0,
     direction: 'horizontal',
-    dot: false
+    layout: 'single',
+    type: 'text',
+    status: 'default',
+    value: 0,
+    icon: null
 });
 export var Steps = function(props) {
     var propSteps = _object_spread({}, defaultProps, props);
-    var children = propSteps.children, value = propSteps.value, direction = propSteps.direction, className = propSteps.className, dot = propSteps.dot, onStepClick = propSteps.onStepClick, restProps = _object_without_properties(propSteps, [
-        "children",
-        "value",
+    var direction = propSteps.direction, value = propSteps.value, layout = propSteps.layout, status = propSteps.status, type = propSteps.type, className = propSteps.className, children = propSteps.children, onStepClick = propSteps.onStepClick, restProps = _object_without_properties(propSteps, [
         "direction",
+        "value",
+        "layout",
+        "status",
+        "type",
         "className",
-        "dot",
+        "children",
         "onStepClick"
     ]);
     var parentSteps = {
@@ -26,11 +31,21 @@ export var Steps = function(props) {
     };
     var classPrefix = "nut-steps";
     var _obj;
-    var classes = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-").concat(direction), true), _define_property(_obj, "".concat(classPrefix, "-dot"), !!dot), _obj), className);
+    var classes = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-").concat(direction), true), _define_property(_obj, "".concat(classPrefix, "-").concat(direction, "-count-").concat(React.Children.count(children)), true), _define_property(_obj, "".concat(classPrefix, "-").concat(direction, "-").concat(layout), true), _define_property(_obj, "".concat(classPrefix, "-").concat(direction, "-").concat(type), true), _define_property(_obj, "".concat(classPrefix, "-").concat(direction, "-").concat(status), true), _obj), className);
     return /*#__PURE__*/ React.createElement(DataContext.Provider, {
         value: parentSteps
     }, /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes
-    }, restProps), children));
+    }, restProps), React.Children.map(children, function(child, index) {
+        if (/*#__PURE__*/ React.isValidElement(child)) {
+            return /*#__PURE__*/ React.cloneElement(child, {
+                // @ts-ignore
+                className: classNames(child.props.className, {
+                    'nut-step-last': index === React.Children.count(children) - 1
+                })
+            });
+        }
+        return child;
+    })));
 };
 Steps.displayName = 'NutSteps';

package/dist/es/packages/steps/style/steps.scss

@@ -1,8 +1,332 @@
 .nut-steps {
   display: flex;
-}
 
-.nut-steps-vertical {
-  height: 100%;
-  flex-flow: column;
+  // 横向滚动条
+  &-horizontal {
+    flex-flow: row;
+
+    .nut-step {
+      &-head {
+        background-color: $steps-background-color;
+
+        &-icon {
+          .nut-icon {
+            height: 10px;
+            width: 10px;
+          }
+
+          .nut-image {
+            width: 100%;
+            height: 100%;
+            background-color: $steps-background-color;
+            img {
+              vertical-align: top;
+            }
+          }
+        }
+      }
+
+      // 流程状态-当前
+      &.nut-step-process {
+        .nut-step-title {
+          color: $steps-process-title-color;
+        }
+
+        .nut-step-description {
+          color: $steps-process-description-color;
+        }
+      }
+
+      // 流程状态-等待
+      &.nut-step-wait {
+        .nut-step-title {
+          color: $steps-wait-title-color;
+        }
+
+        .nut-step-description {
+          color: $steps-wait-description-color;
+        }
+      }
+
+      // 流程状态-完成
+      &.nut-step-finish {
+      }
+    }
+
+    &-single {
+      .nut-step {
+        padding-right: $steps-horizontal-item-padding-right;
+
+        &-last {
+          padding-right: 0 !important;
+        }
+
+        &-line {
+          top: 0;
+          right: 0;
+          height: $steps-base-head-height;
+          width: $steps-horizontal-item-padding-right;
+          padding: $steps-horizontal-item-line-padding;
+          box-sizing: border-box;
+        }
+
+        &-title,
+        &-description {
+          padding-left: 4px;
+        }
+
+        &-special {
+          padding-right: $steps-horizontal-item-special-padding-right;
+
+          .nut-step-line {
+            width: 100%;
+          }
+
+          .nut-step-title {
+            padding-right: 8px;
+            width: fit-content;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-count-3 {
+        .nut-step-special {
+          padding-right: $steps-horizontal-item-special-3-padding-right;
+        }
+      }
+    }
+
+    &-double {
+      width: 100%;
+      justify-content: space-between;
+
+      .nut-step {
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+
+        &-line {
+          top: 0;
+          right: -50%;
+          height: $steps-base-head-height;
+          width: 100%;
+
+          &-inner {
+            display: inline-flex;
+            height: $steps-base-line-height;
+            width: 100%;
+            background: $steps-base-line-background;
+          }
+        }
+
+        &-head {
+          justify-content: center;
+          margin-bottom: 6px;
+
+          &-dot-wrap,
+          &-icon-wrap,
+          &-text-wrap {
+            background-color: $steps-background-color;
+            padding: $steps-horizontal-item-line-padding;
+          }
+        }
+
+        &-head-icon {
+          height: $steps-double-head-icon-size;
+          width: $steps-double-head-icon-size;
+
+          .nut-icon {
+            height: 12px;
+            width: 12px;
+          }
+        }
+
+        &-main {
+          align-items: center;
+          margin-left: 0;
+          margin-top: 2px;
+        }
+      }
+
+      &.nut-steps-horizontal-icon {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-double-head-icon-size;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-dot {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-base-head-dot-size;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-text {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-base-head-text-size;
+          }
+        }
+      }
+    }
+  }
+
+  // 纵向滚动条
+  &-vertical {
+    /* #ifdef harmony*/
+    flex: 1;
+    min-width: 0;
+    /* #endif */
+    flex-direction: column;
+
+    .nut-step {
+      padding-bottom: $steps-vertical-item-padding-bottom;
+
+      &-last {
+        padding-bottom: 0 !important;
+      }
+
+      &-line {
+        height: calc(100% - 4px);
+        width: 1px;
+        bottom: 0;
+
+        &-inner {
+          height: 100%;
+        }
+      }
+
+      &-head {
+        align-items: center;
+        justify-content: center;
+        height: 18px;
+
+        &-icon {
+          width: $steps-vertical-head-icon-size;
+          height: $steps-vertical-head-icon-size;
+
+          .nut-icon {
+            height: 12px;
+            width: 12px;
+          }
+        }
+      }
+
+      &-main {
+        flex: 1;
+        min-width: 0;
+        height: auto;
+        margin-left: 8px;
+      }
+
+      &-title {
+        display: flex;
+        align-items: center;
+        height: $steps-vertical-line-height;
+        font-size: $steps-vertical-title-font-size;
+        overflow: auto;
+        font-weight: 500;
+        margin-bottom: $steps-vertical-title-margin-bottom;
+      }
+
+      &-description {
+        margin: $steps-vertical-description-margin;
+        height: auto;
+        line-height: $steps-vertical-line-height;
+        color: $color-title;
+        font-size: $steps-vertical-description-font-size;
+        box-sizing: border-box;
+      }
+
+      &-head-dot-wrap,
+      &-head-icon-wrap,
+      &-head-text-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        background-color: white;
+        position: relative;
+        z-index: 1;
+      }
+
+      &-head-dot-wrap {
+        height: calc($steps-base-head-dot-size + 8px);
+      }
+
+      &-head-icon-wrap {
+        height: calc($steps-vertical-head-icon-size + 8px);
+      }
+
+      &-head-text-wrap {
+        height: calc($steps-base-head-text-size + 8px);
+      }
+    }
+
+    &-icon {
+      .nut-step {
+        &-head {
+          width: calc($steps-vertical-head-icon-size + 1px);
+          min-width: calc($steps-vertical-head-icon-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-vertical-head-icon-size / 2);
+        }
+      }
+    }
+
+    &-dot {
+      .nut-step {
+        &-head {
+          width: calc($steps-base-head-dot-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-base-head-dot-size / 2);
+        }
+      }
+    }
+
+    &-text {
+      .nut-step {
+        &-head {
+          width: calc($steps-base-head-text-size + 1px);
+          min-width: calc($steps-base-head-text-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-base-head-text-size / 2);
+        }
+      }
+    }
+  }
+
+  &-horizontal-enhanced,
+  &-vertical-enhanced {
+    .nut-step-finish {
+      .nut-step-head-icon,
+      .nut-step-head-text {
+        background-color: $steps-enhanced-finish-head-background-color;
+
+        .nut-icon {
+          color: $steps-enhanced-finish-head-icon-color;
+        }
+      }
+
+      .nut-step-head-text {
+        color: $steps-enhanced-finish-head-text-color;
+      }
+
+      .nut-step-head-dot {
+        background-color: $steps-enhanced-finish-head-dot-background-color;
+      }
+    }
+  }
 }