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

Jump to bottom

refactor(cascader): sfc to tsx #1344

Closed
wants to merge 10 commits into from
Closed

refactor(cascader): sfc to tsx #1344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
20b3a83
refactor(cascader): sfc to tsx
liweijie0812 Apr 26, 2024
0bb95aa
fix(cell): note 响应式
liweijie0812 Apr 26, 2024
b815746
test: snap update
liweijie0812 Apr 26, 2024
aa8cbe5
Merge branch 'develop' into refactor/cascader/tsx
liweijie0812 Apr 28, 2024
f8a62ec
Merge branch 'develop' into refactor/cascader/tsx
liweijie0812 May 10, 2024
bfae766
Merge branch 'develop' into refactor/cascader/tsx
liweijie0812 May 11, 2024
a1baa92
Merge branch 'develop' into refactor/cascader/tsx
liweijie0812 May 13, 2024
3c4d57a
chore: format code
liweijie0812 May 17, 2024
adc8cb0
fix: keys
liweijie0812 May 17, 2024
349ff22
test: 测试案例报错
liweijie0812 May 17, 2024
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
126 changes: 28 additions & 98 deletions src/cascader/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 3 additions & 6 deletions src/cascader/__test__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`cascader > events > : pick 1`] = `
<div
class="t-cascader__title"
>
<!---->
标题
</div>
<div
class="t-cascader__close-btn"
Expand Down Expand Up @@ -59,9 +59,7 @@ exports[`cascader > events > : pick 1`] = `
<div
class="t-cascader__step-label t-cascader__step-label--active"
>

选择选项

</div>
<svg
class="t-icon t-icon-chevron-right t-cascader__step-arrow"
Expand All @@ -78,9 +76,8 @@ exports[`cascader > events > : pick 1`] = `
</div>

</div>
<!--v-if-->
</div>
<!--v-if-->
<!---->
<div
class="t-cascader__options-container"
style="width: 200vw; transform: translateX(-000vw);"
Expand All @@ -90,7 +87,7 @@ exports[`cascader > events > : pick 1`] = `
class="t-cascader__options"
>
<div
class="cascader-radio-group-0 slide-enter-from slide-enter-active"
class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
>
<div
class="t-radio-group"
Expand Down
19 changes: 13 additions & 6 deletions src/cascader/__test__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ref, h, nextTick } from 'vue';
import { config, mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import Cascader from '../cascader.vue';
import Cascader from '../cascader';
import { AppIcon as TIconApp, CloseIcon } from 'tdesign-icons-vue-next';
import Radio from '../../radio/index';
import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
Expand Down Expand Up @@ -287,19 +287,26 @@ describe('cascader', () => {
});

describe('events', () => {
it(': close', async () => {
it(': close trigger closeBtn', async () => {
const onClose = vi.fn();
const wrapper = mount(<Cascader options={options} onClose={onClose} />);
const $closeBtn = wrapper.find(`.${name}__close-btn`);
await $closeBtn.trigger('click');
expect(onClose).toHaveBeenCalledTimes(1);
expect(onClose).toHaveBeenLastCalledWith({ trigger: 'close-btn' });
expect(onClose).toHaveBeenLastCalledWith('close-btn');


});

it(': close trigger overlay', async () => {
const onClose = vi.fn();
const wrapper = mount(<Cascader options={options} onClose={onClose} visible={true}/>);
// overlay
const $overlay = wrapper.find(`.${prefix}-overlay`);
const $overlay = wrapper.find(`.${prefix}-overlay--active`);
expect($overlay.exists()).toBeTruthy()
$overlay.trigger('click');
expect(onClose).toBeCalledTimes(2);
expect(onClose).toHaveBeenLastCalledWith({ trigger: 'overlay' });
expect(onClose).toBeCalledTimes(1);
expect(onClose).toHaveBeenLastCalledWith('overlay');
});

it(': pick', async () => {
Expand Down
12 changes: 6 additions & 6 deletions src/cascader/cascader.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@

name | type | default | description | required
-- | -- | -- | -- | --
checkStrictly | Boolean | false | \- | N
closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
options | Array | [] | Typescript：`Array<CascaderOption>` | N
placeholder | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
subTitles | Array | [] | Typescript：`Array<string>` | N
theme | String | step | options：step/tab | N
theme | String | step | options: step/tab | N
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
value | String / Number | - | `v-model` and `v-model:value` is supported | N
defaultValue | String / Number | - | uncontrolled property | N
visible | Boolean | false | \- | N
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
placeholder | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
onChange | Function | | Typescript：`(value: string \| number, selectedOptions: string[]) => void`<br/> | N
onClose | Function | | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
onPick | Function | | Typescript：`(context: { level: number; value: string | number; index: number }) => void`<br/> | N
onPick | Function | | Typescript：`(context: { level: number, value: string \| number, index: number }) => void`<br/> | N

### Cascader Events

Expand All @@ -29,8 +29,8 @@ change | `(value: string \| number, selectedOptions: string[])` | \-
close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
pick | `(context: { level: number, value: string \| number, index: number })` | \-

### CSS 变量

### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
Expand All @@ -43,4 +43,4 @@ Name | Default Value | Description
--td-cascader-step-dot-size | 8px | -
--td-cascader-step-height | 44px | -
--td-cascader-title-color | @font-gray-1 | -
--td-cascder-title-font-size | 18px | -
--td-cascder-title-font-size | 18px | -
11 changes: 6 additions & 5 deletions src/cascader/cascader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
:: BASE_DOC ::

## API

### Cascader Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
closeBtn | Boolean / Slot / Function | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
placeholder | String / Slot / Function | - | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
theme | String | step | 展示风格。可选项：step/tab | N
title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
value | String / Number | - | 选项值。支持语法糖 `v-model` 或 `v-model:value` | N
defaultValue | String / Number | - | 选项值。非受控属性 | N
visible | Boolean | false | 是否展示 | N
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
placeholder | String / Slot / Function | 选择选项 | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
onChange | Function | | TS 类型：`(value: string \| number, selectedOptions: string[]) => void`<br/>值发生变更时触发 | N
onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
onPick | Function | | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N
Expand All @@ -28,8 +29,8 @@ change | `(value: string \| number, selectedOptions: string[])` | 值发生变
close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发


### CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
Expand All @@ -42,4 +43,4 @@ pick | `(context: { level: number, value: string \| number, index: number })` |
--td-cascader-step-dot-size | 8px | -
--td-cascader-step-height | 44px | -
--td-cascader-title-color | @font-gray-1 | -
--td-cascder-title-font-size | 18px | -
--td-cascder-title-font-size | 18px | -
Loading
Loading