@kdcloudjs/kdesign 1.6.5 → 1.6.7

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [1.6.6](https://github.com/kdcloudone/kdesign/compare/v1.6.5...v1.6.6) (2022-09-29)
+
+
+### Bug Fixes
+
+* [cli] 文档内容更新 ([409dd4c](https://github.com/kdcloudone/kdesign/commit/409dd4c59d224303ac4619e7b3ee862ca226e83b))
+* [tooltip] 修复重复的token变量 ([eafce52](https://github.com/kdcloudone/kdesign/commit/eafce52af218ff3eb7120ca3ca69d2500efdff1a))
+
+
+### Features
+
+* [input] 开放countPosition属性用来摆放计数器位置 ([999b540](https://github.com/kdcloudone/kdesign/commit/999b540b270cceb7c49a3b207ee7352098a62373))
+* [table] 添加表格向外提供的api ([f8684f5](https://github.com/kdcloudone/kdesign/commit/f8684f53b3f1769340fe5cbe6a0c8457b7f74d0d))
+
+
+
+## [1.6.5](https://github.com/kdcloudone/kdesign/compare/v1.6.4...v1.6.5) (2022-09-22)
+
+
+### Bug Fixes
+
+* [cascader] 更改清空按钮样式 ([ae4adec](https://github.com/kdcloudone/kdesign/commit/ae4adec4c280d1d1aaee33c3a371050f8cb9cc6b))
+* [cascader]点击清空图标没有触发onChange的问题 ([f48d308](https://github.com/kdcloudone/kdesign/commit/f48d3083a0ab06eebd97cfe347931ba18a6bd3a5))
+* [rate] 修复当value值为0时不触发视图更新的bug ([07ef798](https://github.com/kdcloudone/kdesign/commit/07ef7980a83e425e65608efaa9bd38807d37b484))
+* [search] 修复basic模式下onFocus和onBlur不生效的问题 ([0b7cbf3](https://github.com/kdcloudone/kdesign/commit/0b7cbf3d4ec247744fbd7e697a9b0e6be9f6e573))
+* [transfer] 添加清空搜索框的方法clearSearch ([5024a62](https://github.com/kdcloudone/kdesign/commit/5024a623178b62765d7d798b7344ccf2a0245e1e))
+* [upload] 修复demo默认上传按钮的样式 ([2a461cc](https://github.com/kdcloudone/kdesign/commit/2a461ccf6c51f5f38fb11c1ec2952ff28099bd5c))
+* [upload] 修复hover上传列表时操作按钮与文件列表背景色不同步的问题 ([478dd7b](https://github.com/kdcloudone/kdesign/commit/478dd7b14735bb4ea8dad04f66114988706fef60))
+
+
+### Features
+
+* [pagination]添加配置总计的显示方式 ([5900254](https://github.com/kdcloudone/kdesign/commit/59002540c1bdb561d922cdd34a46f35fbb7801c2))
+
+
+
 ## [1.6.4](https://github.com/kdcloudone/kdesign/compare/v1.6.3...v1.6.4) (2022-09-15)
 
 

package/dist/kdesign-complete.less

@@ -1578,6 +1578,7 @@
 
   &-list {
     list-style: none;
+    padding: 0;
     display: flex;
     flex-direction: row;
     position: relative;
@@ -1644,6 +1645,9 @@
 
   &-slidebar {
     position: absolute;
+    list-style: none;
+    padding: 0;
+
     &-left {
       .vertical;
       left: @carousel-dots-margin-left;
@@ -1935,14 +1939,14 @@
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', @color-theme);
+@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
-@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #666);
+@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);
@@ -2718,8 +2722,6 @@
 
 
 @datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
-// @rangePicker-prefix-cls: ~'@{kd-prefix}-rangePicker';
-// @datePicker-prefix-cls-input: ~'@{datePicker-prefix-cls}-input';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
 
 @datePicker-calendar-text: 24px;
@@ -2735,14 +2737,6 @@
     input {
       font-size: @date-small-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 12px);
-    }
   }
 
   &-large {
@@ -2751,14 +2745,6 @@
     input {
       font-size: @date-large-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right:calc(@date-large-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-large-font-size + 9px);
-    }
   }
 
   &-middle {
@@ -2767,14 +2753,6 @@
     input {
       font-size: @date-middle-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 11px);
-    }
   }
 
   &-input {
@@ -2816,6 +2794,7 @@
 
   &-range {
     display: inline-flex;
+    align-items: center;
     position: relative;
 
     &-separator {
@@ -2860,15 +2839,12 @@
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
-
-    .@{datePicker-prefix-cls}-suffix {
-      color: @date-color-background-checked;
-    }
   }
 
   &-clear {
     position: absolute;
     top: 50%;
+    right: 0;
     color: @date-icon-color;
     line-height: 1;
     background: @date-clear-background-color;
@@ -2881,7 +2857,19 @@
     }
 
     &:hover {
-      color: @date-clear-background-color-hover;
+      color: @date-icon-color-hover;
+    }
+  }
+
+  .@{datePicker-prefix-cls}-range-clear {
+    align-self: center;
+    margin-left: @date-suffix-spacing-margin-left;
+    color: @date-icon-color;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      color: @date-icon-color-hover;
     }
   }
 
@@ -3523,8 +3511,6 @@
       }
     }
   }
-
-
 }
 
 .@{datePicker-prefix-cls}-container {
@@ -3548,12 +3534,16 @@
       line-height: @date-panel-header-height;
       font-size: @date-container-font-size;
       border-bottom: .5px solid @date-container-color-border;
+      cursor: pointer;
     }
   }
 }
 
 
 
+
+@datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
+
 .input-wrapper() {
   display: inline-flex;
   border: 1px solid @date-input-color-border;
@@ -3625,6 +3615,10 @@
   line-height: calc(@height - (@padding-vertical * 2) - 2);
   font-size: @fonSize;
   padding: @padding-vertical @padding-horizontal;
+
+  &.@{datePicker-prefix-cls}-underline {
+    padding: @padding-vertical 0;
+  }
 }
 
 .today-after(@background) {
@@ -3656,7 +3650,8 @@
 @date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
 @date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
 @date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
-@date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', @color-disabled);
+@date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', #d9d9d9);
+@date-icon-color-hover: var(~'@{date-picker-custom-prefix}-icon-color-hover', #999);
 @date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
 @date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
 @date-clear-background-color-focused: var(~'@{date-picker-custom-prefix}-clear-color-background-focused', @color-theme);
@@ -5071,7 +5066,14 @@ textarea {
 			z-index: 1;
 			color: @input-placeholder-color-inner;
 			font-size: @input-small-font-size-inner;
+      line-height: 18px;
+      background-color: #fff;
 		}
+    &-mark-inner {
+      top: auto;
+      bottom: 5px;
+      right: 8px;
+    }
 	}
 	&-no-resize {
 		resize: none;
@@ -5155,10 +5157,6 @@ textarea {
 
 		&-focused {
 			border-color: @input-border-color-focused;
-
-      .@{input-prefix-cls}-clear-icon, .@{input-prefix-cls}-textarea-clear-icon {
-        color: @input-border-color-focused;
-      }
 		}
 
     &-disabled {
@@ -5180,8 +5178,9 @@ textarea {
 		.@{input-prefix-cls} {
 			&-textarea-clear-icon {
 				position: absolute;
+        z-index: 2;
 				right: 8px;
-				top: -2px;
+				top: 3px;
 			}
 		}
 	}
@@ -5339,15 +5338,15 @@ textarea {
 
 .input-clear-icon() {
   cursor: pointer;
-  color: @input-color-border;
+  color: @input-clear-color;
 
   &:hover {
-    color: @input-border-color-focused;
+    color: @input-clear-color-hover;
   }
 
   i {
     vertical-align: middle;
-    font-size: 12px !important;
+    font-size: 16px;
   }
 }
 
@@ -5372,6 +5371,8 @@ textarea {
 @input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
 @input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
 @input-color-border: var(~'@{input-prefix}-color-border', #999);
+@input-clear-color: var(~'@{input-prefix}-clear-color', #d9d9d9);
+@input-clear-color-hover: var(~'@{input-prefix}-clear-color-hover', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
 @input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
@@ -8254,6 +8255,7 @@ textarea {
 
   &-border {
     border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+    border-radius: @search-border-radius;
   }
 
   &-prefix,
@@ -8288,6 +8290,7 @@ textarea {
   }
   &-border {
     border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+    border-radius: @search-border-radius;
   }
   &:hover:not(&-disabled) {
     border-color: @search-color-theme;
@@ -8433,7 +8436,7 @@ textarea {
     z-index: @zIndex-popper;
     font-size: @quick-search-dropdown-font-size;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-    border-radius: @search-radius-size;
+    border-radius: @search-dropdown-border-radius;
     background: @search-color-background;
     overflow: auto;
     &-scroll {
@@ -8834,7 +8837,8 @@ textarea {
 @search-transition-duration: var(~'@{search-prefix}-motion-duration', @duration-promptly);
 
 // radius
-@search-radius-size: var(~'@{search-prefix}-radius-border', @radius-border);
+@search-dropdown-border-radius: var(~'@{search-prefix}-dropdown-radius-border', @radius-border);
+@search-border-radius: var(~'@{search-prefix}-radius-border', @radius-border);
 
 
 
@@ -8859,6 +8863,9 @@ textarea {
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
+    .@{select-prefix-cls}-selection-item {
+      color: @select-placeholder-color;
+    }
   }
 
   &-icon {
@@ -8883,6 +8890,9 @@ textarea {
 
     &-clear {
       opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
       transition: opacity 0.15s ease;
       &:hover {
         color: @select-g-color-border-hover;
@@ -8890,30 +8900,11 @@ textarea {
     }
   }
 
-  &-selection-search {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 11px;
-    &-input {
-      opacity: 0;
-      margin: 0;
-      padding: 0;
-      background: 0 0;
-      border: none;
-      outline: none;
-      appearance: none;
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
   &-focused {
     .focusColor();
-    // border-bottom: 1px solid #5582F3 ;
   }
   &-placeholder {
+    position: absolute;
     color: @select-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
@@ -8940,7 +8931,7 @@ textarea {
     }
 
     .@{select-prefix-cls}-suffix {
-      right: 10px;
+      padding-right: 8px;
     }
   }
 
@@ -8956,6 +8947,7 @@ textarea {
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
+    position: relative;
   }
 
   &-dropdown {
@@ -9017,7 +9009,6 @@ textarea {
 
       &-selected:not(&-disabled) {
         color: @select-item-selected-color;
-        // font-weight: @select-item-selected-font-weight;
         background-color: @select-item-selected-bg;
       }
 
@@ -9053,6 +9044,22 @@ textarea {
     margin-left: 8px;
   }
   &-single {
+    .@{select-prefix-cls}-selection {
+      &-search {
+        position: absolute;
+        right: 28px;
+        left: 0;
+        height: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
     &-focused {
       .focusColor();
     }
@@ -9070,6 +9077,13 @@ textarea {
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-text {
       color: @select-single-color-text;
       .over();
@@ -9080,7 +9094,6 @@ textarea {
   }
 
   .@{select-prefix-cls}-selection-item {
-    // position: relative;
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -9089,12 +9102,6 @@ textarea {
     height: 20px;
     line-height: 20px;
     margin: 2px 8px 2px 0;
-    // margin: 2px 4px 2px 0;
-    // margin-right: 4px;
-    // padding-left: 8px;
-    // background: #fafafa;
-    // border: 1px solid #d9d9d9;
-    // border-radius: 2px;
     cursor: default;
     user-select: none;
     &-small {
@@ -9126,24 +9133,13 @@ textarea {
       border: 1px solid #ccc;
       color: #212121;
     }
-    // &-remove {
-    //   text-align: center;
-    //   text-transform: none;
-    //   display: inline-flex;
-    //   color: rgba(0, 0, 0, 0.45);
-    //   line-height: inherit;
-    //   cursor: pointer;
-    //   &:hover {
-    //     color: #212121;
-    //   }
-    // }
+
     &-span {
       position: relative;
       margin-left: 0.5px;
       box-sizing: border-box;
     }
     &-input {
-      // opacity: 0;
       cursor: text;
       margin: 0;
       padding: 0;
@@ -9158,6 +9154,27 @@ textarea {
 
   // 多选
   &-multiple {
+    .@{select-prefix-cls}-selection {
+      &-search {
+        position: relative;
+        max-width: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          width: 100%;
+        }
+        &-mirror {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 999;
+          white-space: pre;
+          visibility: hidden;
+        }
+      }
+    }
     &-disabled {
       cursor: not-allowed;
       background-color: @select-color-background-disabled;
@@ -9170,6 +9187,12 @@ textarea {
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-selector {
       position: relative;
       cursor: text;
@@ -9216,8 +9239,6 @@ textarea {
   }
 }
 
-
-
 
 
 .item() {
@@ -9232,14 +9253,12 @@ textarea {
 }
 
 .focusColor() {
-  // border-bottom: 1px solid #5582F3;
   border-color: @select-g-color-border-foucs !important;
 }
 
 .select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
   min-height: @height;
   max-height: calc(@maxHeight * 3 - 10px);
-  line-height: @lineHeight;
   font-size: @fontSize;
 }
 
@@ -9323,6 +9342,8 @@ textarea {
 @select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
 @select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 @select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
+@select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
@@ -9833,7 +9854,6 @@ textarea {
     &-panel {
         position: absolute;
         overflow: hidden;
-        transition: all calc(@transition-duration - 0.1s) @ease-out;
         &.left-panel, &.right-panel {
             top: 0;
             bottom: 0;
@@ -9870,7 +9890,6 @@ textarea {
           position: absolute;
           transform: translate(-50%, -50%);
           z-index: 10;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           &.is-active {
             .@{split-prefix-cls}-trigger-arrow {
               border-color: @split-panel-trigger-arrow-color;
@@ -9911,7 +9930,6 @@ textarea {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           box-sizing: border-box;
           border: @split-panel-arrow-border-width solid transparent;
           .@{kd-prefix}icon {
@@ -10244,7 +10262,6 @@ textarea {
       width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &-iconContainer {
@@ -10301,22 +10318,12 @@ textarea {
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
 
       .@{steps-prefix-cls}-item-description {
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         width: @steps-vertical-description-sizing-width;
       }
     }
@@ -13359,7 +13366,7 @@ template {
 
 // spacing
 @tooltip-vertical-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 8px);
-@tooltip-horizontal-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 12px);
+@tooltip-horizontal-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-horizontal', 12px);
 
 // sizing
 @tooltip-max-width: var(~'@{tooltip-custom-prefix}-sizing-max-width', 360px);