-
Notifications
You must be signed in to change notification settings - Fork 497
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Typography): add Typography component (#4293)
* feat(typography): add new typography component. (#293) * fix(typography): lint test. (#293) * fix: revert tnode change * fix: read slots * chore: update snapshot * docs: update site config * chore: revert change * chore: revert change * chore: format Code * chore: fix typo * chore: update snapshot * fix(typography): 删除冗余IE11调试代码 * chore: global typography oconfig * chore: global typography oconfig * chore: update snapshot * chore: update snapshot --------- Co-authored-by: 黎伟杰 <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: wū yāng <[email protected]>
- Loading branch information
4 people
authored
Sep 9, 2024
1 parent
e999a0b
commit b162d75
Showing
34 changed files
with
1,894 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule _common
updated
12 files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { mount } from '@vue/test-utils'; | ||
| import { Text, Title, Paragraph } from '@/src/typography/index.ts'; | ||
| import { nextTick } from 'vue'; | ||
|
|
||
| describe('Typography', () => { | ||
| const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`; | ||
|
|
||
| const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.'; | ||
|
|
||
| const ellipsisText = new RegExp('...'); | ||
|
|
||
| it('title 测试', () => { | ||
| const wrapper = mount(() => <Title>{shortText}</Title>); | ||
|
|
||
| expect(wrapper.find('h1.t-typography').element.innerHTML).toBe(shortText); | ||
| }); | ||
|
|
||
| it('paragraph 测试', () => { | ||
| const wrapper = mount(() => <Paragraph>{shortText}</Paragraph>); | ||
|
|
||
| expect(wrapper.find('.t-typography').element.innerHTML).toBe(shortText); | ||
| }); | ||
|
|
||
| it('text 测试', () => { | ||
| const wrapper = mount(() => <Text>{shortText}</Text>); | ||
|
|
||
| expect(wrapper.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText)); | ||
| }); | ||
|
|
||
| it('text code 测试', () => { | ||
| const wrapper = mount(() => <Text code>{shortText}</Text>); | ||
|
|
||
| expect(wrapper.find('code').element.innerHTML).toMatch(new RegExp(shortText)); | ||
| }); | ||
|
|
||
| window.innerWidth = 480; | ||
| it('ellipsis 测试', () => { | ||
| const wrapper = mount(() => <Paragraph ellipsis>{longTextString}</Paragraph>); | ||
|
|
||
| expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText); | ||
| }); | ||
|
|
||
| it('text ellipsis 测试', () => { | ||
| const wrapper = mount(() => <Text ellipsis>{longTextString}</Text>); | ||
|
|
||
| expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText); | ||
| }); | ||
|
|
||
| it('title ellipsis 测试', () => { | ||
| const wrapper = mount(() => <Title ellipsis>{longTextString}</Title>); | ||
|
|
||
| expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText); | ||
| }); | ||
|
|
||
| it('ellipsis expand 测试', async () => { | ||
| const wrapper = await mount(() => ( | ||
| <Paragraph | ||
| ellipsis={{ | ||
| expandable: true, | ||
| collapsible: true, | ||
| }} | ||
| > | ||
| {longTextString} | ||
| </Paragraph> | ||
| )); | ||
|
|
||
| // 模拟鼠标进入 | ||
| wrapper.find('.t-typography-ellipsis-symbol').trigger('click'); | ||
| await nextTick(); | ||
| expect(wrapper.find('.t-typography-ellipsis-symbol').element.innerHTML).toBe('收起'); | ||
| }); | ||
|
|
||
| it('text copyable 测试', () => { | ||
| const handleCopy = vi.fn(); | ||
| const wrapper = mount(() => <Text copyable={{ onCopy: handleCopy }}>{shortText}</Text>); | ||
|
|
||
| wrapper.find('.t-button').trigger('click'); | ||
|
|
||
| expect(handleCopy).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <template> | ||
| <div> | ||
| <t-typography-title>What is TDesign</t-typography-title> | ||
| <t-typography-text mark> | ||
| TDesign is an enterprise-level design system accumulated by Tencent's various business teams. | ||
| </t-typography-text> | ||
| <t-typography-paragraph> | ||
| <t-typography-text strong> | ||
| TDesign features a unified design values, consistent design language, and visual style, helping users form | ||
| continuous and coherent perceptions of the experience. | ||
| </t-typography-text> | ||
| Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, | ||
| elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates | ||
| easy extension on top of TDesign, enabling a better alignment with business requirements. | ||
| </t-typography-paragraph> | ||
| <t-typography-title>Comprehensive</t-typography-title> | ||
| <t-typography-paragraph> | ||
| TDesign Support | ||
| <t-typography-text code>Vue 2</t-typography-text>, <t-typography-text code>Vue 3</t-typography-text>, | ||
| <t-typography-text code>React</t-typography-text> | ||
| components for Desktop Application and | ||
| <t-typography-text code>Vue 3</t-typography-text>, | ||
| <t-typography-text code>Wechat MiniProgram</t-typography-text> | ||
| components for Mobile Application. | ||
| </t-typography-paragraph> | ||
| <t-typography-paragraph> | ||
| <ul> | ||
| <li>Features</li> | ||
| <li>Comprehensive</li> | ||
| <ul> | ||
| <li>Consistency</li> | ||
| <li>Usability</li> | ||
| </ul> | ||
| <li>Join TDesign</li> | ||
| </ul> | ||
| </t-typography-paragraph> | ||
| <t-typography-paragraph> | ||
| <ol> | ||
| <li>Features</li> | ||
| <li>Comprehensive</li> | ||
| <ol> | ||
| <li>Consistency</li> | ||
| <li>Usability</li> | ||
| </ol> | ||
| <li>Join TDesign</li> | ||
| </ol> | ||
| </t-typography-paragraph> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="tsx"></script> | ||
|
|
||
| <style scoped> | ||
| blockquote { | ||
| background-color: #fff; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <template> | ||
| <div style="width: 100%"> | ||
| <t-typography-text copyable>This is a copyable text.</t-typography-text> | ||
| <br /> | ||
| <t-typography-text | ||
| :copyable="{ | ||
| tooltipProps: { | ||
| content: 'click to copy the text', | ||
| }, | ||
| }" | ||
| >This is a copyable text.</t-typography-text | ||
| > | ||
| <br /> | ||
| <t-typography-text :copyable="copyableConfig">This is a copyable text.</t-typography-text> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="tsx"> | ||
| import { SmileIcon } from 'tdesign-icons-vue-next'; | ||
| const copyableConfig = { | ||
| suffix: <SmileIcon />, | ||
| tooltipProps: { | ||
| content: 'click to copy the text', | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <template> | ||
| <div style="width: 100%"> | ||
| <t-typography-paragraph ellipsis>{{ content }}</t-typography-paragraph> | ||
| <t-typography-paragraph :ellipsis="ellipsisState1">{{ content }}</t-typography-paragraph> | ||
| <t-typography-paragraph :ellipsis="ellipsisState2" style="width: 200px">{{ content }}</t-typography-paragraph> | ||
| <t-typography-paragraph :ellipsis="ellipsisState3">{{ content }}</t-typography-paragraph> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="tsx"> | ||
| import { ChevronDownIcon } from 'tdesign-icons-vue-next'; | ||
| const content = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`; | ||
| const ellipsisState1 = { | ||
| row: 2, | ||
| expandable: true, | ||
| collapsible: true, | ||
| }; | ||
| const ellipsisState2 = { | ||
| row: 1, | ||
| tooltipProps: { | ||
| content: 'long long long text', | ||
| showArrow: false, | ||
| }, | ||
| }; | ||
| const ellipsisState3 = { | ||
| row: 1, | ||
| suffix: <ChevronDownIcon />, | ||
| expandable: true, | ||
| collapsible: false, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <template> | ||
| <t-space direction="vertical" class="vertical-demo" :size="12"> | ||
| <t-typography-text theme="primary">TDesign (primary)</t-typography-text> | ||
| <t-typography-text theme="secondary">TDesign (secondary)</t-typography-text> | ||
| <t-typography-text disabled>TDesign (disabled)</t-typography-text> | ||
| <t-typography-text theme="success">TDesign (success)</t-typography-text> | ||
| <t-typography-text theme="warning">TDesign (warning)</t-typography-text> | ||
| <t-typography-text theme="error">TDesign (error)</t-typography-text> | ||
| <t-typography-text mark>TDesign (mark)</t-typography-text> | ||
| <t-typography-text code>TDesign (code)</t-typography-text> | ||
| <t-typography-text keyboard>TDesign (keyboard)</t-typography-text> | ||
| <t-typography-text underline>TDesign (underline)</t-typography-text> | ||
| <t-typography-text delete>TDesign (delete)</t-typography-text> | ||
| <t-typography-text strong>TDesign (strong)</t-typography-text> | ||
| <t-typography-text italic>TDesign (italic)</t-typography-text> | ||
| </t-space> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"></script> | ||
|
|
||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div> | ||
| <t-typography-title level="h1">H1. TDesign</t-typography-title> | ||
| <t-typography-title level="h2">H2. TDesign</t-typography-title> | ||
| <t-typography-title level="h3">H3. TDesign</t-typography-title> | ||
| <t-typography-title level="h4">H4. TDesign</t-typography-title> | ||
| <t-typography-title level="h5">H5. TDesign</t-typography-title> | ||
| <t-typography-title level="h6">H6. TDesign</t-typography-title> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"></script> | ||
|
|
||
| <style scoped></style> |
Oops, something went wrong.