@kdcloudjs/kdesign 1.3.6 → 1.3.9

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [1.3.8](https://github.com/kdcloudone/kdesign/compare/v1.3.7...v1.3.8) (2022-07-08)
+
+
+### Bug Fixes
+
+* [anchor] 锚点组件类名调整 ([af0619e](https://github.com/kdcloudone/kdesign/commit/af0619e8b7fb7565ea4f96774433d63684ff331d))
+* [anchor] 锚点组件取消监听事件调整 ([07740e1](https://github.com/kdcloudone/kdesign/commit/07740e1ca7d2d7198392300d641799109e9fcb8a))
+* [switch] 解决开关文字垂直没对齐问题 ([df90939](https://github.com/kdcloudone/kdesign/commit/df90939f3d158cd8a1b9524e69741b10939b63df))
+
+
+
+## [1.3.7](https://github.com/kdcloudone/kdesign/compare/v1.3.6...v1.3.7) (2022-06-30)
+
+
+### Bug Fixes
+
+* [button] 修复loading按钮以及单个图标按钮默认居中的视觉问题 ([efc3eb8](https://github.com/kdcloudone/kdesign/commit/efc3eb853685cdd9f6eeeca662e07ea600099f10))
+* [checkbox] 修复ref取值为null的bug ([19da577](https://github.com/kdcloudone/kdesign/commit/19da577d3466c15d2446f741482edde7d10a8d25))
+
+
+
+## [1.3.6](https://github.com/kdcloudone/kdesign/compare/v1.3.5...v1.3.6) (2022-06-27)
+
+
+### Bug Fixes
+
+* [table] 更新table版本 ([860ac40](https://github.com/kdcloudone/kdesign/commit/860ac408ffb9bf6486477f8160decb1fdd4b1c2d))
+
+
+
 ## [1.3.5](https://github.com/kdcloudone/kdesign/compare/v1.3.4...v1.3.5) (2022-06-23)
 
 

package/dist/kdesign-complete.less

@@ -246,7 +246,7 @@
       content: '';
       height: 0;
       width: 40px;
-      border-bottom: @anchor-ink-line-width dashed @anchor-disabled-border-color;
+      border-bottom: @anchor-line-slider-width dashed @anchor-disabled-border-color;
       margin: 4px;
     }
   }
@@ -286,7 +286,7 @@
     }
   }
 
-  &-ink {
+  &-line {
     position: absolute;
     left: @anchor-link-left;
     top: 0;
@@ -294,19 +294,19 @@
     &::before {
       position: relative;
       display: block;
-      width: @anchor-ink-line-width;
+      width: @anchor-line-slider-width;
       height: 100%;
       margin: 0 auto;
       background-color: @anchor-border-color;
       content: '';
     }
 
-    &-line {
+    &-slider {
       position: absolute;
       display: none;
       width: 0;
       height: 16px;
-      border-right: @anchor-ink-line-width solid @anchor-color-theme;
+      border-right: @anchor-line-slider-width solid @anchor-color-theme;
       transition: top 0.3s ease-in-out;
       &.visible {
         display: inline-block;
@@ -392,7 +392,7 @@
 @anchor-link-secondary-padding: var(~'@{anchor-prefix}-secondary-spacing-padding', 12px 8px);
 @anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
 @anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
-@anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
+@anchor-line-slider-width: var(~'@{anchor-prefix}-line-slider-spacing-width', 1px);
 
 
 // font
@@ -1001,6 +1001,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-small-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -1014,6 +1017,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-middle-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -1027,6 +1033,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-large-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -1121,6 +1130,9 @@
   // 加载中按钮
   &-loading {
     cursor: default;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
   // 按钮开启块化撑满父元素
   &-block {
@@ -1158,11 +1170,11 @@
             background: @btn-group-trigger-color-background-hover;
             border-color: @btn-group-trigger-color-background-hover;
           }
-  
+
           &:active {
             background: @btn-group-trigger-color-background-active;
           }
-  
+
           &:disabled {
             background: @btn-group-trigger-color-background-disabled !important;
           }
@@ -5701,6 +5713,8 @@ textarea {
 @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
 @menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
 @menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
+@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
+@menu-inline-prefix-cls: ~'@{menu-prefix-cls}-inline';
 @menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
 @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
 
@@ -5710,56 +5724,17 @@ textarea {
   &-inline {
     .@{menuitem-prefix-cls} {
       .ellipsis();
-
-      &-active {
-        color: @menu-inline-color-active;
-      }
     }
 
     .@{submenu-prefix-cls} {
       padding-right: 0;
     }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      color: @menu-inline-color-active;
-    }
   }
 
   &-collapsed {
     width: 50px;
     min-width: auto;
   }
-
-  &-vertical {
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
-    .@{submenu-prefix-cls}-hover {
-      .hover();
-    }
-  }
-
-  &-light {
-    .light()
-  }
-
-  &-light&-vertical {
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls} {
-      &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
-        .light-hover();
-        border: none;
-      }
-
-      &-active {
-        color: @menu-light-color-active;
-        background-color: @menu-light-color-background-active;
-        border: none !important;
-      }
-    }
-  }
 }
 
 .@{menuitem-prefix-cls} {
@@ -5768,10 +5743,6 @@ textarea {
   transition: color, background-color;
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-
-  &:not(&-disabled):hover {
-    .hover();
-  }
 }
 
 .@{submenu-prefix-cls} {
@@ -5781,13 +5752,8 @@ textarea {
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
-  &-hover {
-    .hover();
-  }
-
   &-sub {
     line-height: @menu-item-height;
-    color: @menu-sub-color;
   }
 
   &-thrid {
@@ -5863,24 +5829,66 @@ textarea {
   }
 }
 
+// dark
 .@{menu-dark-prefix-cls} {
+
   .@{submenu-prefix-cls}-sub {
+    color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
   .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
+
+  .@{menuitem-prefix-cls} {
+    &:hover {
+      .hover();
+    }
+
+    &-active {
+      .active()
+    }
+  }
+
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .active()
+  }
+
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
+    .hover()
+  }
 }
 
+.@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .active-inline-title()
+    }
+  }
+
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled) {
+    > .@{submenu-prefix-cls}-title:hover {
+      .active-inline-title()
+    }
+  }
+}
+
+// light
 .@{menu-light-prefix-cls} {
-  .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
-    .light-active()
+  .light();
+}
+
+.@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .light-active-inline-title()
+    }
   }
 }
 
 .@{menu-popper-prefix-cls} {
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+  .@{submenu-prefix-cls}:hover,
   .@{submenu-prefix-cls}-hover {
     .hover();
   }
@@ -5899,12 +5907,15 @@ textarea {
     padding-right: 0;
 
     &-sub {
+      color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
         &:hover,
         &-active {
-          color: @menu-sub-color-active;
+          .hover()
         }
       }
 
@@ -5931,27 +5942,6 @@ textarea {
 
   &.light {
     .light();
-
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
-      .light-active();
-      border: none;
-    }
   }
 }
 
@@ -5985,12 +5975,15 @@ textarea {
   cursor: pointer;
 
   &-title {
-    .menuItemTitle();
-  }
-
-  &-title > span {
-    opacity: 1;
-    transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    display: flex;
+    align-items: center;
+    height: 50px;
+    .ellipsis();
+    & > span {
+      .ellipsis();
+      opacity: 1;
+      transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
+    }
   }
 
   &-collapsed {
@@ -6007,7 +6000,7 @@ textarea {
 
       & > span {
         opacity: 0;
-        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
       }
     }
   }
@@ -6019,80 +6012,94 @@ textarea {
 
   &-disabled {
     cursor: not-allowed;
-    color: @menu-color-disabled;
-  }
-
-  &-active {
-    .hover();
+    color: @menu-color-disabled !important;
+    background-color: @menu-color-background !important;
   }
 
   &-arrow {
     margin-left: auto;
     font-size: 16px;
+
     &-up {
       transform: rotate(180deg);
-      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
     }
 
     &-down {
       transform: rotate(0deg);
-      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
+      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
   }
 }
 
+
 .hover {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.light-hover {
-  background-color: @menu-light-color-background-hover;
-  color: @menu-light-color-hover;
-}
-
-.light-active {
-  background-color: @menu-light-color-background-active;
-  color: @menu-light-color-active;
-}
-
-.light-default {
-  color: @menu-light-color;
-  background: #ffffff;
+.active {
+  background-color: @menu-sub-color-background;
+  color: @menu-sub-color-hover;
 }
 
-.menuItemTitle() {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  .ellipsis();
-  & > span {
-    .ellipsis();
-  }
+.active-inline-title {
+  color: @menu-sub-color-hover !important;
+  background: @menu-color-background !important;
+  border: none;
 }
 
 
 .light {
   .light-default();
 
-  .@{submenu-prefix-cls}-hover,
-  .@{submenu-prefix-cls}-sub {
-    .light-default();
+  .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
+    background-color: #fff !important;
   }
 
-  .@{submenu-prefix-cls}-title:hover {
-    color: @menu-light-color-hover;
+  .@{submenu-prefix-cls}-sub {
+    color: @menu-light-color;
+    background: #FAFAFA;
   }
 
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+  .@{menuitem-prefix-cls}:hover {
     .light-hover();
   }
 
-  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
     .light-hover();
   }
+
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .light-active();
+  }
+}
+
+.light-default {
+  color: @menu-light-color;
+  background: #ffffff;
 }
 
+.light-hover {
+  background-color: @menu-light-color-background-hover;
+  color: @menu-light-color-hover;
+  border: none;
+}
+
+.light-active {
+  background-color: @menu-light-color-background-active !important;
+  color: @menu-light-color-active !important;
+  border: none;
+}
+
+.light-active-inline-title {
+  color: @menu-light-color-active !important;
+  background: #ffffff !important;
+  border: none;
+}
+
+
+
 
 
 @menu-prefix: '--@{kd-prefix}-c-menu';
@@ -12193,7 +12200,7 @@ template {
 
 // line-height
 @switch-large-line-height: var(~'@{switch-prefix}-large-line-height', 20px);
-@switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 14px);
+@switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 16px);
 
 //radius
 @switch-small-border-radius: var(~'@{switch-prefix}-small-radius-border', 8px);
@@ -13495,7 +13502,6 @@ template {
     pointer-events: none;
   }
   &-item {
-    height: @tree-node-height;
     display: flex;
     align-items: center;
   }
@@ -13516,7 +13522,7 @@ template {
     border-right: 10px;
     border-color: white;
     border-style: solid;
-    height: @tree-node-height;
+    height: 100%;
     cursor: default;
     opacity: 0;
   }
@@ -13613,7 +13619,6 @@ template {
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
 
 // sizing
-@tree-node-height: var(~'@{tree-prefix}-node-sizing-height', 32px);
 @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);