From e3900b8a7d3d9739caad92ec78b8b0ffc66818b6 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 14 Mar 2023 17:49:13 +0800 Subject: [PATCH 1/2] feat(Stepper): support size attr --- src/_common | 2 +- src/common.ts | 36 +- .../__test__/__snapshots__/demo.test.jsx.snap | 1615 +++++++---------- src/stepper/__test__/demo.test.jsx | 10 +- src/stepper/__test__/index.test.jsx | 24 +- src/stepper/demos/base.vue | 15 +- src/stepper/demos/min-max.vue | 41 + src/stepper/demos/mobile.vue | 24 +- src/stepper/demos/pure-stepper.vue | 9 - src/stepper/demos/size.vue | 27 + src/stepper/demos/status.vue | 47 +- src/stepper/demos/theme.vue | 17 + src/stepper/demos/unit-stepper.vue | 32 - src/stepper/props.ts | 16 +- src/stepper/stepper.en-US.md | 28 + src/stepper/stepper.md | 17 +- src/stepper/stepper.vue | 63 +- src/stepper/type.ts | 22 +- 18 files changed, 971 insertions(+), 1074 deletions(-) create mode 100644 src/stepper/demos/min-max.vue delete mode 100644 src/stepper/demos/pure-stepper.vue create mode 100644 src/stepper/demos/size.vue create mode 100644 src/stepper/demos/theme.vue delete mode 100644 src/stepper/demos/unit-stepper.vue create mode 100644 src/stepper/stepper.en-US.md diff --git a/src/_common b/src/_common index 065976748..1995fe5a7 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 06597674880d15541257387d231a926856a974c9 +Subproject commit 1995fe5a71fe77cfa5d617f1214b854bf1b59dd7 diff --git a/src/common.ts b/src/common.ts index ee24ab6db..1c662d2a2 100644 --- a/src/common.ts +++ b/src/common.ts @@ -30,16 +30,35 @@ export type FormSubmitEvent = Event; export interface Styles { [css: string]: string | number; } -/** 通用全局类型 */ + +export interface UploadDisplayDragEvents { + onDrop?: (event: DragEvent) => void; + onDragenter?: (event: DragEvent) => void; + onDragover?: (event: DragEvent) => void; + onDragleave?: (event: DragEvent) => void; +} + +export type ImageEvent = Event; + +/** + * 通用全局类型 + * */ +export type PlainObject = { [key: string]: any }; export type OptionData = { label?: string; value?: string | number; -} & { [key: string]: any }; - -export type TreeOptionData = { - children?: Array; -} & OptionData; +} & PlainObject; + +export type TreeOptionData = { + children?: Array>; + /** option label content */ + label?: string | TNode; + /** option search text */ + text?: string; + /** option value */ + value?: T; +} & PlainObject; export type SizeEnum = 'small' | 'medium' | 'large'; @@ -85,3 +104,8 @@ export interface TScroll { */ type: 'lazy' | 'virtual'; } + +/** + * @deprecated use TScroll instead + */ +export type InfinityScroll = TScroll; diff --git a/src/stepper/__test__/__snapshots__/demo.test.jsx.snap b/src/stepper/__test__/__snapshots__/demo.test.jsx.snap index 6a04f5b49..4f9a82225 100644 --- a/src/stepper/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/stepper/__test__/__snapshots__/demo.test.jsx.snap @@ -2,36 +2,225 @@ exports[`Stepper > Stepper baseVue demo works fine 1`] = `
- - + + +
+
- 标题文字 - - + + +
+
+
+`; + +exports[`Stepper > Stepper minMaxVue demo works fine 1`] = ` +
+
+
+ + + +
+ +
+ + + +
+
+
+
+ + + +
+ +
+ + + +
+
+
+
+ + + +
+ +
+ + + +
+
+
+`; + +exports[`Stepper > Stepper mobileVue demo works fine 1`] = ` +
+

+ Stepper 步进器 +

+

+ 用于数量的增减。 +

+
+

+ 01 类型 +

+

+ 基础步进器 +

+
-
Stepper baseVue demo works fine 1`] = `
Stepper baseVue demo works fine 1`] = `
-
- +
-
-`; - -exports[`Stepper > Stepper mobileVue demo works fine 1`] = ` -
-

- Stepper 步进器 -

-

- 用户通过调整“+”按钮、“-”按钮、数字输入框来调整具体需要的数值，可设置最大值和最小值 -

- 01 类型 + 02 组件状态

- 基础步进器 + 最大最小状态

- - -
-
- 标题文字 - - + + +
+
- -
-
- - - -
- -
- - - -
-
- +
-
-
- -
-
- -

- 带单位步进器 -

- -
- - + + +
+
- 标题文字（单位） - - + + +
- +
+
- -
-
- - - -
- -
- - - -
-
- + +
+ +
+ + +
@@ -262,20 +411,20 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `

