@kdcloudjs/kdesign 1.6.6 → 1.6.8

package/lib/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/lib/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/lib/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/lib/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/lib/slider/slider.js

@@ -108,11 +108,11 @@ var InteranalSlider = function InteranalSlider(props, ref) {
       value = _useMergedState2[0],
       setValue = _useMergedState2[1];
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      dragging = _useState2[0],
-      setDraging = _useState2[1];
-
+  var isDragging = (0, _react.useRef)(false);
+  var valueRef = (0, _react.useRef)((0, _hooks.useMergedState)(0, {
+    defaultValue: defaultValue,
+    value: propsValue
+  }));
   var mouseOffset;
 
   var addDocumentMouseEvents = function addDocumentMouseEvents() {
@@ -183,11 +183,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)
@@ -210,11 +210,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的鼠标事件
@@ -241,11 +242,11 @@ var InteranalSlider = function InteranalSlider(props, ref) {
     if (!sliderRef.current) {
       removeDocumentEvents();
 
-      if (dragging) {
+      if (isDragging.current) {
         onAfterChange(value);
       }
 
-      setDraging(false);
+      isDragging.current = false;
       return;
     }
 
@@ -254,6 +255,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
 
     if (newV !== value) {
       setValue(newV);
+      valueRef.current = newV;
     }
 
     onChange && onChange(newV);
@@ -271,7 +273,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/lib/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/lib/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/lib/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/lib/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/lib/table/feature/mergeCellHover.d.ts

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

package/lib/table/feature/mergeCellHover.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _table = require("@kdcloudjs/table");
+
+function mergeCellHover(pipeline) {
+  pipeline.use(_table.features.mergeCellHover());
+}
+
+var _default = mergeCellHover;
+exports.default = _default;

package/lib/table/table.js

@@ -53,6 +53,8 @@ var _contextMenu = _interopRequireDefault(require("./feature/contextMenu"));
 
 var _useRangeSelection = _interopRequireDefault(require("./feature/useRangeSelection"));
 
+var _mergeCellHover = _interopRequireDefault(require("./feature/mergeCellHover"));
+
 var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -143,6 +145,7 @@ var Table = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _columnDrag.default)(pipeline, columnDrag);
   (0, _contextMenu.default)(pipeline, contextMenu);
   (0, _useRangeSelection.default)(pipeline, rangeSelection);
+  (0, _mergeCellHover.default)(pipeline);
   /* -------------------------------------------------------------------------- */
 
   /* after useTablePipeline, merge pipeline.getProps result                     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [