@kdcloudjs/kdesign 1.6.17 → 1.6.18

package/es/checkbox/style/index.css

@@ -155,6 +155,9 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .kd-checkbox-children .kd-input-underline {
   background-color: transparent;

package/es/checkbox/style/index.less

@@ -39,6 +39,9 @@
     align-items: center;
     z-index: 999;
     user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
     .kd-input-underline {
       background-color: transparent;

package/es/config-provider/compDefaultProps.d.ts

@@ -188,7 +188,10 @@ declare const compDefaultProps: {
         disabled: boolean;
         popupOffset: number[];
     };
-    Message: {};
+    Message: {
+        closable: boolean;
+        duration: number;
+    };
     Notice: {};
     Notification: {};
     Pagination: {

package/es/config-provider/compDefaultProps.js

@@ -194,7 +194,10 @@ var compDefaultProps = {
     disabled: false,
     popupOffset: [0, 0]
   },
-  Message: {},
+  Message: {
+    closable: false,
+    duration: 3000
+  },
   Notice: {},
   Notification: {},
   Pagination: {

package/es/message/index.js

@@ -4,7 +4,7 @@ import NotificationApi from '../notification-base';
 import Content from './content';
 var defaultStyle = {};
 var defaultDuration = 3000;
-var defaultClosable = true;
+var defaultClosable = false;
 var defaultOffset = '40px';
 var defaultSuffixCls = 'message';
 var defaultPlacement = 'message';

package/es/select/select.js

@@ -596,21 +596,16 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   var handleMaxTagHolder = useCallback(function () {
     var maxTagPlaceholder = selectProps.maxTagPlaceholder;
-    var TagStyle = {
-      margin: '2px 8px 2px 0'
-    };
 
     if (typeof maxTagPlaceholder === 'function') {
       return /*#__PURE__*/React.createElement(Tag, {
         type: "edit",
-        style: TagStyle,
         size: size,
         disabled: disabled
       }, maxTagPlaceholder(mulOptions));
     } else {
       return /*#__PURE__*/React.createElement(Tag, {
         type: "edit",
-        style: TagStyle,
         size: size,
         disabled: disabled
       }, maxTagPlaceholder);
@@ -653,7 +648,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     var multipleCls = classNames(commCls, (_classNames10 = {}, _defineProperty(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames10, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames10));
     var itemCls = classNames((_classNames11 = {}, _defineProperty(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames11, _concatInstanceProperty(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
     var TagStyle = {
-      margin: '2px 8px 2px 0'
+      margin: '2px 8px 2px 0',
+      maxWidth: '100%'
     };
     return /*#__PURE__*/React.createElement("div", {
       className: multipleCls,
@@ -662,7 +658,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       var label = item.label,
           value = item.value;
       return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement("span", {
-        key: value
+        key: value,
+        className: classNames("".concat(selectPrefixCls, "-selection-tag"))
       }, /*#__PURE__*/React.createElement(Tag, {
         type: "edit",
         style: TagStyle,

package/es/select/style/index.css

@@ -239,7 +239,6 @@
           box-sizing: border-box;
   background-color: transparent;
   cursor: pointer;
-  margin: 0 8px 2px 0;
   vertical-align: middle;
 }
 .kd-select-selector:hover .kd-select-icon-active {
@@ -393,19 +392,16 @@
   min-width: 75px;
 }
 .kd-select-item-option-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-      -ms-flex: auto;
-          flex: auto;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-select-item-option-content .kd-checkbox {
+  width: 100%;
+}
+.kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
+  display: inline-block;
+}
 .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
   background-color: var(--kd-c-select-color-background, #f5f5f5);
 }
@@ -455,13 +451,13 @@
           justify-content: center;
   margin-left: 8px;
 }
-.kd-select-single .kd-select-selection-search {
+.kd-select .kd-select-single .kd-select-selection-search {
   position: absolute;
   right: 28px;
   left: 0;
   height: 100%;
 }
-.kd-select-single .kd-select-selection-search-input {
+.kd-select .kd-select-single .kd-select-selection-search-input {
   outline: 0;
   border-radius: 0;
   border: none;
@@ -469,35 +465,41 @@
   height: 100%;
   width: 100%;
 }
-.kd-select-single-focused {
+.kd-select .kd-select-single .kd-select-selection-item {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-select .kd-select-single-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
-.kd-select-single-disabled {
+.kd-select .kd-select-single-disabled {
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-select-single-disabled:hover {
+.kd-select .kd-select-single-disabled:hover {
   cursor: not-allowed;
 }
-.kd-select-single-disabled .kd-select-suffix {
+.kd-select .kd-select-single-disabled .kd-select-suffix {
   color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
 }
-.kd-select-single:hover .kd-select-icon-clear {
+.kd-select .kd-select-single:hover .kd-select-icon-clear {
   opacity: 1;
 }
-.kd-select-single .kd-select-icon-clear {
+.kd-select .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 {
+.kd-select .kd-select-single .kd-select-icon-clear:hover {
   color: var(--kd-c-select-icon-clear-color-text-hover, #999);
 }
-.kd-select-single-text {
+.kd-select .kd-select-single-text {
   color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-select-single-disabled-text {
+.kd-select .kd-select-single-disabled-text {
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-select .kd-select-selection-item {
@@ -521,13 +523,13 @@
           user-select: none;
 }
 .kd-select .kd-select-selection-item-small {
-  height: 18px;
+  height: 20px;
   line-height: 18px;
   font-size: 12px;
 }
 .kd-select .kd-select-selection-item-middle {
   font-size: 12px;
-  height: 18px;
+  height: 20px;
   line-height: 18px;
 }
 .kd-select .kd-select-selection-item-large {
@@ -569,6 +571,13 @@
   width: 100%;
   min-width: 20px;
 }
+.kd-select-multiple .kd-select-selection-tag {
+  max-width: calc(100% - 5px);
+}
+.kd-select-multiple .kd-select-selection-tag .kd-tag {
+  margin: 2px 8px 2px 0;
+  max-width: 100%;
+}
 .kd-select-multiple .kd-select-selection-search {
   position: relative;
   max-width: 100%;

package/es/select/style/index.less

@@ -10,7 +10,6 @@
   box-sizing: border-box;
   background-color: transparent;
   cursor: pointer;
-  margin: 0 8px 2px 0;
   vertical-align: middle;
 
   &-selector:hover {
@@ -158,10 +157,15 @@
       min-width: 75px;
 
       &-content {
-        display: flex;
-        align-items: center;
-        flex: auto;
         .over();
+
+        .@{kd-prefix}-checkbox {
+          width: 100%;
+
+          .@{kd-prefix}-checkbox-children {
+            display: inline-block;
+          }
+        }
       }
 
       &:hover:not(&-selected):not(&-disabled) {
@@ -208,7 +212,7 @@
     justify-content: center;
     margin-left: 8px;
   }
-  &-single {
+  .@{select-prefix-cls}-single {
     .@{select-prefix-cls}-selection {
       &-search {
         position: absolute;
@@ -224,6 +228,10 @@
           width: 100%;
         }
       }
+      &-item {
+        display: inline-block;
+        .over();
+      }
     }
     &-focused {
       .focusColor();
@@ -270,14 +278,14 @@
     cursor: default;
     user-select: none;
     &-small {
-      height: 18px;
+      height: 20px;
       line-height: 18px;
       font-size: 12px;
     }
 
     &-middle {
       font-size: 12px;
-      height: 18px;
+      height: 20px;
       line-height: 18px;
     }
 
@@ -320,6 +328,14 @@
   // 多选
   &-multiple {
     .@{select-prefix-cls}-selection {
+      &-tag {
+        max-width: calc(100% - 5px);
+
+        .@{kd-prefix}-tag {
+          margin: 2px 8px 2px 0;
+          max-width: 100%;
+        }
+      }
       &-search {
         position: relative;
         max-width: 100%;

package/es/tag/style/index.css

@@ -105,6 +105,11 @@
   -webkit-transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
   transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
 }
+.kd-tag-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .kd-tag-size-small {
   font-size: var(--kd-c-tag-font-size-small, var(--kd-g-font-size-small, 12px));
   height: var(--kd-c-tag-sizing-height-small, 20px);
@@ -468,6 +473,9 @@
 }
 .kd-tag-text {
   margin-left: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .kd-tag-closable-disabled {
   background-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));

package/es/tag/style/index.less

@@ -7,6 +7,12 @@
 @colors: @tag-process-color, @tag-success-color, @tag-warning-color, @tag-error-color, @tag-end-color, @tag-expired-color;
 
 .@{tag-prefix-cls} {
+  &-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &-size-small {
     .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
   }
@@ -89,6 +95,9 @@
   // 图标设置外边距
   &-text {
     margin-left: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &-closable-disabled {

package/es/tag/tag.js

@@ -81,13 +81,17 @@ var InteranalTag = function InteranalTag(props, ref) {
   var tagRef = ref || thisTagRef; // 对children进行进一步处理 当标签包含图标时 文本内容需要用标签包裹设置外边距
 
   var handleChild = function handleChild(child) {
+    if (!child) return null;
+
     if (typeof child === 'string' && icon) {
       return /*#__PURE__*/React.createElement("span", {
         className: "".concat(tagPrefixCls, "-text")
       }, child);
     }
 
-    return child;
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(tagPrefixCls, "-ellipsis")
+    }, child);
   }; // 预设的颜色值
 
 

package/lib/checkbox/style/index.css

@@ -155,6 +155,9 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .kd-checkbox-children .kd-input-underline {
   background-color: transparent;

package/lib/checkbox/style/index.less

@@ -39,6 +39,9 @@
     align-items: center;
     z-index: 999;
     user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
     .kd-input-underline {
       background-color: transparent;

package/lib/config-provider/compDefaultProps.d.ts

@@ -188,7 +188,10 @@ declare const compDefaultProps: {
         disabled: boolean;
         popupOffset: number[];
     };
-    Message: {};
+    Message: {
+        closable: boolean;
+        duration: number;
+    };
     Notice: {};
     Notification: {};
     Pagination: {

package/lib/config-provider/compDefaultProps.js

@@ -212,7 +212,10 @@ var compDefaultProps = {
     disabled: false,
     popupOffset: [0, 0]
   },
-  Message: {},
+  Message: {
+    closable: false,
+    duration: 3000
+  },
   Notice: {},
   Notification: {},
   Pagination: {

package/lib/message/index.js

@@ -17,7 +17,7 @@ var _content = _interopRequireDefault(require("./content"));
 
 var defaultStyle = {};
 var defaultDuration = 3000;
-var defaultClosable = true;
+var defaultClosable = false;
 var defaultOffset = '40px';
 var defaultSuffixCls = 'message';
 var defaultPlacement = 'message';

package/lib/select/select.js

@@ -621,21 +621,16 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   var handleMaxTagHolder = (0, _react.useCallback)(function () {
     var maxTagPlaceholder = selectProps.maxTagPlaceholder;
-    var TagStyle = {
-      margin: '2px 8px 2px 0'
-    };
 
     if (typeof maxTagPlaceholder === 'function') {
       return /*#__PURE__*/_react.default.createElement(_index.Tag, {
         type: "edit",
-        style: TagStyle,
         size: size,
         disabled: disabled
       }, maxTagPlaceholder(mulOptions));
     } else {
       return /*#__PURE__*/_react.default.createElement(_index.Tag, {
         type: "edit",
-        style: TagStyle,
         size: size,
         disabled: disabled
       }, maxTagPlaceholder);
@@ -678,7 +673,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     var multipleCls = (0, _classnames.default)(commCls, (_classNames10 = {}, (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames10, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames10));
     var itemCls = (0, _classnames.default)((_classNames11 = {}, (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames11, (0, _concat.default)(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
     var TagStyle = {
-      margin: '2px 8px 2px 0'
+      margin: '2px 8px 2px 0',
+      maxWidth: '100%'
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: multipleCls,
@@ -687,7 +683,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       var label = item.label,
           value = item.value;
       return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement("span", {
-        key: value
+        key: value,
+        className: (0, _classnames.default)("".concat(selectPrefixCls, "-selection-tag"))
       }, /*#__PURE__*/_react.default.createElement(_index.Tag, {
         type: "edit",
         style: TagStyle,

package/lib/select/style/index.css

@@ -239,7 +239,6 @@
           box-sizing: border-box;
   background-color: transparent;
   cursor: pointer;
-  margin: 0 8px 2px 0;
   vertical-align: middle;
 }
 .kd-select-selector:hover .kd-select-icon-active {
@@ -393,19 +392,16 @@
   min-width: 75px;
 }
 .kd-select-item-option-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-      -ms-flex: auto;
-          flex: auto;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-select-item-option-content .kd-checkbox {
+  width: 100%;
+}
+.kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
+  display: inline-block;
+}
 .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
   background-color: var(--kd-c-select-color-background, #f5f5f5);
 }
@@ -455,13 +451,13 @@
           justify-content: center;
   margin-left: 8px;
 }
-.kd-select-single .kd-select-selection-search {
+.kd-select .kd-select-single .kd-select-selection-search {
   position: absolute;
   right: 28px;
   left: 0;
   height: 100%;
 }
-.kd-select-single .kd-select-selection-search-input {
+.kd-select .kd-select-single .kd-select-selection-search-input {
   outline: 0;
   border-radius: 0;
   border: none;
@@ -469,35 +465,41 @@
   height: 100%;
   width: 100%;
 }
-.kd-select-single-focused {
+.kd-select .kd-select-single .kd-select-selection-item {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-select .kd-select-single-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
-.kd-select-single-disabled {
+.kd-select .kd-select-single-disabled {
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-select-single-disabled:hover {
+.kd-select .kd-select-single-disabled:hover {
   cursor: not-allowed;
 }
-.kd-select-single-disabled .kd-select-suffix {
+.kd-select .kd-select-single-disabled .kd-select-suffix {
   color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
 }
-.kd-select-single:hover .kd-select-icon-clear {
+.kd-select .kd-select-single:hover .kd-select-icon-clear {
   opacity: 1;
 }
-.kd-select-single .kd-select-icon-clear {
+.kd-select .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 {
+.kd-select .kd-select-single .kd-select-icon-clear:hover {
   color: var(--kd-c-select-icon-clear-color-text-hover, #999);
 }
-.kd-select-single-text {
+.kd-select .kd-select-single-text {
   color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-select-single-disabled-text {
+.kd-select .kd-select-single-disabled-text {
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-select .kd-select-selection-item {
@@ -521,13 +523,13 @@
           user-select: none;
 }
 .kd-select .kd-select-selection-item-small {
-  height: 18px;
+  height: 20px;
   line-height: 18px;
   font-size: 12px;
 }
 .kd-select .kd-select-selection-item-middle {
   font-size: 12px;
-  height: 18px;
+  height: 20px;
   line-height: 18px;
 }
 .kd-select .kd-select-selection-item-large {
@@ -569,6 +571,13 @@
   width: 100%;
   min-width: 20px;
 }
+.kd-select-multiple .kd-select-selection-tag {
+  max-width: calc(100% - 5px);
+}
+.kd-select-multiple .kd-select-selection-tag .kd-tag {
+  margin: 2px 8px 2px 0;
+  max-width: 100%;
+}
 .kd-select-multiple .kd-select-selection-search {
   position: relative;
   max-width: 100%;

package/lib/select/style/index.less

@@ -10,7 +10,6 @@
   box-sizing: border-box;
   background-color: transparent;
   cursor: pointer;
-  margin: 0 8px 2px 0;
   vertical-align: middle;
 
   &-selector:hover {
@@ -158,10 +157,15 @@
       min-width: 75px;
 
       &-content {
-        display: flex;
-        align-items: center;
-        flex: auto;
         .over();
+
+        .@{kd-prefix}-checkbox {
+          width: 100%;
+
+          .@{kd-prefix}-checkbox-children {
+            display: inline-block;
+          }
+        }
       }
 
       &:hover:not(&-selected):not(&-disabled) {
@@ -208,7 +212,7 @@
     justify-content: center;
     margin-left: 8px;
   }
-  &-single {
+  .@{select-prefix-cls}-single {
     .@{select-prefix-cls}-selection {
       &-search {
         position: absolute;
@@ -224,6 +228,10 @@
           width: 100%;
         }
       }
+      &-item {
+        display: inline-block;
+        .over();
+      }
     }
     &-focused {
       .focusColor();
@@ -270,14 +278,14 @@
     cursor: default;
     user-select: none;
     &-small {
-      height: 18px;
+      height: 20px;
       line-height: 18px;
       font-size: 12px;
     }
 
     &-middle {
       font-size: 12px;
-      height: 18px;
+      height: 20px;
       line-height: 18px;
     }
 
@@ -320,6 +328,14 @@
   // 多选
   &-multiple {
     .@{select-prefix-cls}-selection {
+      &-tag {
+        max-width: calc(100% - 5px);
+
+        .@{kd-prefix}-tag {
+          margin: 2px 8px 2px 0;
+          max-width: 100%;
+        }
+      }
       &-search {
         position: relative;
         max-width: 100%;