refactor(components): [card] add namespace & instance type (#5445)

packages/components/card/src/card.ts

@@ -1,4 +1,5 @@
 import { buildProps, definePropType } from '@element-plus/utils/props'
+import type Card from './card.vue'
 import type { ExtractPropTypes } from 'vue'
 import type { StyleValue } from '@element-plus/utils/types'
 
@@ -17,3 +18,4 @@ export const cardProps = buildProps({
   },
 } as const)
 export type CardProps = ExtractPropTypes<typeof cardProps>
+export type CardInstance = InstanceType<typeof Card>

packages/components/card/src/card.vue

@@ -1,22 +1,27 @@
 <template>
-  <div
-    class="el-card"
-    :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"
-  >
-    <div v-if="$slots.header || header" class="el-card__header">
+  <div :class="[ns.b(), shadow ? `is-${shadow}-shadow` : 'is-always-shadow']">
+    <div v-if="$slots.header || header" :class="ns.e('header')">
       <slot name="header">{{ header }}</slot>
     </div>
-    <div class="el-card__body" :style="bodyStyle">
+    <div :class="ns.e('body')" :style="bodyStyle">
       <slot></slot>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { cardProps } from './card'
 
 export default defineComponent({
   name: 'ElCard',
   props: cardProps,
+  setup() {
+    const ns = useNamespace('card')
+
+    return {
+      ns,
+    }
+  },
 })
 </script>