From 922fca0828f0303533de8220da66e87565bc2bf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 16 Apr 2024 15:54:35 +0800 Subject: [PATCH 1/3] refactor(link): sfc to tsx --- .../__test__/__snapshots__/demo.test.jsx.snap | 168 +++++++++--------- src/link/__test__/index.test.jsx | 3 +- src/link/index.ts | 2 +- src/link/link.en-US.md | 9 +- src/link/link.md | 7 +- src/link/link.tsx | 63 +++++++ src/link/link.vue | 69 ------- 7 files changed, 158 insertions(+), 163 deletions(-) create mode 100644 src/link/link.tsx delete mode 100644 src/link/link.vue diff --git a/src/link/__test__/__snapshots__/demo.test.jsx.snap b/src/link/__test__/__snapshots__/demo.test.jsx.snap index b4a4496e0..186c185ce 100644 --- a/src/link/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/link/__test__/__snapshots__/demo.test.jsx.snap @@ -12,7 +12,7 @@ exports[`Link > Link baseVue demo works fine 1`] = ` href="/mobile-vue/overview" target="" > - + @@ -20,7 +20,7 @@ exports[`Link > Link baseVue demo works fine 1`] = ` 跳转链接 - + Link baseVue demo works fine 1`] = ` data-v-8b54d308="" target="" > - + @@ -36,7 +36,7 @@ exports[`Link > Link baseVue demo works fine 1`] = ` 跳转链接 - + `; @@ -52,7 +52,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -61,7 +61,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = ` Link linkSizeVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -95,7 +95,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = ` Link linkSizeVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -129,7 +129,7 @@ exports[`Link > Link linkSizeVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` href="/mobile-vue/overview" target="" > - + @@ -205,7 +205,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` 跳转链接 - + Link mobileVue demo works fine 1`] = ` data-v-8b54d308="" target="" > - + @@ -221,7 +221,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` 跳转链接 - + @@ -254,7 +254,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` data-v-ed7bec9e="" target="" > - + @@ -262,7 +262,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` 跳转链接 - + Link mobileVue demo works fine 1`] = ` data-v-ed7bec9e="" target="" > - + @@ -278,7 +278,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` 跳转链接 - + @@ -312,7 +312,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` target="" > Link mobileVue demo works fine 1`] = ` 跳转链接 - + Link mobileVue demo works fine 1`] = ` target="" > Link mobileVue demo works fine 1`] = ` 跳转链接 - + @@ -404,7 +404,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` data-v-c6b7a388="" target="" > - + @@ -413,7 +413,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-c6b7a388="" target="" > - + @@ -447,7 +447,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -511,7 +511,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -545,7 +545,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -579,7 +579,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -618,7 +618,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -652,7 +652,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -713,7 +713,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -747,7 +747,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -781,7 +781,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -820,7 +820,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -854,7 +854,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -918,7 +918,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -952,7 +952,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link mobileVue demo works fine 1`] = ` data-v-55ae5f74="" target="" > - + @@ -986,7 +986,7 @@ exports[`Link > Link mobileVue demo works fine 1`] = ` Link prefixVue demo works fine 1`] = ` target="" > Link prefixVue demo works fine 1`] = ` 跳转链接 - + Link prefixVue demo works fine 1`] = ` target="" > Link prefixVue demo works fine 1`] = ` 跳转链接 - + `; @@ -1103,7 +1103,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -1112,7 +1112,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` Link statusVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -1146,7 +1146,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` Link statusVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -1180,7 +1180,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` Link statusVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -1219,7 +1219,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` Link statusVue demo works fine 1`] = ` data-v-0c766346="" target="" > - + @@ -1253,7 +1253,7 @@ exports[`Link > Link statusVue demo works fine 1`] = ` Link suffixVue demo works fine 1`] = ` data-v-c6b7a388="" target="" > - + @@ -1297,7 +1297,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = ` Link suffixVue demo works fine 1`] = ` data-v-c6b7a388="" target="" > - + @@ -1331,7 +1331,7 @@ exports[`Link > Link suffixVue demo works fine 1`] = ` Link themeVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -1377,7 +1377,7 @@ exports[`Link > Link themeVue demo works fine 1`] = ` Link themeVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -1411,7 +1411,7 @@ exports[`Link > Link themeVue demo works fine 1`] = ` Link themeVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -1445,7 +1445,7 @@ exports[`Link > Link themeVue demo works fine 1`] = ` Link themeVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -1484,7 +1484,7 @@ exports[`Link > Link themeVue demo works fine 1`] = ` Link themeVue demo works fine 1`] = ` data-v-004b20ae="" target="" > - + @@ -1518,7 +1518,7 @@ exports[`Link > Link themeVue demo works fine 1`] = ` Link underlineVue demo works fine 1`] = ` data-v-ed7bec9e="" target="" > - + @@ -1561,7 +1561,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = ` 跳转链接 - + Link underlineVue demo works fine 1`] = ` data-v-ed7bec9e="" target="" > - + @@ -1577,7 +1577,7 @@ exports[`Link > Link underlineVue demo works fine 1`] = ` 跳转链接 - + `; diff --git a/src/link/__test__/index.test.jsx b/src/link/__test__/index.test.jsx index e32bf68ee..f3b7693fc 100644 --- a/src/link/__test__/index.test.jsx +++ b/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. diff --git a/src/link/index.ts b/src/link/index.ts index d199659de..dcba52762 100644 --- a/src/link/index.ts +++ b/src/link/index.ts @@ -1,4 +1,4 @@ -import Link from './link.vue'; +import Link from './link'; import { withInstall, WithInstallType } from '../shared'; import './style'; diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md index 2894a9ff9..c35c9c986 100644 --- a/src/link/link.en-US.md +++ b/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 `` | 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`
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 | - \ No newline at end of file diff --git a/src/link/link.md b/src/link/link.md index 5681f2223..c6c726f15 100644 --- a/src/link/link.md +++ b/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`
点击事件 -- | -- | -- 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 | - \ No newline at end of file diff --git a/src/link/link.tsx b/src/link/link.tsx new file mode 100644 index 000000000..71bb4f769 --- /dev/null +++ b/src/link/link.tsx @@ -0,0 +1,63 @@ +import { defineComponent, computed } from 'vue'; +import config from '../config'; +import LinkProps from './props'; +import { 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 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 = renderTNodeJSX('default', 'content'); + return content ? {content} : null; + }; + + const renderPrefixIcon = () => { + const prefixIcon = renderTNodeJSX('prefixIcon'); + return prefixIcon ? {prefixIcon} : null; + }; + + const renderSuffixIcon = () => { + const suffixIcon = renderTNodeJSX('suffixIcon'); + return suffixIcon ? {suffixIcon} : null; + }; + + return () => { + return ( + + {renderPrefixIcon()} + {renderContent()} + {renderSuffixIcon()} + + ); + }; + }, +}); diff --git a/src/link/link.vue b/src/link/link.vue deleted file mode 100644 index e4f26fc94..000000000 --- a/src/link/link.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - From 083bc90761902f297fd46dcf211d68b8141f77a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 16 Apr 2024 16:52:00 +0800 Subject: [PATCH 2/3] fix(message): test fail --- src/link/link.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/link/link.tsx b/src/link/link.tsx index 71bb4f769..749a2076b 100644 --- a/src/link/link.tsx +++ b/src/link/link.tsx @@ -1,7 +1,7 @@ import { defineComponent, computed } from 'vue'; import config from '../config'; import LinkProps from './props'; -import { useTNodeJSX } from '../hooks/tnode'; +import { useContent, useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useClass'; const { prefix } = config; @@ -12,6 +12,7 @@ export default defineComponent({ setup(props) { const linkClass = usePrefixClass('link'); const renderTNodeJSX = useTNodeJSX(); + const renderTNodeContent = useContent(); const linkClasses = computed(() => [ linkClass.value, @@ -30,7 +31,7 @@ export default defineComponent({ }; const renderContent = () => { - const content = renderTNodeJSX('default', 'content'); + const content = renderTNodeContent('default', 'content'); return content ? {content} : null; }; From 51ee2fe6185d1100c0bea1ba78772dfd4d728f7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 16 Apr 2024 17:03:12 +0800 Subject: [PATCH 3/3] test(notice-bar): snap update --- .../__test__/__snapshots__/demo.test.jsx.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap index 80d3e1b1f..76093e556 100644 --- a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap @@ -120,7 +120,7 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = ` style="margin-left: 2px;" target="" > - + @@ -128,7 +128,7 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = ` 详情 - + @@ -200,7 +200,7 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = ` style="margin-left: 5px;" target="" > - + @@ -208,7 +208,7 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = ` 详情 - + @@ -566,7 +566,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = ` style="margin-left: 5px;" target="" > - + @@ -574,7 +574,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = ` 详情 - + @@ -782,7 +782,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = ` style="margin-left: 2px;" target="" > - + @@ -790,7 +790,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = ` 详情 - +