Skip to content

Commit

Permalink
fix(Cacader): fixed multiple issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Oct 14, 2024
1 parent a34ee4c commit ef5a083
Show file tree
Hide file tree
Showing 11 changed files with 821 additions and 946 deletions.
712 changes: 308 additions & 404 deletions src/cascader/__test__/__snapshots__/demo.test.jsx.snap
View file

Large diffs are not rendered by default.

57 changes: 26 additions & 31 deletions src/cascader/__test__/__snapshots__/index.test.jsx.snap
View file
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 All @@ -45,42 +45,37 @@ exports[`cascader > events > : pick 1`] = `
<div
class="t-cascader__content"
>
<div>
<div
class="t-cascader__steps"
>
<div
class="t-cascader__steps"
class="t-cascader__step"
>
<div
class="t-cascader__step"
class="t-cascader__step-dot t-cascader__step-dot--last"
/>
<div
class="t-cascader__step-label t-cascader__step-label--active"
>
<div
class="t-cascader__step-dot t-cascader__step-dot--last"
/>
<div
class="t-cascader__step-label t-cascader__step-label--active"
>
选择选项
</div>
<svg
class="t-icon t-icon-chevron-right t-cascader__step-arrow"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
fill="currentColor"
/>
</svg>
选择选项
</div>
<svg
class="t-icon t-icon-chevron-right t-cascader__step-arrow"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
fill="currentColor"
/>
</svg>
</div>
<!--v-if-->
</div>
<!--v-if-->
<!---->
<div
class="t-cascader__options-container"
style="width: 200vw; transform: translateX(-000vw);"
Expand All @@ -90,7 +85,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
21 changes: 9 additions & 12 deletions src/cascader/__test__/index.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
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 { AppIcon as TIconApp, CloseIcon } from 'tdesign-icons-vue-next';
import Cascader from '../cascader';
import Radio from '../../radio/index';
import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
import prefixConfig from '../../config';
Expand Down Expand Up @@ -158,7 +158,7 @@ const itemList = [

const subTitles = ['请选择省份', '请选择城市', '请选择区/县'];

const defaultPlaceholder = "默认选项标签";
const defaultPlaceholder = '默认选项标签';

describe('cascader', () => {
describe('props', () => {
Expand Down Expand Up @@ -202,18 +202,15 @@ describe('cascader', () => {
});

it(': title', async () => {
const wrapper = mount(<Cascader options={options} />);
const title = TEXT;
const wrapper = mount(<Cascader options={options} title={title} />);
const $title = wrapper.find(`.${name}__title`);

const title = TEXT;
const newTitle = 'Cascader 级联选择器';
await wrapper.setProps({
title,
});
expect($title.text()).toBe(TEXT);
await wrapper.setProps({
title: newTitle,
});
// await wrapper.setProps({
// title: newTitle,
// });
});

it(': placeholder', async () => {
Expand Down Expand Up @@ -293,13 +290,13 @@ describe('cascader', () => {
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');

// overlay
const $overlay = wrapper.find(`.${prefix}-overlay`);
$overlay.trigger('click');
expect(onClose).toBeCalledTimes(2);
expect(onClose).toHaveBeenLastCalledWith({ trigger: 'overlay' });
expect(onClose).toHaveBeenLastCalledWith('overlay');
});

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

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
keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.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
onChange | Function | | Typescript：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
onClose | Function | | Typescript：`(trigger: CascaderTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = '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

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


### 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 | -
39 changes: 20 additions & 19 deletions src/cascader/cascader.md
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
:: 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
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.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
onChange | Function | | TS 类型：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/>值发生变更时触发 | N
onClose | Function | | TS 类型：`(trigger: CascaderTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
onPick | Function | | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N

### Cascader Events

名称 | 参数 | 描述
-- | -- | --
change | `(value: string \| number, selectedOptions: string[])` | 值发生变更时触发
change | `(value: string \| number, selectedOptions: CascaderOption[])` | 值发生变更时触发
close | `(trigger: CascaderTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发


### CSS Variables

组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-cascader-active-color | @brand-color | -
--td-cascader-border-color | @border-color | -
--td-cascader-disabled-color | @font-gray-4 | -
--td-cascader-options-height | 320px | -
--td-cascader-options-title-color | @font-gray-3 | -
--td-cascader-step-arrow-color | @font-gray-3 | -
--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-cascader-active-color | @brand-color | - |
| --td-cascader-border-color | @border-color | - |
| --td-cascader-disabled-color | @font-gray-4 | - |
| --td-cascader-options-height | 320px | - |
| --td-cascader-options-title-color | @font-gray-3 | - |
| --td-cascader-step-arrow-color | @font-gray-3 | - |
| --td-cascader-step-dot-size | 8px | - |
| --td-cascader-step-height | 44px | - |
| --td-cascader-title-color | @font-gray-1 | - |
| --td-cascder-title-font-size | 18px | - |
Loading

0 comments on commit ef5a083

Please sign in to comment.