refactor(components): [config-provider] improve ConfigContext types (#23528)

* refactor(components): [config-provider] align shadow type

* refactor(components): [config-provider] align button/link  context type

* Update button.vue

* Change link type from 'primary' to 'success'

docs/examples/config-provider/button.vue

@@ -26,7 +26,9 @@
 import { reactive } from 'vue'
 import { buttonTypes } from 'element-plus'
 
-const config = reactive({
+import type { ButtonConfigContext } from 'element-plus'
+
+const config = reactive<ButtonConfigContext>({
   autoInsertSpace: true,
   type: 'default',
   plain: true,

docs/examples/config-provider/card.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 
-const config = reactive({
+import type { CardConfigContext } from 'element-plus'
+
+const config = reactive<CardConfigContext>({
   shadow: 'always',
 })
 </script>

docs/examples/config-provider/link.vue

@@ -28,10 +28,12 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 
+import type { LinkConfigContext } from 'element-plus'
+
 const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default']
 const underlineOptions = ['always', 'never', 'hover']
 
-const config = reactive({
+const config = reactive<LinkConfigContext>({
   type: 'success',
   underline: 'always',
 })

packages/components/button/src/button.ts

@@ -218,9 +218,9 @@ export type ButtonPropsPublic = ExtractPublicPropTypes<typeof buttonProps>
 export type ButtonEmits = typeof buttonEmits
 
 export interface ButtonConfigContext {
-  type?: string
-  plain?: boolean
-  text?: boolean
-  round?: boolean
-  autoInsertSpace?: boolean
+  type?: ButtonProps['type']
+  plain?: ButtonProps['plain']
+  text?: ButtonProps['text']
+  round?: ButtonProps['round']
+  autoInsertSpace?: ButtonProps['autoInsertSpace']
 }

packages/components/card/src/card.ts

@@ -81,7 +81,7 @@ export const cardProps = buildProps({
 } as const)
 export type CardPropsPublic = ExtractPublicPropTypes<typeof cardProps>
 export interface CardConfigContext {
-  shadow?: string
+  shadow?: CardProps['shadow']
 }
 
 export const cardContextKey: InjectionKey<CardConfigContext> =

packages/components/config-provider/__tests__/config-provider.test.tsx

@@ -140,7 +140,7 @@ describe('config-provider', () => {
         round: true,
         autoInsertSpace: true,
         text: true,
-      })
+      } as const)
 
       const wrapper = mount(() => (
         <ConfigProvider button={config}>
@@ -162,7 +162,7 @@ describe('config-provider', () => {
     it('should have shadow="hover" instead of \'always\'', async () => {
       const config = reactive({
         shadow: 'hover',
-      })
+      } as const)
       const overrideShadow = ref('')
 
       const wrapper = mount(() => (
@@ -183,7 +183,7 @@ describe('config-provider', () => {
       const config = reactive({
         type: 'success',
         underline: 'always',
-      })
+      } as const)
 
       const wrapper = mount(() => (
         <ConfigProvider link={config}>

packages/components/link/src/link.ts

@@ -92,6 +92,6 @@ export type LinkEmits = typeof linkEmits
 
 export type LinkInstance = InstanceType<typeof Link> & unknown
 export interface LinkConfigContext {
-  type?: string
-  underline?: string | boolean
+  type?: LinkProps['type']
+  underline?: LinkProps['underline']
 }