@kdcloudjs/kdesign 1.6.4 → 1.6.6

package/lib/input/TextArea.d.ts

@@ -5,6 +5,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     borderType?: BorderType;
     defaultValue?: string;
     count?: boolean;
+    countPosition?: string;
     value?: any;
     canResize?: boolean;
     disabled?: boolean;

package/lib/input/TextArea.js

@@ -13,10 +13,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
@@ -81,6 +81,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       borderType = textAreaProps.borderType,
       defaultValue = textAreaProps.defaultValue,
       count = textAreaProps.count,
+      countPosition = textAreaProps.countPosition,
       autoSize = textAreaProps.autoSize,
       className = textAreaProps.className,
       customPrefixcls = textAreaProps.prefixCls,
@@ -93,7 +94,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       placeholder = textAreaProps.placeholder,
       style = textAreaProps.style,
       size = textAreaProps.size,
-      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
 
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
 
@@ -148,7 +149,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   };
 
   var handleBlur = function handleBlur(e) {
-    showNumberMark && setShowNumberMark(false);
+    // showNumberMark && setShowNumberMark(false)
     onBlur && onBlur(e);
   };
 
@@ -177,8 +178,9 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     }
 
     if (count && showNumberMark && !disabled && maxLength !== '' && maxLength >= 0) {
+      var countClass = (0, _classnames.default)("".concat(textAreaPrefixCls, "-textarea-mark"), (0, _defineProperty2.default)({}, "".concat(textAreaPrefixCls, "-textarea-mark-inner"), countPosition === 'inner'));
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(textAreaPrefixCls, "-textarea-mark")
+        className: countClass
       }, enteredLength, "/", maxLength);
     }
 
