feat(ConfigProvider): 全局配置 (#1240)

* feat(ConfigProvider): init component * feat: wIP list 国际化 * feat(Local): update locale * feat(ConfigProvider): add component docs * test: update snapshots * fix(ConfigProvider): resolved spelling error * fix: fix cr --------- Co-authored-by: yaogengzhu <[email protected]>
Tencent · Feb 28, 2024 · 057d0ba · 057d0ba
1 parent 51537ba
commit 057d0ba
Show file tree

Hide file tree

Showing 34 changed files with 1,081 additions and 46 deletions.
diff --git a/site/docs.config.js b/site/docs.config.js
@@ -29,6 +29,21 @@ export const docs = [
       },
     ],
   },
+  {
+    title: '全局配置',
+    titleEn: 'Global Config',
+    type: 'component',
+    children: [
+      {
+        title: '全局特性配置',
+        titleEn: 'Global Configuration',
+        name: 'config-provider',
+        path: '/mobile-vue/components/config-provider',
+        component: () => import('@/config-provider/config-provider.md'),
+        componentEn: () => import('@/config-provider/config-provider.en-US.md'),
+      },
+    ],
+  },
   {
     title: '基础组件',
     titleEn: 'Base',

diff --git a/src/action-sheet/action-sheet.vue b/src/action-sheet/action-sheet.vue
@@ -8,7 +8,7 @@
         <div :class="`${name}__footer`">
           <div :class="`${name}__gap-${theme}`"></div>
           <t-button :class="`${name}__cancel`" variant="text" block @click="handleCancel">
-            {{ cancelText }}
+            {{ cancelText || globalConfig.cancel }}
           </t-button>
         </div>
       </template>
@@ -26,6 +26,7 @@ import TButton from '../button';
 import config from '../config';
 import { TdActionSheetProps, ActionSheetItem } from './type';
 import ActionSheetProps from './props';
+import { useConfig } from '../config-provider/useConfig';
 
 const { prefix } = config;
 const name = `${prefix}-action-sheet`;
@@ -41,6 +42,8 @@ export default defineComponent({
   props: ActionSheetProps,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props: any, context) {
+    const { globalConfig } = useConfig('actionSheet');
+
     const actionItems = computed(() => {
       return props.items.map((item: String | ActionSheetItem) => {
         if (typeof item === 'string') {
@@ -98,6 +101,7 @@ export default defineComponent({
     return {
       prefix,
       name: ref(name),
+      globalConfig,
       rootClasses,
       descriptionClasses,
       actionItems,

diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
@@ -20,7 +20,7 @@ export default {
   /** 设置取消按钮的文本 */
   cancelText: {
     type: String,
-    default: '取消',
+    default: '',
   },
   /** 设置每页展示菜单的数量，仅当 type=grid 时有效 */
   count: {

diff --git a/src/calendar/template.vue b/src/calendar/template.vue
@@ -1,15 +1,17 @@
 <template>
   <div ref="templateRef" :class="{ [`${name}`]: true, [`${name}--popup`]: usePopup }">
     <div :class="`${name}__title`">
-      <slot name="title">{{ title || '请选择日期' }}</slot>
+      <slot name="title">{{ title || globalConfig.title }}</slot>
     </div>
     <CloseIcon v-if="usePopup" :class="`${name}__close-btn`" size="24" @click="handleClose" />
     <div :class="`${name}__days`">
       <div v-for="(item, index) in days" :key="index" :class="`${name}__days-item`">{{ item }}</div>
     </div>
     <div :class="`${name}__months`" style="overflow: auto">
       <template v-for="(item, index) in months" :key="index">
-        <div :class="`${name}__month`">{{ item.year }} 年 {{ item.month + 1 }} 月</div>
+        <div :class="`${name}__month`">
+          {{ t(globalConfig.monthTitle, { year: item.year, month: globalConfig.months[item.month] }) }}
+        </div>
         <div :class="`${name}__dates`">
           <div v-for="emptyItem in (item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7" :key="emptyItem"></div>
           <template v-for="(dateItem, dateIndex) in item.months" :key="dateIndex">
@@ -55,6 +57,7 @@ import { CloseIcon } from 'tdesign-icons-vue-next';
 import TButton from '../button';
 import config from '../config';
 import { TdCalendarProps, TDate, TDateType } from './type';
+import { useConfig } from '../config-provider/useConfig';
 
 const { prefix } = config;
 const name = `${prefix}-calendar`;
@@ -68,6 +71,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+const { t, globalConfig } = useConfig('calendar');
 const emit = defineEmits(['visible-change']);
 
 const props = inject('templateProps') as TdCalendarProps;
@@ -87,7 +91,7 @@ const valueRef = ref(props.value);
 const selectedDate = ref();
 const firstDayOfWeek = computed(() => props.firstDayOfWeek || 0);
 const days = computed(() => {
-  const raw = '日一二三四五六';
+  const raw = globalConfig.value.weekdays;
   const ans = [];
   let i = firstDayOfWeek.value % 7;
 
@@ -108,7 +112,7 @@ const maxDate = computed(() =>
 const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
 
 const confirmBtn = computed(() => {
-  if (typeof props.confirmBtn === 'string') return { content: props.confirmBtn || '确认' };
+  if (typeof props.confirmBtn === 'string') return { content: props.confirmBtn || globalConfig.value.confirm };
   return props.confirmBtn;
 });
 

diff --git a/src/cascader/cascader.vue b/src/cascader/cascader.vue
@@ -94,6 +94,7 @@ import config from '../config';
 import TdCascaderProps from './props';
 import { useVModel, renderTNode, TNode } from '../shared';
 import { TreeOptionData } from '../common';
+import { useConfig } from '../config-provider/useConfig';
 
 const { prefix } = config;
 const name = `${prefix}-cascader`;
@@ -127,11 +128,13 @@ export default defineComponent({
   props: TdCascaderProps,
   emits: ['change', 'close', 'pick', 'update:modelValue', 'update:value', 'update:visible'],
   setup(props, context) {
+    const { globalConfig } = useConfig('cascader');
+
     const { visible, value, modelValue, subTitles, options, keys, checkStrictly } = toRefs(props);
     const open = ref(visible.value || false);
     const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
-    const title = computed(() => props.title || '标题');
-    const placeholder = computed(() => props.placeholder || '选择选项');
+    const title = computed(() => props.title || globalConfig.value.title);
+    const placeholder = computed(() => props.placeholder || globalConfig.value.placeholder);
 
     const stepIndex = ref(0);
     const selectedIndexes = reactive<string[] | number[]>([]);

diff --git a/src/components.ts b/src/components.ts
@@ -56,3 +56,6 @@ export { default as Icon } from './icon';
 export { default as Table } from './table';
 export { SideBar, SideBarItem } from './side-bar';
 export { default as TPopover } from './popover';
+
+// 全局配置
+export * from './config-provider';
diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
@@ -0,0 +1,31 @@
+---
+title: "Global property configuration"
+description: "The global attribute configuration contains the text language configuration of each component and other common configurations to reduce duplicate common configurations."
+isComponent: true
+tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }]
+toc: false
+---
+
+### Internationalization
+
+The supported language TDesign provided:
+
+Language | File
+-- | --
+Chinese (Simplified) | `zh_CN`
+English | `en_US`
+
+
+If you want to contribute more language packs, please refer to [How to add a language pack](https://github.com/Tencent/tdesign-common/blob/develop/js/global-config/locale/CONTRIBUTING.md) PR.
+
+### Upload
+
+{{ upload-en }}
+
+### Table 
+
+{{ table-en }}
+
+### others
+
+{{ other-en }}
diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
@@ -0,0 +1,154 @@
+---
+title: 全局特性配置
+description: 全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
+spline: base
+isComponent: true
+tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }]
+toc: false
+---
+
+### 国际化配置
+
+TDesign 支持国际化/多语言配置，目前支持的语言包括:
+
+语言 | 对应文件
+-- | --
+简体中文 | `zh_CN`
+英语 | `en_US`
+
+
+如果你想贡献更多语言包，欢迎参考 [如何新增语言包](https://github.com/Tencent/tdesign-common/blob/develop/js/global-config/locale/CONTRIBUTING.md) 发起 PR。
+
+### Upload 表格
+
+{{ upload-en }}
+
+### Table 表格
+
+{{ table-en }}
+
+### 其他组件
+
+{{ other-en }}
+
+## API
+### GlobalConfigProvider
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+actionSheet | Object | - | 动作面板全局配置。TS 类型：`ActionSheetConfig` | N
+calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N
+cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N
+classPrefix | String | t | CSS 类名前缀。【开发中】 | N
+dropdownMenu | Object | - | 下拉菜单全局配置。TS 类型：`DropdownMenuConfig` | N
+dateTimePicker | Object | - | 时间选择器全局配置。TS 类型：`DateTimePickerConfig` | N
+list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N
+picker | Object | - | 选择器全局配置。TS 类型：`PickerConfig` | N
+pullDownRefresh | Object | - | 下拉刷新全局配置。TS 类型：`PullDownRefreshConfig` | N
+rate | Object | - | 评分全局配置。TS 类型：`RateConfig` | N
+tabBar | Object | - | 侧边导航栏全局配置。TS 类型：`TabBarConfig` | N
+table | Object | - | 表格组件全局配置。TS 类型：`TableConfig` | N
+upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
+
+### ActionSheetConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cancel | String | - | 语言配置，“取消”按钮描述文本。| N
+
+### CalendarConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+confirm | String | - | 语言配置，“确定”按钮描述文本。| N
+title | String | - | 语言配置，组件标题“请选择日期”描述文本。| N
+weekdays | Object | - | 星期文本描述，默认值：['日', '一', '二', '三', '四', '五', '六']。TS 类型：`string[]` | N
+monthTitle | String | - | 语言配置，日期月面板标题描述文本。示例：“{year} / {month}”| N
+
+
+### CascaderConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+title | String | - | 语言配置，组件标题“选择地址”描述文本。| N
+placeholder | String | - | 语言配置，未选中时的提示文案“选择选项”描述文本。| N
+
+### DropdownMenuConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+reset | String | - | 语言配置，“重置”按钮描述文本。| N
+confirm | String | - | 语言配置，“确定”按钮描述文本。| N
+
+### DateTimePickerConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+title | String | - | 语言配置，组件标题“选择时间”描述文本。| N
+cancel | String | - | 语言配置，“取消”按钮描述文本。| N
+confirm | String | - | 语言配置，“确定”按钮描述文本。| N
+format | String | 'YYYY-MM-DD' | 日期格式化规则 | N
+yearLabel | String | - | 语言配置，“年” 描述文本 | N
+yearLabel | String | - | 语言配置，“年”描述文本。| N
+monthLabel | String | - | 语言配置，“月”描述文本。| N
+dateLabel | String | - | 语言配置，“日”描述文本。| N
+hourLabel | String | - | 语言配置，“时”描述文本。| N
+minuteLabel | String | - | 语言配置，“分”描述文本。| N
+secondLabel | String | - | 语言配置，“秒”描述文本。| N
+
+
+### ListConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+loading | String | - | 语言配置，“加载中”描述文本。| N
+loadingMoreText | String | - | 语言配置，“点击加载更多”描述文本。| N
+pulling | String | - | 语言配置，“下拉即可刷新”描述文本。| N
+loosing | String | - | 语言配置，“释放即可刷新”描述文本。| N
+success | String | - | 语言配置，“刷新成功”描述文本。| N
+
+
+### PickerConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cancel | String | - | 语言配置，“取消”按钮描述文本。| N
+confirm | String | - | 语言配置，“确定”按钮描述文本。| N
+
+
+### PullDownRefreshConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+loadingTexts | Object | - | 星期文本描述，默认值：['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
+
+
+### RateConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+valueText | String | - | 语言配置，评分值描述文本。示例：“{value} 分”| N
+noValueText | String | - | 语言配置，“未评分”描述文本。| N
+
+### TabBarConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+newsAriaLabel | String | - | 语言配置，“有新的消息”描述文本。| N
+moreNewsAriaLabel | String | - | 语言配置，“有很多消息”描述文本。| N
+haveMoreNewsAriaLabel | String | - | 语言配置，“有n+条新的消息”描述文本。示例：“有 {value}+ 条消息”| N
+haveNewsAriaLabel | String | - | 语言配置，“有n条新的消息”描述文本。示例：“有 {value} 条消息”| N
+
+### TableConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+empty | String | - | 语言配置，“暂无数据” 描述文本。| N
+
+
+### UploadConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N
+
diff --git a/src/config-provider/config-provider.vue b/src/config-provider/config-provider.vue
@@ -0,0 +1,34 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import config from '../config';
+import { GlobalConfigProvider } from './type';
+import { provideConfig } from './useConfig';
+
+const { prefix } = config;
+const name = `${prefix}-config-provider`;
+
+export const configProviderProps = {
+  globalConfig: Object as PropType<GlobalConfigProvider>,
+};
+
+export type ConfigProviderProps = {
+  globalConfig: GlobalConfigProvider;
+};
+
+export default defineComponent({
+  name,
+  props: configProviderProps,
+
+  setup(props) {
+    provideConfig(props);
+
+    return {
+      name,
+    };
+  },
+});
+</script>
diff --git a/src/config-provider/context.ts b/src/config-provider/context.ts
@@ -0,0 +1,20 @@
+import { InjectionKey, ComputedRef } from 'vue';
+import _mergeWith from 'lodash/mergeWith';
+import merge from 'lodash/merge';
+import isArray from 'lodash/isArray';
+import defaultConfig from '../locale/default-config';
+import defaultZhLocale from '../locale/zh_CN';
+import { GlobalConfigProvider } from './type';
+
+export const defaultGlobalConfig = merge(defaultConfig, defaultZhLocale);
+
+export type Locale = typeof defaultZhLocale;
+
+export const configProviderInjectKey: InjectionKey<ComputedRef<GlobalConfigProvider>> = Symbol('configProvide');
+
+export const mergeWith = (defaultGlobalConfig: GlobalConfigProvider, injectConfig: GlobalConfigProvider) =>
+  _mergeWith(defaultGlobalConfig, injectConfig, (objValue, srcValue) => {
+    if (isArray(objValue)) {
+      return srcValue;
+    }
+  });