feat(breadcrumb): n-breadcrumb supports RTL

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
 

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
 

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

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>

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"
       >

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;
+  `)
+])

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'

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
+}

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'