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

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

@@ -8,6 +8,7 @@
 
 ```demo
 basic.vue
+rtl-debug.vue
 ```
 
 ## API

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

@@ -0,0 +1,49 @@
+<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-calendar
+        v-model:value="value"
+        #="{ year, month, date }"
+        :is-date-disabled="isDateDisabled"
+        @update:value="handleUpdateValue"
+      >
+        {{ year }}-{{ month }}-{{ date }}
+      </n-calendar>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableCalendarRtl, useMessage } from 'naive-ui'
+import { isYesterday, addDays } from 'date-fns/esm'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableCalendarRtl],
+      value: ref(addDays(Date.now(), 1).valueOf()),
+      handleUpdateValue (
+        _: number,
+        { year, month, date }: { year: number; month: number; date: number }
+      ) {
+        message.success(`${year}-${month}-${date}`)
+      },
+      isDateDisabled (timestamp: number) {
+        if (isYesterday(timestamp)) {
+          return true
+        }
+        return false
+      }
+    }
+  }
+})
+</script>

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 (
       <div
-        class={[`${mergedClsPrefix}-calendar`, this.themeClass]}
+        class={[
+          `${mergedClsPrefix}-calendar`,
+          this.rtlEnabled && `${this.mergedClsPrefix}-calendar--rtl`,
+          this.themeClass
+        ]}
         style={cssVars as CSSProperties}
       >
         <div class={`${mergedClsPrefix}-calendar-header`}>

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

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'

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

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