@kdcloudjs/kdesign 1.6.13 → 1.6.15

package/lib/image/preview.js

@@ -13,6 +13,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -53,6 +55,7 @@ var Preview = function Preview(props) {
       alt = allProps.alt,
       name = allProps.name,
       size = allProps.size,
+      scales = allProps.scales,
       visible = allProps.visible,
       onClose = allProps.onClose,
       current = allProps.current,
@@ -82,14 +85,28 @@ var Preview = function Preview(props) {
       scale = _React$useState6[0],
       setScale = _React$useState6[1];
 
+  var maxScale = scales[scales.length - 1] / 100;
+  var minScale = scales[0] / 100;
   React.useEffect(function () {
     if (show) {
       document.body.style.overflow = 'hidden';
       var throMouseWheel = (0, _throttle.default)(function (e) {
         if (e.wheelDelta > 0) {
-          setScale(scale + 0.1);
+          if (scale > maxScale) return;
+
+          if (scale + 0.1 > maxScale) {
+            setScale(maxScale);
+          } else {
+            setScale(scale + 0.1);
+          }
         } else if (e.wheelDelta < 0) {
-          if (scale > 1) setScale(scale - 0.1);
+          if (scale < minScale) return;
+
+          if (scale - 0.1 < minScale) {
+            setScale(minScale);
+          } else {
+            setScale(scale - 0.1);
+          }
         }
       }, 200);
       document.addEventListener('mousewheel', throMouseWheel);
@@ -103,12 +120,17 @@ var Preview = function Preview(props) {
   }, [show, scale]);
 
   var handleZoomOut = function handleZoomOut() {
-    var newScale = scale - 1;
-    setScale(Math.max(newScale, 1));
+    var nextScale = scales.findLast(function (s) {
+      return s / 100 < scale;
+    });
+    if (nextScale !== undefined) setScale(nextScale / 100);
   };
 
   var handleZoomIn = function handleZoomIn() {
-    setScale(scale + 1);
+    var nextScale = (0, _find.default)(scales).call(scales, function (s) {
+      return s / 100 > scale;
+    });
+    if (nextScale !== undefined) setScale(nextScale / 100);
   };
 
   var previewImgProps = {
@@ -150,11 +172,14 @@ var Preview = function Preview(props) {
   }), /*#__PURE__*/React.createElement(_icon.default, {
     type: "shrink",
     className: (0, _classnames.default)({
-      disabled: scale <= 1
+      disabled: scale <= minScale
     }),
     onClick: handleZoomOut
   }), /*#__PURE__*/React.createElement(_icon.default, {
     type: "zoom",
+    className: (0, _classnames.default)({
+      disabled: scale >= maxScale
+    }),
     onClick: handleZoomIn
   }), props.type !== 'upload' && operations, props.type !== 'upload' && length && /*#__PURE__*/React.createElement(_icon.default, {
     type: "arrow-right",

package/lib/input/style/index.css

@@ -259,6 +259,7 @@ textarea {
   padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper {
+  padding-left: var(--kd-c-input-wrapper-padding-left, 0px) !important;
   width: 100%;
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
@@ -306,7 +307,7 @@ textarea {
 }
 .kd-input-wrapper .kd-input {
   border: none;
-  padding-left: 0;
+  padding-left: var(--kd-c-input-padding-left, 9px);
   padding-right: 0;
   height: 100%;
 }
@@ -453,8 +454,8 @@ textarea {
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  -webkit-font-feature-settings: "tnum";
-          font-feature-settings: "tnum";
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;

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);
-
-
-
-
-
-
-
-