feat: add download API to Link (#2659)

* feat: add download API to Link

* feat: update common

* test: update snapshot

* feat: update common

src/link/_example/download.vue

@@ -0,0 +1,6 @@
+<template>
+  <t-space>
+    <t-link theme="primary" download href="/starter/assets/vue.ee956b80.svg">跳转链接</t-link>
+    <t-link theme="primary" download="test/download-file.png" href="/starter/assets/vue.ee956b80.svg">跳转链接</t-link>
+  </t-space>
+</template>

src/link/link.en-US.md

@@ -8,13 +8,14 @@ name | type | default | description | required
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | make link to be disabled | N
-hover | String | underline | hover link style。options：color/underline | N
+download | String / Boolean | - | Causes the browser to treat the linked URL as a download | N
+hover | String | underline | hover link style。options: color/underline | N
 href | String | - | \- | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 target | String | - | target is an attribute of `<a>` | N
-theme | String | default | options：default/primary/danger/warning/success | N
+theme | String | default | options: default/primary/danger/warning/success | N
 underline | Boolean | - | \- | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>click event, it won't trigger when it's disabled | N
 

src/link/link.md

@@ -8,6 +8,7 @@
 content | String / Slot / Function | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 禁用链接 | N
+download | String / Boolean | - | 使得浏览器将链接的 URL 视为可下载资源 | N
 hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
 href | String | - | 跳转链接 | N
 prefixIcon | Slot / Function | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

src/link/link.tsx

@@ -36,6 +36,7 @@ export default mixins(classPrefixMixins).extend({
         class={linkClass}
         href={this.disabled || !this.href ? undefined : this.href}
         target={this.target}
+        download={this.download}
         onClick={this.handleClick}
       >
         {prefixContent && <span class={`${this.componentName}__prefix-icon`}>{prefixContent}</span>}

src/link/props.ts

@@ -18,6 +18,10 @@ export default {
   },
   /** 禁用链接 */
   disabled: Boolean,
+  /** 使得浏览器将链接的 URL 视为可下载资源 */
+  download: {
+    type: [String, Boolean] as PropType<TdLinkProps['download']>,
+  },
   /** 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法 */
   hover: {
     type: String as PropType<TdLinkProps['hover']>,

src/link/type.ts

@@ -19,6 +19,10 @@ export interface TdLinkProps {
    * 禁用链接
    */
   disabled?: boolean;
+  /**
+   * 使得浏览器将链接的 URL 视为可下载资源
+   */
+  download?: string | boolean;
   /**
    * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
    * @default underline

test/snap/__snapshots__/csr.test.js.snap

@@ -65247,6 +65247,38 @@ exports[`csr snapshot test > csr test ./src/link/_example/disabled.vue 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/link/_example/download.vue 1`] = `
+<div
+  class="t-space t-space-horizontal"
+  style="gap: 16px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <a
+      class="t-link t-link--theme-primary t-link--hover-underline"
+      download=""
+      href="/starter/assets/vue.ee956b80.svg"
+      target=""
+    >
+      跳转链接
+    </a>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <a
+      class="t-link t-link--theme-primary t-link--hover-underline"
+      download="test/download-file.png"
+      href="/starter/assets/vue.ee956b80.svg"
+      target=""
+    >
+      跳转链接
+    </a>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/link/_example/hover.vue 1`] = `
 <div
   class="t-space t-space-vertical"

test/snap/__snapshots__/ssr.test.js.snap

@@ -572,6 +572,8 @@ exports[`ssr snapshot test > renders ./src/link/_example/base.vue correctly 1`]
 
 exports[`ssr snapshot test > renders ./src/link/_example/disabled.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-default t-is-disabled\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-primary t-is-disabled t-is-underline\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-danger t-is-disabled\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-warning t-is-disabled\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-success t-is-disabled\\"> 跳转链接 <span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div>"`;
 
+exports[`ssr snapshot test > renders ./src/link/_example/download.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a href=\\"/starter/assets/vue.ee956b80.svg\\" target=\\"\\" download=\\"\\" class=\\"t-link t-link--theme-primary t-link--hover-underline\\">跳转链接</a></div><div class=\\"t-space-item\\"><a href=\\"/starter/assets/vue.ee956b80.svg\\" target=\\"\\" download=\\"test/download-file.png\\" class=\\"t-link t-link--theme-primary t-link--hover-underline\\">跳转链接</a></div></div>"`;
+
 exports[`ssr snapshot test > renders ./src/link/_example/hover.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-default t-link--hover-underline\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-primary t-link--hover-underline\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-danger t-link--hover-underline\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-warning t-link--hover-underline\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-success t-link--hover-underline\\"> 跳转链接 </a></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-default t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-primary t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-danger t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-warning t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-success t-link--hover-color\\"> 跳转链接 </a></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-default t-is-underline t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-primary t-is-underline t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-danger t-is-underline t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-warning t-is-underline t-link--hover-color\\"> 跳转链接 </a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-success t-is-underline t-link--hover-color\\"> 跳转链接 </a></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/link/_example/icon.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-default t-link--hover-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-link\\"><path fill=\\"currentColor\\" d=\\"M6.23 11.89l2.12-2.12.71.7-2.12 2.13A2.5 2.5 0 013.4 9.06l2.13-2.12.7.7-2.12 2.13a1.5 1.5 0 002.12 2.12zM10.47 9.06l-.7-.7 2.12-2.13a1.5 1.5 0 10-2.12-2.12L7.65 6.23l-.71-.7L9.06 3.4a2.5 2.5 0 013.54 3.54l-2.13 2.12z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9.06 6.23L6.23 9.06l.71.7 2.83-2.82-.7-.7z\\" fill-opacity=\\"0.9\\"></path></svg></span> 跳转链接 </a></div><div class=\\"t-space-item\\"><a href=\\"https://tdesign.tencent.com/\\" target=\\"_self\\" class=\\"t-link t-link--theme-primary t-is-underline t-link--hover-underline\\"><span class=\\"t-link__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-link\\"><path fill=\\"currentColor\\" d=\\"M6.23 11.89l2.12-2.12.71.7-2.12 2.13A2.5 2.5 0 013.4 9.06l2.13-2.12.7.7-2.12 2.13a1.5 1.5 0 002.12 2.12zM10.47 9.06l-.7-.7 2.12-2.13a1.5 1.5 0 10-2.12-2.12L7.65 6.23l-.71-.7L9.06 3.4a2.5 2.5 0 013.54 3.54l-2.13 2.12z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9.06 6.23L6.23 9.06l.71.7 2.83-2.82-.7-.7z\\" fill-opacity=\\"0.9\\"></path></svg></span> 跳转链接 </a></div><div class=\\"t-space-item\\"><a href=\\"https://tdesign.tencent.com/\\" target=\\"_blank\\" class=\\"t-link t-link--theme-danger t-link--hover-color\\"> 跳转链接 <span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div><div class=\\"t-space-item\\"><a target=\\"\\" class=\\"t-link t-link--theme-warning t-is-disabled\\"> 跳转链接 <span class=\\"t-link__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-jump\\"><path fill=\\"currentColor\\" d=\\"M2.3 13.7a1 1 0 00.7.3h10a1 1 0 001-1V8.5h-1V13H3V3h4.5V2H3a1 1 0 00-1 1v10c0 .27.1.52.3.7z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M9 3V2h4.5c.28 0 .5.22.5.5V7h-1V3.7L8.7 8 8 7.3 12.3 3H9z\\" fill-opacity=\\"0.9\\"></path></svg></span></a></div></div>"`;