@kdcloudjs/kdesign 1.6.13 → 1.6.15

package/es/input/style/index.less

@@ -4,258 +4,261 @@
 @input-prefix-cls: ~'@{kd-prefix}-input';
 @wrapper-prefix-cls: ~'@{input-prefix-cls}-wrapper';
 
-
 textarea {
-	margin: 0;
-	padding: 0;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-	line-height: inherit;
-	-webkit-appearance: none;
-	overflow: auto;
-    resize: vertical;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  overflow: auto;
+  resize: vertical;
 }
 .@{input-prefix-cls} {
-	.input(@input-prefix-cls);
-	transition: border-color @transition-duration-inner;
-	&-countWrapper {
-		position: relative;
-		display: inline-block;
-		width: 100%;
-	}
-	&-textarea {
-		.input(@input-prefix-cls);
-		transition: border-color @transition-duration-inner;
-		max-width: 100%;
-		height: auto;
-		vertical-align: bottom;
-		&-mark{
-			position: absolute;
-			right: 0;
-			top: ~'calc(100% + 1px)';
-			z-index: 1;
-			color: @input-placeholder-color-inner;
-			font-size: @input-small-font-size-inner;
+  .input(@input-prefix-cls);
+  transition: border-color @transition-duration-inner;
+  &-countWrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+  &-textarea {
+    .input(@input-prefix-cls);
+    transition: border-color @transition-duration-inner;
+    max-width: 100%;
+    height: auto;
+    vertical-align: bottom;
+    &-mark {
+      position: absolute;
+      right: 0;
+      top: ~'calc(100% + 1px)';
+      z-index: 1;
+      color: @input-placeholder-color-inner;
+      font-size: @input-small-font-size-inner;
       line-height: 18px;
       background-color: #fff;
-		}
+    }
     &-mark-inner {
       top: auto;
       bottom: 5px;
       right: 8px;
     }
-	}
-	&-no-resize {
-		resize: none;
-	}
-	&-borderless {
-		border: 0;
-		padding-left: 0 !important;
-		&:focus{
-			border: 0;
-		}
-	}
-	&-underline {
-		border: none;
-		border-bottom: 1px solid @input-color-border;
-		border-radius: 0;
-		padding-left: 0 !important;
-	}
-	&-disabled {
-		background-color: @input-background-color-disabled-inner;
-		border-color: @input-border-color-disabled-inner;
+  }
+  &-no-resize {
+    resize: none;
+  }
+  &-borderless {
+    border: 0;
+    padding-left: 0 !important;
+    &:focus {
+      border: 0;
+    }
+  }
+  &-underline {
+    border: none;
+    border-bottom: 1px solid @input-color-border;
+    border-radius: 0;
+    padding-left: 0 !important;
+  }
+  &-disabled {
+    background-color: @input-background-color-disabled-inner;
+    border-color: @input-border-color-disabled-inner;
     color: @input-affix-color;
-		cursor: not-allowed;
-	}
-	&-underline&-disabled {
+    cursor: not-allowed;
+  }
+  &-underline&-disabled {
     color: @input-color-disabled-inner;
-		background-color: @input-background-color-inner;
-		border-color: @input-underline-border-color-disabled-inner;
-	}
-	&-size-small {
-		.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
-	}
-	&-size-middle {
-		.input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
-	}
-	&-size-large {
-		.input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
-	}
-	&-wrapper {
-		.input(@wrapper-prefix-cls);
-		transition: border-color @transition-duration-inner;
-		display: inline-flex;
-		position: relative;
-		padding-top: 0 !important;
-		padding-bottom: 0 !important;
-		overflow: hidden;
-		.@{input-prefix-cls} {
-			border: none;
-			padding-left: 0;
-			padding-right: 0;
-			height: 100%;
-			&-suffix, &-prefix {
-				display: flex;
-				flex: 0;
-				align-items: center;
-				justify-content: center;
-				word-break: keep-all;
+    background-color: @input-background-color-inner;
+    border-color: @input-underline-border-color-disabled-inner;
+  }
+  &-size-small {
+    .input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
+  }
+  &-size-middle {
+    .input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
+  }
+  &-size-large {
+    .input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
+  }
+  &-wrapper {
+    padding-left: @input-wrapper-padding-left !important;
+    .input(@wrapper-prefix-cls);
+    transition: border-color @transition-duration-inner;
+    display: inline-flex;
+    position: relative;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    overflow: hidden;
+    .@{input-prefix-cls} {
+      border: none;
+      padding-left: @input-padding-left;
+      padding-right: 0;
+      height: 100%;
+      &-suffix,
+      &-prefix {
+        display: flex;
+        flex: 0;
+        align-items: center;
+        justify-content: center;
+        word-break: keep-all;
         color: @input-affix-color;
-			}
-			&-suffix {
-				margin-left: 4px;
-			}
-			&-prefix {
-				margin-right: 4px;
-			}
-		}
-		&-size-small {
-			.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
-		}
-		&-size-middle {
-			.input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-middle-padding-horizontal-inner);
-		}
-		&-size-large {
-			.input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-large-padding-horizontal-inner);
-		}
-		&-borderless {
-			.border-less;
-		}
-		&-underline {
-			.underline;
-		}
+      }
+      &-suffix {
+        margin-left: 4px;
+      }
+      &-prefix {
+        margin-right: 4px;
+      }
+    }
+    &-size-small {
+      .input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
+    }
+    &-size-middle {
+      .input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-middle-padding-horizontal-inner);
+    }
+    &-size-large {
+      .input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-large-padding-horizontal-inner);
+    }
+    &-borderless {
+      .border-less;
+    }
+    &-underline {
+      .underline;
+    }
 
