@kdcloudjs/kdesign 1.8.29 → 1.8.30

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { LocaleConfigType, CompLangMsgParams, ComponentType } from '../locale';
+export declare const DirectionTypes: ["ltr", "rtl"];
+export declare type DirectionType = typeof DirectionTypes[number];
 interface IntlUniversal {
     getCompLangMsg: (compLangMsgParams: CompLangMsgParams, customGetLangMsg?: (componentName: string, labelName: string, params: any) => any) => any;
     getLangMsg: (componentName: ComponentType | string, labelName: string, params?: any) => string | React.ReactNode[];
@@ -10,6 +12,7 @@ export interface IConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale?: IntlUniversal;
+    direction?: DirectionType;
 }
 export interface IContextConfigProps {
     getPrefixCls?: (configPrefixCls?: string, suffixCls?: string, customizePrefixCls?: string) => string;
@@ -17,6 +20,7 @@ export interface IContextConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale: IntlUniversal;
+    direction?: DirectionType;
 }
 declare const ConfigContext: import("react").Context<IContextConfigProps>;
 export default ConfigContext;

package/es/config-provider/ConfigContext.js

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
 import defaultConfig from './defaultConfig';
+import { tuple } from '../_utils/type';
+export var DirectionTypes = tuple('ltr', 'rtl');
 var ConfigContext = createContext(defaultConfig);
 export default ConfigContext;

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

@@ -6,5 +6,6 @@ declare const defaultConfig: {
         getLangMsg: (componentName: string, labelName: string, params?: any) => string | import("react").ReactNode[];
         getCompLangMsg: (compLangMsgParams: import("../locale").CompLangMsgParams, customGetLangMsg?: ((componentName: string, labelName: string, params: any) => any) | undefined, localeDate?: any) => any;
     };
+    direction: "ltr" | "rtl";
 };
 export default defaultConfig;

package/es/config-provider/defaultConfig.js

@@ -12,6 +12,7 @@ var defaultConfig = {
   locale: {
     getLangMsg: getLangMsg,
     getCompLangMsg: getCompLangMsg
-  }
+  },
+  direction: 'ltr'
 };
 export default defaultConfig;

package/es/pagination/pagination.js

