✨ feat: 增加组件 link

packages/ivy-design-wc/src/components/link/index.ce.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+defineOptions({
+    name: 'Link',
+    inheritAttrs: false
+})
+
+const props = defineProps({
+    type: {
+        type: String,
+        validator: (val: string) => {
+            return ['primary', 'success', 'warning', 'danger', 'info'].includes(val)
+        }
+    },
+    underline: Boolean,
+    href: String,
+    disabled: Boolean
+})
+</script>
+
+<template>
+    <a
+        :href="props.href"
+        :class="['link', { 'is-underline': props.underline, 'is-disabled': props.disabled }]"
+    >
+        <span class="text-inner">
+            <slot></slot>
+        </span>
+    </a>
+</template>
+
+<style lang="scss">
+:host {
+    --ivy-link-font-size: var(--ivy-font-size, 14px);
+    --ivy-link-font-weight: var(--ivy-font-weight-primary);
+    --ivy-link-text-color: var(--ivy-text-color-regular);
+    --ivy-link-hover-text-color: var(--ivy-color-primary);
+    --ivy-link-disabled-text-color: var(--ivy-text-color-placeholder);
+}
+:host([type='primary']) {
+    --ivy-link-text-color: var(--ivy-color-primary);
+    --ivy-link-hover-text-color: var(--ivy-color-primary-light-3);
+    --ivy-link-disabled-text-color: var(--ivy-color-primary-light-5);
+}
+:host([type='success']) {
+    --ivy-link-text-color: var(--ivy-color-success);
+    --ivy-link-hover-text-color: var(--ivy-color-success-light-3);
+    --ivy-link-disabled-text-color: var(--ivy-color-success-light-5);
+}
+:host([type='warning']) {
+    --ivy-link-text-color: var(--ivy-color-warning);
+    --ivy-link-hover-text-color: var(--ivy-color-warning-light-3);
+    --ivy-link-disabled-text-color: var(--ivy-color-warning-light-5);
+}
+:host([type='danger']) {
+    --ivy-link-text-color: var(--ivy-color-danger);
+    --ivy-link-hover-text-color: var(--ivy-color-danger-light-3);
+    --ivy-link-disabled-text-color: var(--ivy-color-danger-light-5);
+}
+:host([type='info']) {
+    --ivy-link-text-color: var(--ivy-color-info);
+    --ivy-link-hover-text-color: var(--ivy-color-info-light-3);
+    --ivy-link-disabled-text-color: var(--ivy-color-info-light-5);
+}
+.link {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--ivy-link-font-size);
+    font-weight: var(--ivy-link-font-weight);
+    color: var(--ivy-link-text-color);
+    &-inner {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &.is-disabled {
+        cursor: not-allowed;
+        color: var(--ivy-link-disabled-text-color);
+        pointer-events: none;
+    }
+    &.is-underline:not(.is-disabled) {
+        &:hover {
+            &::after {
+                content: '';
+                height: 1px;
+                display: block;
+                position: absolute;
+                z-index: 1;
+                bottom: 0;
+                width: 100%;
+                background-color: var(--ivy-link-text-color);
+            }
+        }
+    }
+}
+</style>

packages/ivy-design-wc/src/index.ts

@@ -59,6 +59,8 @@ import IvyTable from './components/table/index.ce.vue'
 import IvyTableColumn from './components/table/column.ce.vue'
 import IvyCopyToClipboard from './components/copy-to-clipboard/index.ce.vue'
 import IvyTree from './components/tree/index.ce.vue'
+import IvyLink from './components/link/index.ce.vue'
+import IvyText from './components/text/index.ce.vue'
 
 import { createMessage } from './utils/utils'
 
@@ -120,7 +122,9 @@ const comp: Record<string, any> = {
     Table: defineCustomElement(IvyTable),
     TableColumn: defineCustomElement(IvyTableColumn),
     CopyToClipboard: defineCustomElement(IvyCopyToClipboard),
-    Tree: defineCustomElement(IvyTree)
+    Tree: defineCustomElement(IvyTree),
+    Link: defineCustomElement(IvyLink),
+    Text: defineCustomElement(IvyText)
 }
 
 export const Button = comp.Button
@@ -181,6 +185,8 @@ export const Table = comp.Table
 export const TableColumn = comp.TableColumn
 export const CopyToClipboard = comp.CopyToClipboard
 export const Tree = comp.Tree
+export const Link = comp.Link
+export const Text = comp.Text
 
 export const registerComponents = async (prefix = 'Ivy') => {
     for (const key in comp) {
@@ -266,5 +272,7 @@ declare module 'vue' {
         TableColumn: typeof comp.TableColumn
         CopyToClipboard: typeof comp.CopyToClipboard
         Tree: typeof comp.Tree
+        Link: typeof comp.Link
+        Text: typeof comp.Text
     }
 }