-		&-focused {
-			border-color: @input-border-color-focused;
-		}
+    &-focused {
+      border-color: @input-border-color-focused;
+    }
 
     &-disabled {
       background-color: @input-background-color-disabled-inner;
       border-color: @input-border-color-disabled-inner;
       cursor: not-allowed;
 
-      .@{input-prefix-cls}-suffix, .@{input-prefix-cls}-prefix {
+      .@{input-prefix-cls}-suffix,
+      .@{input-prefix-cls}-prefix {
         color: @input-color-disabled-inner;
       }
     }
-	}
-	&-wrapper-textarea {
-		.input(@input-prefix-cls);
-		border: none !important;
-		padding: 0 !important;
-		position: relative;
-		display: inline-block;
-		.@{input-prefix-cls} {
-			&-textarea-clear-icon {
-				position: absolute;
+  }
+  &-wrapper-textarea {
+    .input(@input-prefix-cls);
+    border: none !important;
+    padding: 0 !important;
+    position: relative;
+    display: inline-block;
+    .@{input-prefix-cls} {
+      &-textarea-clear-icon {
+        position: absolute;
         z-index: 2;
-				right: 8px;
-				top: 3px;
-			}
-		}
-	}
-	&-clear-icon, &-textarea-clear-icon {
-		.input-clear-icon;
-	}
-	&-clear-icon-hidden {
-		visibility: hidden;
-	}
-	&-clear-icon-rightSpace {
-		margin-right: 4px;
-	}
+        right: 8px;
+        top: 3px;
+      }
+    }
+  }
+  &-clear-icon,
+  &-textarea-clear-icon {
+    .input-clear-icon;
+  }
+  &-clear-icon-hidden {
+    visibility: hidden;
+  }
+  &-clear-icon-rightSpace {
+    margin-right: 4px;
+  }
 
-	&-group-wrapper {
-		display: inline-block;
-		width: 100%;
-		text-align: start;
-		vertical-align: top;
-		.@{input-prefix-cls} {
-			&-group {
-				box-sizing: border-box;
-				margin: 0;
-				padding: 0;
-				color: rgba(0,0,0,.85);
-				font-size: 14px;
-				font-variant: tabular-nums;
-				// line-height: 1.5715;
-				list-style: none;
-				font-feature-settings: "tnum";
-				position: relative;
-				display: flex;
-				width: 100%;
-				border-collapse: separate;
-				border-spacing: 0;
-				& > .@{input-prefix-cls}-wrapper {
-					&:not(:first-child):not(:last-child) {
-						border-radius: 0;
-					}
-					&:first-child:not(:last-child) {
-						border-top-right-radius: 0;
-						border-bottom-right-radius: 0;
-					}
-					&:not(:first-child):last-child {
-						border-top-left-radius: 0;
-						border-bottom-left-radius: 0;
-					}
-				}
-				.@{input-prefix-cls}-group-addon {
-					position: relative;
-					color: @input-affix-color;
-					padding: 0 9px;
-					font-weight: 400;
-					font-size: 14px;
-					text-align: center;
-					border: 1px solid @input-border-color-disabled-inner;
-					border-radius: @input-border-radius-inner;
-					white-space: nowrap;
-					box-sizing: border-box;
-					display: flex;
-					align-items: center;
-					height: @input-middle-height-inner;
-					&:first-child {
-						border-top-right-radius: 0;
-						border-bottom-right-radius: 0;
-						border-right: none;
-					}
-					&:last-child {
-						border-top-left-radius: 0;
-						border-bottom-left-radius: 0;
-						border-left: none;
-					}
+  &-group-wrapper {
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    vertical-align: top;
+    .@{input-prefix-cls} {
+      &-group {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+        font-variant: tabular-nums;
+        // line-height: 1.5715;
+        list-style: none;
+        font-feature-settings: 'tnum';
+        position: relative;
+        display: flex;
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        & > .@{input-prefix-cls}-wrapper {
+          &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+          }
+          &:first-child:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+          &:not(:first-child):last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+        .@{input-prefix-cls}-group-addon {
+          position: relative;
+          color: @input-affix-color;
+          padding: 0 9px;
+          font-weight: 400;
+          font-size: 14px;
+          text-align: center;
+          border: 1px solid @input-border-color-disabled-inner;
+          border-radius: @input-border-radius-inner;
+          white-space: nowrap;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          height: @input-middle-height-inner;
+          &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: none;
+          }
+          &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: none;
+          }
 
-					&-borderless {
-						.border-less;
-					}
-					&-underline {
-						.underline;
-					}
-					&-disabled {
-						background-color: @input-background-color-disabled-inner;
-						border-color: @input-border-color-disabled-inner;
+          &-borderless {
+            .border-less;
+          }
+          &-underline {
+            .underline;
+          }
+          &-disabled {
+            background-color: @input-background-color-disabled-inner;
+            border-color: @input-border-color-disabled-inner;
             color: @input-color-disabled-inner;
-						cursor: not-allowed;
-					}
-				}
-			}
-			&-group-size-small {
-				.@{input-prefix-cls}-group-addon {
-					height: @input-small-height-inner;
-				}
-			}
-			&-group-middle-small {
-				.@{input-prefix-cls}-group-addon {
-					height: @input-middle-height-inner;
-				}
-			}
-			&-group-large-small {
-				.@{input-prefix-cls}-group-addon {
-					height: @input-large-height-inner;
-				}
-			}
-		}
-	}
-	&-allowClear-spacing {
-		padding-right: 20px;
-	}
+            cursor: not-allowed;
+          }
+        }
+      }
+      &-group-size-small {
+        .@{input-prefix-cls}-group-addon {
+          height: @input-small-height-inner;
+        }
+      }
+      &-group-middle-small {
+        .@{input-prefix-cls}-group-addon {
+          height: @input-middle-height-inner;
+        }
+      }
+      &-group-large-small {
+        .@{input-prefix-cls}-group-addon {
+          height: @input-large-height-inner;
+        }
+      }
+    }
+  }
+  &-allowClear-spacing {
+    padding-right: 20px;
+  }
 }

package/es/input/style/token.less

@@ -1,8 +1,7 @@
-@import "../../style/themes/token.less";
+@import '../../style/themes/token.less';
 
 @input-prefix: '--@{kd-prefix}-c-input';
 
-
 // color
 @input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
 @input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
