-
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 (#836)
- Loading branch information
1 parent
39239be
commit b365f3e
Showing
19 changed files
with
448 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 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| 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 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| 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 = vi.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 = vi.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('8px 16px') | ||
|
|
||
| await wrapper.setProps({ gap: 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-nowrap').exists()).toBe(false) | ||
|
|
||
| await wrapper.setProps({ wrap: false }) | ||
| expect(wrapper.find('.ix-tag-group-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="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.