【WIP】feat(mobile-datetime-picker): add steps/header/footer props

packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.en-US.md

@@ -6,21 +6,27 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+autoClose | Boolean | false | \- | N
 cancelBtn | String | 取消 | \- | N
 confirmBtn | String | - | \- | N
 end | String / Number | - | \- | N
 filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
+header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | Typescript：`(type: string, value: number) => string` | N
 showWeek | Boolean | false | \- | N
 start | String / Number | - | \- | N
+steps | Object | - | Typescript：`Record<TimeModeValues, number>` | N
 title | String | '选择时间' | title of picker | N
-usePopup | Boolean | true | \- | N
+usePopup | Boolean | false | \- | N
 value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | \- | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
+onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。<br/>`import { TriggerSource } from '@Picker'`<br/> | N
 onConfirm | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
 onPick | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
 
@@ -30,5 +36,6 @@ name | params | description
 -- | -- | --
 cancel | `(context: { e: MouseEvent })` | \-
 change | `(value: DateValue)` | \-
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。<br/>`import { TriggerSource } from '@Picker'`<br/>
 confirm | `(value: DateValue)` | \-
 pick | `(value: DateValue)` | \-

packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.md

@@ -6,21 +6,27 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+autoClose | Boolean | false | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
 cancelBtn | String | 取消 | 取消按钮文字 | N
 confirmBtn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
 filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+footer | Slot / Function | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | N
+header | Slot / Function | - | 顶部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(type: string, value: number) => string` | N
 showWeek | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
 start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }`。TS 类型：`Record<TimeModeValues, number>` | N
 title | String | '选择时间' | 标题 | N
-usePopup | Boolean | true | 是否使用弹出层包裹 | N
+usePopup | Boolean | false | 是否使用弹出层包裹 | N
 value | String / Number | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 defaultValue | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>取消按钮点击时触发 | N
 onChange | Function |  | TS 类型：`(value: DateValue) => void`<br/>value改变时触发 | N
+onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。<br/>`import { TriggerSource } from '@Picker'`<br/> | N
 onConfirm | Function |  | TS 类型：`(value: DateValue) => void`<br/>确认按钮点击时触发 | N
 onPick | Function |  | TS 类型：`(value: DateValue) => void`<br/>选中值发生变化时触发 | N
 
@@ -30,5 +36,6 @@ onPick | Function |  | TS 类型：`(value: DateValue) => void`<br/>选中值发
 -- | -- | --
 cancel | `(context: { e: MouseEvent })` | 取消按钮点击时触发
 change | `(value: DateValue)` | value改变时触发
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。<br/>`import { TriggerSource } from '@Picker'`<br/>
 confirm | `(value: DateValue)` | 确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发

packages/products/tdesign-mobile-vue/src/date-time-picker/props.ts

