@kdcloudjs/kdesign 1.6.6 → 1.6.8

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## [1.6.7](https://github.com/kdcloudone/kdesign/compare/v1.6.6...v1.6.7) (2022-10-13)
+
+
+### Bug Fixes
+
+* [carousel] 去除列表元素的默认样式 ([8080ed6](https://github.com/kdcloudone/kdesign/commit/8080ed679b8f94436abdb9d3376769fd42b539c5))
+* [cascader] 更新清空按钮悬浮样式 ([8e52e06](https://github.com/kdcloudone/kdesign/commit/8e52e060b760d7302ec97563c8b294634b2a98e1))
+* [date-pikcer]更新清空按钮颜色 ([819080b](https://github.com/kdcloudone/kdesign/commit/819080be0ef035a8cda1c57169aee10f87a71dab))
+* [datepicker]修复bug及优化样式 ([008e434](https://github.com/kdcloudone/kdesign/commit/008e434e1a5966882f6af35bec76ce783c41e73d))
+* [form]更新文档 ([c0bed1a](https://github.com/kdcloudone/kdesign/commit/c0bed1af151dc1915e63460c125371ebd85d814d))
+* [form]item为label添加htmlFor属性 ([c5e1c08](https://github.com/kdcloudone/kdesign/commit/c5e1c085e92ed00714b90f878bc35a71fc3a5e7f))
+* [input]修复清空按钮样式 ([995db86](https://github.com/kdcloudone/kdesign/commit/995db861d9e1f83da47d24c2864c30c13a4ce782))
+* [modal] 修复强控制提示弹窗demo的多次点击重复隐藏问题 ([953cf88](https://github.com/kdcloudone/kdesign/commit/953cf88620f46f3006121fe04b6af363c0a0c202))
+* [search] 增加搜索框圆角 ([8e75cd3](https://github.com/kdcloudone/kdesign/commit/8e75cd30aaee8943406c46dd5711c31ecaea003a))
+* [select] 调整选择器清除按钮样式 ([62245b4](https://github.com/kdcloudone/kdesign/commit/62245b4fc87b84ff62a937c60e09d5ae1e90d330))
+* [select] 去除选择器多余代码 ([ed79aac](https://github.com/kdcloudone/kdesign/commit/ed79aac4b4e925228fb4ac274dcdf07202efbea8))
+* [select] 新增支持直接在输入框内输入内容搜索 ([b480ee7](https://github.com/kdcloudone/kdesign/commit/b480ee75279702dc5c59748d4825e5cf7fe73d01))
+* [split-panel] 去掉分割容器拖动transition ([3e989b1](https://github.com/kdcloudone/kdesign/commit/3e989b1f07d56edc240fe8a7b896532b05547c5e))
+* [steps] 修复title多行情况下布局错乱问题 ([7491d5f](https://github.com/kdcloudone/kdesign/commit/7491d5f7e753fde7facac1bd07f3a62a873b2907))
+
+
+### Features
+
+* 添加融合行悬浮高亮 ([3e6b0c7](https://github.com/kdcloudone/kdesign/commit/3e6b0c77302701fe659b4d03909242317aedefe6))
+
+
+
+## [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)
 
 

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);
@@ -5162,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 {
@@ -5187,8 +5178,9 @@ textarea {
 		.@{input-prefix-cls} {
 			&-textarea-clear-icon {
 				position: absolute;
+        z-index: 2;
 				right: 8px;
-				top: -2px;
+				top: 3px;
 			}
 		}
 	}
@@ -5346,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;
   }
 }
 
@@ -5379,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);
@@ -8261,6 +8255,7 @@ textarea {
 
   &-border {
     border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+    border-radius: @search-border-radius;
   }
 
   &-prefix,
@@ -8295,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;
@@ -8440,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 {
@@ -8841,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);
 
 
 
@@ -8866,6 +8863,9 @@ textarea {
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
+    .@{select-prefix-cls}-selection-item {
+      color: @select-placeholder-color;
+    }
   }
 
   &-icon {
@@ -8890,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;
@@ -8897,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;
@@ -8947,7 +8931,7 @@ textarea {
     }
 
     .@{select-prefix-cls}-suffix {
-      right: 10px;
+      padding-right: 8px;
     }
   }
 
@@ -8963,6 +8947,7 @@ textarea {
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
+    position: relative;
   }
 
   &-dropdown {
@@ -9024,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;
       }
 
@@ -9060,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();
     }
@@ -9077,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();
@@ -9087,7 +9094,6 @@ textarea {
   }
 
   .@{select-prefix-cls}-selection-item {
-    // position: relative;
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -9096,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 {
@@ -9133,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;
@@ -9165,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;
@@ -9177,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;
@@ -9223,8 +9239,6 @@ textarea {
   }
 }
 
-
-
 
 
 .item() {
@@ -9239,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;
 }
 
@@ -9330,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); // 下拉列表文字大小
@@ -9840,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;
@@ -9877,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;
@@ -9918,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 {
@@ -10251,7 +10262,6 @@ textarea {
       width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &-iconContainer {
@@ -10308,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;
       }
     }