diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 33c006b4cdb..db8265d60ef 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-anchor` supports RTL. ## 2.34.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 23f2404fb81..41067d011c5 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-anchor` 支持 RTL ## 2.34.3 diff --git a/src/anchor/demos/zhCN/index.demo-entry.md b/src/anchor/demos/zhCN/index.demo-entry.md index 7c853146a1e..25d34861fe5 100644 --- a/src/anchor/demos/zhCN/index.demo-entry.md +++ b/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 diff --git a/src/anchor/demos/zhCN/rtl-debug.demo.vue b/src/anchor/demos/zhCN/rtl-debug.demo.vue new file mode 100644 index 00000000000..fbeaef1f3cb --- /dev/null +++ b/src/anchor/demos/zhCN/rtl-debug.demo.vue @@ -0,0 +1,37 @@ + +# Rtl Debug + + + + + + diff --git a/src/anchor/src/AnchorAdapter.tsx b/src/anchor/src/AnchorAdapter.tsx index 340bbb8f213..60b7220635d 100644 --- a/src/anchor/src/AnchorAdapter.tsx +++ b/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} > diff --git a/src/anchor/src/styles/rtl.cssr.ts b/src/anchor/src/styles/rtl.cssr.ts new file mode 100644 index 00000000000..cfbe3cfcfc3 --- /dev/null +++ b/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 + `) + ]) + ]) +]) diff --git a/src/anchor/styles/index.ts b/src/anchor/styles/index.ts index 9a393ab40ee..3a2b0caa605 100644 --- a/src/anchor/styles/index.ts +++ b/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' diff --git a/src/anchor/styles/rtl.ts b/src/anchor/styles/rtl.ts new file mode 100644 index 00000000000..876d55980d1 --- /dev/null +++ b/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 +} diff --git a/src/styles.ts b/src/styles.ts index 7e5a7eeae34..d4937b9a936 100644 --- a/src/styles.ts +++ b/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'