feat(page-header): support rtl

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 - `n-config-provider` add global config of the `Empty` component, closes [#1092](https://github.com/TuSimple/naive-ui/issues/1092).
 - `n-select` add `on-update:show` prop.
 - `n-auto-complete` exports `AutoCompleteOption` and `AutoCompleteGroupOption` types.
+- `n-page-header` add `RTL` support.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 - `n-config-provider` 新增 `Empty` 组件的全局配置，关闭 [#1092](https://github.com/TuSimple/naive-ui/issues/1092)
 - `n-select` 新增 `on-update:show` 属性
 - `n-auto-complete` 导出 `AutoCompleteOption` 以及 `AutoCompleteGroupOption` 类型
+- `n-page-header` 添加 `RTL` 支持
 
 ### Fixes
 

src/page-header/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 
 ```demo
 basic
+rtl-debug
 ```
 
 ## Props

src/page-header/demos/zhCN/rtl-debug.demo.md

@@ -0,0 +1,93 @@
+# Rtl Debug
+
+```html
+<n-space vertical>
+  <n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
+  <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+    <n-page-header subtitle="让你的听觉更懂视觉" @back="handleBack">
+      <n-grid :cols="5">
+        <n-gi>
+          <n-statistic label="正片" value="125 集" />
+        </n-gi>
+        <n-gi>
+          <n-statistic label="嘉宾" value="22 位" />
+        </n-gi>
+        <n-gi>
+          <n-statistic label="道歉" value="36 次" />
+        </n-gi>
+        <n-gi>
+          <n-statistic label="话题" value="83 个" />
+        </n-gi>
+        <n-gi>
+          <n-statistic label="参考链接" value="2,346 个" />
+        </n-gi>
+      </n-grid>
+      <template #title>
+        <a
+          href="https://anyway.fm/"
+          style="text-decoration: none; color: inherit;"
+          >Anyway.FM</a
+        >
+      </template>
+      <template #header>
+        <n-breadcrumb>
+          <n-breadcrumb-item>播客</n-breadcrumb-item>
+          <n-breadcrumb-item>精选</n-breadcrumb-item>
+          <n-breadcrumb-item>超级精选</n-breadcrumb-item>
+          <n-breadcrumb-item>Anyway.FM</n-breadcrumb-item>
+        </n-breadcrumb>
+      </template>
+      <template #avatar>
+        <n-avatar
+          src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
+        />
+      </template>
+      <template #extra>
+        <n-space>
+          <n-button>催更</n-button>
+          <n-dropdown :options="options" placement="bottom-start">
+            <n-button :bordered="false" style="padding: 0 4px">···</n-button>
+          </n-dropdown>
+        </n-space>
+      </template>
+      <template #footer>截止到 2021 年 4 月 3 日</template>
+    </n-page-header>
+  </n-config-provider>
+</n-space>
+```
+
+```js
+import { EllipsisHorizontal } from '@vicons/ionicons5'
+import { defineComponent, ref } from 'vue'
+import { unstablePageHeaderRtl, useMessage } from 'naive-ui'
+
+export default defineComponent({
+  components: {
+    EllipsisHorizontal
+  },
+  setup () {
+    const message = useMessage()
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstablePageHeaderRtl],
+      handleBack () {
+        message.info('[onBack]')
+      },
+      options: [
+        {
+          label: '催更',
+          key: '1'
+        },
+        {
+          label: '催更',
+          key: '2'
+        },
+        {
+          label: '催更',
+          key: '3'
+        }
+      ]
+    }
+  }
+})
+```

src/page-header/src/PageHeader.tsx

@@ -8,6 +8,7 @@ import style from './styles/index.cssr'
 import { ArrowBackIcon } from '../../_internal/icons'
 import { NBaseIcon } from '../../_internal'
 import type { ExtractPublicPropTypes } from '../../_utils'
+import useRtl from '../../_mixins/use-rtl'
 
 const pageHeaderProps = {
   ...(useTheme.props as ThemeProps<PageHeaderTheme>),
@@ -23,7 +24,7 @@ export default defineComponent({
   name: 'PageHeader',
   props: pageHeaderProps,
   setup (props) {
-    const { mergedClsPrefixRef } = useConfig(props)
+    const { mergedClsPrefixRef, NConfigProvider } = useConfig(props)
     const themeRef = useTheme(
       'PageHeader',
       'PageHeader',
@@ -32,7 +33,14 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
+    const rtlEnabledRef = useRtl(
+      'PageHeader',
+      NConfigProvider?.mergedRtlRef,
+      mergedClsPrefixRef
+    )
+
     return {
+      rtlEnabled: rtlEnabledRef,
       mergedClsPrefix: mergedClsPrefixRef,
       cssVars: computed(() => {
         const {
@@ -65,15 +73,8 @@ export default defineComponent({
     }
   },
   render () {
-    const {
-      onBack,
-      title,
-      subtitle,
-      extra,
-      mergedClsPrefix,
-      cssVars,
-      $slots
-    } = this
+    const { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } =
+      this
     const {
       title: titleSlot,
       subtitle: subtitleSlot,
@@ -88,7 +89,13 @@ export default defineComponent({
     const showSubtitle = subtitle || subtitleSlot
     const showExtra = extra || extraSlot
     return (
-      <div style={cssVars as CSSProperties}>
+      <div
+        style={cssVars as CSSProperties}
+        class={[
+          `${mergedClsPrefix}-page-header-wrapper`,
+          this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
+        ]}
+      >
         {headerSlot ? (
           <div class={`${mergedClsPrefix}-page-header-header`} key="breadcrumn">
             {headerSlot()}

src/page-header/src/styles/page-header-rtl.cssr.ts

@@ -0,0 +1,20 @@
+import { c, cB, cM } from '../../../_utils/cssr'
+
+export default c([
+  cB('page-header-wrapper', [
+    cM('rtl', [
+      cB('page-header-header', `
+        direction: rtl;
+      `),
+      cB('page-header', `
+        direction: rtl;
+      `),
+      cB('page-header-content', `
+        direction: rtl;
+      `),
+      cB('page-header-footer', `
+        direction: rtl;
+      `)
+    ])
+  ])
+])

src/page-header/styles/index.ts

@@ -1,3 +1,4 @@
 export { pageHeaderLight } from './light'
 export type { PageHeaderTheme, PageHeaderThemeVars } from './light'
 export { pageHeaderDark } from './dark'
+export { default as pageHeaderRtl } from './rtl'

src/page-header/styles/rtl.ts

@@ -0,0 +1,6 @@
+import rtlStyle from '../src/styles/page-header-rtl.cssr'
+
+export default {
+  name: 'PageHeader',
+  style: rtlStyle
+}

src/styles.ts

@@ -38,6 +38,7 @@ export { messageDark } from './message/styles'
 export { modalDark } from './modal/styles'
 export { notificationDark } from './notification/styles'
 export { paginationDark } from './pagination/styles'
+export { pageHeaderRtl as unstablePageHeaderRtl } from './page-header/styles'
 export { popconfirmDark } from './popconfirm/styles'
 export { popoverDark } from './popover/styles'
 export { popselectDark } from './popselect/styles'