@kdcloudjs/kdesign 1.6.6 → 1.6.8

package/es/select/style/index.css

@@ -248,6 +248,9 @@
 .kd-select-visible .kd-select-icon-active {
   color: #3761ca;
 }
+.kd-select-visible .kd-select-selection-item {
+  color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
+}
 .kd-select-icon-arrow {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -278,36 +281,20 @@
 }
 .kd-select-icon-clear {
   opacity: 0;
+  z-index: 1;
+  position: absolute;
+  background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
 }
 .kd-select-icon-clear:hover {
   color: var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-select-selection-search {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 11px;
-}
-.kd-select-selection-search-input {
-  opacity: 0;
-  margin: 0;
-  padding: 0;
-  background: 0 0;
-  border: none;
-  outline: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-.kd-select-selection-search-input:hover {
-  cursor: pointer;
-}
 .kd-select-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-placeholder {
+  position: absolute;
   color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
   overflow: hidden;
   white-space: nowrap;
@@ -331,7 +318,7 @@
   border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-bordered .kd-select-suffix {
-  right: 10px;
+  padding-right: 8px;
 }
 .kd-select-wrapper {
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -352,6 +339,7 @@
           box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
+  position: relative;
 }
 .kd-select-dropdown {
   display: block;
@@ -433,19 +421,16 @@
 .kd-select-size-small {
   min-height: var(--kd-c-select-sizing-height-small, 24px);
   max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-small, 14px);
   font-size: var(--kd-c-select-font-size-small, 12px);
 }
 .kd-select-size-middle {
   min-height: var(--kd-c-select-sizing-height-middle, 30px);
   max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-middle, 22px);
   font-size: var(--kd-c-select-font-size-middle, 14px);
 }
 .kd-select-size-large {
   min-height: var(--kd-c-select-sizing-height-large, 36px);
   max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-large, 28px);
   font-size: var(--kd-c-select-font-size-large, 16px);
 }
 .kd-select-suffix {
@@ -467,6 +452,20 @@
           justify-content: center;
   margin-left: 8px;
 }
+.kd-select-single .kd-select-selection-search {
+  position: absolute;
+  right: 28px;
+  left: 0;
+  height: 100%;
+}
+.kd-select-single .kd-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+}
 .kd-select-single-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
@@ -483,6 +482,12 @@
 .kd-select-single:hover .kd-select-icon-clear {
   opacity: 1;
 }
