refactor(components): refactor card (#3367)

packages/components/card/__tests__/card.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Card from '../src/index.vue'
+import Card from '../src/card.vue'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/card/index.ts

@@ -1,12 +1,8 @@
-import { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-import Card from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-Card.install = (app: App): void => {
-  app.component(Card.name, Card)
-}
+import Card from './src/card.vue'
 
-const _Card = Card as SFCWithInstall<typeof Card>
+export const ElCard = withInstall(Card)
+export default ElCard
 
-export default _Card
-export const ElCard = _Card
+export * from './src/card'

packages/components/card/src/card.ts

@@ -0,0 +1,19 @@
+import { buildProp } from '@element-plus/utils/props'
+import type { ExtractPropTypes } from 'vue'
+import type { StyleValue } from '@element-plus/utils/types'
+
+export const cardProps = {
+  header: {
+    type: String,
+    default: '',
+  },
+  bodyStyle: buildProp<StyleValue>({
+    type: [String, Object, Array],
+    default: '',
+  }),
+  shadow: {
+    type: String,
+    default: '',
+  },
+} as const
+export type CardProps = ExtractPropTypes<typeof cardProps>

packages/components/card/src/card.vue

@@ -13,24 +13,10 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
-import type { StyleValue } from '@element-plus/utils/types'
+import { cardProps } from './card'
 
 export default defineComponent({
   name: 'ElCard',
-  props: {
-    header: {
-      type: String,
-      default: '',
-    },
-    bodyStyle: {
-      type: [String, Object, Array] as PropType<StyleValue>,
-      default: '' as StyleValue,
-    },
-    shadow: {
-      type: String,
-      default: '',
-    },
-  },
+  props: cardProps,
 })
 </script>