refactor(link): sfc to tsx

src/link/__test__/index.test.jsx

@@ -1,8 +1,7 @@
-import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import { Icon, AppIcon as TIconApp } from 'tdesign-icons-vue-next';
-import Link from '../link.vue';
+import Link from '../link';
 // const iconFunc = () => h(TIconApp);
 
 // every component needs four parts: props/events/slots/functions.

src/link/index.ts

@@ -1,4 +1,4 @@
-import Link from './link.vue';
+import Link from './link';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';

src/link/link.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Link Props
 
 name | type | default | description | required
@@ -11,10 +12,10 @@ disabled | Boolean | - | make link to be disabled | N
 hover | Boolean | - | \- | N
 href | String | - | \- | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-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-mobile-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-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-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
 
@@ -24,8 +25,8 @@ name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | click event, it won't trigger when it's disabled
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +44,4 @@ Name | Default Value | Description
 --td-link-success-disabled-color | @success-color-disabled | - 
 --td-link-warning-active-color | @warning-color-active | - 
 --td-link-warning-color | @warning-color | - 
---td-link-warning-disabled-color | @warning-color-disabled | - 
+--td-link-warning-disabled-color | @warning-color-disabled | -

src/link/link.md

@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Link Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 content | String / Slot / Function | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -24,8 +25,8 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击事件
 -- | -- | --
 click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -43,4 +44,4 @@ click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件
 --td-link-success-disabled-color | @success-color-disabled | - 
 --td-link-warning-active-color | @warning-color-active | - 
 --td-link-warning-color | @warning-color | - 
---td-link-warning-disabled-color | @warning-color-disabled | - 
+--td-link-warning-disabled-color | @warning-color-disabled | -

src/link/link.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, computed } from 'vue';
+import config from '../config';
+import LinkProps from './props';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-link`;
+export default defineComponent({
+  name,
+  props: LinkProps,
+  setup(props) {
+    const linkClass = usePrefixClass('link');
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
+
+    const linkClasses = computed(() => [
+      linkClass.value,
+      `${linkClass.value}--${props.theme || 'default'}`,
+      `${linkClass.value}--${props.size || 'medium'}`,
+      {
+        [`${linkClass.value}--disabled`]: props.disabled,
+        [`${linkClass.value}--underline`]: props.underline,
+        [`${linkClass.value}--hover`]: props.hover && !props.disabled,
+      },
+    ]);
+
+    const handleClick = (e: MouseEvent) => {
+      if (props.disabled) return;
+      props.onClick?.(e);
+    };
+
+    const renderContent = () => {
+      const content = renderTNodeContent('default', 'content');
+      return content ? <span class={[`${linkClass.value}__content`]}>{content}</span> : null;
+    };
+
+    const renderPrefixIcon = () => {
+      const prefixIcon = renderTNodeJSX('prefixIcon');
+      return prefixIcon ? <span class={[`${linkClass.value}__prefix-icon`]}>{prefixIcon}</span> : null;
+    };
+
+    const renderSuffixIcon = () => {
+      const suffixIcon = renderTNodeJSX('suffixIcon');
+      return suffixIcon ? <span class={[`${linkClass.value}__suffix-icon`]}>{suffixIcon}</span> : null;
+    };
+
+    return () => {
+      return (
+        <a
+          class={linkClasses.value}
+          aria-disabled={props.disabled}
+          target={props.target}
+          href={props.disabled || !props.href ? undefined : props.href}
+          onClick={handleClick}
+        >
+          {renderPrefixIcon()}
+          {renderContent()}
+          {renderSuffixIcon()}
+        </a>
+      );
+    };
+  },
+});

src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap

@@ -120,15 +120,15 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
           style="margin-left: 2px;"
           target=""
         >
-          <!--v-if-->
+          <!---->
           <span
             class="t-link__content"
           >
 
             详情
 
           </span>
-          <!--v-if-->
+          <!---->
         </a>
 
       </span>
@@ -200,15 +200,15 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
             style="margin-left: 5px;"
             target=""
           >
-            <!--v-if-->
+            <!---->
             <span
               class="t-link__content"
             >
 
               详情
 
             </span>
-            <!--v-if-->
+            <!---->
           </a>
 
         </span>
@@ -566,15 +566,15 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                 style="margin-left: 5px;"
                 target=""
               >
-                <!--v-if-->
+                <!---->
                 <span
                   class="t-link__content"
                 >
 
                   详情
 
                 </span>
-                <!--v-if-->
+                <!---->
               </a>
 
             </span>
@@ -782,15 +782,15 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
                 style="margin-left: 2px;"
                 target=""
               >
-                <!--v-if-->
+                <!---->
                 <span
                   class="t-link__content"
                 >
 
                   详情
 
                 </span>
-                <!--v-if-->
+                <!---->
               </a>
 
             </span>