-
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.
feat(comp:tag-group): add tagGroup component
- Loading branch information
1 parent
583952d
commit 92a9364
Showing
21 changed files
with
419 additions
and
18 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
5 changes: 4 additions & 1 deletion
5
packages/components/tag/__tests__/__snapshots__/tag.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 |
---|---|---|
@@ -1,3 +1,6 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Tag render work 1`] = `"<span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">test tag</span></span>"`; | ||
exports[`Tag render work 1`] = ` | ||
"<span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">test tag</span> | ||
<!----></span>" | ||
`; |
12 changes: 12 additions & 0 deletions
12
packages/components/tag/__tests__/__snapshots__/tagGroup.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,12 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Tag render work 1`] = ` | ||
"<div class=\\"ix-space ix-tag-group\\" style=\\"margin-bottom: -8px;\\"> | ||
<div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">A</span> | ||
<!----></span> | ||
</div> | ||
<div class=\\"ix-space-item\\" style=\\"padding-bottom: 8px;\\"><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">B</span> | ||
<!----></span> | ||
</div> | ||
</div>" | ||
`; |
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 { type MountingOptions, mount } from '@vue/test-utils' | ||
import { h } from 'vue' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import { IxIcon } from '@idux/components/icon' | ||
|
||
import IxTagGroup from '../src/TagGroup' | ||
import { TagGroupProps } from '../src/types' | ||
|
||
describe('TagGroup', () => { | ||
const TagGroupMount = (options?: MountingOptions<Partial<TagGroupProps>>) => mount(IxTagGroup, { ...options }) | ||
const dataSource = [ | ||
{ key: 'a', text: 'A' }, | ||
{ key: 'b', text: 'B' }, | ||
] | ||
|
||
renderWork(IxTagGroup, { props: { dataSource } }) | ||
|
||
test('prop clickable work', async () => { | ||
const clickFn = jest.fn() | ||
const wrapper = TagGroupMount({ props: { dataSource, clickable: false, onClick: clickFn } }) | ||
await wrapper.find('.ix-tag').trigger('click') | ||
expect(clickFn).toBeCalledTimes(0) | ||
|
||
await wrapper.setProps({ clickable: true }) | ||
await wrapper.find('.ix-tag').trigger('click') | ||
expect(clickFn).toBeCalledTimes(1) | ||
expect(clickFn.mock.calls[0][0]).toBe('a') | ||
}) | ||
|
||
test('prop closable work', async () => { | ||
const closeFn = jest.fn() | ||
const wrapper = TagGroupMount({ props: { dataSource, onClose: closeFn } }) | ||
expect(wrapper.find('.ix-icon-close').exists()).toBe(false) | ||
|
||
await wrapper.setProps({ closable: true }) | ||
await wrapper.find('.ix-icon-close').trigger('click') | ||
expect(closeFn).toBeCalledTimes(1) | ||
expect(closeFn.mock.calls[0][0]).toBe('a') | ||
}) | ||
|
||
test('prop gap work', async () => { | ||
const wrapper = TagGroupMount({ props: { dataSource, gap: 16 } }) | ||
const element = wrapper.find('.ix-space-item').element as HTMLElement | ||
|
||
expect(element.style.marginRight).toBe('16px') | ||
|
||
await wrapper.setProps({ gap: 24 }) | ||
expect(element.style.marginRight).toBe('24px') | ||
}) | ||
|
||
test('prop wrap work', async () => { | ||
const wrapper = TagGroupMount({ props: { dataSource, wrap: true } }) | ||
|
||
expect(wrapper.find('.ix-space-nowrap').exists()).toBe(false) | ||
|
||
await wrapper.setProps({ wrap: false }) | ||
expect(wrapper.find('.ix-space-nowrap').exists()).toBe(true) | ||
}) | ||
|
||
test('prop shape work', async () => { | ||
const wrapper = TagGroupMount({ props: { dataSource, shape: 'round' } }) | ||
const tags = wrapper.findAll('.ix-tag') | ||
|
||
tags.forEach(item => expect(item.classes()).toContain('ix-tag-round')) | ||
|
||
await wrapper.setProps({ shape: 'rect' }) | ||
tags.forEach(item => expect(item.classes()).toContain('ix-tag-rect')) | ||
}) | ||
|
||
test('closeIcon slot work', () => { | ||
const wrapper = TagGroupMount({ | ||
props: { closable: true, dataSource }, | ||
slots: { closeIcon: () => h(IxIcon, { name: 'up' }) }, | ||
}) | ||
|
||
expect(wrapper.find('.ix-icon-close').exists()).not.toBe(true) | ||
expect(wrapper.find('.ix-icon-up').exists()).toBe(true) | ||
}) | ||
}) |
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,9 @@ | ||
--- | ||
order: 9 | ||
title: | ||
zh: 可点击的标签 | ||
--- | ||
|
||
## zh | ||
|
||
通过`clickable`配置标签可点击,点击标签会触发`click`事件。选择你喜欢的一个角色标签点击,然后查看控制台。 |
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,41 @@ | ||
<template> | ||
<IxTagGroup :dataSource="data" :clickable="true" @click="handleClick"></IxTagGroup> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import type { VKey } from '@idux/cdk/utils' | ||
import type { TagData } from '@idux/components/tag' | ||
import { reactive } from 'vue' | ||
const data = reactive<TagData[]>([ | ||
{ | ||
key: 'a', | ||
text: '万人迷', | ||
color: '#12a679', | ||
number: 10000, | ||
}, | ||
{ | ||
key: 'b', | ||
text: '结婚狂', | ||
color: '#fa721b', | ||
number: 520, | ||
}, | ||
{ | ||
key: 'c', | ||
text: '工作狂', | ||
color: '#cf171d', | ||
number: 996, | ||
}, | ||
{ | ||
key: 'd', | ||
text: '哈妹', | ||
color: '#82010e', | ||
number: 1, | ||
}, | ||
]) | ||
const handleClick = (k: VKey, evt: MouseEvent) => { | ||
console.log(k, evt) | ||
} | ||
</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,9 @@ | ||
--- | ||
order: 8 | ||
title: | ||
zh: 可移除的标签 | ||
--- | ||
|
||
## zh | ||
|
||
`closable`属性定义一个标签是否可以移除,当标签被移除时会触发`close`事件。 |
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,39 @@ | ||
<template> | ||
<IxTagGroup :dataSource="data" :closable="true" @close="handleClose"></IxTagGroup> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import type { VKey } from '@idux/cdk/utils' | ||
import type { TagData } from '@idux/components/tag' | ||
import { reactive } from 'vue' | ||
const data = reactive<TagData[]>([ | ||
{ | ||
key: 'a', | ||
text: '两数之和', | ||
color: 'success', | ||
}, | ||
{ | ||
key: 'b', | ||
text: '三数之和', | ||
color: 'success', | ||
}, | ||
{ | ||
key: 'c', | ||
text: '四数之和', | ||
color: 'success', | ||
}, | ||
{ | ||
key: 'd', | ||
text: 'M数之和', | ||
color: 'success', | ||
}, | ||
]) | ||
const handleClose = (k: VKey, evt: MouseEvent) => { | ||
const idx = data.findIndex(item => item.key === k) | ||
data.splice(idx, 1) | ||
console.log(k, evt) | ||
} | ||
</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,9 @@ | ||
--- | ||
order: 7 | ||
title: | ||
zh: 一组标签 | ||
--- | ||
|
||
## zh | ||
|
||
常用于表格的筛选功能。 |
Oops, something went wrong.