feat: add rtl pageheader/pagination

components/page-header/index.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import { getComponentFromProp, getOptionProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
+import ArrowRightOutlined from '@ant-design/icons-vue/ArrowRightOutlined';
 import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
 import TransButton from '../_util/transButton';
@@ -50,18 +51,17 @@ const renderBreadcrumb = (h, breadcrumb) => {
   return <Breadcrumb {...breadcrumb} />;
 };
 
-const renderTitle = (h, prefixCls, instance) => {
+const renderTitle = (h, prefixCls, instance, direction) => {
   const { avatar } = instance;
   const title = getComponentFromProp(instance, 'title');
   const subTitle = getComponentFromProp(instance, 'subTitle');
   const tags = getComponentFromProp(instance, 'tags');
   const extra = getComponentFromProp(instance, 'extra');
+  const ArrowIcon = direction === 'rtl' ? <ArrowRightOutlined /> : <ArrowLeftOutlined />;
   const backIcon =
-    getComponentFromProp(instance, 'backIcon') !== undefined ? (
-      getComponentFromProp(instance, 'backIcon')
-    ) : (
-      <ArrowLeftOutlined />
-    );
+    getComponentFromProp(instance, 'backIcon') !== undefined
+      ? getComponentFromProp(instance, 'backIcon')
+      : ArrowIcon;
   const onBack = instance.$listeners.back;
   const headingPrefixCls = `${prefixCls}-heading`;
   if (title || subTitle || tags || extra) {
@@ -98,7 +98,7 @@ const PageHeader = {
     configProvider: { default: () => ConfigConsumerProps },
   },
   render(h) {
-    const { getPrefixCls, pageHeader } = this.configProvider;
+    const { getPrefixCls, pageHeader, direction } = this.configProvider;
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, breadcrumb } = props;
     const footer = getComponentFromProp(this, 'footer');
@@ -123,13 +123,14 @@ const PageHeader = {
         'has-breadcrumb': breadcrumbDom,
         'has-footer': footer,
         [`${prefixCls}-ghost`]: ghost,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
       },
     ];
 
     return (
       <div class={className}>
         {breadcrumbDom}
-        {renderTitle(h, prefixCls, this)}
+        {renderTitle(h, prefixCls, this, direction)}
         {children && renderChildren(h, prefixCls, children)}
         {renderFooter(h, prefixCls, footer)}
       </div>

components/page-header/style/index.less

@@ -117,3 +117,5 @@
     }
   }
 }
+
+@import './rtl';

components/page-header/style/rtl.less

@@ -0,0 +1,76 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
+
+.@{pageheader-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-back {
+    .@{pageheader-prefix-cls}-rtl & {
+      float: right;
+      margin-right: 0;
+      margin-left: 16px;
+    }
+  }
+
+  &-heading {
+    &-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: @margin-sm;
+      }
+    }
+
+    .@{ant-prefix}-avatar {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+        margin-right: 0;
+        margin-left: 12px;
+      }
+    }
+
+    &-sub-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: @margin-sm;
+      }
+    }
+
+    &-tags {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+      }
+    }
+
+    &-extra {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: left;
+      }
+
+      > * {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: @margin-sm;
+          margin-left: 0;
+        }
+      }
+      > *:first-child {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    .@{ant-prefix}-tabs-bar {
+      .@{ant-prefix}-tabs-nav {
+        .@{pageheader-prefix-cls}-rtl & {
+          float: right;
+        }
+      }
+    }
+  }
+}

components/pagination/Pagination.jsx

@@ -53,18 +53,18 @@ export default {
     configProvider: { default: () => ConfigConsumerProps },
   },
   methods: {
-    getIconsProps(prefixCls) {
-      const prevIcon = (
+    getIconsProps(prefixCls, direction) {
+      let prevIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <LeftOutlined/>
+          <LeftOutlined />
         </a>
       );
-      const nextIcon = (
+      let nextIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <RightOutlined/>
+          <RightOutlined />
         </a>
       );
-      const jumpPrevIcon = (
+      let jumpPrevIcon = (
         <a class={`${prefixCls}-item-link`}>
           {/* You can use transition effects in the container :) */}
           <div class={`${prefixCls}-item-container`}>
@@ -73,7 +73,7 @@ export default {
           </div>
         </a>
       );
-      const jumpNextIcon = (
+      let jumpNextIcon = (
         <a class={`${prefixCls}-item-link`}>
           {/* You can use transition effects in the container :) */}
           <div class={`${prefixCls}-item-container`}>
@@ -82,6 +82,17 @@ export default {
           </div>
         </a>
       );
+      // change arrows direction in right-to-left direction
+      if (direction === 'rtl') {
+        let temp;
+        temp = prevIcon;
+        prevIcon = nextIcon;
+        nextIcon = temp;
+
+        temp = jumpPrevIcon;
+        jumpPrevIcon = jumpNextIcon;
+        jumpNextIcon = temp;
+      }
       return {
         prevIcon,
         nextIcon,
@@ -98,7 +109,7 @@ export default {
         locale: customLocale,
         ...restProps
       } = getOptionProps(this);
-      const getPrefixCls = this.configProvider.getPrefixCls;
+      const { getPrefixCls, direction } = this.configProvider;
       const prefixCls = getPrefixCls('pagination', customizePrefixCls);
       const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
 
@@ -108,13 +119,14 @@ export default {
           prefixCls,
           selectPrefixCls,
           ...restProps,
-          ...this.getIconsProps(prefixCls),
+          ...this.getIconsProps(prefixCls, direction),
           selectComponentClass: isSmall ? MiniSelect : VcSelect,
           locale: { ...contextLocale, ...customLocale },
           buildOptionText: buildOptionText || this.$scopedSlots.buildOptionText,
         },
         class: {
           mini: isSmall,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
         },
         on: getListeners(this),
       };

components/pagination/style/index.less

@@ -398,3 +398,5 @@
     display: none;
   }
 }
+
+@import './rtl';

components/pagination/style/rtl.less

@@ -0,0 +1,69 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
+
+.@{pagination-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-total-text {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-item {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  &-options {
+    .@{pagination-prefix-cls}-rtl & {
+      margin-right: 16px;
+      margin-left: 0;
+    }
+
+    &-size-changer.@{ant-prefix}-select {
+      .@{pagination-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &-simple &-simple-pager {
+    .@{pagination-prefix-cls}-rtl& {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+
+    input {
+      .@{pagination-prefix-cls}-rtl& {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &.mini &-options {
+    .@{pagination-prefix-cls}-rtl& {
+      margin-right: 2px;
+      margin-left: 0;
+    }
+  }
+}