- 纯步进器 + 禁用状态

Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `

- 02 状态 + 03 组件样式

- 步进器状态 + 步进器样式

-
- - -
-
- 禁用 - - -
-
- -
-
- - - -
- -
- - - -
-
- -
- -
-
-
-
-
- - -
-
- 禁止输入 - - +
+
- -
-
- - - -
- -
- - - -
-
- +
-
-
-
- - -
-
- 最大值 - - + + +
+
- -
-
- - - -
- -
- - - -
-
- +
-
-
-
- - -
-
- 最小值 - - + + +
+
- -
-
- - - -
- -
- - - -
-
- +
-
+ +
+
+ +

+ 步进器尺寸 +

+
Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `
Stepper mobileVue demo works fine 1`] = `
- -
-
-`; - -exports[`Stepper > Stepper pureStepperVue demo works fine 1`] = ` -
-
- - - -
- -
- - -
`; -exports[`Stepper > Stepper statusVue demo works fine 1`] = ` +exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
-
-
- - -
-
- 禁用 - - -
-
+ +
+ +
+ - -
-
- - - -
- -
- - - -
-
- -
- + +
-
- - -
-
- 禁止输入 - - -
-
+ +
+ +
+ - -
-
- - - -
- -
- - - -
-
- -
- + +
-
- - -
-
- 最大值 - - -
-
+ +
+ +
+ - -
-
- - - -
- -
- - - -
-
- -
- + +
+
+`; + +exports[`Stepper > Stepper statusVue demo works fine 1`] = ` +
-
- - -
-
- 最小值 - - -
-
+ +
+ +
+ - -
-
- - - -
- -
- - - -
-
- -
- + +
+
+`; + +exports[`Stepper > Stepper themeVue demo works fine 1`] = ` +
-
- - - -
- -
- - - -
+ +
+
-
- - - -
- -
- - - -
+ +
+
+
-
- - - -
- -
+ +
+ +
+ - - - -
+ +
- -
-`; - -exports[`Stepper > Stepper unitStepperVue demo works fine 1`] = ` -
- - -
-
- 标题文字（单位） - - + + +
- +
- -
-
- - - -
- -
- - - -
-
- +
diff --git a/src/stepper/__test__/demo.test.jsx b/src/stepper/__test__/demo.test.jsx index 0b47a8fe4..50e411646 100644 --- a/src/stepper/__test__/demo.test.jsx +++ b/src/stepper/__test__/demo.test.jsx @@ -4,17 +4,19 @@ import { mount } from '@vue/test-utils'; import baseVue from '@/stepper/demos/base.vue'; +import minMaxVue from '@/stepper/demos/min-max.vue'; import mobileVue from '@/stepper/demos/mobile.vue'; -import pureStepperVue from '@/stepper/demos/pure-stepper.vue'; +import sizeVue from '@/stepper/demos/size.vue'; import statusVue from '@/stepper/demos/status.vue'; -import unitStepperVue from '@/stepper/demos/unit-stepper.vue'; +import themeVue from '@/stepper/demos/theme.vue'; const mapper = { baseVue, + minMaxVue, mobileVue, - pureStepperVue, + sizeVue, statusVue, - unitStepperVue, + themeVue, }; describe('Stepper', () => { diff --git a/src/stepper/__test__/index.test.jsx b/src/stepper/__test__/index.test.jsx index 5065f8189..42c673dee 100644 --- a/src/stepper/__test__/index.test.jsx +++ b/src/stepper/__test__/index.test.jsx @@ -9,16 +9,18 @@ describe('stepper', () => { it(': disabled', async () => { const wrapper = mount(Stepper, { props: { + value: 2, disabled: true, }, }); - expect(wrapper.classes()).toContain('t-is-disabled'); + const $minus = wrapper.find('.t-stepper__minus'); + expect($minus.classes()).toContain('t-stepper--normal-disabled'); // 更新已挂载组件的 props await wrapper.setProps({ disabled: false, }); - expect(wrapper.classes()).not.toContain('t-is-disabled'); + expect($minus.classes()).not.toContain('t-stepper--normal-disabled'); }); it(': input-width', async () => { @@ -39,11 +41,13 @@ describe('stepper', () => { it(': theme', async () => { const wrapper = mount(Stepper, {}); - expect(wrapper.classes()).not.toContain('t-stepper__pure'); + const $minus = wrapper.find('.t-stepper__minus'); + expect($minus.classes()).toContain('t-stepper__minus--normal'); + await wrapper.setProps({ - theme: 'grey', + theme: 'filled', }); - expect(wrapper.classes()).toContain('t-stepper__pure'); + expect($minus.classes()).toContain('t-stepper__minus--filled'); }); it(': step && max && min', async () => { @@ -69,7 +73,7 @@ describe('stepper', () => { // value <= min，change 触发， value = min expect(onChange).toBeCalledTimes(1); expect(value.value).toBe(1); - expect(minusIcon.classes()).toContain('t-is-disabled'); + expect(minusIcon.classes()).toContain('t-stepper--normal-disabled'); await plusIcon.trigger('click'); await nextTick(); @@ -77,7 +81,7 @@ describe('stepper', () => { expect(value.value).toBe(3); // 此时 value = max, plusIcon 为禁用态 - expect(plusIcon.classes()).toContain('t-is-disabled'); + expect(plusIcon.classes()).toContain('t-stepper--normal-disabled'); }); }); @@ -158,11 +162,7 @@ describe('stepper', () => { // blur $input.trigger('blur'); expect(onBlur).toHaveBeenCalled(1); - - // input, 触发 change - $input.setValue('10'); - expect(onChange).toBeCalled(1); - expect(value.value).toBe(10); + expect(value.value).toBe(2); }); }); }); diff --git a/src/stepper/demos/base.vue b/src/stepper/demos/base.vue index 5229f6f78..8c671db53 100644 --- a/src/stepper/demos/base.vue +++ b/src/stepper/demos/base.vue @@ -1,13 +1,18 @@ + + diff --git a/src/stepper/demos/min-max.vue b/src/stepper/demos/min-max.vue new file mode 100644 index 000000000..5d8847f8f --- /dev/null +++ b/src/stepper/demos/min-max.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/stepper/demos/mobile.vue b/src/stepper/demos/mobile.vue index db454416f..f52ae5dee 100644 --- a/src/stepper/demos/mobile.vue +++ b/src/stepper/demos/mobile.vue @@ -1,27 +1,29 @@ diff --git a/src/stepper/demos/pure-stepper.vue b/src/stepper/demos/pure-stepper.vue deleted file mode 100644 index 8e5b948b4..000000000 --- a/src/stepper/demos/pure-stepper.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/stepper/demos/size.vue b/src/stepper/demos/size.vue new file mode 100644 index 000000000..3481b3a94 --- /dev/null +++ b/src/stepper/demos/size.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stepper/demos/status.vue b/src/stepper/demos/status.vue index 4356aed5e..3db3b5dd0 100644 --- a/src/stepper/demos/status.vue +++ b/src/stepper/demos/status.vue @@ -1,43 +1,12 @@ - + diff --git a/src/stepper/demos/theme.vue b/src/stepper/demos/theme.vue new file mode 100644 index 000000000..156f32e2e --- /dev/null +++ b/src/stepper/demos/theme.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/stepper/demos/unit-stepper.vue b/src/stepper/demos/unit-stepper.vue deleted file mode 100644 index 45ac68dca..000000000 --- a/src/stepper/demos/unit-stepper.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/stepper/props.ts b/src/stepper/props.ts index a3ac80139..3af219423 100644 --- a/src/stepper/props.ts +++ b/src/stepper/props.ts @@ -8,10 +8,10 @@ import { TdStepperProps } from './type'; import { PropType } from 'vue'; export default { - /** 禁用全部操作 */ - disabled: Boolean, /** 禁用输入框 */ disableInput: Boolean, + /** 禁用全部操作 */ + disabled: Boolean, /** 输入框宽度 */ inputWidth: { type: Number, @@ -26,6 +26,15 @@ export default { type: Number, default: 0, }, + /** 组件尺寸 */ + size: { + type: String as PropType, + default: 'medium' as TdStepperProps['size'], + validator(val: TdStepperProps['size']): boolean { + if (!val) return true; + return ['small', 'medium', 'large'].includes(val); + }, + }, /** 步长 */ step: { type: Number, @@ -36,7 +45,8 @@ export default { type: String as PropType, default: 'normal' as TdStepperProps['theme'], validator(val: TdStepperProps['theme']): boolean { - return ['normal', 'grey'].includes(val!); + if (!val) return true; + return ['normal', 'filled', 'outline'].includes(val); }, }, /** 值 */ diff --git a/src/stepper/stepper.en-US.md b/src/stepper/stepper.en-US.md new file mode 100644 index 000000000..408c6c2a1 --- /dev/null +++ b/src/stepper/stepper.en-US.md @@ -0,0 +1,28 @@ +:: BASE_DOC :: + +## API +### Stepper Props + +name | type | default | description | required +-- | -- | -- | -- | -- +disableInput | Boolean | false | \- | N +disabled | Boolean | false | \- | N +inputWidth | Number | - | \- | N +max | Number | 100 | \- | N +min | Number | 0 | \- | N +size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +step | Number | 1 | \- | N +theme | String | normal | stylish。options：normal/filled/outline | N +value | String / Number | 0 | `v-model` and `v-model:value` is supported | N +defaultValue | String / Number | 0 | uncontrolled property | N +onBlur | Function | | Typescript：`(value: string \| number) => void`
| N +onChange | Function | | Typescript：`(value: string \| number) => void`
| N +onOverlimit | Function | | Typescript：`(type: 'minus' \| 'plus') => void`
| N + +### Stepper Events + +name | params | description +-- | -- | -- +blur | `(value: string \| number)` | \- +change | `(value: string \| number)` | \- +overlimit | `(type: 'minus' \| 'plus')` | \- diff --git a/src/stepper/stepper.md b/src/stepper/stepper.md index 5bbedcb9b..4184b724b 100644 --- a/src/stepper/stepper.md +++ b/src/stepper/stepper.md @@ -5,23 +5,24 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -disabled | Boolean | false | 禁用全部操作 | N disableInput | Boolean | false | 禁用输入框 | N +disabled | Boolean | false | 禁用全部操作 | N inputWidth | Number | - | 输入框宽度 | N max | Number | 100 | 最大值 | N min | Number | 0 | 最小值 | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N step | Number | 1 | 步长 | N -theme | String | normal | 组件风格。可选项：normal/grey | N +theme | String | normal | 组件风格。可选项：normal/filled/outline | N value | String / Number | 0 | 值。支持语法糖 `v-model` 或 `v-model:value` | N defaultValue | String / Number | 0 | 值。非受控属性 | N -onBlur | Function | | TS 类型：`(value: string | number) => void`
输入框失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: string | number) => void`
数值发生变更时触发 | N -onOverlimit | Function | | TS 类型：`(type: 'minus' | 'plus') => void`
数值超出限制时触发 | N +onBlur | Function | | TS 类型：`(value: string \| number) => void`
输入框失去焦点时触发 | N +onChange | Function | | TS 类型：`(value: string \| number) => void`
数值发生变更时触发 | N +onOverlimit | Function | | TS 类型：`(type: 'minus' \| 'plus') => void`
数值超出限制时触发 | N ### Stepper Events 名称 | 参数 | 描述 -- | -- | -- -blur | `(value: string | number)` | 输入框失去焦点时触发 -change | `(value: string | number)` | 数值发生变更时触发 -overlimit | `(type: 'minus' | 'plus')` | 数值超出限制时触发 +blur | `(value: string \| number)` | 输入框失去焦点时触发 +change | `(value: string \| number)` | 数值发生变更时触发 +overlimit | `(type: 'minus' \| 'plus')` | 数值超出限制时触发 diff --git a/src/stepper/stepper.vue b/src/stepper/stepper.vue index 3b12813d2..5e809fd95 100644 --- a/src/stepper/stepper.vue +++ b/src/stepper/stepper.vue @@ -1,36 +1,57 @@