@@ -195,7 +197,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   }, [propsValue, setValue]);
 
   var renderTextArea = function renderTextArea(prefixCls) {
-    var _context, _classNames, _context2;
+    var _context, _classNames2, _context2;
 
     var hadCount = count && !disabled && !allowClear;
 
@@ -227,7 +229,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
+      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/lib/input/style/index.css

@@ -205,6 +205,13 @@ textarea {
   z-index: 1;
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
   font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  line-height: 18px;
+  background-color: #fff;
+}
+.kd-input-textarea-mark-inner {
+  top: auto;
+  bottom: 5px;
+  right: 8px;
 }
 .kd-input-no-resize {
   resize: none;
@@ -225,7 +232,7 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
@@ -318,7 +325,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -472,7 +479,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;

package/lib/input/style/index.less

@@ -37,7 +37,14 @@ textarea {
 			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;

package/lib/input/style/token.less

@@ -13,7 +13,7 @@
 @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-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
-@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/lib/locale/locale.d.ts

@@ -37,6 +37,8 @@ declare class LocaleCache {
         'Pagination.prevPage': string;
         'Pagination.nextPage': string;
         'Pagination.total': string;
+        'Pagination.page': string;
+        'Pagination.row': string;
         'Pagination.first': string;
         'Pagination.last': string;
         'Pagination.perPage': string;
@@ -62,9 +64,6 @@ declare class LocaleCache {
         'CityPicker.internation': string;
         'CityPicker.common': string;
         'CityPicker.noData': string;
-        /**
-         * 获取所有语言包数据
-         */
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/lib/locale/zh-CN.d.ts

@@ -11,6 +11,8 @@ declare const locale: {
     'Pagination.prevPage': string;
     'Pagination.nextPage': string;
     'Pagination.total': string;
+    'Pagination.page': string;
+    'Pagination.row': string;
     'Pagination.first': string;
     'Pagination.last': string;
     'Pagination.perPage': string;

package/lib/locale/zh-CN.js

@@ -25,7 +25,9 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
   'Progress.success': '加载成功',
   'Pagination.prevPage': '上一页',
   'Pagination.nextPage': '下一页',
-  'Pagination.total': '共{total}页',
+  'Pagination.total': '共{page}页{row}条',
+  'Pagination.page': '共{page}页',
+  'Pagination.row': '共{row}条',
   'Pagination.first': '第一页',
   'Pagination.last': '最后一页',
   'Pagination.perPage': '{size}条/页',

package/lib/pagination/pagination.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { DropDownProps } from '../dropdown';
 export declare const PageTypes: ["basic", "bill", "simple", "less", "nicety"];
+export declare const TotalTypes: ["page", "row", "all"];
 export declare type pageType = typeof PageTypes[number];
+export declare type totalType = typeof TotalTypes[number];
 export interface IPaginationProps {
     total?: number;
     current?: number;
@@ -12,6 +14,7 @@ export interface IPaginationProps {
     bordered?: boolean;
     pageType?: pageType;
     showTitle?: boolean;
+    showTotal?: boolean | totalType;
     defaultCurrent?: number;
     defaultPageSize?: number;
     showSizeChanger?: boolean;

package/lib/pagination/pagination.js

@@ -11,7 +11,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PageTypes = void 0;
+exports.default = exports.TotalTypes = exports.PageTypes = void 0;
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
@@ -55,6 +55,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var PageTypes = (0, _type.tuple)('basic', 'bill', 'simple', 'less', 'nicety');
 exports.PageTypes = PageTypes;
+var TotalTypes = (0, _type.tuple)('page', 'row', 'all');
+exports.TotalTypes = TotalTypes;
 
 var Pagination = function Pagination(props) {
   var _context4;
@@ -236,14 +238,30 @@ var Pagination = function Pagination(props) {
       size: size
     }));
   }));
+  var mapShowTotal = {
+    basic: 'page',
+    nicety: 'row'
+  };
+  var mapTotalText = {
+    page: locale.getLangMsg('Pagination', 'page', {
+      page: totalPage
+    }),
+    row: locale.getLangMsg('Pagination', 'row', {
+      row: total
+    }),
+    all: locale.getLangMsg('Pagination', 'total', {
+      page: totalPage,
+      row: total
+    })
+  };
+  var showTotal = props.showTotal ? props.showTotal === true ? 'page' : props.showTotal : mapShowTotal[pageType];
+  var Total = showTotal && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-total")
+  }, mapTotalText[showTotal]);
   var normalPagination = /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)(prefixCls, className),
     style: style
-  }, pageType === 'basic' && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-total")
-  }, locale.getLangMsg('Pagination', 'total', {
-    total: totalPage
-  })), showJumper && /*#__PURE__*/React.createElement("span", {
+  }, Total, showJumper && /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, locale.getLangMsg('Pagination', 'order', {
     order: /*#__PURE__*/React.createElement("input", {
@@ -304,18 +322,20 @@ var Pagination = function Pagination(props) {
     type: "arrow-down",
     className: (0, _classnames.default)("".concat(prefixCls, "-dropdown-icon"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-dropdown-icon-open"), isOpen))
   })))));
-  var simplePagination = /*#__PURE__*/React.createElement("ul", {
-    className: (0, _classnames.default)(prefixCls, 'simple', {
+  var simplePagination = /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(prefixCls, 'simple', className),
+    style: style
+  }, Total, /*#__PURE__*/React.createElement("ul", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-action"), {
       bordered: bordered,
       disabled: disabled
-    }, className),
-    style: style
-  }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
+    })
+  }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
     disabled: page === 1 || disabled
   }, /*#__PURE__*/React.createElement(_icon.default, {
     type: "arrow-left"
-  }))), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', (0, _concat.default)(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', (0, _concat.default)(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, showJumper ? /*#__PURE__*/React.createElement("input", {
     type: "text",
@@ -327,12 +347,12 @@ var Pagination = function Pagination(props) {
     value: inputPage === undefined ? page : inputPage
   }) : page), "/ ", /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-total")
-  }, totalPage)), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
+  }, totalPage)), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handleNext,
     disabled: page === totalPage || disabled
   }, /*#__PURE__*/React.createElement(_icon.default, {
     type: "arrow-right"
-  }))));
+  })))));
   var lessPages = genArray(1, totalPage);
   var lessPagination = /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)(prefixCls, 'less', {
@@ -340,7 +360,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
@@ -385,7 +405,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,

package/lib/pagination/style/index.css

@@ -292,7 +292,7 @@
 .kd-pagination .kd-pagination-selector .kd-dropdown-menu-item span {
   white-space: nowrap;
 }
-.kd-pagination.simple {
+.kd-pagination.simple .kd-pagination-action {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -305,22 +305,22 @@
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
 }
-.kd-pagination.simple.bordered {
+.kd-pagination.simple .kd-pagination-action.bordered {
   border-color: var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
-.kd-pagination.simple.bordered:active:not(.disabled) {
+.kd-pagination.simple .kd-pagination-action.bordered:active:not(.disabled) {
   border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
-.kd-pagination.simple.bordered.disabled,
-.kd-pagination.simple.bordered.disabled > .kd-pagination-item > button {
+.kd-pagination.simple .kd-pagination-action.bordered.disabled,
+.kd-pagination.simple .kd-pagination-action.bordered.disabled > .kd-pagination-item > button {
   background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
-.kd-pagination.simple.disabled > .kd-pagination-item {
+.kd-pagination.simple .kd-pagination-action.disabled > .kd-pagination-action-item {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item {
+.kd-pagination.simple .kd-pagination-action-item {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 0;
@@ -336,26 +336,29 @@
   vertical-align: middle;
   color: var(--kd-g-color-text-primary, #212121);
 }
-.kd-pagination.simple .kd-pagination-item:first-child,
-.kd-pagination.simple .kd-pagination-item:last-child {
+.kd-pagination.simple .kd-pagination-action-item:first-child,
+.kd-pagination.simple .kd-pagination-action-item:last-child {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current {
   margin-right: 2px;
   vertical-align: middle;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input:disabled {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input:disabled {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-total {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-total {
   vertical-align: middle;
   margin-right: 0;
 }
-.kd-pagination.simple .kd-pagination-item button {
+.kd-pagination.simple .kd-pagination-action-item.bordered > button {
+  border: none;
+}
+.kd-pagination.simple .kd-pagination-action-item button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
@@ -370,21 +373,21 @@
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
-.kd-pagination.simple .kd-pagination-item button:hover:not(:disabled),
-.kd-pagination.simple .kd-pagination-item button:active:not(:disabled) {
+.kd-pagination.simple .kd-pagination-action-item button:hover:not(:disabled),
+.kd-pagination.simple .kd-pagination-action-item button:active:not(:disabled) {
   border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
-.kd-pagination.simple .kd-pagination-item button:hover i,
-.kd-pagination.simple .kd-pagination-item button:active i {
+.kd-pagination.simple .kd-pagination-action-item button:hover i,
+.kd-pagination.simple .kd-pagination-action-item button:active i {
   color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-pagination.simple .kd-pagination-item button:disabled {
+.kd-pagination.simple .kd-pagination-action-item button:disabled {
   cursor: not-allowed;
 }
-.kd-pagination.simple .kd-pagination-item button:disabled i {
+.kd-pagination.simple .kd-pagination-action-item button:disabled i {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item button i {
+.kd-pagination.simple .kd-pagination-action-item button i {
   position: absolute;
   top: 0;
   right: 0;

package/lib/pagination/style/index.less

@@ -186,107 +186,113 @@
 
   // 简化版分页
   &.simple {
-    display: inline-flex;
-    justify-content: space-around;
-    align-items: center;
-    height: @pagination-size;
-    border-radius: @radius-border;
-    border: @pagination-border-size solid transparent;
+    .@{pagination-prefix-cls}-action {
+      display: inline-flex;
+      justify-content: space-around;
+      align-items: center;
+      height: @pagination-size;
+      border-radius: @radius-border;
+      border: @pagination-border-size solid transparent;
 
-    &.bordered {
-      border-color: @pagination-border-color;
-      transition: border-color @duration-promptly;
+      &.bordered {
+        border-color: @pagination-border-color;
+        transition: border-color @duration-promptly;
 
-      &:active:not(.disabled) {
-        border-color: @pagination-border-hover-color;
-      }
+        &:active:not(.disabled) {
+          border-color: @pagination-border-hover-color;
+        }
 
-      &.disabled,
-      &.disabled > .@{pagination-prefix-cls}-item > button {
-        background-color: @pagination-button-disabled-background-color;
+        &.disabled,
+        &.disabled > .@{pagination-prefix-cls}-item > button {
+          background-color: @pagination-button-disabled-background-color;
+        }
       }
-    }
-
-    &.disabled > .@{pagination-prefix-cls}-item {
-      color: @pagination-disabled-color;
-    }
-
-    .@{pagination-prefix-cls}-item {
-      .reset-component;
-      display: inline-block;
-      height: @pagination-size;
-      overflow: hidden;
-      margin: 0 8px;
-      vertical-align: middle;
-      color: @color-text-primary;
 
-      &:first-child,
-      &:last-child {
-        margin: 0;
+      &.disabled > .@{pagination-prefix-cls}-action-item {
+        color: @pagination-disabled-color;
       }
 
-      .@{pagination-prefix-cls}-current {
-        margin-right: 2px;
+      &-item {
+        .reset-component;
+        display: inline-block;
+        height: @pagination-size;
+        overflow: hidden;
+        margin: 0 8px;
         vertical-align: middle;
+        color: @color-text-primary;
 
-        .@{pagination-prefix-cls}-current-input {
+        &:first-child,
+        &:last-child {
           margin: 0;
+        }
 
-          &:disabled {
-            color: @pagination-disabled-color;
-            cursor: not-allowed;
+        .@{pagination-prefix-cls}-current {
+          margin-right: 2px;
+          vertical-align: middle;
+
+          .@{pagination-prefix-cls}-current-input {
+            margin: 0;
+
+            &:disabled {
+              color: @pagination-disabled-color;
+              cursor: not-allowed;
+            }
           }
         }
-      }
 
-      .@{pagination-prefix-cls}-total {
-        vertical-align: middle;
-        margin-right: 0;
-      }
+        .@{pagination-prefix-cls}-total {
+          vertical-align: middle;
+          margin-right: 0;
+        }
 
-      button {
-        box-sizing: border-box;
-        position: relative;
-        width: calc(@pagination-size - 2px);
-        height: calc(@pagination-size - 2px);
-        border: none;
-        background-color: @color-background;
-        border-radius: @radius-border;
-        cursor: pointer;
-        outline: none;
-        vertical-align: middle;
-        transition: border-color @duration-promptly;
+        &.bordered > button {
+          border: none;
+        }
 
-        &:hover,
-        &:active {
-          &:not(:disabled) {
-            border-color: @pagination-border-hover-color;
-          }
+        button {
+          box-sizing: border-box;
+          position: relative;
+          width: calc(@pagination-size - 2px);
+          height: calc(@pagination-size - 2px);
+          border: none;
+          background-color: @color-background;
+          border-radius: @radius-border;
+          cursor: pointer;
+          outline: none;
+          vertical-align: middle;
+          transition: border-color @duration-promptly;
 
-          i {
-            color: @pagination-hover-color;
+          &:hover,
+          &:active {
+            &:not(:disabled) {
+              border-color: @pagination-border-hover-color;
+            }
+
+            i {
+              color: @pagination-hover-color;
+            }
           }
-        }
 
-        &:disabled {
-          cursor: not-allowed;
+          &:disabled {
+            cursor: not-allowed;
 
-          i {
-            color: @pagination-disabled-color;
+            i {
+              color: @pagination-disabled-color;
+            }
           }
-        }
 
-        i {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          margin: auto;
-          line-height: calc(@pagination-size - 2px);
-          font-size: @pagination-icon-size;
-          color: @pagination-icon-color;
-          transition: color @duration-promptly;
+          i {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: auto;
+            line-height: calc(@pagination-size - 2px);
+            font-size: @pagination-icon-size;
+            color: @pagination-icon-color;
+            transition: color @duration-promptly;
+          }
         }
       }
     }

package/lib/rate/rate.js

@@ -84,7 +84,7 @@ var Rate = function Rate(props) {
 
 
   React.useEffect(function () {
-    if (value && value !== 0 && value !== selectedValue) {
+    if (value !== undefined && value !== selectedValue) {
       setSelectedValue(value);
     }
   }, [value, selectedValue]); // const shouldSetValue = (value: number) => {

package/lib/rate/style/index.css

@@ -120,13 +120,13 @@
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.kd-rate-size-large {
+.kd-rate-size-large .kdicon {
   font-size: var(--kd-c-rate-font-size-large, 20px);
 }
-.kd-rate-size-middle {
+.kd-rate-size-middle .kdicon {
   font-size: var(--kd-c-rate-font-size-middle, 16px);
 }
-.kd-rate-size-small {
+.kd-rate-size-small .kdicon {
   font-size: var(--kd-c-rate-font-size-small, 12px);
 }
 .kd-rate-item {