@kdcloudjs/kdesign 1.6.22 → 1.6.24

package/lib/cascader/style/index.css

@@ -114,11 +114,11 @@
   border-color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
@@ -126,7 +126,7 @@
   border-color: var(--kd-g-color-border-strong, #d9d9d9);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-cascader-picker-label {
@@ -157,13 +157,13 @@
 .kd-cascader-picker-input.expand {
   border-color: var(--kd-c-cascader-color-active, #999);
 }
-.kd-cascader-picker-input.expand i[class*="kdicon"] {
+.kd-cascader-picker-input.expand i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker-input i[class*='kdicon'] {
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -241,6 +241,9 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   padding: 0 var(--kd-c-cascader-menu-item-spacing-padding-horizontal, 12px);
   line-height: var(--kd-c-cascader-menu-item-sizing-height, 32px);
   cursor: pointer;
@@ -267,6 +270,141 @@
 .kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
   width: 92px;
 }
+.kd-cascader-menus .kd-cascader-menu-item .kd-cascader-checkbox {
+  margin-right: 5px;
+}
 .kd-cascader-menus .kd-empty {
   padding: 10px 0 20px;
 }
+.kd-cascader-bordered {
+  border: 1px solid #d9d9d9;
+  padding-left: 8px !important;
+  border-radius: 2px;
+}
+.kd-cascader-multiple {
+  padding: 1px 28px 1px 0;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+  min-height: 30px;
+  max-height: 100px;
+  color: #212121;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  border-bottom: 1px solid #d9d9d9;
+}
+.kd-cascader-multiple-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  width: 100%;
+}
+.kd-cascader-placeholder {
+  position: absolute;
+  color: #999;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-cascader-suffix {
+  right: 0;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-left: 8px;
+}
+.kd-cascader-selection-tag {
+  max-width: 100%;
+}
+.kd-cascader-multiple:hover .kd-cascader-icon-clear {
+  opacity: 1;
+}
+.kd-cascader-icon-arrow {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+}
+.kd-cascader-icon-arrow-up {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-cascader-icon-arrow-down {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-cascader-icon-arrow-focus {
+  color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-cascader-icon-clear {
+  opacity: 0;
+  z-index: 1;
+  position: absolute;
+  background: #fff;
+  -webkit-transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease;
+  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+}
+.kd-cascader-icon-clear:hover {
+  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
+}
+.kd-cascader-tag-describe {
+  font-size: 12px;
+  height: 20px;
+  line-height: 18px;
+  margin: 2px 8px 2px 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-cascader-tag-describe-content {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+  padding: 0 7px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border: 1px solid #ccc;
+  color: #212121;
+}

package/lib/cascader/style/index.less

@@ -16,14 +16,14 @@
     border-color: @cascader-active-color;
 
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       color: @cascader-active-color;
     }
   }
 
   &:hover > &-input {
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       color: @cascader-active-color;
     }
   }
@@ -34,7 +34,7 @@
       border-color: @color-border-strong;
 
       .@{kd-prefix}-input-suffix,
-      i[class*="kdicon"] {
+      i[class*='kdicon'] {
         color: @cascader-disabled-color;
       }
     }
@@ -65,14 +65,14 @@
     &.expand {
       border-color: @cascader-active-color;
 
-      i[class*="kdicon"] {
+      i[class*='kdicon'] {
         color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
 
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       transition: all 0.2s;
     }
   }
@@ -142,6 +142,7 @@
     &-item {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       padding: 0 @cascader-menu-item-padding-horizontal;
       line-height: @cascader-menu-item-height;
       cursor: pointer;
@@ -169,6 +170,10 @@
       &.last .@{cascader-menu-prefix-cls}-item-label {
         width: 92px;
       }
+
+      .@{kd-prefix}-cascader-checkbox {
+        margin-right: 5px;
+      }
     }
   }
 
@@ -176,3 +181,115 @@
     padding: 10px 0 20px;
   }
 }
+
+.@{kd-prefix}-cascader {
+  &-bordered {
+    border: 1px solid #d9d9d9;
+    padding-left: 8px !important;
+    border-radius: 2px;
+  }
+
+  &-multiple {
+    padding: 1px 28px 1px 0;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    width: 100%;
+    min-height: 30px;
+    max-height: 100px;
+    color: #212121;
+    display: flex;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    border-bottom: 1px solid #d9d9d9;
+  }
+
+  &-multiple-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  &-placeholder {
+    position: absolute;
+    color: @select-placeholder-color;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-suffix {
+    right: 0;
+    position: absolute;
+    display: flex;
+    flex: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+
+  &-selection-tag {
+    max-width: 100%;
+  }
+
+  &-multiple:hover &-icon-clear {
+    opacity: 1;
+  }
+
+  &-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: @cascader-g-color-border-foucs;
+      }
+    }
+
+    &-clear {
+      opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
+      transition: opacity 0.15s ease;
+      color: @cascader-clear-color;
+      &:hover {
+        color: @cascader-clear-color-hover;
+      }
+    }
+  }
+  &-tag {
+    &-describe {
+      font-size: 12px;
+      height: 20px;
+      line-height: 18px;
+      margin: 2px 8px 2px 0;
+      user-select: none;
+
+      &-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;
+      }
+    }
+  }
+}

package/lib/cascader/style/token.less

@@ -20,6 +20,9 @@
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
+@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
+@cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/lib/cascader/util.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { CascaderValueType, CascaderOptionType, KeysDataType } from './cascader';
+export declare const useChecked: (value: CascaderValueType, flattenData: CascaderOptionType[], keysData: KeysDataType, isMultiple: boolean) => never[] | readonly [unknown[], unknown[], import("react").Dispatch<import("react").SetStateAction<unknown[]>>, import("react").Dispatch<import("react").SetStateAction<unknown[]>>];
+export declare const flattenAll: (data: CascaderOptionType[], newTreeData?: CascaderOptionType[]) => {
+    formatData: CascaderOptionType[];
+    keysData: CascaderOptionType;
+    flattenData: CascaderOptionType[];
+};
+export declare const isHalfChecked: (data: any[]) => boolean;
+export declare const ValueSeparator = "__kdm_cascader__";
+export declare const transformValuesToSet: (values: CascaderValueType) => Set<unknown>;
+export declare const valueInSet: (set: Set<any>, value: string[]) => boolean;
+export declare function getChildNodeKeys(node: CascaderOptionType, keysNodeProps: KeysDataType): Set<string>;
+export declare const setNodeCheckedByValue: (initValues: CascaderValueType, flatNodes: CascaderOptionType[], keysNodeProps: KeysDataType) => {
+    checkedKeys: unknown[];
+    halfCheckedKeys: unknown[];
+};
+export declare const getHalfChecked: (halfCheckedKeys: any[], key: string) => boolean;
+export declare const getChecked: (checkedKeys: any[], key: string) => boolean;
+export declare const addKeys: (prevKeys?: any[], newKeys?: any[]) => any[];
+export declare const delKey: (prevKeys: any[], delKeys: any[]) => never[] & any[];
+export declare const getMultipleCheckValue: (_propsValue: CascaderValueType, _option: CascaderOptionType, _checked: boolean, flatNodes: CascaderOptionType[], checkedKeys: []) => any[];
+export declare function getAllCheckedKeys(key: any, checked: boolean, checkedKeys: any[], keysNodeProps: KeysDataType, halfCheckedKeys: any[]): {
+    checkedKeys: any[];
+    halfCheckedKeys: any[];
+};