diff --git a/db/TDesign.db b/db/TDesign.db index 2dba1476..ddec2c57 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-mobile-react/src/picker/defaultProps.ts b/packages/products/tdesign-mobile-react/src/picker/defaultProps.ts new file mode 100644 index 00000000..bb47c49d --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/picker/defaultProps.ts @@ -0,0 +1,14 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdPickerProps } from './type'; + +export const pickerDefaultProps: TdPickerProps = { + cancelBtn: true, + columns: [], + confirmBtn: true, + header: true, + title: '', + visible: false, +}; diff --git a/packages/products/tdesign-mobile-react/src/picker/picker.en-US.md b/packages/products/tdesign-mobile-react/src/picker/picker.en-US.md new file mode 100644 index 00000000..066a4f95 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/picker/picker.en-US.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API + + +### Picker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +cancelBtn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N +columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | Y +confirmBtn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +header | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +option | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N +title | String | '' | \- | N +value | Array | - | Typescript：`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +defaultValue | Array | - | uncontrolled property。Typescript：`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +visible | Boolean | false | \- | N +onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onChange | Function | | Typescript：`(value: Array, context: { columns: Array, e: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
| N +onConfirm | Function | | Typescript：`(value: Array, context: { index: number[], e: MouseEvent, label: string[] }) => void`
| N +onPick | Function | | Typescript：`(value: Array,context: PickerContext) => void`
| N diff --git a/packages/products/tdesign-mobile-react/src/picker/picker.md b/packages/products/tdesign-mobile-react/src/picker/picker.md new file mode 100644 index 00000000..9fac1e02 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/picker/picker.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API + + +### Picker Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +cancelBtn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N +columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | Y +confirmBtn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +option | TElement | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N +title | String | '' | 标题 | N +value | Array | - | 选中值。TS 类型：`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +defaultValue | Array | - | 选中值。非受控属性。TS 类型：`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N +visible | Boolean | false | 是否显示 | N +onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击取消按钮时触发 | N +onChange | Function | | TS 类型：`(value: Array, context: { columns: Array, e: MouseEvent }) => void`
选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
| N +onConfirm | Function | | TS 类型：`(value: Array, context: { index: number[], e: MouseEvent, label: string[] }) => void`
点击确认按钮时触发 | N +onPick | Function | | TS 类型：`(value: Array,context: PickerContext) => void`
任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 | N diff --git a/packages/products/tdesign-mobile-react/src/picker/type.ts b/packages/products/tdesign-mobile-react/src/picker/type.ts new file mode 100644 index 00000000..fbbfe0ea --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/picker/type.ts @@ -0,0 +1,102 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { ButtonProps } from '../button'; +import { TNode, TElement, KeysType } from '../common'; +import { MouseEvent } from 'react'; + +export interface TdPickerProps { + /** + * 取消按钮文字 + * @default true + */ + cancelBtn?: boolean | string | ButtonProps; + /** + * 配置每一列的选项 + * @default [] + */ + columns: PickerColumn | Array | ((item: Array) => Array); + /** + * 确定按钮文字 + * @default true + */ + confirmBtn?: boolean | string | ButtonProps; + /** + * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 + * @default true + */ + header?: TNode; + /** + * 用来定义 value / label 在 `options` 中对应的字段别名 + */ + keys?: KeysType; + /** + * 自定义选项内容。参数为 `option: PickerColumnItem, index: number` + */ + option?: TElement; + /** + * 自定义label + */ + renderLabel?: (item: PickerColumnItem) => string; + /** + * 标题 + * @default '' + */ + title?: string; + /** + * 选中值 + */ + value?: Array; + /** + * 选中值，非受控属性 + */ + defaultValue?: Array; + /** + * 是否显示 + * @default false + */ + visible?: boolean; + /** + * 点击取消按钮时触发 + * @default '' + */ + onCancel?: (context: { e: MouseEvent }) => void; + /** + * 选中变化时候触发 + * @default '' + */ + onChange?: ( + value: Array, + context: { columns: Array; e: MouseEvent }, + ) => void; + /** + * 点击确认按钮时触发 + * @default '' + */ + onConfirm?: ( + value: Array, + context: { index: number[]; e: MouseEvent; label: string[] }, + ) => void; + /** + * 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 + * @default '' + */ + onPick?: (value: Array, context: PickerContext) => void; +} + +export type PickerColumn = PickerColumnItem[]; + +export interface PickerColumnItem { + label: string; + value: string; +} + +export type PickerValue = string | number; + +export interface PickerContext { + column: number; + index: number; +} diff --git a/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md b/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md index 9079b5c2..6c0bd1ef 100644 --- a/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md @@ -10,6 +10,7 @@ cancelBtn | String / Boolean | true | Typescript：`boolean \| string` | N columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array \| ((item: Array) => Array)` `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 header | Slot / Function | - | Typescript：`TNode`。[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 value | Array | - | `v-model` and `v-model:value` is supported。Typescript：`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N diff --git a/packages/products/tdesign-mobile-vue/src/picker/picker.md b/packages/products/tdesign-mobile-vue/src/picker/picker.md index 032a47f0..7dcede0a 100644 --- a/packages/products/tdesign-mobile-vue/src/picker/picker.md +++ b/packages/products/tdesign-mobile-vue/src/picker/picker.md @@ -10,6 +10,7 @@ cancelBtn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array \| ((item: Array) => Array)` `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 header | Slot / Function | - | 自定义头部内容。TS 类型：`TNode`。[通用类型定义](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 value | Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N diff --git a/packages/products/tdesign-mobile-vue/src/picker/props.ts b/packages/products/tdesign-mobile-vue/src/picker/props.ts index a6442d4c..1d7276aa 100644 --- a/packages/products/tdesign-mobile-vue/src/picker/props.ts +++ b/packages/products/tdesign-mobile-vue/src/picker/props.ts @@ -28,6 +28,10 @@ export default { header: { type: Function as PropType, }, + /** 自定义选项内容。参数为 `option: PickerColumnItem, index: number` */ + option: { + type: Function as PropType, + }, /** 自定义label */ renderLabel: { type: Function as PropType, diff --git a/packages/products/tdesign-mobile-vue/src/picker/type.ts b/packages/products/tdesign-mobile-vue/src/picker/type.ts index ecb44b5b..87b2eb86 100644 --- a/packages/products/tdesign-mobile-vue/src/picker/type.ts +++ b/packages/products/tdesign-mobile-vue/src/picker/type.ts @@ -26,6 +26,10 @@ export interface TdPickerProps { * 自定义头部内容 */ header?: TNode; + /** + * 自定义选项内容。参数为 `option: PickerColumnItem, index: number` + */ + option?: TNode; /** * 自定义label */ diff --git a/packages/scripts/api.json b/packages/scripts/api.json index dcc1770d..34e2790a 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -79462,6 +79462,45 @@ "Object" ] }, + { + "id": 1729074658, + "platform_framework": [ + "8", + "16" + ], + "component": "Picker", + "field_category": 1, + "field_name": "option", + "field_type": [ + "64" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "自定义选项内容。参数为 `option: PickerColumnItem, index: number`", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2024-10-16 10:30:58", + "update_time": "2024-10-16 10:30:58", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)" + ], + "field_type_text": [ + "TNode" + ] + }, { "id": 1710843688, "platform_framework": [