feat(ConfigProvider): init component

site/docs.config.js

@@ -34,6 +34,14 @@ export const docs = [
     titleEn: 'Base',
     type: 'component', // 组件文档
     children: [
+      {
+        title: 'ConfigProvider 全局配置',
+        titleEn: 'ConfigProvider',
+        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: 'Button 按钮',
         titleEn: 'Button',

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 || t(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(item.year, 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 || t(globalConfig.value.confirmBtn) };
   return props.confirmBtn;
 });
 

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';

src/config-provider/config-provider.md

@@ -0,0 +1,14 @@
+---
+title: ConfigProvider 全局配置
+description: 用于全局配置 Tdesign 组件，提供国际化能力。
+spline: base
+isComponent: true
+toc: false
+---
+
+### 组件类型
+
+
+## API
+### ConfigProvider Props
+

src/config-provider/config-provider.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="name">
+    <slot></slot>
+  </div>
+</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>

src/config-provider/context.ts

@@ -0,0 +1,26 @@
+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 enum EAnimationType {
+  ripple = 'ripple',
+  expand = 'expand',
+  fade = 'fade',
+}
+
+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;
+    }
+  });

src/config-provider/demos/calendar-en.vue

@@ -0,0 +1,38 @@
+<template>
+  <t-config-provider :global-config="globalConfig">
+    <t-calendar v-model:visible="visible" @close="onClose" @confirm="handleConfirm" @select="handleSelect" />
+    <t-cell title="单个选择日期" arrow :note="dateNote" @click="visible = true" />
+  </t-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import merge from 'lodash/merge';
+import enConfig from '../../locale/en_US';
+
+// 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+const globalConfig = merge(enConfig, {
+  calendar: {
+    title: 'title test',
+  },
+});
+
+const visible = ref(false);
+const dateNote = ref('');
+
+const format = (val: Date) => {
+  const date = new Date(val);
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+};
+
+const handleConfirm = (val: Date) => {
+  console.log(val);
+  dateNote.value = format(val);
+};
+const handleSelect = (val: Date) => {
+  console.log(val);
+};
+const onClose = (trigger: string) => {
+  console.log('closed by', trigger);
+};
+</script>

src/config-provider/demos/mobile.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">ConfigProvider 全局配置</h1>
+    <p class="summary">用于全局配置 Tdesign 组件，提供国际化能力。</p>
+    <tdesign-demo-block title="01 组件类型" summary="组件国际化">
+      <tableEn />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="日历组件国际化">
+      <calendarEn />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="其他">
+      <otherEn />
+    </tdesign-demo-block>
+  </div>
+</template>
+<script lang="ts" setup>
+import tableEn from './table-en.vue';
+import calendarEn from './calendar-en.vue';
+import otherEn from './other-en.vue';
+</script>

src/config-provider/demos/other-en.vue

@@ -0,0 +1,53 @@
+<template>
+  <t-config-provider :global-config="globalConfig">
+    <t-cell title="select time" :note="pickerValueText || 'YY-MM-DD'" @click="visible = true" />
+    <t-popup v-model="visible" placement="bottom">
+      <t-date-time-picker
+        :value="pickerValue"
+        :mode="['date']"
+        start="2015-5-5"
+        format="YYYY-MM-DD"
+        @change="onChange"
+        @pick="onPick"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </t-popup>
+  </t-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import merge from 'lodash/merge';
+import enConfig from '../../locale/en_US';
+
+// 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+const globalConfig = merge(enConfig, {
+  dateTimePicker: {
+    title: 'title test',
+  },
+});
+
+const visible = ref(false);
+const pickerValue = ref('2021-12-23');
+const pickerValueText = ref('');
+const onChange = (value: string) => {
+  console.log('change: ', value);
+};
+
+const onPick = (value: string) => {
+  console.log('pick: ', value);
+};
+
+const onCancel = () => {
+  console.log('cancel');
+  visible.value = false;
+};
+
+const onConfirm = (value: string) => {
+  console.log('confirm: ', value);
+  pickerValue.value = value;
+  pickerValueText.value = value;
+  visible.value = false;
+};
+</script>

src/config-provider/demos/table-en.vue

@@ -0,0 +1,45 @@
+<template>
+  <t-config-provider :global-config="globalConfig">
+    <!-- 全局配置：空数据呈现，演示 -->
+    <t-table :data="[]" :columns="columns" bordered row-key="property"></t-table>
+    <br /><br />
+  </t-config-provider>
+</template>
+
+<script setup lang="ts">
+import merge from 'lodash/merge';
+import enConfig from '../../locale/en_US';
+
+const columns = [
+  {
+    colKey: 'type',
+    title: 'Type',
+    sorter: true,
+  },
+  {
+    colKey: 'platform',
+    title: 'Platform',
+  },
+  {
+    colKey: 'property',
+    title: 'Property',
+    sorter: true,
+    filter: {
+      type: 'single',
+    },
+  },
+];
+
+const data = [
+  { type: 'Array', platform: 'Vue(PC)', property: 'A' },
+  { type: 'String', platform: 'React(PC)', property: 'B' },
+  { type: 'Object', platform: 'Miniprogram', property: 'C' },
+];
+
+// 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+const globalConfig = merge(enConfig, {
+  table: {
+    empty: 'Empty Data',
+  },
+});
+</script>

src/config-provider/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from '../shared';
+import _ConfigProvider from './config-provider.vue';
+
+export * from './type';
+
+export const ConfigProvider = withInstall(_ConfigProvider);
+export default ConfigProvider;