@nutui/nutui-react-taro 3.0.11-patch.0 → 3.0.12

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;
+      }
+    }
+  }
 }

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

@@ -5,8 +5,225 @@
 .nut-steps {
   display: flex;
 }
-
+.nut-steps-horizontal {
+  flex-flow: row;
+}
+.nut-steps-horizontal .nut-step-head {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image {
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image img {
+  vertical-align: top;
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title {
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description {
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title {
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description {
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
+}
+.nut-steps-horizontal-single .nut-step {
+  padding-right: var(--nutui-steps-horizontal-item-padding-right, 28px);
+}
+.nut-steps-horizontal-single .nut-step-last {
+  padding-right: 0 !important;
+}
+.nut-steps-horizontal-single .nut-step-line {
+  top: 0;
+  right: 0;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: var(--nutui-steps-horizontal-item-padding-right, 28px);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+  box-sizing: border-box;
+}
+.nut-steps-horizontal-single .nut-step-title, .nut-steps-horizontal-single .nut-step-description {
+  padding-left: 4px;
+}
+.nut-steps-horizontal-single .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22px);
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-line {
+  width: 100%;
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-title {
+  padding-right: 8px;
+  width: fit-content;
+}
+.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9px);
+}
+.nut-steps-horizontal-double {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-steps-horizontal-double .nut-step {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.nut-steps-horizontal-double .nut-step-line {
+  top: 0;
+  right: -50%;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: 100%;
+}
+.nut-steps-horizontal-double .nut-step-line-inner {
+  display: inline-flex;
+  height: var(--nutui-steps-base-line-height, 1px);
+  width: 100%;
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+}
+.nut-steps-horizontal-double .nut-step-head {
+  justify-content: center;
+  margin-bottom: 6px;
+}
+.nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+  width: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-horizontal-double .nut-step-main {
+  align-items: center;
+  margin-left: 0;
+  margin-top: 2px;
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line {
+  height: var(--nutui-steps-base-head-dot-size, 6px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line {
+  height: var(--nutui-steps-base-head-text-size, 12px);
+}
 .nut-steps-vertical {
+  /* #ifdef harmony*/
+  flex: 1;
+  min-width: 0;
+  /* #endif */
+  flex-direction: column;
+}
+.nut-steps-vertical .nut-step {
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+}
+.nut-steps-vertical .nut-step-last {
+  padding-bottom: 0 !important;
+}
+.nut-steps-vertical .nut-step-line {
+  height: calc(100% - 4px);
+  width: 1px;
+  bottom: 0;
+}
+.nut-steps-vertical .nut-step-line-inner {
   height: 100%;
-  flex-flow: column;
+}
+.nut-steps-vertical .nut-step-head {
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+}
+.nut-steps-vertical .nut-step-head-icon {
+  width: var(--nutui-steps-vertical-item-icon-size, 20px);
+  height: var(--nutui-steps-vertical-item-icon-size, 20px);
+}
+.nut-steps-vertical .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-vertical .nut-step-main {
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  margin-left: 8px;
+}
+.nut-steps-vertical .nut-step-title {
+  display: flex;
+  align-items: center;
+  height: var(--nutui-steps-vertical-line-height, 18px);
+  font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 16px));
+  overflow: auto;
+  font-weight: 500;
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+}
+.nut-steps-vertical .nut-step-description {
+  margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
+  height: auto;
+  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14px));
+  box-sizing: border-box;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap, .nut-steps-vertical .nut-step-head-icon-wrap, .nut-steps-vertical .nut-step-head-text-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: white;
+  position: relative;
+  z-index: 1;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap {
+  height: calc(var(--nutui-steps-base-head-dot-size, 6px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-icon-wrap {
+  height: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-text-wrap {
+  height: calc(var(--nutui-steps-base-head-text-size, 12px) + 8px);
+}
+.nut-steps-vertical-icon .nut-step-head {
+  width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+  min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+}
+.nut-steps-vertical-icon .nut-step-line {
+  left: calc(var(--nutui-steps-vertical-item-icon-size, 20px) / 2);
+}
+.nut-steps-vertical-dot .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-dot-size, 6px) + 1px);
+}
+.nut-steps-vertical-dot .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-dot-size, 6px) / 2);
+}
+.nut-steps-vertical-text .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+  min-width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+}
+.nut-steps-vertical-text .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-text-size, 12px) / 2);
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon {
+  color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot {
+  background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }