@kdcloudjs/kdesign 1.6.14 → 1.6.16

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

@@ -57,7 +57,7 @@ var ModalTypes = (0, _type.tuple)('confirm', 'warning', 'error', 'normal');
 exports.ModalTypes = ModalTypes;
 
 var Modal = function Modal(props) {
-  var _classNames4, _context2, _context3;
+  var _classNames3, _classNames4, _context2, _context3;
 
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
       getPrefixCls = _useContext.getPrefixCls,
@@ -223,7 +223,8 @@ var Modal = function Modal(props) {
       proxyCloseModal(onCancel);
     }
   }, [proxyCloseModal, onCancel, maskClosable]);
-  var modalClasses = (0, _classnames.default)(modalPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(modalPrefixCls, "-container"), true));
+  var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
+  var modalClasses = (0, _classnames.default)(modalPrefixCls, className, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container"), true), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
   var headerClass = "".concat(modalPrefixCls, "-header");
 
   var container = /*#__PURE__*/_react.default.createElement("div", {
@@ -269,14 +270,9 @@ var Modal = function Modal(props) {
     x: 0,
     y: 0
   };
-  var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
-  var compStyle = isHidden ? {
-    display: 'none'
-  } : {};
 
   var comp = /*#__PURE__*/_react.default.createElement("div", {
-    className: modalClasses,
-    style: compStyle
+    className: modalClasses
   }, mask && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handleMaskClick,
     className: "".concat(modalPrefixCls, "-mask"),

package/lib/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));
@@ -153,6 +160,8 @@
       -ms-flex-align: center;
           align-items: center;
   height: var(--kd-c-modal-header-sizing-height, 50px);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container {
   display: -webkit-box;
@@ -235,6 +244,8 @@
           align-items: center;
   font-size: var(--kd-c-modal-footer-font-size, 14px);
   color: var(--kd-c-modal-footer-text-color, var(--kd-g-color-text-secondary, #666));
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 .kd-modal-margin-btn {
   margin-right: var(--kd-c-modal-footer-button-spacing, 12px);

package/lib/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);
@@ -50,6 +58,7 @@
       padding: @modal-header-sizing-padding-vertical @modal-header-sizing-padding-horizontal;
       align-items: center;
       height: @modal-header-sizing-height;
+      flex-shrink: 0;
       .@{modal-prefix-cls}-title-container {
         display: flex;
         justify-content: center;
@@ -105,6 +114,7 @@
       align-items: center;
       font-size: @modal-footer-font-size;
       color: @modal-footer-font-color;
+      flex-shrink: 0;
     }
     // each(@modal-footer-type-set, {
     //   .@{modal-prefix-cls}-@{key}-footer {