@@ -8,6 +8,8 @@ import { TdDateTimePickerProps } from './type';
 import { PropType } from 'vue';
 
 export default {
+  /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+  autoClose: Boolean,
   /** 取消按钮文字 */
   cancelBtn: {
     type: String,
@@ -26,11 +28,19 @@ export default {
   filter: {
     type: Function as PropType<TdDateTimePickerProps['filter']>,
   },
+  /** 底部内容 */
+  footer: {
+    type: Function as PropType<TdDateTimePickerProps['footer']>,
+  },
   /** 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,
     default: 'YYYY-MM-DD HH:mm:ss',
   },
+  /** 顶部内容 */
+  header: {
+    type: Function as PropType<TdDateTimePickerProps['header']>,
+  },
   /** year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒 */
   mode: {
     type: [String, Array] as PropType<TdDateTimePickerProps['mode']>,
@@ -46,16 +56,17 @@ export default {
   start: {
     type: [String, Number] as PropType<TdDateTimePickerProps['start']>,
   },
+  /** 时间间隔步数，示例：`{ minute: 5 }` */
+  steps: {
+    type: Object as PropType<TdDateTimePickerProps['steps']>,
+  },
   /** 标题 */
   title: {
     type: String,
     default: '选择时间',
   },
   /** 是否使用弹出层包裹 */
-  usePopup: {
-    type: Boolean,
-    default: true,
-  },
+  usePopup: Boolean,
   /** 选中值 */
   value: {
     type: [String, Number] as PropType<TdDateTimePickerProps['value']>,
@@ -69,10 +80,14 @@ export default {
   defaultValue: {
     type: [String, Number] as PropType<TdDateTimePickerProps['defaultValue']>,
   },
+  /** 是否显示 */
+  visible: Boolean,
   /** 取消按钮点击时触发 */
   onCancel: Function as PropType<TdDateTimePickerProps['onCancel']>,
   /** value改变时触发 */
   onChange: Function as PropType<TdDateTimePickerProps['onChange']>,
+  /** 关闭时触发 */
+  onClose: Function as PropType<TdDateTimePickerProps['onClose']>,
   /** 确认按钮点击时触发 */
   onConfirm: Function as PropType<TdDateTimePickerProps['onConfirm']>,
   /** 选中值发生变化时触发 */

packages/products/tdesign-mobile-vue/src/date-time-picker/type.ts

@@ -4,7 +4,15 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { TriggerSource } from '../picker';
+import { TNode } from '../common';
+
 export interface TdDateTimePickerProps {
+  /**
+   * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+   * @default false
+   */
+  autoClose?: boolean;
   /**
    * 取消按钮文字
    * @default 取消
@@ -23,11 +31,19 @@ export interface TdDateTimePickerProps {
    * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
    */
   filter?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
+  /**
+   * 底部内容
+   */
+  footer?: TNode;
   /**
    * 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format)
    * @default 'YYYY-MM-DD HH:mm:ss'
    */
   format?: string;
+  /**
+   * 顶部内容
+   */
+  header?: TNode;
   /**
    * year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒
    * @default 'date'
@@ -46,14 +62,18 @@ export interface TdDateTimePickerProps {
    * 选择器的最小可选时间，默认为当前时间-10年
    */
   start?: string | number;
+  /**
+   * 时间间隔步数，示例：`{ minute: 5 }`
+   */
+  steps?: Record<TimeModeValues, number>;
   /**
    * 标题
    * @default '选择时间'
    */
   title?: string;
   /**
    * 是否使用弹出层包裹
-   * @default true
+   * @default false
    */
   usePopup?: boolean;
   /**
@@ -68,6 +88,11 @@ export interface TdDateTimePickerProps {
    * 选中值
    */
   modelValue?: DateValue;
+  /**
+   * 是否显示
+   * @default false
+   */
+  visible?: boolean;
   /**
    * 取消按钮点击时触发
    */
@@ -76,6 +101,10 @@ export interface TdDateTimePickerProps {
    * value改变时触发
    */
   onChange?: (value: DateValue) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (trigger: TriggerSource) => void;
   /**
    * 确认按钮点击时触发
    */

packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md

@@ -6,18 +6,23 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+autoClose | Boolean | true | \- | N
 cancelBtn | String / Boolean | true | Typescript：`boolean \| string` | N
 columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | Typescript：`boolean \| string` | N
+footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | Slot / Function | - | Typescript：`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
 option | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N
 title | String | '' | \- | N
+usePopup | Boolean | false | \- | N
 value | Array | - | `v-model` and `v-model:value` is supported。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
 defaultValue | Array | - | uncontrolled property。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | \- | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
+onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/> | N
 onConfirm | Function |  | Typescript：`(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/> | N
 onPick | Function |  | Typescript：`(value: Array<PickerValue>,context: PickerContext) => void`<br/> | N
 
@@ -27,5 +32,6 @@ name | params | description
 -- | -- | --
 cancel | `(context: { e: MouseEvent })` | \-
 change | `(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) ` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/>
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] })` | \-
 pick | `(value: Array<PickerValue>,context: PickerContext)` | \-

packages/products/tdesign-mobile-vue/src/picker/picker.md

@@ -6,18 +6,23 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+autoClose | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
 cancelBtn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean \| string` | N
 columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | 确定按钮文字。TS 类型：`boolean \| string` | N
+footer | Slot / Function | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | Slot / Function | - | 自定义头部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 keys | Object | - | 用来定义 value / label / disabled 在 `columns ` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 option | Slot / Function | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
 title | String | '' | 标题 | N
+usePopup | Boolean | false | 是否使用弹出层包裹 | N
 value | Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
 defaultValue | Array | - | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
 onChange | Function |  | TS 类型：`(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent })  => void`<br/>选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
+onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/> | N
 onConfirm | Function |  | TS 类型：`(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/>点击确认按钮时触发 | N
 onPick | Function |  | TS 类型：`(value: Array<PickerValue>,context: PickerContext) => void`<br/>任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 | N
 
@@ -27,5 +32,6 @@ onPick | Function |  | TS 类型：`(value: Array<PickerValue>,context: PickerCo
 -- | -- | --
 cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 change | `(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) ` | 选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/>
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] })` | 点击确认按钮时触发
 pick | `(value: Array<PickerValue>,context: PickerContext)` | 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标