@kdcloudjs/kdesign 1.6.39 → 1.7.0

package/es/tree-select/style/index.less

@@ -0,0 +1,392 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './mixin.less';
+
+@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;
+  }
+}

package/es/tree-select/style/mixin.less

@@ -0,0 +1,29 @@
+@import './token.less';
+
+.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;
+}
+

package/es/tree-select/style/token.less

@@ -0,0 +1,54 @@
+@import '../../style/themes/token.less';
+
+@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);

package/es/tree-select/tree-select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ITreeSelectProps } from './interface';
+declare const TreeSelect: React.ForwardRefExoticComponent<ITreeSelectProps<import("../collapse/collapse").keyType> & React.RefAttributes<unknown>>;
+export default TreeSelect;