-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
36 changed files
with
602 additions
and
7 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
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
61 changes: 61 additions & 0 deletions
61
packages/components/text/__tests__/__snapshots__/text.spec.ts.snap
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,61 @@ | ||
// Vitest Snapshot v1 | ||
|
||
exports[`Text > copyable work 1`] = ` | ||
"<div class=\\"ix-text-wrapper\\"><span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span><span class=\\"ix-text-copy-icon\\"><i class=\\"ix-icon ix-icon-copy\\" role=\\"img\\" aria-label=\\"copy\\"></i></span></div>" | ||
`; | ||
exports[`Text > copyable work 2`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > expandable work 1`] = ` | ||
"<span class=\\"ix-text ix-text-line-clamp\\" style=\\"cursor: pointer;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > expandable work 2`] = ` | ||
"<span class=\\"ix-text ix-text-line-clamp\\" style=\\"cursor: pointer;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > lineClamp work 1`] = ` | ||
"<span class=\\"ix-text ix-text-line-clamp\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > lineClamp work 2`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > render work 1`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > tag work 1`] = ` | ||
"<div class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</div>" | ||
`; | ||
exports[`Text > tag work 2`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > tooltip work 1`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > tooltip work 2`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; | ||
exports[`Text > tooltip work 3`] = ` | ||
"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。</span>" | ||
`; |
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,91 @@ | ||
import { MountingOptions, mount } from '@vue/test-utils' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import Text from '../src/Text' | ||
import { TextProps } from '../src/types' | ||
|
||
const defaultSlot = | ||
() => `@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。` | ||
|
||
describe('Text', () => { | ||
const TextMount = (options?: MountingOptions<Partial<TextProps>>) => { | ||
const { slots } = options || {} | ||
return mount(Text, { ...(options as MountingOptions<TextProps>), slots: { default: defaultSlot, ...slots } }) | ||
} | ||
|
||
renderWork<TextProps>(Text, { | ||
slots: { default: defaultSlot }, | ||
}) | ||
|
||
test('copyable work', async () => { | ||
const wrapper = TextMount({ props: { copyable: true } }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.classes()).toContain('ix-text-wrapper') | ||
|
||
document.execCommand = vi.fn().mockReturnValue(true) | ||
await wrapper.find('.ix-text-copy-icon').trigger('click') | ||
|
||
expect(document.execCommand).toHaveBeenCalledWith('copy') | ||
|
||
await wrapper.setProps({ copyable: false }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.classes()).not.toContain('ix-text-wrapper') | ||
expect(wrapper.classes()).toContain('ix-text') | ||
}) | ||
|
||
// 需要 E2E 测试 | ||
test('expandable work', async () => { | ||
const wrapper = TextMount({ props: { lineClamp: 2, expandable: true } }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
|
||
test('lineClamp work', async () => { | ||
const wrapper = TextMount({ props: { lineClamp: 2 } }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.classes()).toContain('ix-text-line-clamp') | ||
|
||
await wrapper.setProps({ lineClamp: undefined }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.classes()).not.toContain('ix-text-line-clamp') | ||
}) | ||
|
||
test('tag work', async () => { | ||
const wrapper = TextMount({ props: { tag: 'div' } }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.element.tagName).toBe('DIV') | ||
|
||
await wrapper.setProps({ tag: undefined }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
expect(wrapper.element.tagName).toBe('SPAN') | ||
}) | ||
|
||
test('tooltip work', async () => { | ||
const wrapper = TextMount({ props: { tooltip: 'native' } }) | ||
|
||
// 无效 | ||
await wrapper.trigger('mouseenter') | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
|
||
await wrapper.setProps({ tooltip: true }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
|
||
await wrapper.setProps({ tooltip: false }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
}) |
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 @@ | ||
--- | ||
order: 0 | ||
title: | ||
zh: 基本使用 | ||
en: Basic usage | ||
--- | ||
|
||
## zh | ||
|
||
最简单的用法。 | ||
|
||
## en | ||
|
||
The simplest usage. |
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,5 @@ | ||
<template> | ||
<div style="width: 200px"> | ||
<IxText>@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。</IxText> | ||
</div> | ||
</template> |
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 @@ | ||
--- | ||
order: 2 | ||
title: | ||
zh: 可复制 | ||
en: Copyable | ||
--- | ||
|
||
## zh | ||
|
||
提供了简单的文本复制能力,需要注意的是,内容只能是纯文本。 | ||
|
||
## en | ||
|
||
The simplest usage. |
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,5 @@ | ||
<template> | ||
<div style="width: 200px"> | ||
<IxText copyable>@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。</IxText> | ||
</div> | ||
</template> |
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 @@ | ||
--- | ||
order: 8 | ||
title: | ||
zh: 可展开的 | ||
en: Expandable | ||
--- | ||
|
||
## zh | ||
|
||
搭配 `lineClamp` 使用时,可以通过点击展开全部文本。 | ||
|
||
## en | ||
|
||
The simplest usage. |
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,8 @@ | ||
<template> | ||
<div style="width: 200px"> | ||
<IxText expandable> | ||
@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。 | ||
</IxText> | ||
</div> | ||
</template> |
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 @@ | ||
--- | ||
order: 6 | ||
title: | ||
zh: 多行省略 | ||
en: Basic usage | ||
--- | ||
|
||
## zh | ||
|
||
提供基于 `-webkit-line-clamp` 的多行省略,兼容性参见 [caniuse](https://caniuse.com/?search=line-clamp) | ||
|
||
## en | ||
|
||
The simplest usage. |
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,8 @@ | ||
<template> | ||
<div style="width: 200px"> | ||
<IxText lineClamp="2"> | ||
@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发, | ||
全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。 | ||
</IxText> | ||
</div> | ||
</template> |
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,15 @@ | ||
--- | ||
order: 10 | ||
title: | ||
zh: 浮层配置 | ||
en: Tooltip | ||
--- | ||
|
||
## zh | ||
|
||
可以通过 `tooltip` 来配置悬浮提示,还可以通过 `title` 插槽来自定义提示内容。 | ||
注意:当 `tooltip='native'` 时,`title` 插槽仅支持纯文本内容。 | ||
|
||
## en | ||
|
||
The simplest usage. |
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,24 @@ | ||
<template> | ||
<IxRadioGroup v-model:value="tooltip" :dataSource="radios"></IxRadioGroup> | ||
<div style="width: 200px; margin-top: 16px"> | ||
<IxText :tooltip="tooltip"> | ||
@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。 | ||
<template #title> | ||
@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。 | ||
<br /> | ||
基于 Vue 3.x + TypeScript 开发, 全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。 | ||
</template> | ||
</IxText> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const tooltip = ref(true) | ||
const radios = [ | ||
{ key: false, label: '关闭' }, | ||
{ key: true, label: '开启' }, | ||
{ key: 'native', label: '原生' }, | ||
] | ||
</script> |
Oops, something went wrong.