@@ -10,10 +9,16 @@
 @input-clear-color: var(~'@{input-prefix}-clear-color', #d9d9d9);
 @input-clear-color-hover: var(~'@{input-prefix}-clear-color-hover', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
-@input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
+@input-background-color-disabled-inner: var(
+  ~'@{input-prefix}-color-background-disabled',
+  @color-background-contain-disabled
+);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
-@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
+@input-underline-border-color-disabled-inner: var(
+  ~'@{input-prefix}-underline-color-border-disabled',
+  @color-border-weak
+);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 
@@ -33,6 +38,8 @@
 @input-middle-height-inner: var(~'@{input-prefix}-sizing-height-middle', 30px);
 @input-large-height-inner: var(~'@{input-prefix}-sizing-height-large', 36px);
 @input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
+@input-wrapper-padding-left: var(~'@{input-prefix}-wrapper-padding-left', 0px);
+@input-padding-left: var(~'@{input-prefix}-padding-left', 9px);
 
 // spacing
 @input-small-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-small', 3px);
@@ -41,11 +48,3 @@
 @input-middle-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-middle', 9px);
 @input-large-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-large', 8px);
 @input-large-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-large', 9px);
-
-
-
-
-
-
-
-

package/es/modal/modal.js

@@ -19,7 +19,7 @@ export var ConfirmModalTypes = ['confirm', 'normal'];
 export var ModalTypes = tuple('confirm', 'warning', 'error', 'normal');
 
 var Modal = function Modal(props) {
-  var _classNames4, _context2, _context3;
+  var _classNames3, _classNames4, _context2, _context3;
 
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
@@ -190,7 +190,8 @@ var Modal = function Modal(props) {
       proxyCloseModal(onCancel);
     }
   }, [proxyCloseModal, onCancel, maskClosable]);
-  var modalClasses = classNames(modalPrefixCls, className, _defineProperty({}, "".concat(modalPrefixCls, "-container"), true));
+  var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
+  var modalClasses = classNames(modalPrefixCls, className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container"), true), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
   var headerClass = "".concat(modalPrefixCls, "-header");
   var container = /*#__PURE__*/React.createElement("div", {
     className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),
@@ -234,13 +235,8 @@ var Modal = function Modal(props) {
     x: 0,
     y: 0
   };
-  var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
-  var compStyle = isHidden ? {
-    display: 'none'
-  } : {};
   var comp = /*#__PURE__*/React.createElement("div", {
-    className: modalClasses,
-    style: compStyle
+    className: modalClasses
   }, mask && /*#__PURE__*/React.createElement("div", {
     onClick: handleMaskClick,
     className: "".concat(modalPrefixCls, "-mask"),

package/es/modal/style/index.css

@@ -111,6 +111,13 @@
   position: relative;
   z-index: var(--kd-c-modal-z-index, var(--kd-g-z-index-dialog, 1050));
 }
+.kd-modal-container-show {
+  -webkit-animation: kdModalEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
+          animation: kdModalEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
+}
+.kd-modal-container-hidden {
+  display: none;
+}
 .kd-modal-mask {
   position: fixed;
   background-color: var(--kd-c-modal-mask-color-background, rgba(55, 55, 55, 0.5));

package/es/modal/style/index.less

@@ -23,6 +23,14 @@
   &-container {
     position: relative;
     z-index: @modal-z-index-dialog;
+
+    &-show {
+      animation: kdModalEffect calc(@transition-duration - 0.1s) @ease both;
+    }
+
+    &-hidden {
+      display: none
+    }
   }
   &-mask {
     .overlay(@modal-mask-color-background, 0);

package/es/select/select.js

@@ -73,7 +73,7 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   var realChildren = Array.isArray(options) ? options : toArray(children); // options配置项和默认children
 
-  var innerRef = React.useRef();
+  var innerRef = useRef();
   var selectRef = ref || innerRef;
   var searchRef = useRef(null); // 搜索框ref
 
@@ -84,7 +84,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     selectMulOpts: []
   }); // 多选ref已选中项
 
-  var measureRef = React.useRef(null);
+  var measureRef = useRef(null);
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -127,7 +127,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var multipleFooterCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
 
   var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
-  React.useEffect(function () {
+  useEffect(function () {
     setOptionShow(!!props.visible);
   }, [props.visible]); // realchildren更新时数据处理---待解决
 
@@ -218,9 +218,9 @@ var InternalSelect = function InternalSelect(props, ref) {
   var handleClick = function handleClick() {
     if (disabled) return;
 
-    if (!optionShow) {
+    if (optionShow) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
-      onDropdownVisibleChange && onDropdownVisibleChange(!optionShow);
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
   };
 
@@ -739,8 +739,10 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
 
   var handleVisibleChange = function handleVisibleChange(visible) {
-    props.visible === undefined && setOptionShow(visible);
-    onVisibleChange && onVisibleChange(visible);
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
   };
 
   var popperProps = _extends(_extends({}, selectProps), {
@@ -749,7 +751,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,
-    onVisibleChange: handleVisibleChange
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !isShowSearch
   });
 
   return usePopper(renderSelect(), renderContent(), popperProps);