From 66043aa3b56ecdf2f19b03c463d081800cd51c35 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Fri, 5 Nov 2021 18:10:07 +0800
Subject: [PATCH] refactor(components): [el-config-provider] improve
 componomponent  extendiability (#4175)

re #4146

added button configuration
added useGlobalConfig hook
---
 docs/en-US/component/button.md                | 25 ++++++------
 docs/en-US/component/config-provider.md       | 23 +++++++++--
 docs/examples/config-provider/button.vue      | 28 +++++++++++++
 packages/components/button/src/button.ts      |  8 +++-
 packages/components/button/src/button.vue     | 10 +++--
 .../__tests__/config-provider.spec.ts         | 39 +++++++++++++++++--
 .../config-provider/config-provider.ts        | 17 --------
 packages/components/config-provider/index.ts  |  2 +-
 .../config-provider/src/config-provider.ts    | 16 ++++++++
 .../components/config-provider/src/index.ts   | 14 +++++++
 packages/hooks/index.ts                       |  1 +
 packages/hooks/use-global-config/index.ts     | 13 +++++++
 packages/hooks/use-locale/index.ts            | 10 ++---
 packages/tokens/config-provider.ts            |  7 ++++
 packages/tokens/index.ts                      |  1 +
 15 files changed, 168 insertions(+), 46 deletions(-)
 create mode 100644 docs/examples/config-provider/button.vue
 delete mode 100644 packages/components/config-provider/config-provider.ts
 create mode 100644 packages/components/config-provider/src/config-provider.ts
 create mode 100644 packages/components/config-provider/src/index.ts
 create mode 100644 packages/hooks/use-global-config/index.ts
 create mode 100644 packages/tokens/config-provider.ts

diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md
index 9ed120295c..b03cb940e0 100644
--- a/docs/en-US/component/button.md
+++ b/docs/en-US/component/button.md
@@ -77,18 +77,19 @@ button/size
 
 ## Button Attributes
 
-| Attribute   | Description                            | Type               | Accepted Values                                    | Default |
-| ----------- | -------------------------------------- | ------------------ | -------------------------------------------------- | ------- |
-| size        | button size                            | string             | medium / small / mini                              | —       |
-| type        | button type                            | string             | primary / success / warning / danger / info / text | —       |
-| plain       | determine whether it's a plain button  | boolean            | —                                                  | false   |
-| round       | determine whether it's a round button  | boolean            | —                                                  | false   |
-| circle      | determine whether it's a circle button | boolean            | —                                                  | false   |
-| loading     | determine whether it's loading         | boolean            | —                                                  | false   |
-| disabled    | disable the button                     | boolean            | —                                                  | false   |
-| icon        | icon component                         | string / Component | —                                                  | —       |
-| autofocus   | same as native button's `autofocus`    | boolean            | —                                                  | false   |
-| native-type | same as native button's `type`         | string             | button / submit / reset                            | button  |
+| Attribute         | Description                                                 | Type               | Accepted Values                                    | Default |
+| ----------------- | ----------------------------------------------------------- | ------------------ | -------------------------------------------------- | ------- |
+| size              | button size                                                 | string             | medium / small / mini                              | —       |
+| type              | button type                                                 | string             | primary / success / warning / danger / info / text | —       |
+| plain             | determine whether it's a plain button                       | boolean            | —                                                  | false   |
+| round             | determine whether it's a round button                       | boolean            | —                                                  | false   |
+| circle            | determine whether it's a circle button                      | boolean            | —                                                  | false   |
+| loading           | determine whether it's loading                              | boolean            | —                                                  | false   |
+| disabled          | disable the button                                          | boolean            | —                                                  | false   |
+| icon              | icon component                                              | string / Component | —                                                  | —       |
+| autofocus         | same as native button's `autofocus`                         | boolean            | —                                                  | false   |
+| native-type       | same as native button's `type`                              | string             | button / submit / reset                            | button  |
+| auto-insert-space | automatically insert a space between two chinese characters | boolean            |                                                    | —       |
 
 ## Button Slots
 
diff --git a/docs/en-US/component/config-provider.md b/docs/en-US/component/config-provider.md
index 3928ad9df4..1fd300b8c7 100644
--- a/docs/en-US/component/config-provider.md
+++ b/docs/en-US/component/config-provider.md
@@ -17,12 +17,27 @@ config-provider/usage
 
 :::
 
+## button configurations
+
+:::demo Use two attributes to provide i18n related config
+
+config-provider/button
+
+:::
+
 ## Config Provider Attributes
 
-| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
-| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -       |
+| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default                 |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ----------------------- |
+| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English                 |
+| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -                       |
+| button    | button related configuration, [see the following table](#button-attributes)                                                                                       | ButtonGlobalConfig                   | -                                                                                       | see the following table |
+
+### Button Attributes
+
+| Attribute       | Description                                                 | Type    | Accepted Values | Default |
+| --------------- | ----------------------------------------------------------- | ------- | --------------- | ------- |
+| autoInsertSpace | automatically insert a space between two chinese characters | boolean | -               | true    |
 
 ## ConfigProvider Slots
 
diff --git a/docs/examples/config-provider/button.vue b/docs/examples/config-provider/button.vue
new file mode 100644
index 0000000000..067a094f80
--- /dev/null
+++ b/docs/examples/config-provider/button.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-config-provider :button="config">
+      <el-button>中文</el-button>
+    </el-config-provider>
+    <div>
+      <el-checkbox v-model="config.autoInsertSpace"
+        >autoInsertSpace</el-checkbox
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const config = reactive({
+      autoInsertSpace: true,
+    })
+
+    return {
+      config,
+    }
+  },
+})
+</script>
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index fc81dd41ab..b5a5c21d10 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -1,6 +1,5 @@
 import { useFormItemProps } from '@element-plus/hooks'
 import { buildProps, definePropType } from '@element-plus/utils/props'
