feat(upload): add RTL demo and RTL styles for upload

src/upload/demos/enUS/index.demo-entry.md

@@ -18,6 +18,7 @@ custom-request.vue
 custom-download.vue
 abstract.vue
 download.vue
+rtl-debug.vue
 ```
 
 ## API

src/upload/demos/enUS/rtl-debug.demo.vue

@@ -0,0 +1,95 @@
+<markdown>
+# RTL Debug
+</markdown>
+
+<script lang="ts" setup>
+import type { UploadFileInfo } from 'naive-ui'
+
+import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
+import { unstableUploadsRtl } from 'naive-ui'
+import { ref } from 'vue'
+
+const rtlEnabled = ref(false)
+const rtlStyles = [unstableUploadsRtl]
+
+const fileList = ref<UploadFileInfo[]>([
+  {
+    id: 'a',
+    name: 'error-upload-file.png',
+    status: 'error'
+  },
+  {
+    id: 'b',
+    name: 'finished-text-document.doc',
+    status: 'finished',
+    type: 'text/plain'
+  },
+  {
+    id: 'c',
+    name: 'image-with-url.png',
+    status: 'finished',
+    url: '__HTTP__://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+  },
+  {
+    id: 'd',
+    name: 'uploading-document-99percent.doc',
+    status: 'uploading',
+    percentage: 60
+  }
+])
+</script>
+
+<template>
+  <n-space vertical>
+    <n-space><n-switch v-model:value="rtlEnabled" />RTL</n-space>
+    <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+      <n-space vertical>
+        <n-upload
+          action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="image-card"
+        >
+          Click to Upload
+        </n-upload>
+
+        <n-upload
+          action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="image"
+        >
+          <n-button>Upload File</n-button>
+        </n-upload>
+
+        <n-upload
+          action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="text"
+        >
+          <n-button>Upload File</n-button>
+        </n-upload>
+
+        <n-upload
+          multiple
+          directory-dnd
+          action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :max="5"
+        >
+          <n-upload-dragger>
+            <div style="margin-bottom: 12px">
+              <n-icon size="48" :depth="3">
+                <ArchiveIcon />
+              </n-icon>
+            </div>
+            <n-text style="font-size: 16px">
+              Click or drag a file to this area to upload
+            </n-text>
+            <n-p depth="3" style="margin: 8px 0 0 0">
+              Strictly prohibit from uploading sensitive information. For
+              example, your bank card PIN or your credit card expiry date.
+            </n-p>
+          </n-upload-dragger>
+        </n-upload>
+      </n-space>
+    </n-config-provider>
+  </n-space>
+</template>

src/upload/src/styles/rtl.cssr.ts

@@ -1,8 +1,40 @@
-import { cB, cM } from '../../../_utils/cssr'
+import { c, cB, cE, cM } from '../../../_utils/cssr'
 
 export default cB('upload', [
   cM('rtl', `
     direction: rtl;
-    text-align: right;
-  `)
+  `, [
+    cB('upload-dragger', `
+      text-align: center;
+    `),
+    cB('upload-file-list', [
+      cB('upload-file', `
+        padding: 0px 6px 0 12px;
+      `, [
+        cB('upload-file-info', [
+          cE('thumbnail', [
+            cB('base-icon', `
+              margin-left: 2px;
+              margin-right: 0;
+            `)
+          ]),
+          cE('action', `
+            left: 0;
+            right: unset;
+          `, [
+            cB('button', [
+              c('&:not(:last-child)', {
+                marginLeft: '4px',
+                marginRight: '0'
+              })
+            ]),
+            cM('image-type', `
+              left: 0;
+              right: unset;
+            `)
+          ])
+        ])
+      ])
+    ])
+  ])
 ])