@kdcloudjs/kdesign 1.2.0 → 1.2.3

package/lib/select/style/token.less

@@ -6,17 +6,20 @@
 // color
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
-@select-item-active-bg: var(~'@{select-custom-prefix}-color-background', @color-hover);
+@select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
 @select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
 @select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
 @select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
 @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
 @select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
-@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
+@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
 @select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
 @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
-@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
+@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
+@select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', #212121);
+@select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/lib/steps/style/index.css

@@ -108,9 +108,13 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+}
+.kd-steps .kd-steps-icon {
+  border: 2px solid;
+  padding-top: 1px;
+}
+.kd-steps .kdicon-exclamatory {
+  font-size: 30px;
 }
 .kd-steps-item {
   -webkit-box-flex: 1;
@@ -132,24 +136,24 @@
 }
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-icon,
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-item-title {
-  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
-  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
+  -webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-icon {
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-title,
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-description {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-clickable.kd-steps-item-finish .kd-steps-item-title {
-  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
-  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
+  -webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
+  transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
 }
 .kd-steps-item-clickable.kd-steps-item-finish:hover .kd-steps-item-title {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
 }
 .kd-steps-item-container {
   width: 100%;
@@ -176,13 +180,14 @@
 .kd-steps-item-iconContainer::after {
   content: '';
   width: 100%;
-  height: var(--kd-c-steps-line-sizing-height, 4px);
-  background-color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  height: var(--kd-c-steps-line-sizing-height, 1px);
+  border-bottom: 1px dashed var(--kd-c-steps-color-wait, #999);
+  border-left: 1px dashed var(--kd-c-steps-color-wait, #999);
   position: absolute;
   left: 50%;
-  top: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
-  -webkit-transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
-  transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  top: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
+  -webkit-transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
 }
 .kd-steps-item-iconContainer:last-child::after {
   display: none;
@@ -214,10 +219,10 @@
       -ms-flex-align: center;
           align-items: center;
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   font-size: calc(var(--kd-c-steps-icon-sizing-width, 28px) - 13px);
   border-radius: 50%;
-  border: 2px solid var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-steps-color-wait, #999);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -227,7 +232,7 @@
 .kd-steps-item-content .kd-steps-item-title {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
@@ -237,7 +242,7 @@
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
@@ -245,32 +250,35 @@
   -webkit-box-orient: vertical;
   width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
+.kd-steps-item-process {
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+}
 .kd-steps-item-process .kd-steps-icon {
-  background-color: var(--kd-c-steps-icon-color-background, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-steps-item-process .kd-steps-item-title {
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+.kd-steps-item-process .kd-steps-item-title,
+.kd-steps-item-process .kd-steps-item-description {
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item:last-child .kd-steps-item-iconContainer::after {
   display: none;
 }
 .kd-steps-item-finish .kd-steps-icon {
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
+  border-color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-steps-item-finish .kd-steps-item-content .kd-steps-item-title,
 .kd-steps-item-finish .kd-steps-item-content .kd-steps-item-description {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-}
-.kd-steps-item-iconContainer-finish::after {
-  background-color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
 }
 .kd-steps-item-error .kd-steps-icon {
   color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
-  border: 2px solid var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
+  border-color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-steps-item-error .kd-steps-item-content .kd-steps-item-title,
 .kd-steps-item-error .kd-steps-item-content .kd-steps-item-description {
@@ -331,10 +339,10 @@
   margin-right: 4px;
 }
 .kd-steps-vertical .kd-steps-item-iconContainer::after {
-  width: var(--kd-c-steps-line-sizing-height, 4px);
+  width: var(--kd-c-steps-line-sizing-height, 1px);
   height: calc(100% + 44px);
   top: 2px;
-  left: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
+  left: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
 }
 .kd-steps-vertical .kd-steps-item-content {
   text-align: left;

package/lib/steps/style/index.less

@@ -1,16 +1,19 @@
 @import '../../style/themes/index';
 @import './token.less';
 
-
 @steps-prefix-cls: ~'@{kd-prefix}-steps';
 
 .@{steps-prefix-cls} {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
 
-  &-iconSize {
-    // font-size: @steps-font-size;
+  .@{steps-prefix-cls}-icon {
+    border: 2px solid;
+    padding-top: 1px;
+  }
+
+  .@{kd-prefix}icon-exclamatory {
+    font-size: 30px;
   }
 
   &-item {
@@ -31,25 +34,21 @@
     }
 
     &-clickable&-wait {
-
       .@{steps-prefix-cls}-icon,
       .@{steps-prefix-cls}-item-title {
         transition: all @steps-duration-promptly;
       }
 
-
       &:hover {
         .@{steps-prefix-cls}-icon {
-          // background-color: @steps-color-background-wait-icon-hover;
-
           background-color: @steps-color-white;
-          color: @steps-color-completed;
-          border: 2px solid @steps-color-completed;
+          color: @steps-color-hover;
+          border-color: @steps-color-hover;
         }
 
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
-          color: @steps-color-completed;
+          color: @steps-color-hover;
         }
       }
     }
@@ -82,11 +81,12 @@
         content: '';
         width: 100%;
         height: @steps-line-sizing-height;
-        background-color: @steps-color-wait;
+        border-bottom: 1px dashed @steps-color-wait;
+        border-left: 1px dashed @steps-color-wait;
         position: absolute;
         left: 50%;
         top: calc(50% - @steps-line-sizing-height / 2);
-        transition: width @steps-duration-promptly @steps-transition-fn, background-color @steps-duration-promptly @steps-transition-fn
+        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96)
       }
 
       &:last-child {
@@ -103,7 +103,6 @@
         justify-content: center;
         align-items: center;
 
-        // background-color:@steps-color-white;
         .@{steps-prefix-cls}-icon {
           width: @steps-icon-sizing-width;
           height: @steps-icon-sizing-width;
@@ -114,7 +113,7 @@
           color: @steps-color-wait;
           font-size: calc(@steps-icon-sizing-width - 13px);
           border-radius: 50%;
-          border: 2px solid @steps-color-wait;
+          border-color: @steps-color-wait;
           box-sizing: border-box;
         }
       }
@@ -135,7 +134,6 @@
       }
 
       .@{steps-prefix-cls}-item-description {
-
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
@@ -144,19 +142,21 @@
         word-break: break-word;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-
         width: @steps-vertical-description-sizing-width;
-
       }
     }
 
     &-process {
+      color: @steps-color-hover;
+
       .@{steps-prefix-cls}-icon {
-        background-color: @steps-color-background-process-icon;
+        background-color: @steps-color-white;
+        color: @steps-color-hover;
+        border-color: @steps-color-hover;
       }
 
-      .@{steps-prefix-cls}-item-title {
-        color: @steps-color-wait;
+      .@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
+        color: @steps-color-hover;
       }
     }
 
@@ -172,12 +172,11 @@
       .@{steps-prefix-cls}-icon {
         background-color: @steps-color-white;
         color: @steps-color-completed;
-        border: 2px solid @steps-color-completed;
+        border-color: @steps-color-completed;
         box-sizing: border-box;
       }
 
       .@{steps-prefix-cls}-item-content {
-
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
           color: @steps-color-completed;
@@ -185,31 +184,22 @@
       }
     }
 
-    &-iconContainer-finish {
-      &::after {
-        background-color: @steps-color-completed;
-      }
-    }
 
     &-error {
       .@{steps-prefix-cls}-icon {
         color: @steps-color-error;
-        border: 2px solid @steps-color-error;
+        border-color: @steps-color-error;
       }
 
       .@{steps-prefix-cls}-item-content {
-
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
           color: @steps-color-error;
         }
       }
-
-
     }
   }
 
-
   &-bottomLable {
     .@{steps-prefix-cls}-item-iconContainer {
       margin-bottom: 4px;

package/lib/steps/style/token.less

@@ -2,26 +2,23 @@
 
 @steps-prefix: '--@{kd-prefix}-c-steps';
 
-@steps-duration-promptly: var(~'@{steps-prefix}-duration-promptly', @duration-promptly);
-@steps-transition-fn: cubic-bezier(0.48, 0.04, 0.52, 0.96);
-
-
-
 // color
-@steps-color-completed: var(~'@{steps-prefix}-color-completed', @color-theme);//已经完成
+@steps-color-completed: var(~'@{steps-prefix}-color-completed', @color-success);//已经完成
+@steps-color-hover: var(~'@{steps-prefix}-color-hover', @color-theme);
 @steps-color-error: var(~'@{steps-prefix}-color-error', @color-error);
-@steps-color-wait:  var(~'@{steps-prefix}-color-wait', @color-text-secondary);//未开始  等待
+@steps-color-wait:  var(~'@{steps-prefix}-color-wait', #999);//未开始  等待
 @steps-color-white: var(~'@{steps-prefix}-color-white',@color-white);
 @steps-color-background-process-icon: var(~'@{steps-prefix}-icon-color-background', @color-theme);//图标的颜色
 
-
 // font
 @steps-font-size: var(~'@{steps-prefix}-font-size', @font-size-small); // 文字大小
 
+// motion
+@steps-duration-promptly: var(~'@{steps-prefix}-motion-duration', @duration-promptly);
 
 // sizing
 @steps-icon-sizing-width: var(~'@{steps-prefix}-icon-sizing-width', 28px);//图标的大小
-@steps-line-sizing-height: var(~'@{steps-prefix}-line-sizing-height', 4px);//连接线高度
+@steps-line-sizing-height: var(~'@{steps-prefix}-line-sizing-height', 1px);//连接线高度
 @steps-horizontal-description-sizing-height: var(~'@{steps-prefix}-horizontal-description-sizing-height', 60px);//内容部分高度 横向
 @steps-vertical-description-sizing-width: var(~'@{steps-prefix}-vertical-description-sizing-width', 200px);//内容部分宽度    纵向
 

package/lib/style/mixins/index.less

@@ -25,7 +25,7 @@
     &::before {
       position: absolute;
       z-index: -2;
-      background: transparent;
+      background: @popperBg;
       border-style: solid;
       border-width: var(--arrowSize);
       transform: rotate(45deg);
@@ -51,7 +51,7 @@
         left: var(--arrowLeft);
         top: var(--arrowSpill);
         box-shadow: -2px -2px calc(@blur - 1px) rgba(0, 0, 0, 0.1);
-        border-color: @color-white transparent transparent @color-white;
+        border-color: @popperBg transparent transparent @popperBg;
       }
     }
 
@@ -62,7 +62,7 @@
         left: var(--arrowLeft);
         bottom: var(--arrowSpill);
         box-shadow: 3px 3px calc(@blur + 1px) rgba(0, 0, 0, 0.15);
-        border-color: transparent @color-white @color-white transparent;
+        border-color: transparent @popperBg @popperBg transparent;
       }
     }
 
@@ -73,7 +73,7 @@
         top: var(--arrowTop);
         right: var(--arrowSpill);
         box-shadow: 3px 0 @blur rgba(0, 0, 0, 0.12), 0 -2px @blur rgba(204, 149, 149, 0.12);
-        border-color: @color-white @color-white transparent transparent;
+        border-color: @popperBg @popperBg transparent transparent;
       }
     }
 
@@ -84,7 +84,7 @@
         top: var(--arrowTop);
         left: var(--arrowSpill);
         box-shadow: 0 3px @blur rgba(0, 0, 0, 0.1), -2px 0 @blur rgba(0, 0, 0, 0.1);
-        border-color: transparent transparent @color-white @color-white;
+        border-color: transparent transparent @popperBg @popperBg;
       }
     }
   }

package/lib/tabs/tabs.js

@@ -178,7 +178,7 @@ var Tabs = function Tabs(props) {
     });
 
     if (index !== -1) {
-      (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index);
+      (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index, true);
     }
   }, [curActiveKey, carouselRef, carouselData]);
   (0, _react.useEffect)(function () {
@@ -464,6 +464,11 @@ var Tabs = function Tabs(props) {
 
       carouselData.push(item);
     });
+
+    if (effect !== 'none') {
+      console.log('effect', effect);
+    }
+
     return /*#__PURE__*/_react.default.createElement(_carousel.default, {
       ref: carouselRef,
       dots: false,