feat(link): add link component and it's tests

packages/element-plus/index.ts

@@ -10,6 +10,7 @@ import ElTimeLine from '@element-plus/time-line'
 import ElProgress from '@element-plus/progress'
 import ElBreadcrumb from '@element-plus/breadcrumb'
 import ElIcon from '@element-plus/icon'
+import ElLink from '@element-plus/link'
 
 export {
   ElAvatar,
@@ -23,6 +24,7 @@ export {
   ElProgress,
   ElBreadcrumb,
   ElIcon,
+  ElLink,
 }
 
 export default function install(app: App): void {
@@ -37,4 +39,5 @@ export default function install(app: App): void {
   ElProgress(app)
   ElBreadcrumb(app)
   ElIcon(app)
+  ElLink(app)
 }

packages/element-plus/package.json

@@ -17,13 +17,14 @@
     "@element-plus/avatar": "^0.0.0",
     "@element-plus/badge": "^0.0.0",
     "@element-plus/button": "^0.0.0",
-    "@element-plus/layout": "^0.0.0",
-    "@element-plus/card": "^0.0.0",
-    "@element-plus/tag": "^0.0.0",
-    "@element-plus/time-line": "^0.0.0",
-    "@element-plus/divider": "^0.0.0",
-    "@element-plus/progress": "^0.0.0",
     "@element-plus/breadcrumb": "^0.0.0",
-    "@element-plus/icon": "^0.0.0"
+    "@element-plus/card": "^0.0.0",
+    "@element-plus/divider": "^0.0.0",
+    "@element-plus/icon": "^0.0.0",
+    "@element-plus/layout": "^0.0.0",
+    "@element-plus/link": "^0.0.0",
+    "@element-plus/progress": "^0.0.0",
+    "@element-plus/tag": "^0.0.0",
+    "@element-plus/time-line": "^0.0.0"
   }
 }

packages/link/__tests__/link.spec.ts

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import Link from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Link.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(Link, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+  })
+
+  test('it should handle click event when href were given and is not disabled', async () => {
+    const href = 'https://target.com'
+    const wrapper = mount(Link, {
+      slots: {
+        default: AXIOM,
+      },
+      props: {
+        href,
+      },
+    })
+
+    await wrapper.find('.el-link').trigger('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  test('it should disable click when it\'s disabled', async () => {
+    const href = 'https://target.com'
+    const wrapper = mount(Link, {
+      slots: {
+        default: AXIOM,
+      },
+      props: {
+        href,
+        disabled: true,
+      },
+    })
+
+    await wrapper.find('.el-link').trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+
+
+})

packages/link/doc/index.stories.ts

@@ -0,0 +1,20 @@
+import ElLink from '../index'
+
+export default {
+  title: 'Link',
+}
+
+const commonProps = 'href="https://vuejs.org" target="_blank" rel="noreferrer noopener" style="margin-right: 10px;"'
+
+export const BasicLinks = () => `
+<el-link ${commonProps}>normal link</el-link>
+<el-link ${commonProps} type="primary">primary link</el-link>
+<el-link ${commonProps} type="success">success link</el-link>
+<el-link ${commonProps} type="info">info link</el-link>
+<el-link ${commonProps} type="warning">warning link</el-link>
+<el-link ${commonProps} type="error">error link</el-link>
+`
+
+export const DisabledLinks = () => `
+<el-link disabled="true" ${commonProps}>disabled link</el-link>
+`

packages/link/index.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import Link from './src/index.vue'
+export default (app: App): void => {
+  app.component(Link.name, Link)
+}
+
+export {
+  Link,
+}

packages/link/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/link",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/link/src/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <a
+    :class="[
+      'el-link',
+      type ? `el-link--${type}` : '',
+      disabled && 'is-disabled',
+      underline && !disabled && 'is-underline'
+    ]"
+    :href="disabled ? null : href"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <i v-if="icon" :class="icon"></i>
+
+    <span v-if="$slots.default" class="el-link--inner">
+      <slot></slot>
+    </span>
+
+    <template v-if="$slots.icon">
+      <slot v-if="$slots.icon" name="icon"></slot>
+    </template>
+  </a>
+</template>
+<script lang='ts'>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ElLink',
+  props: {
+    type: {
+      type: String,
+      default: '',
+      validator: (val: string) => {
+        return ['', 'primary', 'success', 'warning', 'info', 'error'].includes(val)
+      },
+    },
+    underline: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: { type: Boolean, default: false },
+    href: { type: String, default: '' },
+    icon: { type: String, default: '' },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+
+    function handleClick(event: Event) {
+      if (!props.disabled && !!props.href) {
+        emit('click', event)
+      }
+    }
+
+    return {
+      handleClick,
+    }
+  },
+})
+</script>
+<style scoped>
+</style>