From 5c5259dc8351e5b34bce0183b687260c6610b808 Mon Sep 17 00:00:00 2001
From: jahnli <jahnli@163.com>
Date: Sat, 21 Jan 2023 11:19:04 +0800
Subject: [PATCH] feat(breadcrumb): `n-breadcrumb` supports RTL

---
 CHANGELOG.en-US.md                            |  1 +
 CHANGELOG.zh-CN.md                            |  1 +
 src/breadcrumb/demos/zhCN/index.demo-entry.md |  1 +
 src/breadcrumb/demos/zhCN/rtl-debug.demo.vue  | 36 +++++++++++++++++++
 src/breadcrumb/src/Breadcrumb.tsx             | 15 +++++---
 src/breadcrumb/src/styles/rtl.cssr.ts         |  7 ++++
 src/breadcrumb/styles/index.ts                |  1 +
 src/breadcrumb/styles/rtl.ts                  |  7 ++++
 src/styles.ts                                 |  5 ++-
 9 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 src/breadcrumb/demos/zhCN/rtl-debug.demo.vue
 create mode 100644 src/breadcrumb/src/styles/rtl.cssr.ts
 create mode 100644 src/breadcrumb/styles/rtl.ts

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 33c006b4cdb..74b74af4eb5 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
 - `n-dynamic-input` adds `action` slot, closes [#3981](https://github.com/tusen-ai/naive-ui/issues/3981).
 - `n-dynamic-input` add `disabled` prop, closes [#4055](https://github.com/tusen-ai/naive-ui/issues/4055).
 - `n-data-table` adds `titleAlign` prop, closes [#3954](https://github.com/tusen-ai/naive-ui/issues/3954).
+- `n-breadcrumb` supports RTL.
 
 ## 2.34.3
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 23f2404fb81..4cde28ddee3 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
 - `n-dynamic-input` 新增 `action` slot，关闭 [#3981](https://github.com/tusen-ai/naive-ui/issues/3981)
 - `n-dynamic-input` 新增 `disabled` 属性，关闭 [#4055](https://github.com/tusen-ai/naive-ui/issues/4055)
 - `n-data-table` 新增 `titleAlign` 属性，关闭 [#3954](https://github.com/tusen-ai/naive-ui/issues/3954)
+- `n-breadcrumb` 支持 RTL
 
 ## 2.34.3
 
diff --git a/src/breadcrumb/demos/zhCN/index.demo-entry.md b/src/breadcrumb/demos/zhCN/index.demo-entry.md
index 0f1b9ab5c1e..967e76c48bf 100644
--- a/src/breadcrumb/demos/zhCN/index.demo-entry.md
+++ b/src/breadcrumb/demos/zhCN/index.demo-entry.md
@@ -9,6 +9,7 @@ basic.vue
 custom.vue
 separator.vue
 separator-per-item.vue
+rtl-debug.vue
 ```
 
 ## API
diff --git a/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue
new file mode 100644
index 00000000000..a44bac1e7e8
--- /dev/null
+++ b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue
@@ -0,0 +1,36 @@
+<markdown>
+# Rtl Debug
+
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
+    <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+      <n-breadcrumb>
+        <n-breadcrumb-item>
+          <n-icon :component="MdCash" /> 北京总行</n-breadcrumb-item>
+        <n-breadcrumb-item>
+          <n-icon :component="MdCash" /> 天津分行</n-breadcrumb-item>
+        <n-breadcrumb-item>
+          <n-icon :component="MdCash" /> 平山道支行</n-breadcrumb-item>
+      </n-breadcrumb>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableBreadcrumbRtl } from 'naive-ui'
+import { MdCash } from '@vicons/ionicons4'
+
+export default defineComponent({
+  setup () {
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableBreadcrumbRtl],
+      MdCash
+    }
+  }
+})
+</script>
diff --git a/src/breadcrumb/src/Breadcrumb.tsx b/src/breadcrumb/src/Breadcrumb.tsx
index 9ba588fdfd8..485790caa9f 100644
--- a/src/breadcrumb/src/Breadcrumb.tsx
+++ b/src/breadcrumb/src/Breadcrumb.tsx
@@ -7,7 +7,7 @@ import {
   Ref,
   toRef
 } from 'vue'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { breadcrumbLight } from '../styles'
 import type { BreadcrumbTheme } from '../styles'
@@ -36,7 +36,8 @@ export default defineComponent({
   name: 'Breadcrumb',
   props: breadcrumbProps,
   setup (props) {
-    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+    const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } =
+      useConfig(props)
     const themeRef = useTheme(
       'Breadcrumb',
       '-breadcrumb',
@@ -45,6 +46,7 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
+    const rtlEnabledRef = useRtl('Breadcrumb', mergedRtlRef, mergedClsPrefixRef)
     provide(breadcrumbInjectionKey, {
       separatorRef: toRef(props, 'separator'),
       mergedClsPrefixRef
@@ -88,14 +90,19 @@ export default defineComponent({
       mergedClsPrefix: mergedClsPrefixRef,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle?.themeClass,
-      onRender: themeClassHandle?.onRender
+      onRender: themeClassHandle?.onRender,
+      rtlEnabled: rtlEnabledRef
     }
   },
   render () {
     this.onRender?.()
     return (
       <nav
-        class={[`${this.mergedClsPrefix}-breadcrumb`, this.themeClass]}
+        class={[
+          `${this.mergedClsPrefix}-breadcrumb`,
+          this.rtlEnabled && `${this.mergedClsPrefix}-breadcrumb--rtl`,
+          this.themeClass
+        ]}
         style={this.cssVars as CSSProperties}
         aria-label="Breadcrumb"
       >
diff --git a/src/breadcrumb/src/styles/rtl.cssr.ts b/src/breadcrumb/src/styles/rtl.cssr.ts
new file mode 100644
index 00000000000..9d985e8e5f1
--- /dev/null
+++ b/src/breadcrumb/src/styles/rtl.cssr.ts
@@ -0,0 +1,7 @@
+import { cB, cM } from '../../../_utils/cssr'
+
+export default cB('breadcrumb', [
+  cM('rtl', `
+    direction: rtl;
+  `)
+])
diff --git a/src/breadcrumb/styles/index.ts b/src/breadcrumb/styles/index.ts
index 5725ece8e07..a4b5b58d797 100644
--- a/src/breadcrumb/styles/index.ts
+++ b/src/breadcrumb/styles/index.ts
@@ -1,3 +1,4 @@
 export { default as breadcrumbDark } from './dark'
 export { default as breadcrumbLight } from './light'
+export { breadcrumbRtl } from './rtl'
 export type { BreadcrumbTheme, BreadcrumbThemeVars } from './light'
diff --git a/src/breadcrumb/styles/rtl.ts b/src/breadcrumb/styles/rtl.ts
new file mode 100644
index 00000000000..8c8866f487d
--- /dev/null
+++ b/src/breadcrumb/styles/rtl.ts
@@ -0,0 +1,7 @@
+import { RtlItem } from '../../config-provider/src/internal-interface'
+import rtlStyle from '../src/styles/rtl.cssr'
+
+export const breadcrumbRtl: RtlItem = {
+  name: 'Breadcrumb',
+  style: rtlStyle
+}
diff --git a/src/styles.ts b/src/styles.ts
index 7e5a7eeae34..ba0ab9114d8 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -6,7 +6,10 @@ export { avatarDark } from './avatar/styles'
 export { avatarGroupRtl as unstableAvatarGroupRtl } from './avatar-group/styles'
 export { backTopDark } from './back-top/styles'
 export { badgeDark, badgeRtl as unstableBadgeRtl } from './badge/styles'
-export { breadcrumbDark } from './breadcrumb/styles'
+export {
+  breadcrumbDark,
+  breadcrumbRtl as unstableBreadcrumbRtl
+} from './breadcrumb/styles'
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles'
 export { notificationRtl as unstableNotificationRtl } from './notification/styles'
 export { messageRtl as unstableMessageRtl } from './message/styles'