feat: add multi-language files (#538)

* feat: add multi-language files * test: fix
tolking · Dec 5, 2024 · ec8b1b0 · ec8b1b0
1 parent edc49fe
commit ec8b1b0
Show file tree

Hide file tree

Showing 20 changed files with 230 additions and 327 deletions.
diff --git a/build/build-locale.ts b/build/build-locale.ts
@@ -0,0 +1,13 @@
+import fg from 'fast-glob'
+import { defineConfig } from 'vite'
+import { toAbsolute } from './utils'
+
+export default defineConfig({
+  build: {
+    target: 'es2015',
+    outDir: toAbsolute('../lib/locale'),
+    lib: {
+      entry: fg.sync(toAbsolute('../src/locale/*.ts')),
+    },
+  },
+})
diff --git a/build/sync-types.ts b/build/sync-types.ts
@@ -0,0 +1,15 @@
+import fg from 'fast-glob'
+import { copyFileRecursive, toAbsolute } from './utils'
+
+function transform(input: string) {
+  const outDir = input.replace(/\/types\//, '/lib/')
+  copyFileRecursive(input, outDir)
+}
+
+(() => {
+  fg.sync([
+    toAbsolute('../types/locale/*'),
+    toAbsolute('../types/styles/*'),
+  ]).map(transform)
+  console.log('sync-types done')
+})()
diff --git a/demo/I18n/base.vue b/demo/I18n/base.vue
@@ -6,7 +6,7 @@
   >
     Switch lang
   </el-button>
-  <el-config-provider :locale="toggle ? locale1 : locale2">
+  <el-config-provider :locale="toggle ? en : zhCN">
     <pro-search
       v-model="searchForm"
       :columns="searchColumns"
@@ -45,72 +45,11 @@ import {
   defineCrudBeforeOpen,
   defineSearchColumns,
 } from 'element-pro-components'
+import en from 'element-pro-components/lib/locale/en'
+import zhCN from 'element-pro-components/lib/locale/zh-cn'
 
 export default defineComponent({
   setup() {
-    const locale1 = {
-      name: 'en',
-      pro: {
-        form: {
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        search: {
-          submit: 'Search',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        crud: {
-          add: 'Add',
-          edit: 'Edit',
-          detail: 'Detail',
-          del: 'Delete',
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-          search: 'Search',
-          searchReset: 'Reset',
-          searchPrev: 'Prev',
-          searchNext: 'Next',
-        },
-      },
-    }
-    const locale2 = {
-      name: 'zh-cn',
-      pro: {
-        form: {
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        search: {
-          submit: '搜索',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        crud: {
-          add: '新增',
-          edit: '编辑',
-          detail: '查看',
-          del: '删除',
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-          search: '搜索',
-          searchReset: '重置',
-          searchPrev: '上一步',
-          searchNext: '下一步',
-        },
-      },
-    }
-
     const form = ref({})
     const searchForm = ref({})
     const detail = ref({})
@@ -233,8 +172,8 @@ export default defineComponent({
       formColumns,
       searchColumns,
       toggle,
-      locale1,
-      locale2,
+      en,
+      zhCN,
       data,
       beforeOpen,
       submit,

diff --git a/docs/en-US/guide/i18n.md b/docs/en-US/guide/i18n.md
@@ -7,51 +7,34 @@ meta:
 
 # Internationalization
 
-## configuration
+element-pro-components components support internationalization configuration like element-plus. You only need to merge the internationalization configuration of element-pro-components when configuring element-plus internationalization.
 
-Like elememt-plus, international configuration can be inject through ElConfigProvider
+## Global configuration
+
+```ts
+import ElementPlus from 'element-plus'
+import ElementPro from 'element-pro-components'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
+
+app.use(ElementPlus, { locale: Object.assign(zhCn, proZhCN) }).use(ElementPro)
+```
+
+## ElConfigProvider
+
+You can also inject internationalization configuration through ElConfigProvider like elememt-plus.
 
 ::: demo
 @/demo/I18n/base.vue
 :::
 
+## Supported languages
+
+[Supported languages list](https://github.com/tolking/element-pro-components/tree/main/src/locale)
+
+- en
+- zh-cn
+
 ## Configurable fields
 
-```js
-const locale = {
-  pro: {
-    form: {
-      submit: 'Submit',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-    },
-    search: {
-      submit: 'Search',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-    },
-    crud: {
-      add: 'Add',
-      edit: 'Edit',
-      detail: 'Detail',
-      del: 'Delete',
-      submit: 'Submit',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-      search: 'Search',
-      searchReset: 'Reset',
-      searchPrev: 'Prev',
-      searchNext: 'Next',
-    },
-    tabs: {
-      refresh: 'Refresh',
-      left: 'Close Left',
-      right: 'Close Right',
-      others: 'Close Others',
-    },
-  },
-}
-```
+<<< @/src/locale/en.ts
diff --git a/docs/src/components/ProCode.vue b/docs/src/components/ProCode.vue
@@ -87,14 +87,13 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useClipboard } from '@vueuse/core'
-import { useLocale } from 'element-plus'
 import {
   CaretTop,
   CaretBottom,
   DocumentCopy,
   VideoPlay,
 } from '@element-plus/icons-vue'
-import { useShow } from 'element-pro-components'
+import { useShow, useLocale } from 'element-pro-components'
 import { github } from '../utils/index'
 import { useStackBlitz } from '../composables/index'
 

diff --git a/docs/src/components/PwaPopup.vue b/docs/src/components/PwaPopup.vue
@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useLocale } from 'element-plus'
+import { useLocale } from 'element-pro-components'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
 const { t } = useLocale()

diff --git a/docs/src/lang/index.ts b/docs/src/lang/index.ts
@@ -1,45 +1,14 @@
 import en from 'element-plus/es/locale/lang/en'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proEn from 'element-pro-components/lib/locale/en'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
 import type { Language, TranslatePair } from 'element-plus/es/locale'
 
 const lang: Record<string, Language & Record<string, string | TranslatePair>> =
   {
     'en-US': {
       ...en,
-      pro: {
-        form: {
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        search: {
-          submit: 'Search',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        crud: {
-          add: 'Add',
-          edit: 'Edit',
-          detail: 'Detail',
-          del: 'Delete',
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-          search: 'Search',
-          searchReset: 'Reset',
-          searchPrev: 'Prev',
-          searchNext: 'Next',
-        },
-        tabs: {
-          refresh: 'Refresh',
-          left: 'Close Left',
-          right: 'Close Right',
-          others: 'Close Others',
-        },
-      },
+      ...proEn,
       docs: {
         code: {
           hide: 'Hide',
@@ -58,40 +27,7 @@ const lang: Record<string, Language & Record<string, string | TranslatePair>> =
     },
     'zh-CN': {
       ...zhCn,
-      pro: {
-        form: {
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        search: {
-          submit: '搜索',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        crud: {
-          add: '新增',
-          edit: '编辑',
-          detail: '查看',
-          del: '删除',
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-          search: '搜索',
-          searchReset: '重置',
-          searchPrev: '上一步',
-          searchNext: '下一步',
-        },
-        tabs: {
-          refresh: '刷新',
-          left: '关闭左侧',
-          right: '关闭右侧',
-          others: '关闭其他',
-        },
-      },
+      ...proZhCN,
       docs: {
         code: {
           hide: '隐藏代码',

diff --git a/docs/src/tsconfig.json b/docs/src/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "jsx": "preserve",
     "paths": {
+      "element-pro-components/lib/*": ["./src/*"],
       "element-pro-components": ["./src/index"]
     }
   },

diff --git a/docs/zh-CN/guide/i18n.md b/docs/zh-CN/guide/i18n.md
@@ -7,51 +7,34 @@ meta:
 
 # 国际化
 
-## 配置
+element-pro-components 组件同 element-plus 一样支持国际化配置。你只需要在配置 element-plus 的国际化时，合并 element-pro-components 的国际化配置即可。
 
-同 elememt-plus 一样可以通过 ElConfigProvider 注入国际化配置
+## 全局配置
+
+```ts
+import ElementPlus from 'element-plus'
+import ElementPro from 'element-pro-components'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
+
+app.use(ElementPlus, { locale: Object.assign(zhCn, proZhCN) }).use(ElementPro)
+```
+
+## ElConfigProvider
+
+也可以像 elememt-plus 一样通过 ElConfigProvider 注入国际化配置
 
 ::: demo
 @/demo/I18n/base.vue
 :::
 
+## 支持的语言
+
+[支持的语言列表](https://github.com/tolking/element-pro-components/tree/main/src/locale)
+
+- en
+- zh-cn
+
 ## 可配置字段
 
-```js
-const locale = {
-  pro: {
-    form: {
-      submit: '提交',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-    },
-    search: {
-      submit: '搜索',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-    },
-    crud: {
-      add: '新增',
-      edit: '编辑',
-      detail: '查看',
-      del: '删除',
-      submit: '提交',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-      search: '搜索',
-      searchReset: '重置',
-      searchPrev: '上一步',
-      searchNext: '下一步',
-    },
-    tabs: {
-      refresh: '刷新',
-      left: '关闭左侧',
-      right: '关闭右侧',
-      others: '关闭其他',
-    },
-  },
-}
-```
+<<< @/src/locale/zh-cn.ts