feat(list, drawer): rtl (#3472)

* feat(tree): support rtl

* feat(legacy-grid): support rtl

* feat(statistic): support rtl

* feat(thing): support rtl

* feat(steps): support rtl

* feat(list): support rtl

* feat(drawer): support rtl

* fix: change log

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -31,6 +31,8 @@
 - `n-tree` adds `keyboard` prop, closes [#3438](https://github.com/TuSimple/naive-ui/issues/3438).
 - `n-collapse-item` adds `disabled` prop, closes [#3408](https://github.com/TuSimple/naive-ui/issues/3408).
 - `n-pagination` adds `trigger-quick-jump-on` prop, closes [#3387](https://github.com/TuSimple/naive-ui/issues/3387).
+- `n-list` supports RTL.
+- `n-drawer` supports RTL.
 
 ## 2.32.1
 

CHANGELOG.zh-CN.md

@@ -31,6 +31,8 @@
 - `n-tree` 新增 `keyboard` 属性，关闭 [#3438](https://github.com/TuSimple/naive-ui/issues/3438)
 - `n-collapse-item` 新增 `disabled` 属性，关闭 [#3408](https://github.com/TuSimple/naive-ui/issues/3408)
 - `n-pagination` 新增 `trigger-quick-jump-on` 属性，关闭 [#3387](https://github.com/TuSimple/naive-ui/issues/3387)
+- `n-list` 支持 RTL
+- `n-drawer` 支持 RTL
 
 ## 2.32.1
 

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

@@ -22,6 +22,7 @@ dark-2-debug.vue
 dark-3-debug.vue
 dark-4-debug.vue
 resizable.vue
+rtl-debug.vue
 ```
 
 ## API

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

@@ -0,0 +1,34 @@
+<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-button @click="show = true">
+        Open
+      </n-button>
+      <n-drawer v-model:show="show" :width="502">
+        <n-drawer-content title="Stoner" closable>
+          Stoner is a 1965 novel by the American writer John Williams.
+        </n-drawer-content>
+      </n-drawer>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableDrawerRtl } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableDrawerRtl],
+      show: ref(false)
+    }
+  }
+})
+</script>

src/drawer/src/DrawerBodyWrapper.tsx

@@ -18,6 +18,7 @@ import {
 } from 'vue'
 import { VFocusTrap } from 'vueuc'
 import { clickoutside } from 'vdirs'
+import { useConfig, useRtl } from '../../_mixins'
 import { popoverBodyInjectionKey } from '../../popover/src/interface'
 import { modalBodyInjectionKey } from '../../modal/src/interface'
 import { NScrollbar } from '../../_internal'
@@ -83,6 +84,9 @@ export default defineComponent({
     const isVertical = computed<boolean>(() => {
       return props.placement === 'top' || props.placement === 'bottom'
     })
+    const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props)
+
+    const rtlEnabledRef = useRtl('Drawer', mergedRtlRef, mergedClsPrefixRef)
 
     const handleMousedownResizeTrigger = (e: MouseEvent): void => {
       isDraggingRef.value = true
@@ -186,6 +190,7 @@ export default defineComponent({
     provide(modalBodyInjectionKey, null)
     return {
       bodyRef,
+      rtlEnabled: rtlEnabledRef,
       mergedClsPrefix: NDrawer.mergedClsPrefixRef,
       isMounted: NDrawer.isMountedRef,
       mergedTheme: NDrawer.mergedThemeRef,
@@ -239,6 +244,8 @@ export default defineComponent({
                               'aria-modal': 'true',
                               class: [
                                 `${mergedClsPrefix}-drawer`,
+                                this.rtlEnabled &&
+                                  `${mergedClsPrefix}-drawer--rtl`,
                                 `${mergedClsPrefix}-drawer--${this.placement}-placement`,
                                 /**
                                  * When the mouse is pressed to resize the drawer,

src/drawer/src/styles/rtl.cssr.ts

@@ -0,0 +1,17 @@
+import { cB, cE, cM } from '../../../_utils/cssr'
+
+export default cB('drawer', [
+  cM('rtl', `
+    direction: rtl;
+    text-align: right;
+  `, [
+    cB('drawer-content', [
+      cB('drawer-header', [
+        cE('close', `
+          margin-left: 0;
+          margin-right: 6px;
+        `)
+      ])
+    ])
+  ])
+])

src/drawer/styles/index.ts

@@ -1,3 +1,4 @@
 export { default as drawerDark } from './dark'
 export { default as drawerLight } from './light'
+export { default as drawerRtl } from './rtl'
 export type { DrawerTheme, DrawerThemeVars } from './light'

src/drawer/styles/rtl.ts

@@ -0,0 +1,11 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface'
+import rtlStyle from '../src/styles/rtl.cssr'
+import { scrollbarRtl } from '../../_internal/scrollbar/styles/rtl'
+
+export const drawerRtl: RtlItem = {
+  name: 'Drawer',
+  style: rtlStyle,
+  peers: [scrollbarRtl]
+}
+
+export default drawerRtl

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

@@ -10,6 +10,7 @@
 basic.vue
 hoverable.vue
 border.vue
+rtl-debug.vue
 ```
 
 ## API

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

@@ -0,0 +1,54 @@
+<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-list bordered>
+        <template #header>
+          hhh
+        </template>
+        <template #footer>
+          fff
+        </template>
+        <n-list-item>
+          <template #prefix>
+            <n-button>Prefix</n-button>
+          </template>
+          <template #suffix>
+            <n-button>Suffix</n-button>
+          </template>
+          <n-thing title="Thing" title-extra="extra" description="description">
+            Biu<br>
+            Biu<br>
+            Biu<br>
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <n-thing
+            title="Thing"
+            title-extra="extra"
+            description="description"
+          />
+        </n-list-item>
+      </n-list>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableListRtl } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(null),
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableListRtl]
+    }
+  }
+})
+</script>

src/list/src/List.tsx

@@ -8,7 +8,7 @@ import {
   provide,
   toRef
 } from 'vue'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { createInjectionKey, ExtractPublicPropTypes } from '../../_utils'
 import { listLight } from '../styles'
@@ -43,7 +43,9 @@ export default defineComponent({
   name: 'List',
   props: listProps,
   setup (props) {
-    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+    const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } =
+      useConfig(props)
+    const rtlEnabledRef = useRtl('List', mergedRtlRef, mergedClsPrefixRef)
     const themeRef = useTheme(
       'List',
       '-list',
@@ -96,6 +98,7 @@ export default defineComponent({
 
     return {
       mergedClsPrefix: mergedClsPrefixRef,
+      rtlEnabled: rtlEnabledRef,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle?.themeClass,
       onRender: themeClassHandle?.onRender
@@ -108,6 +111,7 @@ export default defineComponent({
       <ul
         class={[
           `${mergedClsPrefix}-list`,
+          this.rtlEnabled && `${mergedClsPrefix}-list--rtl`,
           this.bordered && `${mergedClsPrefix}-list--bordered`,
           this.showDivider && `${mergedClsPrefix}-list--show-divider`,
           this.hoverable && `${mergedClsPrefix}-list--hoverable`,

src/list/src/styles/rtl.cssr.ts

@@ -0,0 +1,19 @@
+import { cB, cE, cM } from '../../../_utils/cssr'
+
+export default cB('list', [
+  cM('rtl', `
+    direction: rtl;
+    text-align: right;
+  `, [
+    cB('list-item', [
+      cE('prefix', `
+        margin-right: 0;
+        margin-left: 20px;
+      `),
+      cE('suffix', `
+        margin-right: 20px;
+        margin-left: 0;
+      `)
+    ])
+  ])
+])

src/list/styles/index.ts

@@ -1,3 +1,4 @@
 export { default as listDark } from './dark'
 export { default as listLight } from './light'
+export { listRtl } from './rtl'
 export type { ListTheme, ListThemeVars } from './light'

src/list/styles/rtl.ts

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

src/styles.ts

@@ -31,7 +31,7 @@ export { datePickerDark } from './date-picker/styles'
 export { descriptionsDark } from './descriptions/styles'
 export { dialogDark } from './dialog/styles'
 export { dividerDark } from './divider/styles'
-export { drawerDark } from './drawer/styles'
+export { drawerDark, drawerRtl as unstableDrawerRtl } from './drawer/styles'
 export { dropdownDark } from './dropdown/styles'
 export {
   dynamicInputDark,
@@ -49,7 +49,7 @@ export {
   inputNumberRtl as unstableInputNumberRtl
 } from './input-number/styles'
 export { layoutDark } from './layout/styles'
-export { listDark } from './list/styles'
+export { listDark, listRtl as unstableListRtl } from './list/styles'
 export { loadingBarDark } from './loading-bar/styles'
 export { logDark } from './log/styles'
 export { mentionDark } from './mention/styles'