refactor(components): [card] switch to script-setup syntax (#6071)

packages/components/card/__tests__/card.spec.tsx

@@ -5,66 +5,46 @@ const AXIOM = 'Rem is the best girl'
 
 describe('Card.vue', () => {
   test('render test', () => {
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card>{AXIOM}</Card>)
-      slots: {
+
-        default: AXIOM,
-      },
-    })
     expect(wrapper.text()).toEqual(AXIOM)
   })
 
   test('string header', () => {
     const header = 'I am header'
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card header={header}>{AXIOM}</Card>)
-      slots: {
-        default: AXIOM,
-      },
-      props: {
-        header,
-      },
-    })
     expect(wrapper.text()).toContain(header)
   })
 
   test('vnode header', () => {
     const headerCls = 'header-text'
     const btnCls = 'test-btn'
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => (
-      slots: {
+      <Card
-        default: AXIOM,
+        v-slots={{
-        header: `<div>
+          default: () => AXIOM,
-          <span class="${headerCls}">card header</span>
+          header: () => (
-          <button class="${btnCls}">click me</button>
+            <div>
-        </div>`,
+              <span class={headerCls}>card header</span>
-      },
+              <button class={btnCls}>click me</button>
-    })
+            </div>
+          ),
+        }}
+      />
+    ))
     expect(wrapper.find('.header-text').exists()).toBe(true)
     expect(wrapper.find('.test-btn').exists()).toBe(true)
   })
 
   test('body style', () => {
     const style = 'font-size: 14px;'
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card bodyStyle={style}>{AXIOM}</Card>)
-      props: {
-        slots: {
-          default: AXIOM,
-        },
-        bodyStyle: style,
-      },
-    })
     expect(wrapper.find('.el-card__body').attributes('style')).toBe(style)
   })
 
   test('body style with object', () => {
     const style = { 'font-size': '14px' }
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card bodyStyle={style}>{AXIOM}</Card>)
-      props: {
-        slots: {
-          default: AXIOM,
-        },
-        bodyStyle: style,
-      },
-    })
     expect(wrapper.find('.el-card__body').attributes('style')).toBe(
       'font-size: 14px;'
     )
@@ -72,14 +52,7 @@ describe('Card.vue', () => {
 
   test('body style with array', () => {
     const style = [{ 'font-size': '14px' }, { color: 'blue' }]
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card bodyStyle={style}>{AXIOM}</Card>)
-      props: {
-        slots: {
-          default: AXIOM,
-        },
-        bodyStyle: style,
-      },
-    })
     expect(
       wrapper.find('.el-card__body').attributes('style').replace(/[ ]/g, '')
     ).toBe('font-size:14px;color:blue;')
@@ -87,14 +60,7 @@ describe('Card.vue', () => {
 
   test('shadow', () => {
     const shadow = 'test-shadow'
-    const wrapper = mount(Card, {
+    const wrapper = mount(() => <Card shadow={shadow}>{AXIOM}</Card>)
-      props: {
-        slots: {
-          default: AXIOM,
-        },
-        shadow,
-      },
-    })
 
     expect(wrapper.find(`.is-${shadow}-shadow`).exists()).toBe(true)
   })

packages/components/card/src/card.vue

@@ -8,20 +8,15 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { cardProps } from './card'
 
-export default defineComponent({
+defineOptions({
   name: 'ElCard',
-  props: cardProps,
-  setup() {
-    const ns = useNamespace('card')
-
-    return {
-      ns,
-    }
-  },
 })
+
+defineProps(cardProps)
+
+const ns = useNamespace('card')
 </script>