feat(anchor): n-anchor 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-anchor` 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-anchor` 支持 RTL
 
 ## 2.34.3
 

src/anchor/demos/zhCN/index.demo-entry.md

@@ -12,6 +12,7 @@ ignore-gap.vue
 affix.vue
 scrollto.vue
 max-height-debug.vue
+rtl-debug.vue
 ```
 
 ## API

src/anchor/demos/zhCN/rtl-debug.demo.vue

@@ -0,0 +1,37 @@
+<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-anchor :show-rail="showRail" :show-background="showBackground">
+        <n-anchor-link title="演示" href="#演示">
+          <n-anchor-link title="基础用法" href="#basic.vue" />
+          <n-anchor-link title="忽略间隔" href="#ignore-gap.vue" />
+          <n-anchor-link title="固定" href="#affix.vue" />
+          <n-anchor-link title="滚动到" href="#scrollto.vue" />
+        </n-anchor-link>
+        <n-anchor-link title="API" href="#API" />
+      </n-anchor>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableAnchorRtl } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableAnchorRtl],
+      showRail: ref(true),
+      showBackground: ref(true)
+    }
+  }
+})
+</script>

src/anchor/src/AnchorAdapter.tsx

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, ref, CSSProperties } from 'vue'
 import { NAffix } from '../../affix'
 import { affixProps, affixPropKeys } from '../../affix/src/Affix'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { keep } from '../../_utils'
@@ -28,7 +28,9 @@ export default defineComponent({
   name: 'Anchor',
   props: anchorProps,
   setup (props, { slots }) {
-    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+    const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } =
+      useConfig(props)
+    const rtlEnabledRef = useRtl('Anchor', mergedRtlRef, mergedClsPrefixRef)
     const themeRef = useTheme(
       'Anchor',
       '-anchor',
@@ -74,6 +76,7 @@ export default defineComponent({
       ? useThemeClass('anchor', undefined, cssVarsRef, props)
       : undefined
     return {
+      rtlEnabled: rtlEnabledRef,
       scrollTo (href: string) {
         anchorRef.value?.setActiveHref(href)
       },
@@ -87,7 +90,10 @@ export default defineComponent({
                 ? undefined
                 : (cssVarsRef.value as CSSProperties)
             }
-            class={themeClassHandle?.themeClass.value}
+            class={[
+              themeClassHandle?.themeClass.value,
+              rtlEnabledRef?.value && `${mergedClsPrefixRef.value}-anchor--rtl`
+            ]}
             {...keep(props, baseAnchorPropKeys)}
             mergedClsPrefix={mergedClsPrefixRef.value}
           >

src/anchor/src/styles/rtl.cssr.ts

@@ -0,0 +1,20 @@
+import { cB, cM, cE } from '../../../_utils/cssr'
+
+export default cB('anchor', [
+  cM('rtl', `
+    direction: rtl;
+  `, [
+    cB('anchor-rail', `
+      right: 0;
+      left: unset;
+    `),
+    cB('anchor-link', `
+      padding: 0 16px 0 0;
+    `, [
+      cE('title', `
+      padding-right: 0;
+      padding-left: 16px
+    `)
+    ])
+  ])
+])

src/anchor/styles/index.ts

@@ -1,3 +1,4 @@
 export { default as anchorDark } from './dark'
 export { default as anchorLight } from './light'
+export { anchorRtl } from './rtl'
 export type { AnchorThemeVars, AnchorTheme } from './light'

src/anchor/styles/rtl.ts

@@ -0,0 +1,7 @@
+import { RtlItem } from '../../config-provider/src/internal-interface'
+import rtlStyle from '../src/styles/rtl.cssr'
+
+export const anchorRtl: RtlItem = {
+  name: 'Anchor',
+  style: rtlStyle
+}

src/styles.ts

@@ -1,6 +1,6 @@
 export { commonDark, commonLight } from './_styles/common'
 export { alertDark, alertRtl as unstableAlertRtl } from './alert/styles'
-export { anchorDark } from './anchor/styles'
+export { anchorDark, anchorRtl as unstableAnchorRtl } from './anchor/styles'
 export { autoCompleteDark } from './auto-complete/styles'
 export { avatarDark } from './avatar/styles'
 export { avatarGroupRtl as unstableAvatarGroupRtl } from './avatar-group/styles'