@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/cjs/packages/searchbar/style-jrkf/style.css

@@ -13,26 +13,101 @@
   box-sizing: border-box;
   justify-content: center;
 }
+.nut-searchbar .nut-icon {
+  width: var(--nutui-searchbar-icon-size, 20px);
+  height: var(--nutui-searchbar-icon-size, 20px);
+  font-size: var(--nutui-searchbar-icon-size, 20px);
+}
 .nut-searchbar-content {
+  position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--nutui-searchbar-content-padding, 0 12px);
+  padding: 0 var(--nutui-searchbar-gap, 16px);
   height: var(--nutui-searchbar-input-height, 36px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   border-radius: var(--nutui-searchbar-content-border-radius, var(--nutui-radius-xs));
+  border: 1px solid var(--nutui-color-primary, #ff6666);
 }
 .nut-searchbar-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--nutui-color-primary, #ff6666);
+}
+.nut-searchbar-leftin {
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-rightin {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--nutui-color-primary, #ff6666);
 }
-.nut-searchbar-clear, .nut-searchbar-rightin {
-  width: 16px;
-  height: 16px;
+.nut-searchbar-rightin.nut-searchbar-icon {
   color: var(--nutui-black-5);
 }
+.nut-searchbar-input-box, .nut-searchbar-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.nut-searchbar-input {
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
+  background: transparent;
+  text-align: var(--nutui-searchbar-input-text-align, left);
+}
+.nut-searchbar-clear.nut-searchbar-icon {
+  position: relative;
+}
+.nut-searchbar-clear.nut-searchbar-icon .nut-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--nutui-black-5);
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-clear.nut-searchbar-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 200%;
+  left: -20%;
+}
+.nut-searchbar-values {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  z-index: 2;
+  background-color: #fff;
+  top: 9px;
+  left: 6px;
+  font-size: 12px;
+  line-height: 12px;
+}
+.nut-searchbar-values .nut-searchbar-value {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f7f8fc;
+  border-radius: 4px;
+  margin-right: 2px;
+}
+.nut-searchbar-values .nut-icon {
+  width: 6px;
+  height: 6px;
+  font-size: 6px;
+  color: #c2c4cc;
+  margin-left: 4px;
+}
 .nut-searchbar-left, .nut-searchbar-right {
   display: inline-flex;
   align-items: center;
@@ -75,29 +150,18 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box, .nut-searchbar-input {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-.nut-searchbar-input {
-  border: 0;
-  outline: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--nutui-searchbar-input-padding, 4px 8px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
-  background: transparent;
-  text-align: var(--nutui-searchbar-input-text-align, left);
-}
 .nut-searchbar-round {
   border-radius: var(--nutui-searchbar-content-round-border-radius, 18px);
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
+.nut-searchbar-focus {
+  padding: 5px var(--nutui-searchbar-gap, 16px);
+}
+.nut-searchbar-focus .nut-searchbar-content {
+  border: 0.5px solid #ff5c67;
+}
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {

package/dist/cjs/packages/step/step.js

@@ -25,7 +25,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     icon: null
 });
 var Step = function Step(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, title = _ref.title, description = _ref.description, value = _ref.value, icon = _ref.icon, className = _ref.className, restProps = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), type = _ref.type, children = _ref.children, title = _ref.title, description = _ref.description, value = _ref.value, icon = _ref.icon, className = _ref.className, restProps = (0, _object_without_properties._)(_ref, [
+        "type",
         "children",
         "title",
         "description",
@@ -34,45 +35,85 @@ var Step = function Step(props) {
         "className"
     ]);
     var parent = (0, _react.useContext)(_context.DataContext);
-    var dot = parent.propSteps.dot;
-    var getCurrentStatus = function getCurrentStatus() {
-        var index = value;
-        if (index < +parent.propSteps.value) return 'finish';
-        return index === +parent.propSteps.value ? 'process' : 'wait';
-    };
-    var handleClickStep = function handleClickStep() {
-        var _parent_propSteps, _parent_propSteps1;
-        ((_parent_propSteps = parent.propSteps) === null || _parent_propSteps === void 0 ? void 0 : _parent_propSteps.onStepClick) && ((_parent_propSteps1 = parent.propSteps) === null || _parent_propSteps1 === void 0 ? void 0 : _parent_propSteps1.onStepClick(value));
-    };
-    var classPrefix = "nut-step";
-    var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(getCurrentStatus()), true), className);
-    var renderIconClass = function renderIconClass() {
-        if (icon) {
-            return "".concat(classPrefix, "-icon is-icon");
+    var _parent_propSteps = parent.propSteps, parentType = _parent_propSteps.type, parentValue = _parent_propSteps.value, status = _parent_propSteps.status, parentIcon = _parent_propSteps.icon, onStepClick = _parent_propSteps.onStepClick;
+    var currentStatus = (0, _react.useMemo)(function() {
+        if ([
+            'default',
+            'business'
+        ].includes(status)) {
+            return status;
         }
-        if (!dot && !icon) {
-            return "".concat(classPrefix, "-icon is-text");
+        if (value < +parentValue) return 'finish';
+        return value === +parentValue ? 'process' : 'wait';
+    }, [
+        value,
+        parentValue
+    ]);
+    var handleClickStep = (0, _react.useCallback)(function() {
+        onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(value);
+    }, [
+        onStepClick,
+        value
+    ]);
+    var classPrefix = "nut-step";
+    // className计算
+    var classes = (0, _react.useMemo)(function() {
+        var _obj;
+        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(currentStatus), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type || parentType), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-special"), description), _obj), className);
+    }, [
+        currentStatus,
+        type,
+        className
+    ]);
+    // 头部渲染
+    var renderHeadType = (0, _react.useMemo)(function() {
+        switch(type || parentType){
+            case 'text':
+                return /*#__PURE__*/ _react.default.createElement("span", {
+                    className: "".concat(classPrefix, "-head-text")
+                }, value);
+            case 'dot':
+                return /*#__PURE__*/ _react.default.createElement("span", {
+                    className: "".concat(classPrefix, "-head-dot")
+                });
+            case 'icon':
+                return /*#__PURE__*/ _react.default.createElement("span", {
+                    className: "".concat(classPrefix, "-head-icon")
+                }, icon || parentIcon);
+            default:
+                return null;
         }
-        return "".concat(classPrefix, "-icon");
-    };
+    }, [
+        type,
+        value,
+        icon
+    ]);
+    // 内容渲染
+    var renderContent = (0, _react.useMemo)(function() {
+        if (!title && !description) return null;
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-main")
+        }, title && /*#__PURE__*/ _react.default.createElement("span", {
+            className: "".concat(classPrefix, "-title")
+        }, title), description && /*#__PURE__*/ _react.default.createElement("span", {
+            className: "".concat(classPrefix, "-description")
+        }, description));
+    }, [
+        title,
+        description
+    ]);
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
         className: classes
     }, restProps), {
         onClick: handleClickStep
     }), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-step-head"
