-
Notifications
You must be signed in to change notification settings - Fork 138
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 575bde5
Showing
19 changed files
with
458 additions
and
19 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>" | ||
`; |
8 changes: 8 additions & 0 deletions
8
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,8 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`TagGroup render work 1`] = ` | ||
"<div class=\\"ix-tag-group\\" style=\\"gap: 8px 8px;\\"><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">A</span> | ||
<!----></span><span class=\\"ix-tag\\"><!----><!----><span class=\\"ix-tag-content\\">B</span> | ||
<!----></span> | ||
</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,115 @@ | ||
import { type MountingOptions, mount } from '@vue/test-utils' | ||
import { h, ref } 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', label: 'A' }, | ||
{ key: 'b', label: '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) | ||
expect(wrapper.find('.ix-tag-group-clickable').exists()).toBe(false) | ||
|
||
await wrapper.setProps({ clickable: true }) | ||
await wrapper.find('.ix-tag').trigger('click') | ||
expect(clickFn).toBeCalledTimes(1) | ||
expect(clickFn.mock.calls[0][0]).toBe('a') | ||
expect(wrapper.find('.ix-tag-group-clickable').exists()).toBe(true) | ||
}) | ||
|
||
test('prop activeKeys work', async () => { | ||
const activeKeys = ref([]) | ||
const wrapper = mount({ | ||
components: { IxTagGroup }, | ||
template: `<IxTagGroup | ||
v-model:activeKeys="activeKeys" | ||
:clickable="true" | ||
:dataSource="dataSource"> | ||
</IxTagGroup>`, | ||
setup() { | ||
return { activeKeys, dataSource } | ||
}, | ||
}) | ||
|
||
await wrapper.find('.ix-tag').trigger('click') | ||
expect(activeKeys.value.length).toBe(1) | ||
expect(activeKeys.value[0]).toBe('a') | ||
|
||
await wrapper.find('.ix-tag').trigger('click') | ||
expect(activeKeys.value.length).toBe(0) | ||
}) | ||
|
||
test('prop dataSource work', async () => { | ||
const wrapper = TagGroupMount({ props: { dataSource } }) | ||
|
||
expect(wrapper.findAll('.ix-tag').length).toBe(2) | ||
expect(wrapper.find('.ix-tag').text()).toBe('A') | ||
|
||
await wrapper.setProps({ dataSource: [{ label: 'ABC' }] }) | ||
expect(wrapper.findAll('.ix-tag').length).toBe(1) | ||
expect(wrapper.find('.ix-tag').text()).toBe('ABC') | ||
}) | ||
|
||
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 } }) | ||
|
||
expect((wrapper.element as HTMLElement).style.gap).toBe('16px 16px') | ||
|
||
await wrapper.setProps({ gap: ['sm', 15] }) | ||
expect((wrapper.element as HTMLElement).style.gap).toBe('8px 15px') | ||
}) | ||
|
||
test('prop wrap work', async () => { | ||
const wrapper = TagGroupMount({ props: { dataSource, wrap: true } }) | ||
|
||
expect(wrapper.find('.ix-tag-group-no-wrap').exists()).toBe(false) | ||
|
||
await wrapper.setProps({ wrap: false }) | ||
expect(wrapper.find('.ix-tag-group-no-wrap').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: 7 | ||
title: | ||
zh: 一组标签 | ||
--- | ||
|
||
## zh | ||
|
||
常用于表格的筛选功能,可以通过点击选中。 |
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,45 @@ | ||
<template> | ||
<IxTagGroup | ||
v-model:activeKeys="activeKeys" | ||
:dataSource="list" | ||
:clickable="true" | ||
:gap="['sm', 48]" | ||
shape="round" | ||
@click="handleClick" | ||
></IxTagGroup> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import type { VKey } from '@idux/cdk/utils' | ||
import type { TagData } from '@idux/components/tag' | ||
import { computed, ref } from 'vue' | ||
const activeKeys = ref<VKey[]>([]) | ||
const list = computed<TagData[]>(() => { | ||
return [ | ||
'斗之气', | ||
'斗者', | ||
'斗师', | ||
'大斗师', | ||
'斗灵', | ||
'斗王', | ||
'斗皇', | ||
'斗宗', | ||
'斗尊', | ||
'斗尊巅峰', | ||
'半圣', | ||
'斗圣', | ||
'斗帝', | ||
].map((label, idx) => ({ | ||
key: idx, | ||
label, | ||
color: activeKeys.value.includes(idx) ? 'success' : 'info', | ||
})) | ||
}) | ||
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`事件。 |
Oops, something went wrong.