forked from IDuxFE/idux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp: tooltip): add component tooltip
fix IDuxFE#200
- Loading branch information
1 parent
ce95abe
commit 24029a4
Showing
23 changed files
with
592 additions
and
1 deletion.
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
3 changes: 3 additions & 0 deletions
3
packages/components/tooltip/__tests__/__snapshots__/tooltip.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,3 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`tooltip.tsx render work 1`] = `"<!---->"`; |
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,65 @@ | ||
import type { MountingOptions } from '@vue/test-utils' | ||
import type { TooltipProps } from '@idux/components/tooltip' | ||
|
||
import { renderWork, wait } from '@tests' | ||
import IxTooltip from '../src/tooltip' | ||
import { mount, VueWrapper } from '@vue/test-utils' | ||
|
||
const TestComponent = { | ||
components: { IxTooltip }, | ||
props: ['title', 'placement', 'visible', 'trigger', 'destroyOnHide'], | ||
template: ` | ||
<ix-tooltip :title='title' :placement='placement' :visible='visible' :trigger='trigger' :destroy-on-hide='destroyOnHide'> | ||
<template v-if='!!$slots.title' #title><slot name='title'/></template> | ||
<span>Tooltip will show when it's hovered.</span> | ||
</ix-tooltip> | ||
`, | ||
} | ||
|
||
describe('tooltip.tsx', () => { | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
let tooltipMount: (options?: MountingOptions<TooltipProps>) => VueWrapper<any> | ||
|
||
beforeEach(() => { | ||
tooltipMount = options => mount(TestComponent, options) | ||
}) | ||
|
||
afterEach(() => { | ||
document.body.querySelectorAll('.ix-tooltip').forEach(value => { | ||
value.remove() | ||
}) | ||
}) | ||
|
||
renderWork(IxTooltip) | ||
|
||
test('title work', async () => { | ||
const textWrapper = tooltipMount({ props: { title: 'prompt text' } }) | ||
expect(document.body.querySelector('.ix-tooltip')!.getAttribute('style')).toEqual('display: none;') | ||
await textWrapper.get('span').trigger('mouseenter') | ||
await wait(100) | ||
expect(document.body.querySelector('.ix-tooltip')!.getAttribute('style')).toContain('display: block;') | ||
|
||
const title = '<div id="custom-title">prompt text</div>' | ||
const slotWrapper = tooltipMount({ slots: { title } }) | ||
expect(document.body.querySelectorAll('.ix-tooltip')[1]!.getAttribute('style')).toEqual('display: none;') | ||
await slotWrapper.get('span').trigger('mouseenter') | ||
await wait(100) | ||
expect(document.body.querySelectorAll('.ix-tooltip')[1]!.getAttribute('style')).toContain('display: block;') | ||
}) | ||
|
||
test('destroyOnHide work', async () => { | ||
const wrapper = tooltipMount({ props: { destroyOnHide: true, title: 'prompt text' } }) | ||
expect(document.body.querySelector('.ix-tooltip')!.querySelector('.ix-tooltip-inner')).toBeNull() | ||
await wrapper.get('span').trigger('mouseenter') | ||
await wait(100) | ||
expect(document.body.querySelector('.ix-tooltip')!.querySelector('.ix-tooltip-inner')).toBeDefined() | ||
await wrapper.get('span').trigger('mouseleave') | ||
await wait(500) | ||
expect(document.body.querySelector('.ix-tooltip')!.querySelector('.ix-tooltip-inner')).toBeNull() | ||
}) | ||
|
||
test('without title', () => { | ||
tooltipMount() | ||
expect(document.body.querySelector('.ix-tooltip')).toBeNull() | ||
}) | ||
}) |
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> | ||
<ix-tooltip title="prompt text"> | ||
<span>Tooltip will show when it's hovered.</span> | ||
</ix-tooltip> | ||
</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,5 @@ | ||
<template> | ||
<ix-tooltip title="prompt text" destroyOnHide> | ||
<span>Tooltip will show when it's hovered.</span> | ||
</ix-tooltip> | ||
</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,117 @@ | ||
<template> | ||
<table> | ||
<tbody> | ||
<tr> | ||
<td></td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="top-start"> | ||
<ix-button>TL</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="top"> | ||
<ix-button>Top</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="top-end"> | ||
<ix-button>TR</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td></td> | ||
</tr> | ||
<tr> | ||
<td> | ||
<ix-tooltip placement="left-start"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>LT</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td></td> | ||
<td></td> | ||
<td></td> | ||
<td> | ||
<ix-tooltip placement="right-start"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>RT</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
<ix-tooltip placement="left"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>Left</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td></td> | ||
<td></td> | ||
<td></td> | ||
<td> | ||
<ix-tooltip placement="right"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>Right</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
<ix-tooltip placement="left-end"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>LB</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td></td> | ||
<td></td> | ||
<td></td> | ||
<td> | ||
<ix-tooltip placement="right-end"> | ||
<template #title> | ||
<p>This is a very long prompt text.</p> | ||
</template> | ||
<ix-button>RB</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
</tr> | ||
<tr> | ||
<td></td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="bottom-start"> | ||
<ix-button>BL</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="bottom"> | ||
<ix-button>Bottom</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td> | ||
<ix-tooltip title="This is a very long prompt text." placement="bottom-end"> | ||
<ix-button>BR</ix-button> | ||
</ix-tooltip> | ||
</td> | ||
<td></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</template> | ||
|
||
<style scoped lang="less"> | ||
.ix-button { | ||
width: 80px; | ||
} | ||
p { | ||
max-width: 50px; | ||
} | ||
</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,17 @@ | ||
<template> | ||
<ix-tooltip title="prompt text"> | ||
<ix-button>Hover</ix-button> | ||
</ix-tooltip> | ||
<ix-tooltip trigger="focus" title="prompt text"> | ||
<ix-button>Focus</ix-button> | ||
</ix-tooltip> | ||
<ix-tooltip trigger="click" title="prompt text"> | ||
<ix-button>Click</ix-button> | ||
</ix-tooltip> | ||
</template> | ||
|
||
<style scoped lang="less"> | ||
.ix-button { | ||
margin-right: 4px; | ||
} | ||
</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 @@ | ||
--- | ||
title: | ||
zh: 基本使用 | ||
en: Basic usage | ||
order: 0 | ||
--- | ||
|
||
## zh | ||
|
||
最简单的用法。 | ||
|
||
## en | ||
|
||
The simplest use. |
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 @@ | ||
--- | ||
title: | ||
zh: 隐藏时销毁 | ||
en: Destroy on hide | ||
order: 3 | ||
--- | ||
|
||
## zh | ||
|
||
浮层隐藏时销毁。 | ||
|
||
## en | ||
|
||
Overlay is destroyed on hide. |
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 @@ | ||
--- | ||
title: | ||
zh: 位置 | ||
en: Placement | ||
order: 2 | ||
--- | ||
|
||
## zh | ||
|
||
位置有 12 个固定方向和 3 个自动方向。 | ||
|
||
## en | ||
|
||
There are 12 fixed placement and 3 auto placement. |
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 @@ | ||
--- | ||
title: | ||
zh: 三种触发方式 | ||
en: Three ways to trigger | ||
order: 1 | ||
--- | ||
|
||
## zh | ||
|
||
鼠标移入、聚焦、点击。 | ||
|
||
## en | ||
|
||
Mouse in, focus, click. |
Oops, something went wrong.