@kdcloudjs/kdesign 1.5.4 → 1.5.7

package/es/_utils/usePopper.js

@@ -486,6 +486,11 @@ function usePopper(locatorElement, popperElement, props) {
     props.visible === undefined && setVisible(false);
     onVisibleChange && onVisibleChange(false);
   }, [onVisibleChange, props.visible]);
+
+  var matchTrigger = function matchTrigger(words) {
+    return Array.isArray(trigger) ? _includesInstanceProperty(trigger).call(trigger, words) : trigger === words;
+  };
+
   useEffect(function () {
     if (exist && visible) {
       var mouseleaveTimer;
@@ -502,13 +507,13 @@ function usePopper(locatorElement, popperElement, props) {
             Y = e.clientY;
         var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
         var inPopperRect = X > popperRect.left && X < popperRect.right && Y > popperRect.top && Y < popperRect.bottom;
-        var ableArea = evType === 'contextmenu' ? inPopperRect : inTriggerRect || inPopperRect;
+        var ableArea = matchTrigger('contextMenu') ? inPopperRect : inTriggerRect || inPopperRect;
 
         if (ableArea) {
           mouseleaveTimer && clearTimeout(mouseleaveTimer);
-          evType === 'focus' && triggerNode.focus();
+          matchTrigger('focus') && triggerNode.focus();
         } else {
-          evType === 'mouseenter' ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
+          matchTrigger('hover') ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
         }
       };
 
@@ -516,14 +521,18 @@ function usePopper(locatorElement, popperElement, props) {
         leading: true
       });
       var mapEvent = {
-        mouseenter: 'mousemove',
-        mouseup: 'mousedown',
+        hover: 'mousemove',
+        click: 'mousedown',
         focus: 'mousedown',
-        contextmenu: 'mousedown'
+        contextMenu: 'mousedown'
       };
-      document.addEventListener(mapEvent[evType], debounceHidePopper);
+      Array.isArray(trigger) ? trigger.forEach(function (action) {
+        return document.addEventListener(mapEvent[action], debounceHidePopper);
+      }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
       return function () {
-        document.removeEventListener(mapEvent[evType], debounceHidePopper);
+        Array.isArray(trigger) ? trigger.forEach(function (action) {
+          return document.removeEventListener(mapEvent[action], debounceHidePopper);
+        }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
       };
     }
   }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);

package/es/alert/alert.js

@@ -180,12 +180,12 @@ var Alert = function Alert(props) {
   };
 
   var iconNode = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(alertPrefixCls, "-icon")
+    className: classNames("".concat(alertPrefixCls, "-icon"), getAlertColorType('icon'))
   }, icon || /*#__PURE__*/React.createElement(Icon, {
     type: alertIconType
   }));
   var AlertComp = /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(alertClasses, getAlertColorType('bg'), getAlertColorType('font'))
