Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(radio): new radio #517

Merged
merged 6 commits into from
Mar 16, 2023
Merged

feat(radio): new radio #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
99e959d
feat(radio): update api
LeeJim Mar 14, 2023
dd6891e
refactor(radio): move radio-group folder
LeeJim Mar 15, 2023
4448ec3
fix: import less use new way
LeeJim Mar 15, 2023
401d7ff
feat(radio): enrich property
LeeJim Mar 16, 2023
1474e90
test(radio): update unit test
LeeJim Mar 16, 2023
f4566fc
test: update snapshot
LeeJim Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion site/mobile/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import router from './router';

import TDesign from '@/index';
import '../../src/_common/style/mobile/_reset.less';
import '../../src/_common/style/mobile/index.less';
import '../styles/mobile/index.less';

createApp(app)
Expand Down
3 changes: 1 addition & 2 deletions site/web/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import TDesign from '@/index';
import Stackblitz from './stackblitz/index.vue';

// import tdesign style
import '@common/style/mobile/_reset.less';
import '@common/style/mobile/index.less';
import 'tdesign-mobile-vue/style/index.js';

// import site webcomponents
import 'tdesign-site-components';
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 140 files
3 changes: 1 addition & 2 deletions src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ export { default as Input } from './input';
export { default as Textarea } from './textarea';
export { default as Overlay } from './overlay';
export { default as Progress } from './progress';
export { default as Radio } from './radio';
export { default as RadioGroup } from './radio-group';
export { default as Radio, RadioGroup } from './radio';
export { default as Rate } from './rate';
export { default as Switch } from './switch';
export { default as Stepper } from './stepper';
Expand Down
158 changes: 73 additions & 85 deletions src/dropdown-menu/__test__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,118 +141,106 @@ exports[`dropdown-menu > props > : duration 1`] = `


<div
class="t-radio t-dropdown-item__radio t-is-tick"
class="t-radio t-radio--left t-radio--block t-dropdown-item__radio t-is-tick"
>
<span
class="t-radio__content-wrap"
<input
class="t-radio__original"
name=""
type="radio"
value="option_0"
/>
<div
class="t-radio__icon t-radio__icon--left"
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!---->
</div>
<div
class="t-radio__content"
>
<span
class="t-radio__label-wrap"
>
<span
class="t-radio__content-title t-radio__content-right-title"
>
选项一
</span>
<!--v-if-->
</span>
<span
class="t-radio__icon-wrap t-radio__icon-right-wrap"
class="t-radio__title"
style=""
>
<input
class="t-radio__original-right"
name=""
type="radio"
value="option_0"
/>
<div
class="t-radio__icon t-radio__icon--custom"
>
<!---->
</div>
选项一
</span>
</span>
<!--下边框 -->
<!--v-if-->
</div>
<div
class="t-radio__border t-radio__border--right"
class="t-radio__border t-radio__border--left"
/>
</div>
<div
class="t-radio t-dropdown-item__radio t-is-tick"
class="t-radio t-radio--left t-radio--block t-dropdown-item__radio t-is-tick"
>
<span
class="t-radio__content-wrap"
<input
class="t-radio__original"
name=""
type="radio"
value="option_1"
/>
<div
class="t-radio__icon t-radio__icon--left"
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!---->
</div>
<div
class="t-radio__content"
>
<span
class="t-radio__label-wrap"
>
<span
class="t-radio__content-title t-radio__content-right-title"
>
选项二
</span>
<!--v-if-->
</span>
<span
class="t-radio__icon-wrap t-radio__icon-right-wrap"
class="t-radio__title"
style=""
>
<input
class="t-radio__original-right"
name=""
type="radio"
value="option_1"
/>
<div
class="t-radio__icon t-radio__icon--custom"
>
<!---->
</div>
选项二
</span>
</span>
<!--下边框 -->
<!--v-if-->
</div>
<div
class="t-radio__border t-radio__border--right"
class="t-radio__border t-radio__border--left"
/>
</div>
<div
class="t-radio t-is-disabled t-dropdown-item__radio t-is-tick"
class="t-radio t-radio--left t-radio--block t-dropdown-item__radio t-is-tick"
>
<span
class="t-radio__content-wrap"
<input
class="t-radio__original"
disabled=""
name=""
type="radio"
value="disabled-item"
/>
<div
class="t-radio__icon t-radio__icon--left t-radio__icon--disabled"
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!---->
</div>
<div
class="t-radio__content"
>
<span
class="t-radio__label-wrap"
>
<span
class="t-radio__content-title t-is-disabled t-radio__content-right-title"
>
禁用选项
</span>
<!--v-if-->
</span>
<span
class="t-radio__icon-wrap t-radio__icon-right-wrap"
class="t-radio__title t-radio__title--disabled"
style=""
>
<input
class="t-radio__original-right"
disabled=""
name=""
type="radio"
value="disabled-item"
/>
<div
class="t-radio__icon t-radio__icon--disabled t-radio__icon--custom"
>
<!---->
</div>
禁用选项
</span>
</span>
<!--下边框 -->
<!--v-if-->
</div>
<div
class="t-radio__border t-radio__border--right"
class="t-radio__border t-radio__border--left"
/>
</div>

Expand Down
83 changes: 4 additions & 79 deletions src/dropdown-menu/__test__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import { mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import { nextTick, ref } from 'vue';
import { DropdownMenu, DropdownItem } from '../index';
import RadioGroup from '../../radio-group';
import Radio from '../../radio';
import Radio, { RadioGroup } from '../../radio';
import CheckBox, { CheckboxGroup } from '../../checkbox';
import Button from '../../button';

Expand Down Expand Up @@ -208,80 +207,6 @@ describe('dropdown-menu', () => {
});
});

it(': multiple', async () => {
const value1 = ref('option_1');
const value2 = ref(['option_1']);
const items = [
{
value: value1,
label: '菜单',
options: options,
multiple: false,
},
{
value: value2,
label: '菜单',
options: options,
multiple: true,
},
];

const wrapper = mount({
setup() {
return () => (
<DropdownMenu>
{{
default: items.map((item, index) => {
return (
<DropdownItem
value={item.value.value}
label={item.label}
multiple={item.multiple}
options={item.options}
/>
);
}),
}}
</DropdownMenu>
);
},
});
const $menuLabels = wrapper.findAll(`.${name}__item`);

// multiple = false, 单选列表, t-radio-group, t-radio
const index0 = 0;
const item0 = items[0];
await $menuLabels[0].trigger('click', { item0, index0 });
expect(wrapper.findComponent(RadioGroup).exists()).toBeTruthy();
expect(wrapper.findAllComponents(Radio).length).toEqual(item0.options.length);

const $radios = wrapper.findAll(`.t-radio`);
// 模拟点击单选列表 Radio，重复点击已选中态不会触发 change 事件， 最终选中项为 1
await $radios[0].find(`.${prefix}-radio__content-title`).trigger('click');
expect(wrapper.findAll(`.${prefix}-is-checked`).length).toEqual(1);

// multiple = true, 多选列表, t-checkbox-group, t-checkbox
const index1 = 1;
const item1 = items[1];
await $menuLabels[1].trigger('click', { item1, index1 });
expect(wrapper.findComponent(CheckboxGroup).exists()).toBeTruthy();
expect(wrapper.findAllComponents(CheckBox).length).toEqual(item1.options.length);
// 初始选中1项
expect(wrapper.findAll(`.${prefix}-is-checked`).length).toEqual(1);

// 模拟点击多选列表 Checkbox，重复点击已选中态也会触发 change 事件， 最终选中项有多项
const $checkbox = wrapper.findAll(`.t-checkbox`);
// 点选1项，默认1项，共2项选中态
await $checkbox[0].find(`.${prefix}-checkbox__original-left`).trigger('click');
expect(wrapper.findAll(`.${prefix}-is-checked`).length).toEqual(2);
// 点选1项，取消1项，共1项选中态
await $checkbox[1].find(`.${prefix}-checkbox__original-left`).trigger('click');
expect(wrapper.findAll(`.${prefix}-is-checked`).length).toEqual(1);
// 禁用项，无法选中
await $checkbox[2].find(`.${prefix}-checkbox__original-left`).trigger('click');
expect(wrapper.findAll(`.${prefix}-is-checked`).length).toEqual(1);
});

it(': optionsColumns', async () => {
// options-columns值为[1,3]区间内，仅在 multiple = true 时，有效
const value1 = ref(['option_1']);
Expand Down Expand Up @@ -430,13 +355,13 @@ describe('dropdown-menu', () => {
});
await sleep(200);
const $radios = wrapper.findAll(`.t-radio`);
await $radios[0].find(`.${prefix}-radio__content-title`).trigger('click');
await $radios[0].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
// 单选列表，原本为选中态的，再次点击时，不会触发 change
await $radios[1].find(`.${prefix}-radio__content-title`).trigger('click');
await $radios[1].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
// 禁用态按钮，不触发 change
await $radios[2].find(`.${prefix}-radio__content-title`).trigger('click');
await $radios[2].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
});
});
Expand Down
3 changes: 1 addition & 2 deletions src/dropdown-menu/dropdown-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,10 @@
import { CheckIcon } from 'tdesign-icons-vue-next';
import { h, ref, watch, toRefs, inject, computed, reactive, nextTick, onBeforeMount, defineComponent } from 'vue';
import { TNode } from '../common';
import TRadio from '../radio';
import TRadio, { RadioGroup as TRadioGroup } from '../radio';
import config from '../config';
import TButton from '../button';
import TCheckbox, { CheckboxGroup as TCheckboxGroup } from '../checkbox';
import TRadioGroup from '../radio-group';
import TransAniControl from './trans-ani-control';
import { useVModel, useEmitEvent } from '../shared';
import DropdownItemProps from './dropdown-item-props';
Expand Down
5 changes: 0 additions & 5 deletions src/radio-group/index.ts
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/radio-group/radio-group.md
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/radio-group/style/css.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/radio-group/style/index.js
View file
Open in desktop

This file was deleted.

Loading