feat(Picker): add footer slot (#2632)

* feat(Picker): add footer slot

* docs: update

src/date-time-picker/README.en-US.md

@@ -1,17 +1,22 @@
 :: BASE_DOC ::
 
 ## API
+
 ### DateTimePicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 cancel-btn | String | 取消 | \- | N
 confirm-btn | String | - | \- | N
+custom-locale | String | zh | \- | N
 end | String / Number | - | \- | N
-external-classes | Array | - | `['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
+footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/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-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+popup-props | Object | {} | popup properties。Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 show-week | Boolean | false | \- | N
 start | String / Number | - | \- | N
 steps | Object | - | \- | N
@@ -26,11 +31,10 @@ name | params | description
 -- | -- | --
 cancel | \- | \-
 change | `(value: DateValue)` | \-
-close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`
 pick | `(value: DateValue)` | \-
 
-
 ### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 

src/date-time-picker/README.md

@@ -45,32 +45,37 @@ isComponent: true
 {{ steps }}
 
 ## API
+
 ### DateTimePicker Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
+custom-locale | String | zh |  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/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-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
 start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
 steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | N
 title | String | - | 标题 | N
 value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 default-value | String / Number | undefined | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 visible | Boolean | false | 是否显示 | N
-custom-locale | String | 'zh' | 组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
 
 ### DateTimePicker Events
 
 名称 | 参数 | 描述
 -- | -- | --
 cancel | \- | 取消按钮点击时触发
 change | `(value: DateValue)` | 确认按钮点击时触发
-close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
 

src/date-time-picker/date-time-picker.wxml

@@ -23,4 +23,5 @@
     options="{{item}}"
     index="index"
   />
+  <slot slot="footer" name="footer" />
 </t-picker>

src/date-time-picker/props.ts

@@ -16,6 +16,11 @@ const props: TdDateTimePickerProps = {
     type: String,
     value: '',
   },
+  /**  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 */
+  customLocale: {
+    type: String,
+    value: 'zh',
+  },
   /** 选择器的最大可选时间，默认为当前时间+10年 */
   end: {
     type: null,
@@ -39,6 +44,11 @@ const props: TdDateTimePickerProps = {
     type: null,
     value: 'date',
   },
+  /** 透传 `Popup` 组件全部属性 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
   /** 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） */
   showWeek: {
     type: Boolean,
@@ -71,16 +81,6 @@ const props: TdDateTimePickerProps = {
     type: Boolean,
     value: false,
   },
-
-  /** popupProps */
-  popupProps: {
-    type: Object,
-    value: {},
-  },
-  customLocale: {
-    type: String,
-    value: 'zh',
-  },
 };
 
 export default props;

src/date-time-picker/type.ts

@@ -4,6 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { PopupProps } from '../popup/index';
+
 export interface TdDateTimePickerProps {
   /**
    * 取消按钮文字
@@ -21,6 +23,14 @@ export interface TdDateTimePickerProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   *  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言
+   * @default zh
+   */
+  customLocale?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 选择器的最大可选时间，默认为当前时间+10年
    */
@@ -59,6 +69,14 @@ export interface TdDateTimePickerProps {
     type: null;
     value?: DateTimePickerMode;
   };
+  /**
+   * 透传 `Popup` 组件全部属性
+   * @default {}
+   */
+  popupProps?: {
+    type: ObjectConstructor;
+    value?: PopupProps;
+  };
   /**
    * 【开发中】是否在日期旁边显示周几（如周一，周二，周日等）
    * @default false
@@ -111,24 +129,6 @@ export interface TdDateTimePickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-
-  /**
-   * 透传给picker内部的pop组件
-   * @default {}
-   */
-  popupProps: {
-    type: Object;
-    value: {};
-  };
-
-  /**
-   * 组件国际化支持
-   * @default zh
-   */
-  customLocale?: {
-    type: StringConstructor;
-    value: String;
-  };
 }
 
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;

src/picker-item/type.ts

@@ -26,3 +26,8 @@ export interface PickerItemOption {
   label: string;
   value: string | number;
 }
+
+export interface PickerItemOption {
+  label: string;
+  value: string | number;
+}

src/picker/README.en-US.md

@@ -1,15 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Picker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 auto-close | Boolean | true | \- | N
 cancel-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N
 confirm-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
+footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+popup-props | Object | {} | popup properties。Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 title | String | '' | \- | N
 value | Array | - | Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 default-value | Array | undefined | uncontrolled property。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
@@ -21,19 +26,22 @@ name | params | description
 -- | -- | --
 cancel | - | \-
 change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
-close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
 pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | \-
 
+
 ### PickerItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 format | Function | - | Typescript：`(option: PickerItemOption) => string` | N
 options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -54,5 +62,4 @@ Name | Default Value | Description
 --td-picker-toolbar-height | 116rpx | - 
 --td-picker-item-active-color | @font-gray-1 | - 
 --td-picker-item-color | @font-gray-2 | - 
---td-picker-item-height | 80rpx | - 
-
+--td-picker-item-height | 80rpx | -

src/picker/README.md

@@ -40,16 +40,20 @@ isComponent: true
 {{ with-title }}
 
 ## API
+
 ### Picker Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
 cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
 confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
-footer | Slot | - | 已废弃。底部内容 | N
+footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 title | String | '' | 标题 | N
 value | Array | - | 选中值。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 default-value | Array | undefined | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
@@ -61,19 +65,22 @@ visible | Boolean | false | 是否显示 | N
 -- | -- | --
 cancel | - | 点击取消按钮时触发
 change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 选中变化时候触发，即确认变化时触发
-close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 点击确认按钮时触发
 pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
 
+
 ### PickerItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption) => string` | N
 options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -94,4 +101,4 @@ options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface P
 --td-picker-toolbar-height | 116rpx | - 
 --td-picker-item-active-color | @font-gray-1 | - 
 --td-picker-item-color | @font-gray-2 | - 
---td-picker-item-height | 80rpx | - 
+--td-picker-item-height | 80rpx | -

src/picker/picker.wxml

@@ -25,5 +25,6 @@
       <view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom" />
       <view class="{{classPrefix}}__indicator"></view>
     </view>
+    <slot name="footer" />
   </view>
 </t-popup>

src/picker/props.ts

@@ -30,6 +30,11 @@ const props: TdPickerProps = {
   keys: {
     type: Object,
   },
+  /** 透传 `Popup` 组件全部属性 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
   /** 标题 */
   title: {
     type: String,
@@ -49,11 +54,6 @@ const props: TdPickerProps = {
     type: Boolean,
     value: false,
   },
-  /** popupProps透传 */
-  popupProps: {
-    type: Object,
-    value: {},
-  },
 };
 
 export default props;

src/picker/type.ts

@@ -5,6 +5,7 @@
  * */
 
 import { ButtonProps } from '../button/index';
+import { PopupProps } from '../popup/index';
 import { KeysType } from '../common/common';
 
 export interface TdPickerProps {
@@ -47,6 +48,14 @@ export interface TdPickerProps {
     type: ObjectConstructor;
     value?: KeysType;
   };
+  /**
+   * 透传 `Popup` 组件全部属性
+   * @default {}
+   */
+  popupProps?: {
+    type: ObjectConstructor;
+    value?: PopupProps;
+  };
   /**
    * 标题
    * @default ''
@@ -77,14 +86,6 @@ export interface TdPickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * popup组件样式
-   * @default {}
-   */
-  popupProps: {
-    type: object;
-    value?: {};
-  };
 }
 
 export type PickerValue = string | number;

src/popup/index.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './popup';