fix(useconfig): fix useConfig merge error (#386)

* fix(useconfig): fix useConfig merge error

* chore(usereceiver): update use

src/config-provider/config-receiver.ts

@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent } from 'vue';
 import defaultConfig from './zh_CN_config';
 import { GlobalConfigProvider } from './type';
 import { prefix } from '../config';

src/config-provider/context.ts

@@ -0,0 +1,33 @@
+import defaultConfig from './zh_CN_config';
+
+// TODO 替换 zh_CN_config 配置拆分，local内未走查，走查后更换，暂时使用现有配置
+// import defaultLocale from '../_common/js/locale/zh_CN';
+// export type Locale = typeof defaultLocale;
+
+export enum EAnimationType {
+  ripple = 'ripple',
+  expand = 'expand',
+  fade = 'fade',
+}
+
+export const defaultClassPrefix = 't';
+
+export const defaultAnimation: {
+  include: string[];
+  exclude: string[];
+} = {
+  include: [EAnimationType.ripple, EAnimationType.expand, EAnimationType.fade],
+  exclude: [],
+};
+
+export const defaultGlobalConfig = {
+  animation: defaultAnimation,
+  classPrefix: defaultClassPrefix,
+  ...defaultConfig,
+};
+
+export type GlobalConfig = typeof defaultGlobalConfig;
+
+export interface Config {
+  globalConfig?: GlobalConfig;
+}

src/config-provider/index.ts

@@ -3,6 +3,7 @@ import _ConfigProvider from './config-provider';
 
 export * from './type';
 
-export { useReceiver } from './useReceiver';
+export { useConfig } from './useConfig';
+
 export const ConfigProvider: WithInstallType<typeof _ConfigProvider> = withInstall(_ConfigProvider);
 export default ConfigProvider;

src/config-provider/useConfig.tsx

@@ -1,24 +1,35 @@
-import { computed, inject, Ref } from 'vue';
-import defaultConfig from './zh_CN_config';
+import { computed, inject } from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
+import _mergeWith from 'lodash/mergeWith';
+import { defaultGlobalConfig, GlobalConfig } from './context';
 
-export * from './type';
+// deal with https://github.com/lodash/lodash/issues/1313
+export const merge = (defaultGlobalConfig: GlobalConfig, injectConfig: GlobalConfig) =>
+  _mergeWith(defaultGlobalConfig, injectConfig, (objValue, srcValue) => {
+    if (Array.isArray(objValue)) {
+      return srcValue;
+    }
+  });
 
 /**
- * receive component global config
+ * component global config
  * @param componentName
  * @returns {t, global}
+ * useConfig('pagination')
  */