+    className: classNames(alertClasses, getAlertColorType('bg'), getAlertColorType('border'))
   }, events, {
     ref: alertRef
   }), showIcon && iconNode, /*#__PURE__*/React.createElement("div", {

package/es/alert/style/index.css

@@ -109,12 +109,14 @@
   z-index: var(--kd-g-z-index-apex, 9999);
   display: none;
   width: 100%;
-  padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
+  padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transition: display 3s;
   transition: display 3s;
+  border-radius: var(--kd-c-alert-radius-border, 4px);
+  border: 1px solid;
 }
 .kd-alert-banner-container {
   display: -webkit-box;
@@ -140,23 +142,24 @@
 .kd-alert.alert-info-bg-color {
   background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
-.kd-alert.alert-success-font-color {
-  color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
+.kd-alert.alert-success-border-color {
+  border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
 }
-.kd-alert.alert-warning-font-color {
-  color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
+.kd-alert.alert-warning-border-color {
+  border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
 }
-.kd-alert.alert-error-font-color {
-  color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
+.kd-alert.alert-error-border-color {
+  border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
 }
-.kd-alert.alert-info-font-color {
-  color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
+.kd-alert.alert-info-border-color {
+  border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
 }
 .kd-alert-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   cursor: default;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
   font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
 }
@@ -164,9 +167,22 @@
   -ms-flex-item-align: center;
       align-self: center;
 }
+.kd-alert-icon.alert-success-icon-color {
+  color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
+}
+.kd-alert-icon.alert-warning-icon-color {
+  color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
+}
+.kd-alert-icon.alert-error-icon-color {
+  color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
+}
+.kd-alert-icon.alert-info-icon-color {
+  color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
+}
 .kd-alert-message {
+  color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
-  line-height: 18px;
+  line-height: 16px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -196,10 +212,10 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
   color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
   font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
-  justify-self: flex-end;
   cursor: pointer;
 }
 .kd-alert-close-icon:hover {

package/es/alert/style/index.less

@@ -16,11 +16,18 @@
   @info: @alert-info-bg-color;
 }
 
-.alert-font-type-set() {
-  @success: @alert-success-font-color;
-  @warning: @alert-warning-font-color;
-  @error: @alert-error-font-color;
-  @info: @alert-info-font-color;
+.alert-icon-type-set() {
+  @success: @alert-success-icon-color;
+  @warning: @alert-warning-icon-color;
+  @error: @alert-error-icon-color;
+  @info: @alert-info-icon-color;
+}
+
+.alert-border-type-set() {
+  @success: @alert-success-border-color;
+  @warning: @alert-warning-border-color;
+  @error: @alert-error-border-color;
+  @info: @alert-info-border-color;
 }
 
 @alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
@@ -36,9 +43,11 @@
     z-index: @z-index-apex;
     display: none;
     width: 100%;
-    padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
+    padding: @alert-padding-vertical @alert-padding-horizontal;
     align-items: center;
     transition: display 3s;
+    border-radius: @alert-radius-border;
+    border: 1px solid;
   }
   &-banner-container {
     display: flex;
@@ -50,19 +59,24 @@
   each(.alert-bg-type-set(), {
     .alert-bg-type(@key, @value);
   });
-  each(.alert-font-type-set(), {
-    .alert-font-type(@key, @value);
+  each(.alert-border-type-set(), {
+    .alert-border-type(@key, @value);
   });
   &-icon {
     display: flex;
     cursor: default;
     .icon-center();
+    height: @alert-message-icon-font-size;
     margin-right: @alert-message-icon-margin-right;
     font-size: @alert-message-icon-font-size;
+    each(.alert-icon-type-set(), {
+      .alert-icon-type(@key, @value);
+    });
   }
   &-message {
+    color: @alert-message-color-text;
     font-size: @alert-message-font-size;
-    line-height: 18px;
+    line-height: 16px;
     display: flex;
     flex-grow: 1;
     cursor: default;
@@ -86,10 +100,10 @@
   }
   &-close-icon {
     display: flex;
+    height: @alert-message-icon-font-size;
     margin-left: @alert-close-icon-margin-left;
     color: @alert-close-icon-color;
     font-size: @alert-close-icon-font-size;
-    justify-self: flex-end;
     cursor: pointer;
     &:hover {
       color: @alert-close-icon-color-hover;

package/es/alert/style/mixin.less

@@ -4,12 +4,18 @@
   }
 }
 
-.alert-font-type(@type, @color) {
-  &.alert-@{type}-font-color {
+.alert-icon-type(@type, @color) {
+  &.alert-@{type}-icon-color {
     color: @color
   }
 }
 
+.alert-border-type(@type, @color) {
+  &.alert-@{type}-border-color {
+    border-color: @color
+  }
+}
+
 .square(@side-length) {
   width: @side-length;
   height: @side-length;

package/es/alert/style/token.less

@@ -8,10 +8,16 @@
 @alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
 @alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
 
-@alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
-@alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色 
-@alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
-@alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
+@alert-message-color-text: var(~'@{alert-custom-prefix}-color-text', @color-text-primary); // 反馈浮层提示的文字色
+@alert-success-icon-color: var(~'@{alert-custom-prefix}-color-icon-success', @color-success); // 反馈浮层成功提示的图标颜色
+@alert-warning-icon-color: var(~'@{alert-custom-prefix}-color-icon-warning', @color-warning); // 反馈浮层警告提示的图标颜色
+@alert-error-icon-color: var(~'@{alert-custom-prefix}-color-icon-error', @color-error); // 反馈浮层错误提示的图标颜色
+@alert-info-icon-color: var(~'@{alert-custom-prefix}-color-icon-info', @color-ongoing); // 反馈浮层一般提示的图标颜色
+
+@alert-success-border-color: var(~'@{alert-custom-prefix}-color-border-success', #DCFAE4); // 反馈浮层成功提示的边框色
+@alert-warning-border-color: var(~'@{alert-custom-prefix}-color-border-warning', #FFF1D4); // 反馈浮层警告提示的边框色 
+@alert-error-border-color: var(~'@{alert-custom-prefix}-color-border-error', #FFDBE0); // 反馈浮层错误提示的边框色
+@alert-info-border-color: var(~'@{alert-custom-prefix}-color-border-info', #E0EFFF); // 反馈浮层一般提示的边框色
 
 @alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary); 
 @alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover); 
@@ -22,8 +28,10 @@
 @alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
 
 // spacing
-@alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
-@alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
-@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
+@alert-padding-vertical: var(~'@{alert-custom-prefix}-sizing-padding-vertical', 12px);
+@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 20px);
 @alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
-@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+
+// radius
+@alert-radius-border: var(~'@{alert-custom-prefix}-radius-border', 4px);

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

@@ -305,6 +305,7 @@ declare const compDefaultProps: {
         virtual: boolean;
         switcherIcon: () => JSX.Element;
         estimatedItemSize: number;
+        expandOnClickNode: boolean;
     };
     TreeNode: {};
     ToolTip: {

package/es/config-provider/compDefaultProps.js

@@ -319,7 +319,8 @@ var compDefaultProps = {
         type: "arrow-right-solid"
       });
     },
-    estimatedItemSize: 32
+    estimatedItemSize: 32,
+    expandOnClickNode: true
   },
   TreeNode: {},
   ToolTip: {

package/es/dropdown/style/index.css

@@ -137,10 +137,10 @@
   opacity: 1;
   visibility: visible;
   z-index: var(--kd-g-z-index-popper, 1050);
-  background-color: var(--kd-g-color-background, #fff);
+  background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
-  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
-  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
+  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
+  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
@@ -151,7 +151,7 @@
 .kd-dropdown.arrow::before {
   position: absolute;
   z-index: -2;
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -166,7 +166,7 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-dropdown.arrow.bottomLeft::before,
@@ -176,7 +176,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
+  border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -203,11 +203,11 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
+  border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown-menu {
-  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
-  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
+  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
+  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
   overflow-y: auto;
 }
 .kd-dropdown-menu-item {
@@ -234,12 +234,11 @@
 }
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
-  color: var(--kd-g-color-theme, #5582f3);
-  background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item:not(.disabled):active > a,
 .kd-dropdown-menu-item:not(.disabled).selected > a {
-  color: var(--kd-g-color-theme, #5582f3);
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item.divided::before {
   content: '';

package/es/dropdown/style/index.less

@@ -37,7 +37,7 @@
   opacity: 1;
   visibility: visible;
   z-index: @z-index-popper;
-  background-color: @color-background;
+  background-color: @dropdown-color-background;
   border-radius: @radius-border;
   min-width: @dropdown-menu-min-width;
   max-width: @dropdown-menu-max-width;
@@ -49,7 +49,7 @@
   }
 
   // 箭头样式
-  .popperArrow(@color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
+  .popperArrow(@dropdown-color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
 
   &-menu {
     max-height: @dropdown-menu-max-height;
@@ -80,11 +80,10 @@
 
       &:not(.disabled):active,
       &:not(.disabled).selected {
-        color: @color-theme;
-        background-color: @dropdown-item-active-bg-color;
+        color: @dropdown-item-active-color;
 
         > a {
-          color: @color-theme;
+          color: @dropdown-item-active-color;
         }
       }
 

package/es/dropdown/style/token.less

@@ -4,22 +4,23 @@
 
 // color
 @dropdown-item-hover-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-hover', @color-hover);
-@dropdown-item-active-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-active', @color-theme-light-active);
+@dropdown-item-active-color: var(~'@{dropdown-custom-prefix}-item-color-text-active', @color-theme);
 @dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
 @dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
 @dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
 @dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
 @dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
 @dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
+@dropdown-color-background: var(~'@{dropdown-custom-prefix}-menu-color-background', @color-background);
 
 // sizing
-@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 136px);
-@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 320px);
-@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 336px);
+@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 64px);
+@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 600px);
+@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 328px);
 @dropdown-divided-height: var(~'@{dropdown-custom-prefix}-divided-sizing-height', 1px);
 
 // spacing
-@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 8px);
+@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 4px);
 @dropdown-item-vertical-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-vertical', 7px);
 @dropdown-item-horizontal-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-horizontal', 12px);
 

package/es/radio/style/index.css

@@ -284,6 +284,9 @@
   width: 100%;
   height: 100%;
 }
+.kd-radio-square-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-square:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -391,6 +394,9 @@
   cursor: pointer;
   opacity: 0;
 }
+.kd-radio-button-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-button:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }

package/es/radio/style/index.less

@@ -179,6 +179,10 @@
     opacity: 0;
     width: 100%;
     height: 100%;
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -289,6 +293,10 @@
     z-index: 1;
     cursor: pointer;
     opacity: 0;
+
+    &[disabled]{
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态

package/es/search/style/index.css

@@ -483,13 +483,13 @@
           animation: animate_loading 1s infinite;
 }
 .kd-quick-search-npl-loading-item:nth-child(1) {
-  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2386ee));
+  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2486ee));
 }
 .kd-quick-search-npl-loading-item:nth-child(2) {
-  background-color: #00ccfe;
+  background-color: #02ccfe;
 }
 .kd-quick-search-npl-loading-item:nth-child(3) {
-  background-color: #05c8c8;
+  background-color: #05c8c7;
 }
 .kd-quick-search-npl-loading-item:nth-child(4) {
   background-color: #a06eff;

package/es/spin/style/index.css

@@ -102,9 +102,9 @@
 */
 /* -----------  zIndex  ——————---- end */
 .kd-spin-page .kd-spin-dot-spin {
-  width: 50px;
-  height: 50px;
-  padding: 5px;
+  width: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  height: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  padding: var(--kd-c-spin-page-dot-spin-spacing-padding, 4px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -119,23 +119,22 @@
       align-content: space-between;
 }
 .kd-spin-page .kd-spin-dot-item {
-  width: var(--kd-c-spin-page-sizing, 15px);
-  height: var(--kd-c-spin-page-sizing, 15px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  height: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
-  margin-right: 10px;
   -webkit-animation: pageLoading 1s 0.3s ease-in-out infinite;
           animation: pageLoading 1s 0.3s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
           animation: pageLoading 1s 0.2s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
           animation: pageLoading 1s 0.1s ease-in-out infinite;
 }
@@ -146,8 +145,8 @@
 }
 @-webkit-keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -156,8 +155,8 @@
 }
 @keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -178,9 +177,9 @@
           align-items: flex-end;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
-  width: var(--kd-c-spin-dot-container-sizing, 5px);
-  height: var(--kd-c-spin-dot-container-sizing, 5px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  height: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
@@ -188,12 +187,12 @@
           animation: containerLoading 1s 0.6s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
           animation: containerLoading 1s 0.45s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
           animation: containerLoading 1s 0.3s ease-in-out infinite;
 }
@@ -223,25 +222,25 @@
   }
 }
 .kd-spin-component .kd-spin-dot-spin {
-  width: 13px;
-  height: 13px;
-  border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1);
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid var(--kd-c-spin-component-dot-color-border, #ebebeb);
   border-radius: 50%;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
-  width: 13px;
-  height: 13px;
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px solid transparent;
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid transparent;
   border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   position: absolute;
-  top: -1px;
-  left: -1px;
+  top: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
+  left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-animation: componentRotate 1s linear infinite;