feat(dialog): add rtl support

src/_internal/select-menu/src/SelectMenu.tsx

@@ -28,7 +28,7 @@ import type {
 } from '../../../select/src/interface'
 import { resolveSlot, resolveWrappedSlot, useOnResize } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
-import { useThemeClass, useTheme } from '../../../_mixins'
+import { useThemeClass, useTheme, useRtl, useConfig } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
 import NInternalLoading from '../../loading'
 import NFocusDetector from '../../focus-detector'
@@ -119,6 +119,12 @@ export default defineComponent({
     onToggle: Function as PropType<(tmNode: TreeNode<SelectOption>) => void>
   },
   setup (props) {
+    const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props)
+    const rtlEnabledRef = useRtl(
+      'InternalSelectMenu',
+      mergedRtlRef,
+      mergedClsPrefixRef
+    )
     const themeRef = useTheme(
       'InternalSelectMenu',
       '-internal-select-menu',
@@ -401,6 +407,8 @@ export default defineComponent({
     useOnResize(selfRef, props.onResize)
     return {
       mergedTheme: themeRef,
+      mergedClsPrefix: mergedClsPrefixRef,
+      rtlEnabled: rtlEnabledRef,
       virtualListRef,
       scrollbarRef,
       itemSize: itemSizeRef,
@@ -445,6 +453,7 @@ export default defineComponent({
         tabindex={this.focusable ? 0 : -1}
         class={[
           `${clsPrefix}-base-select-menu`,
+          this.rtlEnabled && `${clsPrefix}-base-select-menu--rtl`,
           themeClass,
           this.multiple && `${clsPrefix}-base-select-menu--multiple`
         ]}

src/_internal/select-menu/src/styles/rtl.cssr.ts

@@ -0,0 +1,6 @@
+import { cB } from '../../../../_utils/cssr'
+export default cB('base-select-menu--rtl', [
+  cB('scrollbar', `
+    direction: rtl;
+  `)
+])

src/_internal/select-menu/styles/index.ts

@@ -1,5 +1,6 @@
 export { default as internalSelectMenuLight } from './light'
 export { default as internalSelectMenuDark } from './dark'
+export { InternalSelectMenuRtl } from './rtl'
 export type {
   InternalSelectMenuThemeVars,
   InternalSelectMenuTheme

src/_internal/select-menu/styles/rtl.ts

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

src/_internal/selection/src/Selection.tsx

@@ -25,7 +25,7 @@ import type { FormValidationStatus } from '../../../form/src/interface'
 import type { TagRef } from '../../../tag/src/Tag'
 import { NPopover } from '../../../popover'
 import { NTag } from '../../../tag'
-import { useThemeClass, useTheme } from '../../../_mixins'
+import { useThemeClass, useTheme, useRtl, useConfig } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
 import {
   createKey,
@@ -114,6 +114,12 @@ export default defineComponent({
     onResize: Function as PropType<() => void>
   },
   setup (props) {
+    const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props)
+    const rtlEnabledRef = useRtl(
+      'InternalSelection',
+      mergedRtlRef,
+      mergedClsPrefixRef
+    )
     const patternInputMirrorRef = ref<HTMLElement | null>(null)
     const patternInputRef = ref<HTMLElement | null>(null)
     const selfRef = ref<HTMLElement | null>(null)
@@ -510,6 +516,8 @@ export default defineComponent({
     return {
       mergedTheme: themeRef,
       mergedClearable: mergedClearableRef,
+      mergedClsPrefix: mergedClsPrefixRef,
+      rtlEnabled: rtlEnabledRef,
       patternInputFocused: patternInputFocusedRef,
       filterablePlaceholder: filterablePlaceholderRef,
       label: labelRef,
@@ -917,6 +925,7 @@ export default defineComponent({
         ref="selfRef"
         class={[
           `${clsPrefix}-base-selection`,
+          this.rtlEnabled && `${clsPrefix}-base-selection--rtl`,
           this.themeClass,
           status && `${clsPrefix}-base-selection--${status}-status`,
           {

src/_internal/selection/src/styles/rtl.cssr.ts

@@ -0,0 +1,6 @@
+import { cB, c } from '../../../../_utils/cssr'
+export default c([
+  cB('base-selection--rtl', `
+      direction: rtl;
+    `)
+])

src/_internal/selection/styles/index.ts

@@ -1,5 +1,6 @@
 export { default as internalSelectionLight } from './light'
 export { default as internalSelectionDark } from './dark'
+export { InternalSelectionRtl } from './rtl'
 export type {
   InternalSelectionTheme,
   InternalSelectionThemeVars

src/_internal/selection/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 InternalSelectionRtl: RtlItem = {
+  name: 'InternalSelection',
+  style: rtlStyle
+}

src/data-table/demos/zhCN/index.demo-entry.md

@@ -68,6 +68,7 @@ keep-alive-debug.vue
 ellipsis-debug.vue
 custom-expand-icon-debug.vue
 expandable-debug.vue
+rtl-debug.vue
 ```
 
 ## API

src/data-table/demos/zhCN/rtl-debug.demo.vue

@@ -0,0 +1,194 @@
+<markdown>
+# Rtl Debug
+</markdown>
+
+<template>
+  <n-space vertical :size="12">
+    <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+      <div :dir="rtlEnabled ? 'rtl' : 'ltr'">
+        <n-button @click="filterAddress">
+          Filter Address(Use Value 'London')
+        </n-button>
+        <n-button @click="unfilterAddress">
+          Clear Address Filters
+        </n-button>
+      </div>
+      <n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
+      {{ rtlEnabled }}
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        :pagination="pagination"
+        @update:filters="handleUpdateFilter"
+      />
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue'
+import {
+  DataTableColumns,
+  DataTableBaseColumn,
+  DataTableFilterState,
+  unstableDataTableRtl,
+  unstableInternalSelectMenuRtl,
+  unstableInternalSelectionRtl
+} from 'naive-ui'
+
+type Row = {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const data = [
+  {
+    key: 0,
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park'
+  },
+  {
+    key: 1,
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park'
+  },
+  {
+    key: 2,
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park'
+  },
+  {
+    key: 3,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 4,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 5,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 6,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 7,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 8,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 9,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  },
+  {
+    key: 10,
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  }
+]
+
+export default defineComponent({
+  setup () {
+    const addressColumn = reactive<DataTableBaseColumn<Row>>({
+      title: 'Address',
+      key: 'address',
+      filterMultiple: false,
+      filterOptionValue: null,
+      sorter: 'default',
+      filterOptions: [
+        {
+          label: 'London',
+          value: 'London'
+        },
+        {
+          label: 'New York',
+          value: 'New York'
+        }
+      ],
+      filter (value, row) {
+        return !!~row.address.indexOf(value.toString())
+      }
+    })
+
+    const columns = reactive<DataTableColumns<Row>>([
+      {
+        title: 'Name',
+        key: 'name',
+        sorter (rowA, rowB) {
+          return rowA.name.length - rowB.name.length
+        }
+      },
+      {
+        title: 'Age',
+        key: 'age',
+        sorter (rowA, rowB) {
+          return rowA.age - rowB.age
+        }
+      },
+      addressColumn
+    ])
+    const paginationReactive = reactive({
+      page: 1,
+      pageSize: 5,
+      showSizePicker: true,
+      pageSizes: [3, 5, 7],
+      onChange: (page: number) => {
+        paginationReactive.page = page
+      },
+      onUpdatePageSize: (pageSize: number) => {
+        paginationReactive.pageSize = pageSize
+        paginationReactive.page = 1
+      }
+    })
+
+    return {
+      rtlEnabled: ref(true),
+      rtlStyles: [
+        unstableDataTableRtl,
+        unstableInternalSelectMenuRtl,
+        unstableInternalSelectionRtl
+      ],
+      data,
+      columns,
+      pagination: paginationReactive,
+      filterAddress () {
+        addressColumn.filterOptionValue = 'London'
+      },
+      unfilterAddress () {
+        addressColumn.filterOptionValue = null
+      },
+      handleUpdateFilter (
+        filters: DataTableFilterState,
+        sourceColumn: DataTableBaseColumn
+      ) {
+        addressColumn.filterOptionValue = filters[sourceColumn.key] as string
+      }
+    }
+  }
+})
+</script>

src/data-table/src/DataTable.tsx

@@ -10,7 +10,13 @@ import {
   watchEffect
 } from 'vue'
 import { createId } from 'seemly'
-import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
+import {
+  useConfig,
+  useRtl,
+  useLocale,
+  useTheme,
+  useThemeClass
+} from '../../_mixins'
 import { NBaseLoading } from '../../_internal'
 import { NPagination } from '../../pagination'
 import { createKey, resolveSlot, warnOnce } from '../../_utils'
@@ -66,8 +72,13 @@ export default defineComponent({
       })
     }
 
-    const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } =
-      useConfig(props)
+    const {
+      mergedBorderedRef,
+      mergedClsPrefixRef,
+      inlineThemeDisabled,
+      mergedRtlRef
+    } = useConfig(props)
+    const rtlEnabledRef = useRtl('DataTable', mergedRtlRef, mergedClsPrefixRef)
     const mergedBottomBorderedRef = computed(() => {
       const { bottomBordered } = props
       // do not add bottom bordered class if bordered is true
@@ -381,6 +392,7 @@ export default defineComponent({
     return {
       mainTableInstRef,
       mergedClsPrefix: mergedClsPrefixRef,
+      rtlEnabled: rtlEnabledRef,
       mergedTheme: themeRef,
       paginatedData: paginatedDataRef,
       mergedBordered: mergedBorderedRef,
@@ -400,6 +412,7 @@ export default defineComponent({
       <div
         class={[
           `${mergedClsPrefix}-data-table`,
+          this.rtlEnabled && `${mergedClsPrefix}-data-table--rtl`,
           themeClass,
           {
             [`${mergedClsPrefix}-data-table--bordered`]: this.mergedBordered,