diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 33c006b4cdb..108ab6dc933 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-calendar` supports RTL. ## 2.34.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 23f2404fb81..7b8a982b474 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-calendar` 支持 RTL ## 2.34.3 diff --git a/src/calendar/demos/zhCN/index.demo-entry.md b/src/calendar/demos/zhCN/index.demo-entry.md index a7c06697659..791c70401fb 100644 --- a/src/calendar/demos/zhCN/index.demo-entry.md +++ b/src/calendar/demos/zhCN/index.demo-entry.md @@ -8,6 +8,7 @@ ```demo basic.vue +rtl-debug.vue ``` ## API diff --git a/src/calendar/demos/zhCN/rtl-debug.demo.vue b/src/calendar/demos/zhCN/rtl-debug.demo.vue new file mode 100644 index 00000000000..a916f75789e --- /dev/null +++ b/src/calendar/demos/zhCN/rtl-debug.demo.vue @@ -0,0 +1,49 @@ + +# Rtl Debug + + + + + + diff --git a/src/calendar/src/Calendar.tsx b/src/calendar/src/Calendar.tsx index 7effdfbb32b..7a940564f90 100644 --- a/src/calendar/src/Calendar.tsx +++ b/src/calendar/src/Calendar.tsx @@ -24,7 +24,13 @@ import { call, resolveSlotWithProps } from '../../_utils' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import { NButton } from '../../button' import { NButtonGroup } from '../../button-group' -import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins' +import { + useConfig, + useLocale, + useRtl, + useTheme, + useThemeClass +} from '../../_mixins' import type { ThemeProps } from '../../_mixins' import { calendarLight } from '../styles' import type { CalendarTheme } from '../styles' @@ -50,7 +56,8 @@ export default defineComponent({ name: 'Calendar', props: calendarProps, setup (props) { - const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) + const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = + useConfig(props) const themeRef = useTheme( 'Calendar', '-calendar', @@ -59,6 +66,7 @@ export default defineComponent({ props, mergedClsPrefixRef ) + const rtlEnabledRef = useRtl('Calendar', mergedRtlRef, mergedClsPrefixRef) const { localeRef, dateLocaleRef } = useLocale('DatePicker') const now = Date.now() // ts => timestamp @@ -187,7 +195,8 @@ export default defineComponent({ mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, - onRender: themeClassHandle?.onRender + onRender: themeClassHandle?.onRender, + rtlEnabled: rtlEnabledRef } }, render () { @@ -212,7 +221,11 @@ export default defineComponent({ const calendarMonth = getMonth(monthTs) + 1 return (
diff --git a/src/calendar/src/styles/rtl.cssr.ts b/src/calendar/src/styles/rtl.cssr.ts new file mode 100644 index 00000000000..4e1407a9ca5 --- /dev/null +++ b/src/calendar/src/styles/rtl.cssr.ts @@ -0,0 +1,14 @@ +import { cB, cM, cE } from '../../../_utils/cssr' + +export default cB('calendar', [ + cM('rtl', ` + direction: rtl; + `, [ + cB('calendar-header', [ + cE('extra', ` + direction: ltr; + `) + ]) + + ]) +]) diff --git a/src/calendar/styles/index.ts b/src/calendar/styles/index.ts index 5b431d5919a..6407b7ba0d7 100644 --- a/src/calendar/styles/index.ts +++ b/src/calendar/styles/index.ts @@ -1,3 +1,4 @@ export { default as calendarDark } from './dark' export { default as calendarLight } from './light' +export { calendarRtl } from './rtl' export type { CalendarTheme, CalendarThemeVars } from './light' diff --git a/src/calendar/styles/rtl.ts b/src/calendar/styles/rtl.ts new file mode 100644 index 00000000000..2c816291c78 --- /dev/null +++ b/src/calendar/styles/rtl.ts @@ -0,0 +1,7 @@ +import { RtlItem } from '../../config-provider/src/internal-interface' +import rtlStyle from '../src/styles/rtl.cssr' + +export const calendarRtl: RtlItem = { + name: 'Calendar', + style: rtlStyle +} diff --git a/src/styles.ts b/src/styles.ts index 7e5a7eeae34..fed2a157532 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -8,13 +8,12 @@ export { backTopDark } from './back-top/styles' export { badgeDark, badgeRtl as unstableBadgeRtl } from './badge/styles' export { breadcrumbDark } 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' export { buttonGroupDark, buttonGroupRtl as unstableButtonGroupRtl } from './button-group/styles' export { cardDark, cardRtl as unstableCardRtl } from './card/styles' +export { calendarRtl as unstableCalendarRtl } from './calendar/styles' export { cascaderDark } from './cascader/styles' export { checkboxDark, @@ -52,11 +51,15 @@ export { layoutDark } from './layout/styles' export { listDark, listRtl as unstableListRtl } from './list/styles' export { loadingBarDark } from './loading-bar/styles' export { logDark } from './log/styles' +export { messageRtl as unstableMessageRtl } from './message/styles' export { mentionDark } from './mention/styles' export { menuDark } from './menu/styles' export { messageDark } from './message/styles' export { modalDark } from './modal/styles' -export { notificationDark } from './notification/styles' +export { + notificationDark, + notificationRtl as unstableNotificationRtl +} from './notification/styles' export { paginationDark, paginationRtl as unstablePaginationRtl