@kdcloudjs/kdesign 1.5.11 → 1.6.2

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [1.6.0](https://github.com/kdcloudone/kdesign/compare/v1.5.11...v1.6.0) (2022-09-01)
+
+
+### Bug Fixes
+
+* [avatar] 修复头像组件图标位置偏下问题 ([b8b537b](https://github.com/kdcloudone/kdesign/commit/b8b537b2715784344cdab65b0b06d4dfec37ea2f))
+* [date-picker] 更新demo与文档描述内容 ([755d329](https://github.com/kdcloudone/kdesign/commit/755d3290f7b50332e86a477ab0d9390c4e2f9dbe))
+* [slider] 修复api tipFormatter配置无效问题 ([e9d4d26](https://github.com/kdcloudone/kdesign/commit/e9d4d263ddd2092fa6992257bb9166246477e3a5))
+* [steps] 修复步骤条警告信息 ([fd81be8](https://github.com/kdcloudone/kdesign/commit/fd81be8940d73c00e944904cb5028d3537551481))
+* [tree] 调整树控件外边距 ([aad7d2d](https://github.com/kdcloudone/kdesign/commit/aad7d2d24097d410ba2da1842f310c06c4742799))
+
+
+
+## [1.5.11](https://github.com/kdcloudone/kdesign/compare/v1.5.10...v1.5.11) (2022-08-25)
+
+
+### Bug Fixes
+
+* [Alert]demo展示样式问题 ([0c69266](https://github.com/kdcloudone/kdesign/commit/0c69266b9b236c8d9ebd65e021d8c1c62ad21e81))
+* [button] 新增按钮超出隐藏并出现省略号 ([b418fb3](https://github.com/kdcloudone/kdesign/commit/b418fb38c67ef68a6e6cdeac0bef397032c966dd))
+* [button] 修复按钮文字换行问题 ([0ebd417](https://github.com/kdcloudone/kdesign/commit/0ebd417b9251b8bfee9c4f8dc2ec529288c89faf))
+* [Cascader]demo点击跳转问题 ([e073102](https://github.com/kdcloudone/kdesign/commit/e07310247f2a31b548ea5c81920f200af7cf68d7))
+* [drawer] 调整demo ([71414fb](https://github.com/kdcloudone/kdesign/commit/71414fb8ce64dd98dc27e6cd6f55416c244bbb7c))
+* [drawer] 修复抽屉显示时使页面抖动问题 ([9c6ce88](https://github.com/kdcloudone/kdesign/commit/9c6ce88de5b6399297ab0320994aa221711aa99b))
+* [message] 修复手动点击关闭,不触发消息提示控件问题 ([672ed89](https://github.com/kdcloudone/kdesign/commit/672ed89fc7c8497136b08f908f2d1af19adbed57))
+* [Pagination]颜色问题 ([de56c91](https://github.com/kdcloudone/kdesign/commit/de56c91f04f699789f408d2de9b1cf699a3b2ca4))
+* [search] 修复demo图片不显示问题 ([e181c58](https://github.com/kdcloudone/kdesign/commit/e181c583d4bf93976f907a7b5bb5f59044df3403))
+* [space] 修复demo显示问题 ([cfe1089](https://github.com/kdcloudone/kdesign/commit/cfe10897f4170a5a657523ab8a7fba949509d45e))
+* [transfer] 修复穿梭框方向键文字换行问题 ([c1618e4](https://github.com/kdcloudone/kdesign/commit/c1618e4e7bc66655e016a67de4a5de674c55d3ad))
+
+
+
+## [1.5.10](https://github.com/kdcloudone/kdesign/compare/v1.5.9...v1.5.10) (2022-08-22)
+
+
+### Bug Fixes
+
+* [table] 修复表格虚模式下表格从不可见到可见出现滚动条跳动问题 ([9971ad1](https://github.com/kdcloudone/kdesign/commit/9971ad1ac7f8e97338308fc935c3abf86450a1b1))
+
+
+
 ## [1.5.9](https://github.com/kdcloudone/kdesign/compare/v1.5.8...v1.5.9) (2022-08-18)
 
 

package/dist/kdesign-complete.less

@@ -500,7 +500,7 @@
     font-size: @font-size;
 
     & > .@{icon-prefix-cls} {
-      vertical-align: unset !important;
+      vertical-align: top;
     }
   }
 }
@@ -2717,6 +2717,9 @@
 // @datePicker-prefix-cls-input: ~'@{datePicker-prefix-cls}-input';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
 
+@datePicker-calendar-text: 24px;
+@datePicker-calendar-height: 242px;
+
 .@{datePicker-prefix-cls} {
   // &-small {
   //   height: @date-small-height;
@@ -2798,6 +2801,10 @@
       &[disabled] {
         background: transparent;
       }
+
+      &::placeholder {
+        color: @date-input-color-disabled;
+      }
     }
 
     &-placeholder {
@@ -3145,7 +3152,7 @@
 
         .@{datePicker-prefix-cls}-calendar-item-disabled {
           position: relative;
-          pointer-events: none;
+          cursor: not-allowed;
 
           .@{datePicker-prefix-cls}-calendar-text {
             color: #b2b2b2;
@@ -3247,10 +3254,10 @@
       .@{datePicker-prefix-cls}-calendar-week-text {
         position: relative;
         z-index: 2;
-        width: 32px;
-        height: 32px;
+        width: @datePicker-calendar-text;
+        height: @datePicker-calendar-text;
         text-align: center;
-        line-height: 32px;
+        line-height: @datePicker-calendar-text;
         display: inline-block;
         border-radius: @date-panel-border-radius;
         color: #b2b2b2;
@@ -3262,7 +3269,7 @@
 
       .@{datePicker-prefix-cls}-calendar-week-text {
         width: 100%;
-        height: 32px;
+        height: @datePicker-calendar-text;
         margin: 3px 0;
       }
 
@@ -3298,12 +3305,22 @@
     &::before {
       left: 50%;
     }
+
+    .@{datePicker-prefix-cls}-calendar-text-selected {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
   }
 
   .@{datePicker-prefix-cls}-range-end {
     &::before {
       right: 50%;
     }
+
+    .@{datePicker-prefix-cls}-calendar-text-selected {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
   }
 
   .@{datePicker-prefix-cls}-range-view,
@@ -3328,14 +3345,13 @@
       font-size: 14px;
       padding: 0;
       color: rgba(0, 0, 0, 0.25);
-      // line-height: 40px;
       background: 0 0;
       border: 0;
       cursor: pointer;
       transition: color 0.3s;
 
       &:hover {
-        color: rgba(0, 0, 0, 0.85);
+        color: @date-color-background-checked;
       }
     }
 
@@ -3350,7 +3366,7 @@
     line-height: @date-panel-header-height;
     background: #fafafa;
     color: #212121;
-    // line-height: 36px;
+    font-size: 14px;
     padding: 7px;
     border-bottom: 1px solid #d9d9d9;
     font-weight: bold;
@@ -3365,7 +3381,8 @@
 
     .@{datePicker-prefix-cls}-content {
       display: flex;
-      height: 224px;
+      height: @datePicker-calendar-height;
+      border-left: 1px solid #d9d9d9;
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
@@ -3374,13 +3391,14 @@
         flex: 1 0 auto;
         width: 56px;
         margin: 0;
-        padding: 0 0 196px 0;
-        overflow-y: hidden;
+        padding: 0 0 206px 0;
+        padding-top: 10px;
         text-align: left;
         transition: background 0.3s;
+        overflow: hidden;
 
         &:not(:first-child) {
-          border-left: 1px solid #f0f0f0;
+          border-left: 1px solid #d9d9d9;
         }
 
         &:hover {
@@ -3396,7 +3414,7 @@
             width: 100%;
             height: 28px;
             margin: 0;
-            padding: 0 0 0 14px;
+            text-align: center;
             color: rgba(0, 0, 0, 0.85);
             line-height: 28px;
             border-radius: 0;
@@ -3438,10 +3456,12 @@
   .@{datePicker-prefix-cls}-footer {
     width: min-content;
     min-width: 100%;
-    line-height: 34px;
-    border-top: 1px solid #f0f0f0;
+    line-height: 36px;
+    height: 40px;
+    border-top: 1px solid #d9d9d9;
     border-bottom: 1px solid transparent;
-    padding: 0 16px;
+    padding: 0 12px;
+    color: @date-color-background-checked;
     font-size: 12px;
     box-sizing: border-box;
     text-align: right;
@@ -3548,6 +3568,7 @@
     border-bottom: 1px solid @date-input-underline-color;
     border-radius: 0;
     padding-left: 0;
+    padding-right: 0;
   }
   &-disabled {
     background-color: @date-input-color-background-disabled !important;
@@ -3627,7 +3648,7 @@
 // color
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
-@date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-secondary);
+@date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-primary);
 @date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', @color-text-secondary);
 @date-input-underline-color: var(~'@{date-picker-custom-prefix}-input-underline-color', #999);
 @date-input-color-border: var(~'@{date-picker-custom-prefix}-input-color-border', @color-border-strong);
@@ -13567,6 +13588,7 @@ template {
   font-size: @tree-font-size;
   color: @tree-color-text;
   margin-left: @tree-margin-left;
+  padding: @tree-padding-vertical 0;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -13691,26 +13713,35 @@ template {
 
   &-drag-over {
     background-color: @tree-node-drag-over-color-background;
-    border: 2px solid @tree-node-drag-over-border-color;
+    box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
   }
 
   &-drag-line {
-    position: absolute;
-    left: 0;
-    top: 100%;
-    width: 100%;
-    border-top: 2px solid @tree-node-drag-line-border-color;
-
-    &::before {
-      content: '';
-      width: 4px;
-      height: 4px;
-      background-color: #fff;
-      border-radius: 50%;
-      border: 2px solid @tree-node-drag-line-border-color;
+    &-top, &-bottom {
       position: absolute;
-      top: -1px;
-      transform: translateY(-50%);
+      left: 0;
+      top: 0;
+      width: 100%;
+      border-top: 2px solid @tree-node-drag-line-border-color;
+      
+      &::before {
+        content: '';
+        width: 4px;
+        height: 4px;
+        background-color: #fff;
+        border-radius: 50%;
+        border: 2px solid @tree-node-drag-line-border-color;
+        position: absolute;
+        top: -1px;
+        transform: translateY(-50%);
+      }
+    }
+    &-top {
+      top: 0;
+    }
+
+    &-bottom {
+      top: 100%;
     }
   }
   &-leaf-icon {
@@ -13772,7 +13803,10 @@ template {
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
-@tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 16px);
+
+// spacing
+@tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);
+@tree-padding-vertical: var(~'@{tree-prefix}-spacing-padding-vertical', 3px);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.5.10
+ *   @kdcloudjs/kdesign v1.6.1
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -2727,7 +2727,7 @@ template {
   font-size: var(--kd-c-avatar-font-size-base, 22px);
 }
 .kd-avatar.kd-avatar-icon > .kdicon {
-  vertical-align: unset !important;
+  vertical-align: top;
 }
 .kd-avatar-lg {
   width: var(--kd-c-avatar-size-large, 60px);
@@ -2745,7 +2745,7 @@ template {
   font-size: var(--kd-c-avatar-font-size-large, 36px);
 }
 .kd-avatar-lg.kd-avatar-icon > .kdicon {
-  vertical-align: unset !important;
+  vertical-align: top;
 }
 .kd-avatar-sm {
   width: var(--kd-c-avatar-size-small, 32px);
@@ -2763,7 +2763,7 @@ template {
   font-size: var(--kd-c-avatar-font-size-small, 18px);
 }
 .kd-avatar-sm.kd-avatar-icon > .kdicon {
-  vertical-align: unset !important;
+  vertical-align: top;
 }
 .kd-avatar-xs {
   width: var(--kd-c-avatar-size-x-small, 24px);
@@ -2781,7 +2781,7 @@ template {
   font-size: var(--kd-c-avatar-font-size-x-small, 14px);
 }
 .kd-avatar-xs.kd-avatar-icon > .kdicon {
-  vertical-align: unset !important;
+  vertical-align: top;
 }
 .kd-avatar-square {
   border-radius: var(--kd-c-avatar-border-radius, 2px);
@@ -5820,6 +5820,7 @@ template {
   border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
   border-radius: 0;
   padding-left: 0;
+  padding-right: 0;
 }
 .kd-date-picker-disabled {
   background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
@@ -5863,7 +5864,7 @@ template {
 .kd-date-picker-input input {
   width: 100%;
   min-width: 0;
-  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-primary, #212121));
   line-height: inherit;
   -webkit-box-flex: 1;
       -ms-flex: auto;
@@ -5895,6 +5896,21 @@ template {
 .kd-date-picker-input input[disabled] {
   background: transparent;
 }
+.kd-date-picker-input input::-webkit-input-placeholder {
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-date-picker-input input::-moz-placeholder {
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-date-picker-input input:-ms-input-placeholder {
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-date-picker-input input::-ms-input-placeholder {
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-date-picker-input input::placeholder {
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
 .kd-date-picker-input-placeholder > input {
   color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
 }
@@ -5928,7 +5944,7 @@ template {
   -ms-flex-item-align: center;
       align-self: center;
   margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
-  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-primary, #212121));
   line-height: 1;
   pointer-events: none;
 }
@@ -6199,7 +6215,7 @@ template {
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled {
   position: relative;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled .kd-date-picker-calendar-text {
   color: #b2b2b2;
@@ -6281,10 +6297,10 @@ template {
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text {
   position: relative;
   z-index: 2;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   text-align: center;
-  line-height: 32px;
+  line-height: 24px;
   display: inline-block;
   border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   color: #b2b2b2;
@@ -6306,7 +6322,7 @@ template {
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text {
   width: 100%;
-  height: 32px;
+  height: 24px;
   margin: 3px 0;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-current .kd-date-picker-calendar-text {
@@ -6332,9 +6348,17 @@ template {
 .kd-date-picker-panel .kd-date-picker-range-start::before {
   left: 50%;
 }
+.kd-date-picker-panel .kd-date-picker-range-start .kd-date-picker-calendar-text-selected {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
 .kd-date-picker-panel .kd-date-picker-range-end::before {
   right: 50%;
 }
+.kd-date-picker-panel .kd-date-picker-range-end .kd-date-picker-calendar-text-selected {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
 .kd-date-picker-panel .kd-date-picker-range-view,
 .kd-date-picker-panel .kd-date-picker-range-start,
 .kd-date-picker-panel .kd-date-picker-range-end {
@@ -6363,7 +6387,7 @@ template {
   transition: color 0.3s;
 }
 .kd-date-picker-panel .kd-date-picker-header-icon:hover {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker-panel .kd-date-picker-header-text {
   -webkit-box-flex: 1;
@@ -6376,6 +6400,7 @@ template {
   line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
   background: #fafafa;
   color: #212121;
+  font-size: 14px;
   padding: 7px;
   border-bottom: 1px solid #d9d9d9;
   font-weight: bold;
@@ -6396,7 +6421,8 @@ template {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 224px;
+  height: 242px;
+  border-left: 1px solid #d9d9d9;
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
@@ -6407,14 +6433,15 @@ template {
           flex: 1 0 auto;
   width: 56px;
   margin: 0;
-  padding: 0 0 196px 0;
-  overflow-y: hidden;
+  padding: 0 0 206px 0;
+  padding-top: 10px;
   text-align: left;
   -webkit-transition: background 0.3s;
   transition: background 0.3s;
+  overflow: hidden;
 }
 .kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column:not(:first-child) {
-  border-left: 1px solid #f0f0f0;
+  border-left: 1px solid #d9d9d9;
 }
 .kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column:hover {
   overflow-y: overlay;
@@ -6428,7 +6455,7 @@ template {
   width: 100%;
   height: 28px;
   margin: 0;
-  padding: 0 0 0 14px;
+  text-align: center;
   color: rgba(0, 0, 0, 0.85);
   line-height: 28px;
   border-radius: 0;
@@ -6462,10 +6489,12 @@ template {
   width: -moz-min-content;
   width: min-content;
   min-width: 100%;
-  line-height: 34px;
-  border-top: 1px solid #f0f0f0;
+  line-height: 36px;
+  height: 40px;
+  border-top: 1px solid #d9d9d9;
   border-bottom: 1px solid transparent;
-  padding: 0 16px;
+  padding: 0 12px;
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   font-size: 12px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -18399,7 +18428,8 @@ textarea {
           flex-grow: 1;
   font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
-  margin-left: var(--kd-c-tree-spacing-margin-left, 16px);
+  margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
+  padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
 }
 .kd-tree-root {
   min-width: 100%;
@@ -18581,16 +18611,19 @@ textarea {
 }
 .kd-tree-node-drag-over {
   background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
-  border: 2px solid var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+  -webkit-box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+          box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
 }
-.kd-tree-node-drag-line {
+.kd-tree-node-drag-line-top,
+.kd-tree-node-drag-line-bottom {
   position: absolute;
   left: 0;
-  top: 100%;
+  top: 0;
   width: 100%;
   border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
 }
-.kd-tree-node-drag-line::before {
+.kd-tree-node-drag-line-top::before,
+.kd-tree-node-drag-line-bottom::before {
   content: '';
   width: 4px;
   height: 4px;
@@ -18602,6 +18635,12 @@ textarea {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+.kd-tree-node-drag-line-top {
+  top: 0;
+}
+.kd-tree-node-drag-line-bottom {
+  top: 100%;
+}
 .kd-tree-node-leaf-icon {
   height: var(--kd-c-tree-node-icon-sizing-height, 16px);
   width: var(--kd-c-tree-node-icon-sizing-width, 16px);