@kdcloudjs/kdesign 1.5.2 → 1.5.5

package/lib/style/icon/kdicon.css

@@ -99,6 +99,7 @@
 .kdicon-fixed-solid:before { content: "\e65f"; }
 .kdicon-fixed-window:before { content: "\e6d1"; }
 .kdicon-fixed:before { content: "\e6e3"; }
+.kdicon-fold:before { content: "\e71d"; }
 .kdicon-foldmenu:before { content: "\e70e"; }
 .kdicon-font-background-solid:before { content: "\e673"; }
 .kdicon-font-color-solid:before { content: "\e674"; }
@@ -209,7 +210,7 @@
 .kdicon-two-window:before { content: "\e6f6"; }
 .kdicon-underline-solid:before { content: "\e671"; }
 .kdicon-unfold-all:before { content: "\e6ad"; }
-.kdicon-unfold:before { content: "\e6bb"; }
+.kdicon-unfold:before { content: "\e71e"; }
 .kdicon-unfoldmenu:before { content: "\e70d"; }
 .kdicon-unlock-solid:before { content: "\e666"; }
 .kdicon-unlock:before { content: "\e69e"; }

package/lib/style/themes/default.less

@@ -54,15 +54,14 @@
 @bg2: #f2f2f2; // 底色灰背景
 @bg3: rgba(255, 255, 255, 0.65); // 次级底色背景
 @contain-bg: #fafafa; // 容器内的灰背景
-@radius-size: 2px; // 圆角值
 @input-color: #999; // 线型录入的默认态
 @strong-border-color: #d9d9d9; // 强线条 --带操作
 @strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
 @strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
 @weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时
-@logo-color-1: #2386ee;
-@logo-color-2: #00ccfe;
-@logo-color-3: #05c8c8;
+@logo-color-1: #2486ee;
+@logo-color-2: #02ccfe;
+@logo-color-3: #05c8c7;
 @logo-color-4: #a06eff;
 // @shadow-on-hover: ; // 悬停时阴影
 @white: #fff;

package/lib/tabs/style/index.css

@@ -294,6 +294,7 @@
   min-width: 120px;
   height: 100%;
   font-size: 0;
+  border-top: 1px solid transparent;
 }
 .kd-tabs-navs-card.kd-tabs-navs-left::before,
 .kd-tabs-navs-card.kd-tabs-navs-right::before,

package/lib/tabs/style/index.less

@@ -156,6 +156,7 @@
       min-width: 120px;
       height: 100%;
       font-size: 0;
+      border-top: 1px solid transparent;
       &::before, &::after {
         position: absolute;
         content: '';

package/lib/timeline/style/index.css

@@ -107,11 +107,12 @@
 .kd-timeline {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 0;
   font-variant: tabular-nums;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 }
@@ -125,13 +126,13 @@
           font-feature-settings: 'tnum';
   position: relative;
   margin: 0;
-  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 26px);
+  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 24px);
   font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-timeline .kd-timeline-item-tail {
   position: absolute;
-  left: calc((9px - 1px) / 2);
-  height: calc(100% - 9px * 2 + 4px);
+  left: calc((var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
+  height: calc(100% - var(--kd-c-timeline-dot-sizing, 9px) * 2 + 4px);
   border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline .kd-timeline-item.pending .kd-timeline-item-dot {
@@ -144,8 +145,8 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: absolute;
-  width: 9px;
-  height: 9px;
+  width: var(--kd-c-timeline-dot-sizing, 9px);
+  height: var(--kd-c-timeline-dot-sizing, 9px);
   border-radius: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -168,7 +169,7 @@
 }
 .kd-timeline .kd-timeline-item-dot.custom {
   position: absolute;
-  left: calc(9px / 2);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) / 2);
   width: auto;
   height: auto;
   margin-top: 0;
@@ -183,7 +184,7 @@
 }
 .kd-timeline .kd-timeline-item-content {
   position: relative;
-  margin: 0 0 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
+  margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
   color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
 }
@@ -203,7 +204,7 @@
   left: 50%;
 }
 .kd-timeline.alternate .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.alternate .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -225,24 +226,24 @@
   right: 4.5px;
 }
 .kd-timeline.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.right .kd-timeline-item-dot.custom {
-  margin-right: 1px;
+  margin-right: -18px;
 }
 .kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
   left: 0;
   text-align: right;
-  margin: 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
+  margin: 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
   width: auto;
 }
 .kd-timeline.label.left .kd-timeline-item-tail,
 .kd-timeline.label.left .kd-timeline-item-dot,
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
-  left: calc((2 * 8px) + (9px / 2));
+  left: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.left .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -253,7 +254,7 @@
   color: var(--kd-c-timeline-label-color-text, #666666);
 }
 .kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
