From ac889087106938c80475b2b390c8ac3d7087dccb Mon Sep 17 00:00:00 2001 From: pengYYY Date: Thu, 30 Jun 2022 11:02:43 +0800 Subject: [PATCH 1/2] feat: form whitespace --- examples/dialog/dialog.md | 4 ++-- examples/drawer/drawer.md | 4 ++-- examples/form/demos/validator.vue | 1 + examples/form/form.md | 1 + src/dialog/dialog.tsx | 4 ++-- src/dialog/props.ts | 10 ++++++++-- src/drawer/drawer.tsx | 4 ++-- src/drawer/props.ts | 10 ++++++---- src/drawer/type.ts | 1 - src/form/form-model.ts | 1 + 10 files changed, 25 insertions(+), 15 deletions(-) diff --git a/examples/dialog/dialog.md b/examples/dialog/dialog.md index a6c19a088..3e59ffd01 100644 --- a/examples/dialog/dialog.md +++ b/examples/dialog/dialog.md @@ -38,8 +38,8 @@ attach | String / Function | '' | 对话框挂载的节点，默认挂在组件 body | String / Slot / Function | '' | 对话框内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string | ButtonProps | TNode | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发对话框关闭事件 | N -closeOnOverlayClick | Boolean | - | 点击蒙层时是否触发关闭事件 | N +closeOnEscKeydown | Boolean | undefined | 按下 ESC 时是否触发对话框关闭事件 | N +closeOnOverlayClick | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string | ButtonProps | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 对话框内容，同 body。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N diff --git a/examples/drawer/drawer.md b/examples/drawer/drawer.md index dce6eef24..b9214ec92 100644 --- a/examples/drawer/drawer.md +++ b/examples/drawer/drawer.md @@ -9,8 +9,8 @@ attach | String / Function | '' | 抽屉挂载的节点，默认挂在组件本 body | String / Slot / Function | - | 抽屉内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N closeBtn | String / Boolean / Slot / Function | - | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发抽屉关闭事件 | N -closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N +closeOnEscKeydown | Boolean | undefined | 按下 ESC 时是否触发抽屉关闭事件 | N +closeOnOverlayClick | Boolean | undefined | 点击蒙层时是否触发抽屉关闭事件 | N confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string | ButtonProps | TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N default | String / Slot / Function | - | 抽屉内容，同 body。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N diff --git a/examples/form/demos/validator.vue b/examples/form/demos/validator.vue index 2e1a7bf0f..e92e441cf 100644 --- a/examples/form/demos/validator.vue +++ b/examples/form/demos/validator.vue @@ -158,6 +158,7 @@ export default { rules: { account: [ { required: true, message: '姓名必填', type: 'error' }, + { whitespace: true, message: '姓名不能为空' }, { min: 2, message: '至少需要两个字符，一个中文等于两个字符', type: 'warning' }, { max: 10, message: '姓名字符长度超出', type: 'warning' }, ], diff --git a/examples/form/form.md b/examples/form/form.md index 38a158733..ff1cfa63a 100644 --- a/examples/form/form.md +++ b/examples/form/form.md @@ -78,6 +78,7 @@ min | Number / Boolean | - | 内置校验方法，校验值最小长度，如： number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1e5 都算数字），示例：`{ number: true, message: '请输入数字' }` | N pattern | Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp` | N required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N +whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N trigger | String | change | 校验触发方式。可选项：change/blur | N type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index b6c1082b4..914aa61a7 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -184,7 +184,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d if (e.code === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); // 根据 closeOnEscKeydown 判断按下ESC时是否触发close事件 - if (this.closeOnEscKeydown || this.global.closeOnEscKeydown) { + if (this.closeOnEscKeydown ?? this.global.closeOnEscKeydown) { this.emitCloseEvent({ trigger: 'esc', e, @@ -194,7 +194,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, overlayAction(e: MouseEvent) { // 根据closeOnClickOverlay判断点击蒙层时是否触发close事件 - if (this.closeOnOverlayClick || this.global.closeOnOverlayClick) { + if (this.closeOnOverlayClick ?? this.global.closeOnOverlayClick) { emitEvent>(this, 'overlay-click', { e }); this.emitCloseEvent({ trigger: 'overlay', diff --git a/src/dialog/props.ts b/src/dialog/props.ts index 4f024c31d..e08f66fe9 100644 --- a/src/dialog/props.ts +++ b/src/dialog/props.ts @@ -29,9 +29,15 @@ export default { default: true, }, /** 按下 ESC 时是否触发对话框关闭事件 */ - closeOnEscKeydown: Boolean, + closeOnEscKeydown: { + type: Boolean, + default: undefined, + }, /** 点击蒙层时是否触发关闭事件 */ - closeOnOverlayClick: Boolean, + closeOnOverlayClick: { + type: Boolean, + default: undefined, + }, /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */ confirmBtn: { type: [String, Object, Function] as PropType, diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 23825c2d2..923712476 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -275,14 +275,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, handleWrapperClick(e: MouseEvent) { emitEvent>(this, 'overlay-click', { e }); - if (this.closeOnOverlayClick || this.global.closeOnOverlayClick) { + if (this.closeOnOverlayClick ?? this.global.closeOnOverlayClick) { this.closeDrawer({ trigger: 'overlay', e }); } }, onKeyDown(e: KeyboardEvent) { if (e.key === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); - if (this.closeOnEscKeydown || this.global.closeOnEscKeydown) { + if (this.closeOnEscKeydown ?? this.global.closeOnEscKeydown) { this.closeDrawer({ trigger: 'esc', e }); } } diff --git a/src/drawer/props.ts b/src/drawer/props.ts index 65af9daa1..b52f34480 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -25,14 +25,16 @@ export default { /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */ closeBtn: { type: [String, Boolean, Function] as PropType, - default: undefined, }, /** 按下 ESC 时是否触发抽屉关闭事件 */ - closeOnEscKeydown: Boolean, + closeOnEscKeydown: { + type: Boolean, + default: undefined, + }, /** 点击蒙层时是否触发抽屉关闭事件 */ closeOnOverlayClick: { type: Boolean, - default: true, + default: undefined, }, /** 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */ confirmBtn: { @@ -53,7 +55,7 @@ export default { /** 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容 */ header: { type: [String, Boolean, Function] as PropType, - default: undefined, + default: true, }, /** 展开方式，有两种：直接展示在内容上方 和 推开内容区域 */ mode: { diff --git a/src/drawer/type.ts b/src/drawer/type.ts index c60e2a773..1e9ba6993 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -32,7 +32,6 @@ export interface TdDrawerProps { closeOnEscKeydown?: boolean; /** * 点击蒙层时是否触发抽屉关闭事件 - * @default true */ closeOnOverlayClick?: boolean; /** diff --git a/src/form/form-model.ts b/src/form/form-model.ts index 34ac56e94..e5fa0d0d6 100644 --- a/src/form/form-model.ts +++ b/src/form/form-model.ts @@ -35,6 +35,7 @@ const VALIDATE_MAP = { url: isURL, email: isEmail, required: (val: ValueType): boolean => !isValueEmpty(val), + whitespace: (val: ValueType): boolean => !(/^\s+$/.test(val) || val === ''), boolean: (val: ValueType): boolean => typeof val === 'boolean', max: (val: ValueType, num: number): boolean => compareValue(val, num, true), min: (val: ValueType, num: number): boolean => compareValue(val, num, false), From 1dda2121617733c597c7baba20ecbc4884d1a104 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Thu, 30 Jun 2022 11:36:18 +0800 Subject: [PATCH 2/2] test: snap update --- test/ssr/__snapshots__/ssr.test.js.snap | 10 +-------- .../drawer/__snapshots__/demo.test.js.snap | 21 +------------------ 2 files changed, 2 insertions(+), 29 deletions(-) diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 13156002e..b8c32d749 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -5527,7 +5527,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/attach-parent.vue cor
抽屉标题
-

抽屉的内容

@@ -5573,9 +5572,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
-
-
自定义头部
-
+
@@ -5633,7 +5630,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly
抽屉标题
-

抽屉的内容

@@ -5651,7 +5647,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correct
抽屉标题
-
标签 A
@@ -5683,7 +5678,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correct
抽屉标题
-

抽屉的内容

@@ -5705,7 +5699,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1
抽屉标题
-

抽屉的内容

@@ -5727,7 +5720,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/size.vue correctly 1`
抽屉标题
-

抽屉的内容

diff --git a/test/unit/drawer/__snapshots__/demo.test.js.snap b/test/unit/drawer/__snapshots__/demo.test.js.snap index efe8c4421..c7fcd29de 100644 --- a/test/unit/drawer/__snapshots__/demo.test.js.snap +++ b/test/unit/drawer/__snapshots__/demo.test.js.snap @@ -23,9 +23,6 @@ exports[`Drawer Drawer attachParentVue demo works fine 1`] = ` > 抽屉标题
-
@@ -320,11 +317,7 @@ exports[`Drawer Drawer customVue demo works fine 1`] = ` >
-
- 自定义头部 -
-
+ />
@@ -589,9 +582,6 @@ exports[`Drawer Drawer noMaskVue demo works fine 1`] = ` > 抽屉标题
-
@@ -661,9 +651,6 @@ exports[`Drawer Drawer operationVue demo works fine 1`] = ` > 抽屉标题
-
@@ -801,9 +788,6 @@ exports[`Drawer Drawer placementVue demo works fine 1`] = ` > 抽屉标题
-
@@ -1028,9 +1012,6 @@ exports[`Drawer Drawer sizeVue demo works fine 1`] = ` > 抽屉标题
-