+.kd-select-single .kd-select-icon-clear {
+  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-select-single .kd-select-icon-clear:hover {
+  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+}
 .kd-select-single-text {
   color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
   overflow: hidden;
@@ -561,6 +566,25 @@
   width: 100%;
   min-width: 20px;
 }
+.kd-select-multiple .kd-select-selection-search {
+  position: relative;
+  max-width: 100%;
+}
+.kd-select-multiple .kd-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  width: 100%;
+}
+.kd-select-multiple .kd-select-selection-search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  white-space: pre;
+  visibility: hidden;
+}
 .kd-select-multiple-disabled {
   cursor: not-allowed;
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
@@ -572,6 +596,12 @@
 .kd-select-multiple:hover .kd-select-icon-clear {
   opacity: 1;
 }
+.kd-select-multiple .kd-select-icon-clear {
+  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-select-multiple .kd-select-icon-clear:hover {
+  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+}
 .kd-select-multiple-selector {
   position: relative;
   cursor: text;

package/es/select/style/index.less

@@ -22,6 +22,9 @@
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
+    .@{select-prefix-cls}-selection-item {
+      color: @select-placeholder-color;
+    }
   }
 
   &-icon {
@@ -46,6 +49,9 @@
 
     &-clear {
       opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
       transition: opacity 0.15s ease;
       &:hover {
         color: @select-g-color-border-hover;
@@ -53,30 +59,11 @@
     }
   }
 
-  &-selection-search {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 11px;
-    &-input {
-      opacity: 0;
-      margin: 0;
-      padding: 0;
-      background: 0 0;
-      border: none;
-      outline: none;
-      appearance: none;
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
   &-focused {
     .focusColor();
-    // border-bottom: 1px solid #5582F3 ;
   }
   &-placeholder {
+    position: absolute;
     color: @select-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
@@ -103,7 +90,7 @@
     }
 
     .@{select-prefix-cls}-suffix {
-      right: 10px;
+      padding-right: 8px;
     }
   }
 
@@ -119,6 +106,7 @@
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
+    position: relative;
   }
 
   &-dropdown {
@@ -180,7 +168,6 @@
 
       &-selected:not(&-disabled) {
         color: @select-item-selected-color;
-        // font-weight: @select-item-selected-font-weight;
         background-color: @select-item-selected-bg;
       }
 
@@ -216,6 +203,22 @@
     margin-left: 8px;
   }
   &-single {
+    .@{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%;
+        }
+      }
+    }
     &-focused {
       .focusColor();
     }
@@ -233,6 +236,13 @@
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-text {
       color: @select-single-color-text;
       .over();
@@ -243,7 +253,6 @@
   }
 
   .@{select-prefix-cls}-selection-item {
-    // position: relative;
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -252,12 +261,6 @@
     height: 20px;
     line-height: 20px;
     margin: 2px 8px 2px 0;
-    // margin: 2px 4px 2px 0;
-    // margin-right: 4px;
-    // padding-left: 8px;
-    // background: #fafafa;
-    // border: 1px solid #d9d9d9;
-    // border-radius: 2px;
     cursor: default;
     user-select: none;
     &-small {
@@ -289,24 +292,13 @@
       border: 1px solid #ccc;
       color: #212121;
     }
-    // &-remove {
-    //   text-align: center;
-    //   text-transform: none;
-    //   display: inline-flex;
-    //   color: rgba(0, 0, 0, 0.45);
-    //   line-height: inherit;
-    //   cursor: pointer;
-    //   &:hover {
-    //     color: #212121;
-    //   }
-    // }
+
     &-span {
       position: relative;
       margin-left: 0.5px;
       box-sizing: border-box;
     }
     &-input {
-      // opacity: 0;
       cursor: text;
       margin: 0;
       padding: 0;
@@ -321,6 +313,27 @@
 
   // 多选
   &-multiple {
+    .@{select-prefix-cls}-selection {
+      &-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: @select-color-background-disabled;
@@ -333,6 +346,12 @@
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-selector {
       position: relative;
       cursor: text;
@@ -378,5 +397,3 @@
     transition: all calc(@transition-duration - 0.1s) @ease;
   }
 }
-
-

package/es/select/style/mixin.less

@@ -12,14 +12,12 @@
 }
 
 .focusColor() {
-  // border-bottom: 1px solid #5582F3;
   border-color: @select-g-color-border-foucs !important;
 }
 
 .select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
   min-height: @height;
   max-height: calc(@maxHeight * 3 - 10px);
-  line-height: @lineHeight;
   font-size: @fontSize;
 }
 

package/es/select/style/token.less

@@ -21,6 +21,8 @@
 @select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
 @select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 @select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
+@select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/es/slider/slider.js

@@ -16,7 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -75,11 +75,11 @@ var InteranalSlider = function InteranalSlider(props, ref) {
       value = _useMergedState2[0],
       setValue = _useMergedState2[1];
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      dragging = _useState2[0],
-      setDraging = _useState2[1];
-
+  var isDragging = useRef(false);
+  var valueRef = useRef(useMergedState(0, {
+    defaultValue: defaultValue,
+    value: propsValue
+  }));
   var mouseOffset;
 
   var addDocumentMouseEvents = function addDocumentMouseEvents() {
@@ -151,11 +151,11 @@ var InteranalSlider = function InteranalSlider(props, ref) {
   var onEnd = function onEnd() {
     removeDocumentEvents();
 
-    if (dragging) {
-      onAfterChange && onAfterChange(value);
+    if (isDragging.current) {
+      onAfterChange && onAfterChange(valueRef.current);
     }
 
-    setDraging(false);
+    isDragging.current = false;
   };
 
   var handleTouchStart = function handleTouchStart() {// console.log('object :>> ', 'object', addDocumentMouseEvents)
@@ -178,11 +178,12 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     } // 设置状态值
 
 
-    setDraging(true);
+    isDragging.current = true;
     var newV = calcValueByPos(position);
 
     if (newV !== value) {
       setValue(newV);
+      valueRef.current = newV;
     }
 
     onChange && onChange(newV); // 监听document的鼠标事件
@@ -209,11 +210,11 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     if (!sliderRef.current) {
       removeDocumentEvents();
 
-      if (dragging) {
+      if (isDragging.current) {
         onAfterChange(value);
       }
 
-      setDraging(false);
+      isDragging.current = false;
       return;
     }
 
@@ -222,6 +223,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
 
     if (newV !== value) {
       setValue(newV);
+      valueRef.current = newV;
     }
 
     onChange && onChange(newV);
@@ -239,7 +241,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     style: style,
     onTouchStart: disabled ? noop : handleTouchStart,
     onMouseDown: disabled ? noop : handleMouseDown,
-    onMouseUp: disabled ? noop : handleMouseUp,
+    // onMouseUp={disabled ? noop : handleMouseUp}
     onKeyDown: disabled ? noop : handleKeyDown,
     onFocus: disabled ? noop : handleFocus,
     onBlur: disabled ? noop : handleBlur

package/es/split-panel/style/index.css

@@ -114,8 +114,6 @@
 .kd-split-panel {
   position: absolute;
   overflow: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-split-panel.left-panel,
 .kd-split-panel.right-panel {
@@ -154,8 +152,6 @@
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   z-index: 10;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-split-trigger-con.is-active .kd-split-trigger-arrow {
   border-color: var(--kd-c-split-panel-arrow-color-background, #999);
@@ -192,8 +188,6 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   border: var(--kd-c-split-panel-arrow-sizing-border, 1px) solid transparent;

package/es/split-panel/style/index.less

@@ -17,7 +17,6 @@
     &-panel {
         position: absolute;
         overflow: hidden;
-        transition: all calc(@transition-duration - 0.1s) @ease-out;
         &.left-panel, &.right-panel {
             top: 0;
             bottom: 0;
@@ -54,7 +53,6 @@
           position: absolute;
           transform: translate(-50%, -50%);
           z-index: 10;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           &.is-active {
             .@{split-prefix-cls}-trigger-arrow {
               border-color: @split-panel-trigger-arrow-color;
@@ -95,7 +93,6 @@
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           box-sizing: border-box;
           border: @split-panel-arrow-border-width solid transparent;
           .@{kd-prefix}icon {

package/es/steps/style/index.css

@@ -164,9 +164,6 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
 }
 .kd-steps-item-iconContainer {
   display: -webkit-box;
@@ -233,21 +230,11 @@
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
 }
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
 .kd-steps-item-process {

package/es/steps/style/index.less

@@ -69,7 +69,6 @@
       width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &-iconContainer {
@@ -126,22 +125,12 @@
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
 
       .@{steps-prefix-cls}-item-description {
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         width: @steps-vertical-description-sizing-width;
       }
     }

package/es/table/feature/mergeCellHover.d.ts

@@ -0,0 +1,3 @@
+import { TablePipeline } from '../interface';
+declare function mergeCellHover(pipeline: TablePipeline): void;
+export default mergeCellHover;

package/es/table/feature/mergeCellHover.js

@@ -0,0 +1,7 @@
+import { features } from '@kdcloudjs/table';
+
+function mergeCellHover(pipeline) {
+  pipeline.use(features.mergeCellHover());
+}
+
+export default mergeCellHover;

package/es/table/table.js

@@ -18,6 +18,7 @@ import useColumnResize from './feature/columnResize';
 import useColumnDrag from './feature/columnDrag';
 import useContextMenu from './feature/contextMenu';
 import useRangeSelection from './feature/useRangeSelection';
+import useＭergeCellHover from './feature/mergeCellHover';
 import devWarning from '../_utils/devwarning';
 var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var columns = props.columns,
@@ -103,6 +104,7 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   useColumnDrag(pipeline, columnDrag);
   useContextMenu(pipeline, contextMenu);
   useRangeSelection(pipeline, rangeSelection);
+  useＭergeCellHover(pipeline);
   /* -------------------------------------------------------------------------- */
 
   /* after useTablePipeline, merge pipeline.getProps result                     */

package/lib/carousel/style/index.css

@@ -109,6 +109,7 @@
 }
 .kd-carousel-list {
   list-style: none;
+  padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -182,6 +183,8 @@
 }
 .kd-carousel-slidebar {
   position: absolute;
+  list-style: none;
+  padding: 0;
 }
 .kd-carousel-slidebar-left {
   display: -webkit-box;

package/lib/carousel/style/index.less

@@ -13,6 +13,7 @@
 
   &-list {
     list-style: none;
+    padding: 0;
     display: flex;
     flex-direction: row;
     position: relative;
@@ -79,6 +80,9 @@
 
   &-slidebar {
     position: absolute;
+    list-style: none;
+    padding: 0;
+
     &-left {
       .vertical;
       left: @carousel-dots-margin-left;

package/lib/cascader/style/index.css

@@ -111,15 +111,15 @@
   cursor: pointer;
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input {
-  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  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"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  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"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
   cursor: not-allowed;
@@ -155,10 +155,10 @@
   cursor: pointer;
 }
 .kd-cascader-picker-input.expand {
-  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker-input.expand i[class*="kdicon"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-clear-color-text, #666);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -197,7 +197,7 @@
           transform: scale(0.9) translateY(-50%);
 }
 .kd-cascader-picker-close:hover {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;