-
 import type { ExtractPropTypes, Component } from 'vue'
 
 export const buttonType = [
@@ -37,8 +36,15 @@ export const buttonProps = buildProps({
   autofocus: Boolean,
   round: Boolean,
   circle: Boolean,
+  autoInsertSpace: {
+    type: Boolean,
+  },
 } as const)
 
+export interface ButtonConfigContext {
+  autoInsertSpace?: boolean
+}
+
 export const buttonEmits = {
   click: (evt: MouseEvent) => evt instanceof MouseEvent,
 }
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 522d5d30a0..77f17c2999 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -33,10 +33,9 @@
 <script lang="ts">
 import { computed, inject, defineComponent, Text } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
-import { useFormItem } from '@element-plus/hooks'
+import { useFormItem, useGlobalConfig } from '@element-plus/hooks'
 import { elButtonGroupKey, elFormKey } from '@element-plus/tokens'
 import { Loading } from '@element-plus/icons'
-
 import { buttonEmits, buttonProps } from './button'
 
 export default defineComponent({
@@ -52,10 +51,15 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const elBtnGroup = inject(elButtonGroupKey, undefined)
+    const globalConfig = useGlobalConfig()
+    const autoInsertSpace = computed(() => {
+      return props.autoInsertSpace ?? globalConfig?.button.autoInsertSpace
+    })
+
     // add space between two characters in Chinese
     const shouldAddSpace = computed(() => {
       const defaultSlot = slots.default?.()
-      if (defaultSlot?.length === 1) {
+      if (autoInsertSpace.value && defaultSlot?.length === 1) {
         const slot = defaultSlot[0]
         if (slot?.type === Text) {
           const text = slot.children
diff --git a/packages/components/config-provider/__tests__/config-provider.spec.ts b/packages/components/config-provider/__tests__/config-provider.spec.ts
index 02b453ab19..20e00f9140 100644
--- a/packages/components/config-provider/__tests__/config-provider.spec.ts
+++ b/packages/components/config-provider/__tests__/config-provider.spec.ts
@@ -1,10 +1,10 @@
-import { h, ref, inject } from 'vue'
+import { h, ref, inject, reactive, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { LocaleInjectionKey } from '@element-plus/hooks'
 import Chinese from '@element-plus/locale/lang/zh-cn'
 import English from '@element-plus/locale/lang/en'
-import { ConfigProvider } from '../config-provider'
-
+import { ElButton } from '@element-plus/components'
+import { ConfigProvider } from '../src'
 import type { Language } from '@element-plus/locale'
 
 const TestComp = {
@@ -87,4 +87,37 @@ describe('config-provider', () => {
       )
     })
   })
+
+  describe('button-config', () => {
+    it('autoInsertSpace', async () => {
+      const wrapper = mount({
+        components: {
+          [ConfigProvider.name]: ConfigProvider,
+          ElButton,
+        },
+        setup() {
+          const config = reactive({
+            autoInsertSpace: true,
+          })
+          return {
+            config,
+          }
+        },
+        template: `
+          <el-config-provider :button="config">
+            <el-button>中文</el-button>
+          </el-config-provider>
+          <button class="toggle" @click="config.autoInsertSpace = !config.autoInsertSpace">toggle</button>
+        `,
+      })
+      await nextTick()
+      expect(
+        wrapper.find('.el-button .el-button__text--expand').exists()
+      ).toBeTruthy()
+      await wrapper.find('.toggle').trigger('click')
+      expect(
+        wrapper.find('.el-button .el-button__text--expand').exists()
+      ).toBeFalsy()
+    })
+  })
 })
diff --git a/packages/components/config-provider/config-provider.ts b/packages/components/config-provider/config-provider.ts
deleted file mode 100644
index e125230d2f..0000000000
--- a/packages/components/config-provider/config-provider.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineComponent } from 'vue'
-
-import { useLocaleProps, useLocale } from '@element-plus/hooks'
-
-export const ConfigProvider = defineComponent({
-  name: 'ElConfigProvider',
-  props: {
-    ...useLocaleProps,
-    // Add more configs
-  },
-
-  setup(_, { slots }) {
-    useLocale()
-
-    return () => slots.default?.()
-  },
-})
diff --git a/packages/components/config-provider/index.ts b/packages/components/config-provider/index.ts
index cdc3118a6d..b6ceb87211 100644
--- a/packages/components/config-provider/index.ts
+++ b/packages/components/config-provider/index.ts
@@ -1,5 +1,5 @@
 import { withInstall } from '@element-plus/utils/with-install'
-import { ConfigProvider } from './config-provider'
+import { ConfigProvider } from './src'
 
 export const ElConfigProvider = withInstall(ConfigProvider)
 export default ElConfigProvider
diff --git a/packages/components/config-provider/src/config-provider.ts b/packages/components/config-provider/src/config-provider.ts
new file mode 100644
index 0000000000..5a3522b75f
--- /dev/null
+++ b/packages/components/config-provider/src/config-provider.ts
@@ -0,0 +1,16 @@
+import { useLocaleProps } from '@element-plus/hooks'
+import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import type { ButtonConfigContext } from '@element-plus/components/button'
+
+export const configProviderProps = {
+  ...useLocaleProps,
+  // Add more configs
+  button: buildProp({
+    type: definePropType<ButtonConfigContext>(Object),
+    default: () => {
+      return mutable({
+        autoInsertSpace: true,
+      } as const)
+    },
+  }),
+}
diff --git a/packages/components/config-provider/src/index.ts b/packages/components/config-provider/src/index.ts
new file mode 100644
index 0000000000..c6a0c343df
--- /dev/null
+++ b/packages/components/config-provider/src/index.ts
@@ -0,0 +1,14 @@
+import { provide, defineComponent } from 'vue'
+import { useLocale } from '@element-plus/hooks'
+import { configProviderContextKey } from '@element-plus/tokens'
+import { configProviderProps } from './config-provider'
+
+export const ConfigProvider = defineComponent({
+  name: 'ElConfigProvider',
+  props: configProviderProps,
+  setup(props, { slots }) {
+    useLocale()
+    provide(configProviderContextKey, props)
+    return () => slots.default?.()
+  },
+})
diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts
index 48cb2a6e45..672c4da63b 100644
--- a/packages/hooks/index.ts
+++ b/packages/hooks/index.ts
@@ -15,3 +15,4 @@ export * from './use-css-var'
 export * from './use-locale'
 export * from './use-form-item'
 export * from './use-same-target'
+export * from './use-global-config'
diff --git a/packages/hooks/use-global-config/index.ts b/packages/hooks/use-global-config/index.ts
new file mode 100644
index 0000000000..1325d58d71
--- /dev/null
+++ b/packages/hooks/use-global-config/index.ts
@@ -0,0 +1,13 @@
+import { inject } from 'vue'
+import { configProviderContextKey } from '@element-plus/tokens'
+import type { ConfigProvdierContext } from '@element-plus/tokens'
+
+const defaultConfig: ConfigProvdierContext = {
+  button: {
+    autoInsertSpace: true,
+  },
+}
+
+export const useGlobalConfig = () => {
+  return inject(configProviderContextKey, defaultConfig)
+}
diff --git a/packages/hooks/use-locale/index.ts b/packages/hooks/use-locale/index.ts
index 0eb321d192..713f0b9e08 100644
--- a/packages/hooks/use-locale/index.ts
+++ b/packages/hooks/use-locale/index.ts
@@ -1,13 +1,13 @@
 import { computed, getCurrentInstance, inject, provide, ref } from 'vue'
 import English from '@element-plus/locale/lang/en'
-
-import type { InjectionKey, PropType, Ref } from 'vue'
+import { buildProp, definePropType } from '@element-plus/utils/props'
+import type { InjectionKey, Ref } from 'vue'
 import type { Language } from '@element-plus/locale'
 
 export const useLocaleProps = {
-  locale: {
-    type: Object as PropType<Language>,
-  },
+  locale: buildProp({
+    type: definePropType<Language>(Object),
+  }),
 }
 
 type Translator = (...args: any[]) => string
diff --git a/packages/tokens/config-provider.ts b/packages/tokens/config-provider.ts
new file mode 100644
index 0000000000..be3d9f3d2d
--- /dev/null
+++ b/packages/tokens/config-provider.ts
@@ -0,0 +1,7 @@
+import type { configProviderProps } from '@element-plus/components/config-provider/config-provider'
+import type { InjectionKey, ExtractPropTypes } from 'vue'
+
+export type ConfigProvdierContext = ExtractPropTypes<typeof configProviderProps>
+
+export const configProviderContextKey: InjectionKey<ConfigProvdierContext> =
+  Symbol()
diff --git a/packages/tokens/index.ts b/packages/tokens/index.ts
index a2d123c3c1..ddeaa187b3 100644
--- a/packages/tokens/index.ts
+++ b/packages/tokens/index.ts
@@ -2,3 +2,4 @@ export * from './form'
 export * from './button'
 export * from './breadcrumb'
 export * from './pagination'
+export * from './config-provider'