From 60da0daf983efbefcf8125ff676b1941ca2f36bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 13 Sep 2021 10:51:11 +0800
Subject: [PATCH] refactor(components): refactor card (#3367)

---
 .../components/card/__tests__/card.spec.ts    |  2 +-
 packages/components/card/index.ts             | 14 +++++---------
 packages/components/card/src/card.ts          | 19 +++++++++++++++++++
 .../card/src/{index.vue => card.vue}          | 18 ++----------------
 4 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 packages/components/card/src/card.ts
 rename packages/components/card/src/{index.vue => card.vue} (56%)

diff --git a/packages/components/card/__tests__/card.spec.ts b/packages/components/card/__tests__/card.spec.ts
index 81ac070379..872380a268 100644
--- a/packages/components/card/__tests__/card.spec.ts
+++ b/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'
 
diff --git a/packages/components/card/index.ts b/packages/components/card/index.ts
index 6029d1000f..f23508beb2 100644
--- a/packages/components/card/index.ts
+++ b/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'
diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
new file mode 100644
index 0000000000..308d68d047
--- /dev/null
+++ b/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>
diff --git a/packages/components/card/src/index.vue b/packages/components/card/src/card.vue
similarity index 56%
rename from packages/components/card/src/index.vue
rename to packages/components/card/src/card.vue
index 1856198621..c2ccc74cab 100644
--- a/packages/components/card/src/index.vue
+++ b/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>