-  left: calc(9px + 7.5px);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: left;
   margin-right: 16px;
 }
@@ -261,13 +262,13 @@
 .kd-timeline.label.right .kd-timeline-item-dot,
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
   left: auto;
-  right: calc((2 * 8px) + (9px / 2));
+  right: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
-  right: calc(-1 * (9px - 1px) / 2);
+  right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
   position: absolute;
@@ -276,7 +277,7 @@
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
   left: auto;
-  right: calc(9px + 7.5px);
+  right: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: right;
   margin-left: 17px;
 }
@@ -287,8 +288,8 @@
 }
 .kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
   position: absolute;
-  left: calc(50% + (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - 9px / 2);
-  width: calc(50% - (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + 9px / 2);
+  left: calc(50% + (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - var(--kd-c-timeline-dot-sizing, 9px) / 2);
+  width: calc(50% - (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + var(--kd-c-timeline-dot-sizing, 9px) / 2);
   text-align: left;
 }
 .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {

package/lib/timeline/style/index.less

@@ -9,7 +9,7 @@
 .@{timeline-prefix-cls} {
   .reset-component;
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 
@@ -148,7 +148,7 @@
         margin-right:calc(-1 * (@timeline-dot-size - 1px) / 2) ;
 
         &.custom {
-          margin-right: 1px;
+          margin-right: -18px;
         }
       }
       .@{timeline-item-prefix-cls}-content {

package/lib/timeline/style/token.less

@@ -1,12 +1,10 @@
 @import '../../style/themes/token.less';
 
 @timeline-prefix: '--@{kd-prefix}-c-timeline';
-@timeline-gap:  8px;
-
-// @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
-@timeline-dot-size: 9px;
-
+@timeline-gap: 8px;
 
+@timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
+// @timeline-dot-size: 9px;
 
 // color
 @timeline-finished-color:  var(~'@{timeline-prefix}-finished-color',@color-theme);
@@ -17,7 +15,6 @@
 @timeline-label-color-text: var(~'@{timeline-prefix}-label-color-text',#666666);
 @timeline-content-color-text: var(~'@{timeline-prefix}-content-color-text',@color-text-primary);
 
-
 // font
 @timeline-content-font-size-small: var(~'@{timeline-prefix}-content-font-size',@font-size-small);
 
@@ -26,7 +23,7 @@
 @timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
 
 // spacing
-@timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',26px);
+@timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',24px);
 
 
 

package/lib/tooltip/tooltip.js

@@ -41,7 +41,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
   var tiplocator = /*#__PURE__*/React.cloneElement(React.Children.count(children) === 1 && children.type ? children : /*#__PURE__*/React.createElement("span", null, children), {
-    ref: ref
+    ref: children.ref || ref
   });
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
     prefixCls: prefixCls,

package/lib/tree/style/index.css

@@ -101,6 +101,24 @@
     普通组件内部自身层级应设置在0-100间
 */
 /* -----------  zIndex  ——————---- end */
+.node-hover-hover {
+  -webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.node-hover-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
+.node-selected {
+  background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.node-selected .kd-tree-node-title {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.node-selected .kd-tree-node-icon {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
 .kd-tree {
   position: relative;
   overflow: auto;
@@ -136,6 +154,15 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.kd-tree-node-root .kd-spin-dot-spin {
+  border: none;
+  width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
+  height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
+}
+.kd-tree-node-root .kd-spin-dot-spin .kd-spin-dot-item {
+  width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
+  height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
+}
 .kd-tree-node-fb-children-pointerEvents * {
   pointer-events: none;
 }
@@ -176,8 +203,8 @@
 }
 .kd-tree-node-icon {
   cursor: pointer;
-  height: var(--kd-c-tree-expand-icon-sizing-height, 22px);
-  width: var(--kd-c-tree-expand-icon-sizing-width, 22px);
+  height: var(--kd-c-tree-expand-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-expand-icon-sizing-width, 16px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -190,9 +217,13 @@
   font-size: var(--kd-c-tree-node-icon-font-size, 16px);
   color: var(--kd-c-tree-node-icon-color-text, #666666);
 }
+.kd-tree-node-icon-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
 .kd-tree-node-icon-hidden {
-  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
-  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
+  height: var(--kd-c-tree-node-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 16px);
   -ms-flex-negative: 0;
       flex-shrink: 0;
   opacity: 0;
@@ -233,10 +264,28 @@
       -ms-flex-align: center;
           align-items: center;
   height: 100%;
+  padding-left: 4px;
+}
+.kd-tree-node-title-wrap-hover {
+  -webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.kd-tree-node-title-wrap-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
+.kd-tree-node-title-wrap-selected {
+  background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-node-title-wrap-selected .kd-tree-node-title {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-node-title-wrap-selected .kd-tree-node-icon {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-node-title {
   white-space: nowrap;
-  margin-left: 6px;
 }
 .kd-tree-node-selected {
   background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
@@ -285,8 +334,8 @@
           transform: translateY(-50%);
 }
 .kd-tree-node-leaf-icon {
-  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
-  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
+  height: var(--kd-c-tree-node-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 16px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

package/lib/tree/style/index.less

@@ -28,6 +28,17 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
+    .@{kd-prefix}-spin-dot-spin {
+      border: none;
+      width: @tree-expand-icon-loading-width;
+      height: @tree-expand-icon-loading-height;
+
+      .@{kd-prefix}-spin-dot-item {
+        width: @tree-expand-icon-loading-width;
+        height: @tree-expand-icon-loading-height;
+      }
+    }
   }
   &-fb-children-pointerEvents * {
     pointer-events: none;
@@ -35,13 +46,8 @@
   &-item {
     display: flex;
     align-items: center;
-  }
-  &-item-hover {
-    transition: background-color @tree-transition-duration, color @tree-transition-duration;
-  }
-  &-item-hover:hover {
-    background-color: @tree-node-hover-bg-color;
-    cursor: pointer;
+
+    .node-hover()
   }
 
   &-indent {
@@ -70,6 +76,11 @@
     align-items: center;
     font-size: @tree-node-icon-size;
     color: @tree-node-icon-color-text;
+
+    &-hover:hover {
+      background-color: @tree-node-hover-bg-color;
+      cursor: pointer;
+    }
   }
   &-icon-hidden {
     height: @tree-node-icon-height;
@@ -99,22 +110,19 @@
     display: flex;
     align-items: center;
     height: 100%;
+    padding-left: 4px;
+
+    .node-hover();
+
+    &-selected {
+      .node-selected()
+    }
   }
   &-title {
     white-space: nowrap;
-    margin-left: 6px;
   }
   &-selected {
-    background-color: @tree-node-checked-bg-color !important;
-    color: @tree-node-checked-text-color;
-
-    .@{tree-node-prefix-cls}-title {
-      color: @tree-node-checked-text-color;
-    }
-
-    .@{tree-node-prefix-cls}-icon {
-      color: @tree-node-checked-text-color;
-    }
+    .node-selected()
   }
 
   &-draggabled {

package/lib/tree/style/mixin.less

@@ -1 +1,25 @@
-@import './token.less';
+@import './token.less';
+
+.node-hover {
+  &-hover {
+    transition: background-color @tree-transition-duration, color @tree-transition-duration;
+
+    &:hover {
+      background-color: @tree-node-hover-bg-color;
+      cursor: pointer;
+    }
+  }
+}
+
+.node-selected {
+  background-color: @tree-node-checked-bg-color !important;
+  color: @tree-node-checked-text-color;
+
+  .@{tree-node-prefix-cls}-title {
+    color: @tree-node-checked-text-color;
+  }
+
+  .@{tree-node-prefix-cls}-icon {
+    color: @tree-node-checked-text-color;
+  }
+}

package/lib/tree/style/token.less

@@ -16,10 +16,12 @@
 @tree-node-drag-line-border-color: var(~'@{tree-prefix}-node-drag-line-color-background', #276FF5);
 
 // sizing
-@tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);
-@tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 22px);
-@tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 20px);
-@tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 20px);
+@tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 16px);
+@tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 16px);
+@tree-expand-icon-loading-height: var(~'@{tree-prefix}-expand-icon-loading-sizing-height', 16px);
+@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);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);

package/lib/tree/tree.d.ts

@@ -24,6 +24,7 @@ export interface TreeProps {
     virtual?: boolean;
     scrollToKey?: string;
     selectedKeys?: string[];
+    loadData?: () => void;
     onCheck?: (checkedKeys: string[], { checked, node, event, halfCheckedKeys }: any) => void;
     onExpand?: (expandedKeys: string[], { expanded, node }: any) => void;
     onSelect?: ({ checked, node, event }: any) => void;
@@ -36,6 +37,7 @@ export interface TreeProps {
     setTreeNodeClassName?: (node: any) => string;
     setTreeNodeStyle?: (node: any) => Map<string, string>;
     estimatedItemSize?: number;
+    expandOnClickNode?: boolean;
 }
 export declare type TreeNodeData = {
     checkable?: boolean;