-
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 e346b13
Showing
19 changed files
with
425 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[`TagGroup 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,105 @@ | ||
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', 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) | ||
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 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: 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((text, idx) => ({ | ||
key: idx, | ||
text, | ||
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`事件。 |
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> |
Oops, something went wrong.