@@ -21,7 +21,8 @@ var Pagination = function Pagination(props) {
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps,
-    locale = _React$useContext.locale;
+    locale = _React$useContext.locale,
+    direction = _React$useContext.direction;
   var paginationLangMsg = locale.getCompLangMsg({
     componentName: 'Pagination'
   });
@@ -48,6 +49,7 @@ var Pagination = function Pagination(props) {
     customPrefixcls = _getCompProps.prefixCls;
   devWarning(PageTypes.indexOf(pageType) === -1, 'Pagination', "cannot found pageType '".concat(pageType, "'"));
   var prefixCls = getPrefixCls(pkgPrefixCls, 'pagination', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var _React$useState = React.useState(pageSize || defaultPageSize),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     size = _React$useState2[0],
@@ -77,25 +79,25 @@ var Pagination = function Pagination(props) {
     setIsOpen = _React$useState8[1];
   var innerIcon = _extends({
     first: React.createElement(Icon, {
-      type: "first"
+      type: "".concat(direction === 'rtl' ? 'last' : 'first')
     }),
     last: React.createElement(Icon, {
-      type: "last"
+      type: "".concat(direction === 'rtl' ? 'first' : 'last')
     }),
     prev: React.createElement(Icon, {
-      type: "arrow-left"
+      type: "arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     next: React.createElement(Icon, {
-      type: "arrow-right"
+      type: "arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     }),
     down: React.createElement(Icon, {
       type: "arrow-down"
     }),
     jumpPrev: React.createElement(Icon, {
-      type: "double-arrow-left"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     jumpNext: React.createElement(Icon, {
-      type: "double-arrow-right"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     })
   }, icons || {});
   var handleChangeSize = function handleChangeSize(key) {
@@ -193,7 +195,7 @@ var Pagination = function Pagination(props) {
     className: "".concat(prefixCls, "-total")
   }, mapTotalText[showTotal]);
   var normalPagination = React.createElement("div", {
-    className: classNames(prefixCls, className),
+    className: classNames(prefixCls, rtlCls, className),
     style: style
   }, Total, showJumper && React.createElement("span", {
     className: "".concat(prefixCls, "-current")
@@ -228,7 +230,7 @@ var Pagination = function Pagination(props) {
     selectedKey: size,
     menu: sizeOptions,
     trigger: "click",
-    placement: "bottomRight",
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     disabled: disabled,
     prefix: "".concat(prefixCls, "-dropdown"),
     popperStyle: {
@@ -246,7 +248,7 @@ var Pagination = function Pagination(props) {
     size: size
   })), innerIcon.down))));
   var simplePagination = React.createElement("div", {
-    className: classNames(prefixCls, 'simple', className),
+    className: classNames(prefixCls, rtlCls, 'simple', className),
     style: style
   }, Total, React.createElement("ul", {
     className: classNames("".concat(prefixCls, "-action"), {
@@ -276,7 +278,7 @@ var Pagination = function Pagination(props) {
   var lessPagination = null;
   if (pageType === 'less') {
     lessPagination = React.createElement("div", {
-      className: classNames(prefixCls, 'less', {
+      className: classNames(prefixCls, rtlCls, 'less', {
         bordered: bordered,
         disabled: disabled
       }, className),
@@ -314,7 +316,7 @@ var Pagination = function Pagination(props) {
     page >= 5 && nicetyPages.unshift(1, '<<');
   }
   var nicetyPagination = React.createElement("div", {
-    className: classNames(prefixCls, 'nicety', {
+    className: classNames(prefixCls, rtlCls, 'nicety', {
       bordered: bordered,
       disabled: disabled
     }, className),
@@ -371,7 +373,8 @@ var Pagination = function Pagination(props) {
       onItemClick: handleChangeSize,
       getPopupContainer: function getPopupContainer(triggerNode) {
         return triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.parentElement;
-      }
+      },
+      placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft'
     }, dropdownProps, {
       onVisibleChange: dropdownVisibleChange
     }), React.createElement("button", {

package/es/pagination/style/index.css

@@ -815,3 +815,75 @@
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.kd-pagination-rtl {
+  direction: rtl;
+}
+.kd-pagination-rtl .kd-pagination-total {
+  margin-left: 12px;
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered {
+  margin-left: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector .kd-pagination-selector-size i {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 2px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-total {
+  margin-left: 0;
+  margin-right: 2px;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options {
+  margin-right: 22px;
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size {
+  margin-right: 0;
+  margin-left: 8px;
+  padding: 0 4px 0 24px;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size i {
+  left: 5px;
+  right: auto;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-dropdown-menu-item > span {
+  text-align: right;
+}

package/es/pagination/style/index.less

@@ -617,3 +617,102 @@
     }
   }
 }
+
+.@{pagination-prefix-cls}-rtl {
+  direction: rtl;
+  .@{pagination-prefix-cls}-total {
+    margin-left: 12px;
+    margin-right: 0;
+  }
+  .@{pagination-prefix-cls}-current {
+    margin-right: 0;
+    margin-left: 12px;
+  }
+  .@{pagination-action-prefix-cls} {
+    .@{pagination-action-prefix-cls}-item {
+      &.bordered {
+        margin-left: calc(2 * @pagination-button-spacing);
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  .@{pagination-selector-prefix-cls} {
+    margin-right: 20px;
+    margin-left: 0;
+    .@{pagination-selector-prefix-cls}-size {
+      i {
+        margin-left: 0;
+        margin-right: 4px;
+      }
+    }
+  }
+  &.simple {
+    .@{pagination-prefix-cls}-action {
+      &-item {
+        .@{pagination-prefix-cls}-current {
+          margin-right: 0;
+          margin-left: 2px;
+        }
+        .@{pagination-prefix-cls}-total {
+          margin-left: 0;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  &.less {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  &.nicety {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .@{pagination-jumper-prefix-cls} {
+      margin-right: @pagination-button-spacing;
+      margin-left: 0;
+      .@{pagination-jumper-prefix-cls}-button {
+        margin-right: @pagination-button-spacing;
+        margin-left: 0;
+      }
+    }
+    .@{pagination-options-prefix-cls} {
+      margin-right: 22px;
+      margin-left: 0;
+      .@{pagination-options-prefix-cls}-size {
+        margin-right: 0;
+        margin-left: 8px;
+        padding: 0 4px 0 24px;
+        i {
+          left: 5px;
+          right: auto;
+        }
+      }
+      .@{kd-prefix}-dropdown {
+        &-menu {
+          &-item {
+            & > span {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { LocaleConfigType, CompLangMsgParams, ComponentType } from '../locale';
+export declare const DirectionTypes: ["ltr", "rtl"];
+export declare type DirectionType = typeof DirectionTypes[number];
 interface IntlUniversal {
     getCompLangMsg: (compLangMsgParams: CompLangMsgParams, customGetLangMsg?: (componentName: string, labelName: string, params: any) => any) => any;
     getLangMsg: (componentName: ComponentType | string, labelName: string, params?: any) => string | React.ReactNode[];
@@ -10,6 +12,7 @@ export interface IConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale?: IntlUniversal;
+    direction?: DirectionType;
 }
 export interface IContextConfigProps {
     getPrefixCls?: (configPrefixCls?: string, suffixCls?: string, customizePrefixCls?: string) => string;
@@ -17,6 +20,7 @@ export interface IContextConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale: IntlUniversal;
+    direction?: DirectionType;
 }
 declare const ConfigContext: import("react").Context<IContextConfigProps>;
 export default ConfigContext;

package/lib/config-provider/ConfigContext.js

@@ -4,9 +4,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DirectionTypes = void 0;
 var _react = require("react");
 var _defaultConfig = _interopRequireDefault(require("./defaultConfig"));
+var _type = require("../_utils/type");
+var DirectionTypes = (0, _type.tuple)('ltr', 'rtl');
+exports.DirectionTypes = DirectionTypes;
 var ConfigContext = (0, _react.createContext)(_defaultConfig.default);
 var _default = ConfigContext;
 exports.default = _default;

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

@@ -6,5 +6,6 @@ declare const defaultConfig: {
         getLangMsg: (componentName: string, labelName: string, params?: any) => string | import("react").ReactNode[];
         getCompLangMsg: (compLangMsgParams: import("../locale").CompLangMsgParams, customGetLangMsg?: ((componentName: string, labelName: string, params: any) => any) | undefined, localeDate?: any) => any;
     };
+    direction: "ltr" | "rtl";
 };
 export default defaultConfig;

package/lib/config-provider/defaultConfig.js

@@ -19,7 +19,8 @@ var defaultConfig = {
   locale: {
     getLangMsg: _locale.getLangMsg,
     getCompLangMsg: _locale.getCompLangMsg
-  }
+  },
+  direction: 'ltr'
 };
 var _default = defaultConfig;
 exports.default = _default;

package/lib/pagination/pagination.js

@@ -35,7 +35,8 @@ var Pagination = function Pagination(props) {
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps,
-    locale = _React$useContext.locale;
+    locale = _React$useContext.locale,
+    direction = _React$useContext.direction;
   var paginationLangMsg = locale.getCompLangMsg({
     componentName: 'Pagination'
   });
@@ -62,6 +63,7 @@ var Pagination = function Pagination(props) {
     customPrefixcls = _getCompProps.prefixCls;
   (0, _devwarning.default)(PageTypes.indexOf(pageType) === -1, 'Pagination', "cannot found pageType '".concat(pageType, "'"));
   var prefixCls = getPrefixCls(pkgPrefixCls, 'pagination', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var _React$useState = React.useState(pageSize || defaultPageSize),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     size = _React$useState2[0],
@@ -91,25 +93,25 @@ var Pagination = function Pagination(props) {
     setIsOpen = _React$useState8[1];
   var innerIcon = (0, _extends2.default)({
     first: React.createElement(_icon.default, {
-      type: "first"
+      type: "".concat(direction === 'rtl' ? 'last' : 'first')
     }),
     last: React.createElement(_icon.default, {
-      type: "last"
+      type: "".concat(direction === 'rtl' ? 'first' : 'last')
     }),
     prev: React.createElement(_icon.default, {
-      type: "arrow-left"
+      type: "arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     next: React.createElement(_icon.default, {
-      type: "arrow-right"
+      type: "arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     }),
     down: React.createElement(_icon.default, {
       type: "arrow-down"
     }),
     jumpPrev: React.createElement(_icon.default, {
-      type: "double-arrow-left"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     jumpNext: React.createElement(_icon.default, {
-      type: "double-arrow-right"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     })
   }, icons || {});
   var handleChangeSize = function handleChangeSize(key) {
@@ -207,7 +209,7 @@ var Pagination = function Pagination(props) {
     className: "".concat(prefixCls, "-total")
   }, mapTotalText[showTotal]);
   var normalPagination = React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, className),
+    className: (0, _classnames.default)(prefixCls, rtlCls, className),
     style: style
   }, Total, showJumper && React.createElement("span", {
     className: "".concat(prefixCls, "-current")
@@ -242,7 +244,7 @@ var Pagination = function Pagination(props) {
     selectedKey: size,
     menu: sizeOptions,
     trigger: "click",
-    placement: "bottomRight",
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     disabled: disabled,
     prefix: "".concat(prefixCls, "-dropdown"),
     popperStyle: {
@@ -260,7 +262,7 @@ var Pagination = function Pagination(props) {
     size: size
   })), innerIcon.down))));
   var simplePagination = React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, 'simple', className),
+    className: (0, _classnames.default)(prefixCls, rtlCls, 'simple', className),
     style: style
   }, Total, React.createElement("ul", {
     className: (0, _classnames.default)("".concat(prefixCls, "-action"), {
@@ -290,7 +292,7 @@ var Pagination = function Pagination(props) {
   var lessPagination = null;
   if (pageType === 'less') {
     lessPagination = React.createElement("div", {
-      className: (0, _classnames.default)(prefixCls, 'less', {
+      className: (0, _classnames.default)(prefixCls, rtlCls, 'less', {
         bordered: bordered,
         disabled: disabled
       }, className),
@@ -328,7 +330,7 @@ var Pagination = function Pagination(props) {
     page >= 5 && nicetyPages.unshift(1, '<<');
   }
   var nicetyPagination = React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, 'nicety', {
+    className: (0, _classnames.default)(prefixCls, rtlCls, 'nicety', {
       bordered: bordered,
       disabled: disabled
     }, className),
@@ -385,7 +387,8 @@ var Pagination = function Pagination(props) {
       onItemClick: handleChangeSize,
       getPopupContainer: function getPopupContainer(triggerNode) {
         return triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.parentElement;
-      }
+      },
+      placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft'
     }, dropdownProps, {
       onVisibleChange: dropdownVisibleChange
     }), React.createElement("button", {

package/lib/pagination/style/index.css

@@ -815,3 +815,75 @@
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.kd-pagination-rtl {
+  direction: rtl;
+}
+.kd-pagination-rtl .kd-pagination-total {
+  margin-left: 12px;
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered {
+  margin-left: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector .kd-pagination-selector-size i {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 2px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-total {
+  margin-left: 0;
+  margin-right: 2px;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options {
+  margin-right: 22px;
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size {
+  margin-right: 0;
+  margin-left: 8px;
+  padding: 0 4px 0 24px;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size i {
+  left: 5px;
+  right: auto;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-dropdown-menu-item > span {
+  text-align: right;
+}

package/lib/pagination/style/index.less

@@ -617,3 +617,102 @@
     }
   }
 }
+
+.@{pagination-prefix-cls}-rtl {
+  direction: rtl;
+  .@{pagination-prefix-cls}-total {
+    margin-left: 12px;
+    margin-right: 0;
+  }
+  .@{pagination-prefix-cls}-current {
+    margin-right: 0;
+    margin-left: 12px;
+  }
+  .@{pagination-action-prefix-cls} {
+    .@{pagination-action-prefix-cls}-item {
+      &.bordered {
+        margin-left: calc(2 * @pagination-button-spacing);
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  .@{pagination-selector-prefix-cls} {
+    margin-right: 20px;
+    margin-left: 0;
+    .@{pagination-selector-prefix-cls}-size {
+      i {
+        margin-left: 0;
+        margin-right: 4px;
+      }
+    }
+  }
+  &.simple {
+    .@{pagination-prefix-cls}-action {
+      &-item {
+        .@{pagination-prefix-cls}-current {
+          margin-right: 0;
+          margin-left: 2px;
+        }
+        .@{pagination-prefix-cls}-total {
+          margin-left: 0;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  &.less {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  &.nicety {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .@{pagination-jumper-prefix-cls} {
+      margin-right: @pagination-button-spacing;
+      margin-left: 0;
+      .@{pagination-jumper-prefix-cls}-button {
+        margin-right: @pagination-button-spacing;
+        margin-left: 0;
+      }
+    }
+    .@{pagination-options-prefix-cls} {
+      margin-right: 22px;
+      margin-left: 0;
+      .@{pagination-options-prefix-cls}-size {
+        margin-right: 0;
+        margin-left: 8px;
+        padding: 0 4px 0 24px;
+        i {
+          left: 5px;
+          right: auto;
+        }
+      }
+      .@{kd-prefix}-dropdown {
+        &-menu {
+          &-item {
+            & > span {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.8.29",
+  "version": "1.8.30",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [