Merge pull request #1095 from Tencent/feat/form/whitespace

feat: form whitespace
Tencent · Jun 30, 2022 · b755312 · b755312
2 parents 514bb29 + 1dda212
commit b755312
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -184,7 +184,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       if (e.code === 'Escape') {
         emitEvent<Parameters<TdDialogProps['onEscKeydown']>>(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<Vue, DialogConfig>('d
     },
     overlayAction(e: MouseEvent) {
       // 根据closeOnClickOverlay判断点击蒙层时是否触发close事件
-      if (this.closeOnOverlayClick || this.global.closeOnOverlayClick) {
+      if (this.closeOnOverlayClick ?? this.global.closeOnOverlayClick) {
         emitEvent<Parameters<TdDialogProps['onOverlayClick']>>(this, 'overlay-click', { e });
         this.emitCloseEvent({
           trigger: 'overlay',

diff --git 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<TdDialogProps['confirmBtn']>,

diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
@@ -275,14 +275,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
     },
     handleWrapperClick(e: MouseEvent) {
       emitEvent<Parameters<TdDrawerProps['onOverlayClick']>>(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<Parameters<TdDrawerProps['onEscKeydown']>>(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
@@ -25,14 +25,16 @@ export default {
   /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */
   closeBtn: {
     type: [String, Boolean, Function] as PropType<TdDrawerProps['closeBtn']>,
-    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<TdDrawerProps['header']>,
-    default: undefined,
+    default: true,
   },
   /** 展开方式，有两种：直接展示在内容上方 和 推开内容区域 */
   mode: {

diff --git 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
@@ -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),

diff --git 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
       <div class="t-drawer__mask"></div>
       <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
         <div class="t-drawer__header">抽屉标题</div>
-        <div class="t-drawer__close-btn"></div>
         <div class="t-drawer__body">
           <p>抽屉的内容</p>
         </div>
@@ -5573,9 +5572,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
   <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
-      <div class="t-drawer__header">
-        <div>自定义头部</div>
-      </div>
+      <div class="t-drawer__header"></div>
       <div class="t-drawer__close-btn"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-submenu-icon">
           <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
         </svg></div>
@@ -5633,7 +5630,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly
   <div tabindex="0" class="t-drawer t-drawer--right t-drawer--without-mask">
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
-      <div class="t-drawer__close-btn"></div>
       <div class="t-drawer__body">
         <p>抽屉的内容</p>
       </div>
@@ -5651,7 +5647,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correct
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
-      <div class="t-drawer__close-btn"></div>
       <div class="t-drawer__body">
         <div class="t-drawer-demo-div"><span>标签 A</span>
           <div class="t-input__wrap">
@@ -5683,7 +5678,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correct
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
-      <div class="t-drawer__close-btn"></div>
       <div class="t-drawer__body">
         <p>抽屉的内容</p>
       </div>
@@ -5705,7 +5699,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
-      <div class="t-drawer__close-btn"></div>
       <div class="t-drawer__body">
         <p>抽屉的内容</p>
       </div>
@@ -5727,7 +5720,6 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/size.vue correctly 1`
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
-      <div class="t-drawer__close-btn"></div>
       <div class="t-drawer__body">
         <p>抽屉的内容</p>
       </div>

diff --git 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`] = `
         >
           抽屉标题
         </div>
-        <div
-          class="t-drawer__close-btn"
-        />
         <div
           class="t-drawer__body"
         >
@@ -320,11 +317,7 @@ exports[`Drawer Drawer customVue demo works fine 1`] = `
     >
       <div
         class="t-drawer__header"
-      >
-        <div>
-          自定义头部
-        </div>
-      </div>
+      />
       <div
         class="t-drawer__close-btn"
       >
@@ -589,9 +582,6 @@ exports[`Drawer Drawer noMaskVue demo works fine 1`] = `
       >
         抽屉标题
       </div>
-      <div
-        class="t-drawer__close-btn"
-      />
       <div
         class="t-drawer__body"
       >
@@ -661,9 +651,6 @@ exports[`Drawer Drawer operationVue demo works fine 1`] = `
       >
         抽屉标题
       </div>
-      <div
-        class="t-drawer__close-btn"
-      />
       <div
         class="t-drawer__body"
       >
@@ -801,9 +788,6 @@ exports[`Drawer Drawer placementVue demo works fine 1`] = `
       >
         抽屉标题
       </div>
-      <div
-        class="t-drawer__close-btn"
-      />
       <div
         class="t-drawer__body"
       >
@@ -1028,9 +1012,6 @@ exports[`Drawer Drawer sizeVue demo works fine 1`] = `
       >
         抽屉标题
       </div>
-      <div
-        class="t-drawer__close-btn"
-      />
       <div
         class="t-drawer__body"
       >