+        className: "".concat(classPrefix, "-head")
     }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-step-line"
-    }), /*#__PURE__*/ _react.default.createElement("div", {
-        className: renderIconClass()
-    }, icon || !dot && /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-inner"
-    }, value))), (title || description) && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-step-main"
-    }, /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-title"
-    }, title), description && /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-step-description"
-    }, description)));
+        className: "".concat(classPrefix, "-head-").concat(type || parentType, "-wrap")
+    }, renderHeadType)), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-line")
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-line-inner")
+    })), renderContent);
 };
 Step.displayName = 'NutStep';

package/dist/cjs/packages/step/style/step.scss

@@ -1,257 +1,166 @@
 .nut-step {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex: 1;
-  text-align: center;
-  font-size: 0;
+  position: relative;
+  display: flex;
 
-  &-head {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    margin-bottom: $steps-base-icon-margin-bottom;
-  }
-
-  // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2)
-  // 如 width=70%时，left=65%; width=100%,left=50%;
-  &-line {
-    position: absolute;
-    top: calc($steps-base-icon-height / 2);
-    left: calc(50% + (100% - $steps-base-line-width) / 2);
-    height: $steps-base-line-height;
-    width: $steps-base-line-width;
-    background: $steps-base-line-background;
+  &-last {
+    .nut-step-line {
+      display: none;
+    }
   }
 
-  &-icon {
+  &-head {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: $steps-base-icon-width;
-    height: $steps-base-icon-height;
-    line-height: $steps-base-icon-line-height;
-    font-size: $steps-base-icon-font-size;
-    background-color: $steps-wait-icon-bg-color;
-    border-color: $steps-wait-icon-bg-color;
-    color: $steps-wait-icon-color;
+    height: $steps-base-head-height;
+    position: relative;
     z-index: 1;
 
-    .nut-icon {
-      width: 100%;
-      height: 100%;
+    &-text {
+      height: $steps-base-head-text-size;
+      width: $steps-base-head-text-size;
+      background-color: $steps-base-head-background-color;
+      color: $steps-base-head-color;
+      font-size: $steps-base-head-size;
     }
 
-    &.is-text {
-      border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+    &-icon {
+      height: $steps-base-head-icon-size;
+      width: $steps-base-head-icon-size;
+      background-color: $steps-base-head-background-color;
+
+      .nut-icon {
+        color: white;
+      }
+    }
+
+    &-dot {
+      height: $steps-base-head-dot-size;
+      width: $steps-base-head-dot-size;
+      background-color: $steps-base-head-dot-background-color;
     }
 
-    &.is-icon {
+    &-dot,
+    &-icon,
+    &-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+      box-sizing: border-box;
+      border: $steps-base-head-border;
+    }
+  }
+
+  &-line {
+    position: absolute;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-inner {
+      display: flex;
+      flex: 1;
+      height: $steps-base-line-height;
+      background: $steps-base-line-background;
     }
   }
 
   &-main {
-    padding: 0 10%;
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    min-height: $steps-base-head-height;
+  }
+
+  &-line,
+  &-title {
+    background-color: #ffffff;
+  }
+
+  &-title {
+    position: relative;
+    z-index: 1;
   }
 
   &-title {
-    display: block;
-    margin-bottom: $steps-base-title-margin-bottom;
+    height: 14px;
+    line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   &-description {
-    display: block;
+    height: 16px;
+    line-height: 16px;
+    margin-top: $steps-base-description-margin-top;
     font-size: $steps-base-description-font-size;
     color: $steps-base-description-color;
+    overflow: hidden;
   }
 
-  &:last-child {
-    .nut-step-line {
-      display: none;
-    }
-  }
-
+  // 流程状态-当前
   &.nut-step-process {
-    .nut-step-icon {
-      background-color: $steps-process-icon-bg-color;
-      border-color: $steps-process-icon-bg-color;
-      color: $steps-process-icon-color;
-    }
-
-    .nut-step-title {
-      color: $steps-process-title-color;
-      font-size: $steps-process-title-font-size;
-      font-weight: $steps-process-title-font-weight;
+    .nut-step-head-icon,
+    .nut-step-head-text,
+    .nut-step-head-dot {
+      background-color: $steps-process-head-background-color;
     }
 
-    .nut-step-description {
-      color: $steps-process-description-color;
+    .nut-step-head-text {
+      color: $steps-process-color;
     }
   }
 
+  // 流程状态-等待
   &.nut-step-wait {
-    .nut-step-title {
-      color: $steps-wait-title-color;
-    }
-
-    .nut-step-description {
-      color: $steps-wait-description-color;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-wait-icon-color;
+      }
     }
   }
 
+  // 流程状态-完成
   &.nut-step-finish {
-    .nut-step-icon {
-      background-color: $steps-finish-icon-bg-color;
-      border-color: $steps-finish-icon-border-color;
-      color: $steps-finish-icon-color;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-finish-icon-color;
+      }
     }
+  }
 
-    .nut-step-line {
-      background: $steps-finish-line-background;
+  // 强化业务属性展示
+  &.nut-step-business {
+    .nut-step-head-text {
+      color: $steps-business-head-text-color;
     }
 
     .nut-step-title {
-      color: $steps-finish-title-color;
+      color: $steps-business-title-color;
     }
 
     .nut-step-description {
-      color: $steps-finish-description-color;
+      color: $steps-business-description-color;
     }
-  }
-}
-
-.nut-steps-dot {
-  .nut-step-head {
-    margin: $steps-dot-head-margin;
-  }
-
-  .nut-step-line {
-    top: 7px;
-  }
-
-  .nut-step-icon {
-    width: $steps-dot-icon-width;
-    height: $steps-dot-icon-height;
-    border: $steps-dot-icon-border;
-    border-radius: 50%;
-    box-sizing: content-box;
-  }
 
-  .nut-step-wait {
-    .nut-step-icon {
-      background-color: $steps-dot-wait-icon-bg-color;
+    .nut-step-head-dot {
+      background-color: $steps-business-head-dot-background-color;
     }
-  }
 
-  .nut-step-finish {
-    .nut-step-icon {
-      background-color: $steps-dot-finish-icon-bg-color;
-      border-color: $steps-dot-finish-icon-border-color;
+    .nut-step-head-icon,
+    .nut-step-head-text {
+      background-color: $steps-business-head-background-color;
     }
-  }
-
-  .nut-step-process {
-    .nut-step-icon {
-      position: relative;
 
-      &:before {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        margin-left: -7px;
-        margin-top: -7px;
-        width: 14px;
-        height: 14px;
-        background-color: $steps-process-icon-before-bg-color;
-        border-radius: 50%;
-        opacity: 0.23;
+    .nut-step-head-icon {
+      .nut-icon {
+        color: $steps-business-head-icon-color;
       }
     }
   }
 }
-
-.nut-steps-horizontal {
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: 50%;
-      bottom: -50%;
-    }
-  }
-}
-
-.nut-steps-vertical {
-  .nut-step {
-    display: flex;
-    height: 33.34%;
-  }
-
-  .nut-step-line {
-    position: absolute;
-    display: inline-block;
-    width: 1px;
-    height: $steps-base-line-width;
-    background: $steps-base-line-background;
-    top: calc(
-      $steps-base-icon-height +
-        (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2
-    );
-    left: calc(50% - 1px);
-  }
-
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2);
-    }
-  }
-
-  .nut-step-main {
-    display: inline-block;
-    padding-left: 6%;
-    text-align: start;
-  }
-}
-[dir='rtl'] .nut-step,
-.nut-rtl .nut-step {
-  &-line {
-    left: auto;
-    right: calc(50% + (100% - $steps-base-line-width) / 2);
-  }
-}
-[dir='rtl'] .nut-steps-dot,
-.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-rtl .nut-steps-vertical {
-  .nut-step-line {
-    left: auto;
-    right: calc(50% - 1px);
-  }
-
-  .nut-step-main {
-    padding-left: 0;
-    padding-right: 6%;
-  }
-}