refactor(components): [link] refactor (#6543)

build/type-safe.json

@@ -18,6 +18,7 @@
   "packages/components/collapse-item/",
   "packages/components/dialog/",
   "packages/components/icon/",
+  "packages/components/link/",
   "packages/components/page-header/",
   "packages/components/row/",
   "packages/components/slot/",

packages/components/link/__tests__/link.vitest.ts

@@ -1,10 +1,11 @@
 import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
 import Link from '../src/link.vue'
 
 const AXIOM = 'Rem is the best girl'
 
 describe('Link.vue', () => {
-  test('render test', () => {
+  it('render test', () => {
     const wrapper = mount(Link, {
       slots: {
         default: AXIOM,
@@ -13,7 +14,7 @@ describe('Link.vue', () => {
     expect(wrapper.text()).toEqual(AXIOM)
   })
 
-  test('it should handle click event when link is not disabled', async () => {
+  it('it should handle click event when link is not disabled', async () => {
     const wrapper = mount(Link, {
       slots: {
         default: AXIOM,
@@ -24,7 +25,7 @@ describe('Link.vue', () => {
     expect(wrapper.emitted('click')).toHaveLength(1)
   })
 
-  test('it should disable click when link is disabled', async () => {
+  it('it should disable click when link is disabled', async () => {
     const wrapper = mount(Link, {
       slots: {
         default: AXIOM,
@@ -38,7 +39,7 @@ describe('Link.vue', () => {
     expect(wrapper.emitted('click')).toBeUndefined()
   })
 
-  test('icon slots', () => {
+  it('icon slots', () => {
     const linkName = 'test link'
     const wrapper = mount(Link, {
       slots: {

packages/components/link/src/link.vue

@@ -2,7 +2,7 @@
   <a
     :class="[
       ns.b(),
-      type ? ns.m(type) : '',
+      ns.m(type),
       ns.is('disabled', disabled),
       ns.is('underline', underline && !disabled),
     ]"
@@ -11,37 +11,27 @@
   >
     <el-icon v-if="icon"><component :is="icon" /></el-icon>
     <span v-if="$slots.default" :class="ns.e('inner')">
-      <slot></slot>
+      <slot />
     </span>
 
-    <slot v-if="$slots.icon" name="icon"></slot>
+    <slot v-if="$slots.icon" name="icon" />
   </a>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
+
+<script lang="ts" setup>
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
 import { linkProps, linkEmits } from './link'
 
-export default defineComponent({
+defineOptions({
   name: 'ElLink',
-
-  components: { ElIcon },
-
-  props: linkProps,
-  emits: linkEmits,
-
-  setup(props, { emit }) {
-    const ns = useNamespace('link')
-
-    function handleClick(event: MouseEvent) {
-      if (!props.disabled) emit('click', event)
-    }
-
-    return {
-      ns,
-      handleClick,
-    }
-  },
 })
+const props = defineProps(linkProps)
+const emit = defineEmits(linkEmits)
+
+const ns = useNamespace('link')
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled) emit('click', event)
+}
 </script>