-export default function useConfig<T>(componentName: string) {
+export function useConfig<T extends keyof GlobalConfig>(componentName: T) {
+  const mergedGlobalConfig = computed(() => {
+    const globalConfig = inject<GlobalConfig>('globalConfig', Object.create(null));
+    const mergedGlobalConfig = merge(cloneDeep(defaultGlobalConfig), globalConfig);
+    return mergedGlobalConfig;
+  });
+
   const global = computed(() => {
-    const globalConfig = inject('globalConfig', {});
-    const defaultConfigData = defaultConfig[componentName];
-    if (globalConfig && globalConfig[componentName]) {
-      return {
-        ...defaultConfigData,
-        ...globalConfig[componentName],
-      };
-    }
-    return defaultConfigData;
+    return mergedGlobalConfig.value[componentName];
+  });
+
+  const classPrefix = computed(() => {
+    return mergedGlobalConfig.value.classPrefix;
   });
 
   // 处理正则表达式
@@ -40,7 +51,6 @@ export default function useConfig<T>(componentName: string) {
     return '';
   };
 
-  const classPrefix = 't';
   return {
     t,
     global,

src/dialog/dialog.tsx

@@ -7,8 +7,7 @@ import { DialogCloseContext, TdDialogProps } from './type';
 import props from './props';
 import TransferDom from '../utils/transfer-dom';
 import { addClass, removeClass } from '../utils/dom';
-import { DialogConfig } from '../config-provider/config-receiver';
-import { useReceiver } from '../config-provider';
+import { useConfig } from '../config-provider';
 import { useAction } from './hooks';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 
@@ -103,7 +102,7 @@ export default defineComponent({
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
     const dialogEle = ref<HTMLElement | null>(null);
-    const { global } = useReceiver<DialogConfig>('dialog');
+    const { global } = useConfig('dialog');
     const confirmBtnAction = (e: MouseEvent) => {
       emitEvent<Parameters<TdDialogProps['onConfirm']>>('confirm', { e });
     };

src/drawer/drawer.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, nextTick, onUpdated, ref, watch } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
-import { useReceiver } from '../config-provider/useReceiver';
+import { useConfig, DrawerConfig } from '../config-provider';
 import { useEmitEvent } from '../hooks/event';
 import { addClass, removeClass } from '../utils/dom';
 import { ClassName, Styles } from '../common';
@@ -10,7 +10,6 @@ import props from './props';
 import { FooterButton, DrawerCloseContext } from './type';
 import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
 import TransferDom from '../utils/transfer-dom';
-import { DrawerConfig } from '../config-provider/config-receiver';
 import { useAction } from '../dialog/hooks';
 
 type FooterButtonType = 'confirm' | 'cancel';
@@ -46,7 +45,7 @@ export default defineComponent({
   ],
 
   setup(props) {
-    const { global } = useReceiver<DrawerConfig>('drawer');
+    const { global } = useConfig('drawer');
     const emitEvent = useEmitEvent();
     const confirmBtnAction = (e: MouseEvent) => {
       emitEvent('confirm', e);

src/pagination/pagination.tsx

@@ -9,7 +9,7 @@ import {
 } from 'tdesign-icons-vue-next';
 import config from '../config';
 import { TdPaginationProps } from '../pagination/type';
-import { useReceiver, PaginationConfig } from '../config-provider';
+import { useConfig } from '../config-provider';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import TInputNumber from '../input-number';
 import { Option, Select } from '../select';
@@ -27,7 +27,7 @@ export default defineComponent({
   props,
   emits: ['change', 'update:current', 'update:pageSize', 'page-size-change', 'current-change'],
   setup(props) {
-    const { t, global } = useReceiver<PaginationConfig>('pagination');
+    const { t, global } = useConfig('pagination');
     const emitEvent = useEmitEvent();
 
     const { pageCount, ...paginationClasses } = usePaginationClasses(props, name);

src/popconfirm/popconfirm.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent } from 'vue';
 import { InfoCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { PopconfirmConfig } from '../config-provider/config-receiver';

src/tag-input/props.ts

@@ -112,16 +112,6 @@ export default {
   defaultValue: {
     type: Array as PropType<TdTagInputProps['defaultValue']>,
   },
-  // @ts-ignore
-  value: {
-    type: Array as PropType<TdTagInputProps['value']>,
-    default: undefined,
-  },
-  // @ts-ignore
-  modelValue: {
-    type: Array as PropType<TdTagInputProps['value']>,
-    default: undefined,
-  },
   /** 自定义值呈现的全部内容，参数为所有标签的值 */
   valueDisplay: {
     type: [String, Function] as PropType<TdTagInputProps['valueDisplay']>,

src/tag/tag.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, h, VNode } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 import { useEmitEvent } from '../hooks/event';
-import { useReceiver, TagConfig } from '../config-provider';
+import { useConfig } from '../config-provider';
 import CLASSNAMES from '../utils/classnames';
 import config from '../config';
 import props from './props';
@@ -17,7 +17,7 @@ export default defineComponent({
   emits: ['close', 'click'],
   setup(props) {
     const emitEvent = useEmitEvent();
-    const { global: tagGlobalConfig } = useReceiver<TagConfig>('tag');
+    const { global: tagGlobalConfig } = useConfig('tag');
     const tagClass = computed<ClassName>(() => {
       return [
         `${name}`,