@kdcloudjs/kdesign 1.6.39 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [1.6.40](https://github.com/kdcloudone/kdesign/compare/v1.6.39...v1.6.40) (2023-03-16)
+
+
+### Bug Fixes
+
+* [button] 修复文字按钮禁用状态下触发click事件 fix [#281](https://github.com/kdcloudone/kdesign/issues/281) ([5a9e5f1](https://github.com/kdcloudone/kdesign/commit/5a9e5f1fd6dd60b1e58fe19b6839b98df74ccd04))
+* [input]修复suffix问题 ([7ccb629](https://github.com/kdcloudone/kdesign/commit/7ccb6296b385045ad864b079f7ca8a8177987c73))
+* [select] 修复传入options时optionLabelProp无效问题 ([51d0973](https://github.com/kdcloudone/kdesign/commit/51d09730089f8f977284c0978727f9d984a6175f))
+* [select] 修复autoFocus不生效问题 ([c0909da](https://github.com/kdcloudone/kdesign/commit/c0909dac9effa3b18533fdbb5d8b676ede47c555))
+* [select] 修复clearIcon不生效问题 ([ea2837f](https://github.com/kdcloudone/kdesign/commit/ea2837f13ded0359b11ef0bbd30e42b07b889a17))
+* [tree] 修复当父节点key值为0时filterTreeNode失效 fix [#280](https://github.com/kdcloudone/kdesign/issues/280) ([6090a50](https://github.com/kdcloudone/kdesign/commit/6090a50939372e0279e9706843779285cddd7c57))
+* [tree] 修复节点过滤时部分节点不展开问题 fix [#278](https://github.com/kdcloudone/kdesign/issues/278) ([6622ea5](https://github.com/kdcloudone/kdesign/commit/6622ea560a14059ffb7c22ac2e627fbe2ae29bd1))
+* [upload]修复children渲染问题 ([2d0af4c](https://github.com/kdcloudone/kdesign/commit/2d0af4cee0e6fecd792f92c5727d16f1950edc25))
+
+
+
+## [1.6.39](https://github.com/kdcloudone/kdesign/compare/v1.6.38...v1.6.39) (2023-03-09)
+
+
+### Bug Fixes
+
+* [date-picker]修复面板箭头问题 ([fd693bd](https://github.com/kdcloudone/kdesign/commit/fd693bdde37606d8a0d44ae597a5c2882e9ff937))
+* [date-picker]修复内存泄露问题 ([175e9aa](https://github.com/kdcloudone/kdesign/commit/175e9aae96a3c7abfb36153ad1353acda5e2a8e3))
+* [date-picker]修复时间范围快速选择年月问题 ([7c2cf97](https://github.com/kdcloudone/kdesign/commit/7c2cf9726b744e693abe78c4b4e8ec0de6cbf88b))
+
+
+
 ## [1.6.38](https://github.com/kdcloudone/kdesign/compare/v1.6.37...v1.6.38) (2023-03-02)
 
 

package/dist/kdesign-complete.less

@@ -14163,6 +14163,484 @@ template {
 
 
 
+
+@tree-select-prefix-cls: ~'@{kd-prefix}-tree-select';
+@tree-prefix-cls: ~'@{kd-prefix}-tree';
+
+.@{tree-select-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  background-color: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &-selector:hover {
+    .@{tree-select-prefix-cls}-icon-active {
+      color: #3761ca;
+    }
+  }
+  &-visible {
+    .@{tree-select-prefix-cls}-icon-active {
+      color: #3761ca;
+    }
+    .@{tree-select-prefix-cls}-selection-item {
+      color: @tree-select-placeholder-color;
+    }
+  }
+
+  &-icon {
+    &-arrow {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      &-up {
+        transform: rotate(180deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-down {
+        transform: rotate(0deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-focus {
+        color: @tree-select-g-color-border-foucs;
+      }
+    }
+
+    &-clear {
+      opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
+      transition: opacity 0.15s ease;
+      &:hover {
+        color: @tree-select-g-color-border-hover;
+      }
+    }
+  }
+
+  &-focused {
+    .focusColor();
+  }
+  &-placeholder {
+    position: absolute;
+    color: @tree-select-placeholder-color;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    right: 28px;
+    left: 0;
+  }
+
+  &-borderless {
+    border: none;
+  }
+
+  &-underline {
+    border-bottom: 1px solid @tree-select-g-color-border;
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+      border-bottom: 1px solid @tree-select-g-color-border-hover;
+    }
+  }
+
+  &-bordered {
+    border: 1px solid @tree-select-border-g-color-border;
+    padding-left: @tree-select-bordered !important;
+    border-radius: @tree-select-border-radius-border;
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+      border: 1px solid @tree-select-g-color-border-hover;
+    }
+
+    .@{tree-select-prefix-cls}-suffix {
+      padding-right: 8px;
+    }
+
+    &.@{tree-select-prefix-cls}-single {
+      .@{tree-select-prefix-cls}-selection-search {
+        padding-left: @tree-select-bordered;
+      }
+    }
+
+    .@{tree-select-prefix-cls}-placeholder {
+      padding-left: @tree-select-bordered;
+    }
+  }
+
+  &-wrapper {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    padding: @tree-select-wrapper-padding;
+    max-width: 100%;
+    color: #212121;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+  }
+
+  &-dropdown {
+    display: block;
+    left: 0;
+    z-index: @tree-select-z-index;
+    box-sizing: border-box;
+    padding: 4px 0;
+    margin: 0;
+    overflow: auto;
+    font-size: @tree-select-list-font-size;
+    font-variant: initial;
+    background-color: @tree-select-dropdown-bg;
+    border-radius: @tree-select-g-radius-border;
+    outline: none;
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+    max-height: 200px;
+
+    .@{tree-prefix-cls} {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    
+
+    &-scroll {
+      overflow-y: auto;
+    }
+
+    &-empty {
+      padding: 5px 12px;
+    }
+
+    // 搜索框
+    &-search {
+      padding: 5px 6px;
+      &-hidden {
+        display: none;
+      }
+    }
+  }
+
+  // 选择器框大小
+  &-size-small {
+    .select-input-size(@tree-select-small-height, @tree-select-small-height, @tree-select-small-line-height, @tree-select-small-font-size);
+  }
+
+  &-size-middle {
+    .select-input-size(@tree-select-middle-height, @tree-select-middle-height, @tree-select-middle-line-height, @tree-select-middle-font-size);
+  }
+
+  &-size-large {
+    .select-input-size(@tree-select-large-height, @tree-select-large-height, @tree-select-large-line-height, @tree-select-large-font-size);
+  }
+
+  &-suffix {
+    right: 0;
+    position: absolute;
+    display: flex;
+    flex: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+  .@{tree-select-prefix-cls}-single {
+    .@{tree-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%;
+        }
+      }
+      &-item {
+        display: inline-block;
+        .over();
+      }
+    }
+    &-focused {
+      .focusColor();
+    }
+    &-disabled {
+      background-color: @tree-select-color-background-disabled;
+      color: @tree-select-color-text-disabled;
+      &:hover {
+        cursor: not-allowed;
+      }
+
+      .@{tree-select-prefix-cls}-suffix {
+        color: @tree-select-arrow-icon-color-text-disabled;
+      }
+    }
+    &:hover .@{tree-select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }
+
+    .@{tree-select-prefix-cls}-icon-clear {
+      color: @tree-select-clear-color;
+      &:hover {
+        color: @tree-select-clear-color-hover;
+      }
+    }
+    &-text {
+      color: @tree-select-single-color-text;
+      .over();
+    }
+    &-disabled-text {
+      color: @tree-select-color-text-disabled;
+    }
+  }
+
+  .@{tree-select-prefix-cls}-selection-item {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    vertical-align: middle;
+    max-width: 100%;
+    height: 20px;
+    line-height: 20px;
+    margin: 2px 8px 2px 0;
+    cursor: default;
+    user-select: none;
+    &-small {
+      height: 20px;
+      line-height: 18px;
+      font-size: 12px;
+    }
+
+    &-middle {
+      font-size: 12px;
+      height: 20px;
+      line-height: 18px;
+    }
+
+    &-large {
+      font-size: 14px;
+      line-height: 22px;
+      height: 22px;
+    }
+
+    &-content {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      padding: 0 7px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      border: 1px solid #ccc;
+      color: #212121;
+    }
+
+    &-span {
+      position: relative;
+      margin-left: 0.5px;
+      box-sizing: border-box;
+    }
+    &-input {
+      cursor: text;
+      margin: 0;
+      padding: 0;
+      background: 0 0;
+      border: none;
+      outline: none;
+      appearance: none;
+      width: 100%;
+      min-width: 20px;
+    }
+  }
+
+  // 多选
+  &-multiple {
+    .@{tree-select-prefix-cls}-selection {
+      &-tag {
+        max-width: calc(100% - 5px);
+
+        .@{kd-prefix}-tag {
+          margin: 2px 8px 2px 0;
+          max-width: 100%;
+        }
+      }
+      &-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: @tree-select-color-background-disabled;
+      color: @tree-select-color-text-disabled;
+
+      .@{tree-select-prefix-cls}-suffix {
+        color: @tree-select-arrow-icon-color-text-disabled;
+      }
+    }
+    &:hover .@{tree-select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }
+    .@{tree-select-prefix-cls}-icon-clear {
+      color: @tree-select-clear-color;
+      &:hover {
+        color: @tree-select-clear-color-hover;
+      }
+    }
+    &-selector {
+      position: relative;
+      cursor: text;
+      padding-right: 24px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .@{tree-select-prefix-cls}-wrapper {
+      &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled) {
+        border-bottom: 1px solid @tree-select-g-color-border-hover;
+      }
+    }
+
+    &-footer {
+      color: @tree-select-font-color;
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 12px;
+      height: 32px;
+      line-height: 32px;
+      border-top: 1px solid #d9d9d9;
+      box-sizing: border-box;
+
+      &-hadSelected {
+        color: #999999;
+        padding-left: 12px;
+        > span {
+          color: @tree-select-footer-g-text-color-selected;
+          padding: 0 2px;
+        }
+      }
+    }
+  }
+
+  &.topLeft.hidden,
+  &.bottomLeft.hidden,
+  &.topRight.hidden,
+  &.bottomRight.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: all calc(@transition-duration - 0.1s) @ease;
+  }
+}
+
+
+
+.item() {
+  position: relative;
+  display: block;
+  font-weight: normal;
+  font-size: @tree-select-list-font-size;
+  min-height: @tree-select-dropdown-height;
+  padding: 5px 12px;
+  color: @tree-select-font-color;
+  line-height: @tree-select-dropdown-line-height;
+}
+
+.focusColor() {
+  border-color: @tree-select-g-color-border-foucs !important;
+}
+
+.select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
+  min-height: @height;
+  max-height: calc(@maxHeight * 3 - 10px);
+  font-size: @fontSize;
+}
+
+.over() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+
+
+@select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
+
+
+// color
+@tree-select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
+@tree-select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
+@tree-select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
+@tree-select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
+@tree-select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
+@tree-select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
+@tree-select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
+@tree-select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
+@tree-select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
+@tree-select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
+@tree-select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
+@tree-select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
+@tree-select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@tree-select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
+@tree-select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
+@tree-select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
+@tree-select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
+@tree-select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@tree-select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+
+// font
+@tree-select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
+@tree-select-large-font-size: var(~'@{select-custom-prefix}-font-size-large', 16px); // 大号字体
+@tree-select-middle-font-size: var(~'@{select-custom-prefix}-font-size-middle', 14px); // 中号高度
+@tree-select-small-font-size: var(~'@{select-custom-prefix}-font-size-small', 12px); // 小号高度
+
+// line-height
+@tree-select-dropdown-line-height: var(~'@{select-custom-prefix}-dropdown-line-height', 22px);
+@tree-select-large-line-height: var(~'@{select-custom-prefix}-line-height-large', 28px);
+@tree-select-middle-line-height: var(~'@{select-custom-prefix}-line-height-middle', 22px);
+@tree-select-small-line-height: var(~'@{select-custom-prefix}-line-height-small', 14px);
+
+// sizing
+@tree-select-dropdown-height: var(~'@{select-custom-prefix}-item-sizing-height', 22px);
+@tree-select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
+@tree-select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
+@tree-select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+
+// spacing
+@tree-select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
+@tree-select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+
+// radius
+@tree-select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);
+@tree-select-border-radius-border: var(~'@{select-custom-prefix}-bordered-radius-border', 2px);
+
+// z-index
+@tree-select-z-index: var(~'@{select-custom-prefix}-z-index', @z-index-popper);
+
+
+
+
 @typography-prefix-cls: ~'@{kd-prefix}-typography';
 .@{typography-prefix-cls} {
   color: @typography-color-text-primary;