diff --git a/db/TDesign.db b/db/TDesign.db index 53e72948d..1e6bfed90 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-react/packages/components/split/defaultProps.ts b/packages/products/tdesign-react/packages/components/split/defaultProps.ts new file mode 100644 index 000000000..ececfc461 --- /dev/null +++ b/packages/products/tdesign-react/packages/components/split/defaultProps.ts @@ -0,0 +1,9 @@ +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSplitProps, TdSplitPanelProps } from './type'; + +export const splitDefaultProps: TdSplitProps = { direction: 'horizontal', gap: 0, lazy: false, splitterSize: 6 }; + +export const splitPanelDefaultProps: TdSplitPanelProps = { resizable: true }; diff --git a/packages/products/tdesign-react/packages/components/split/split.en-US.md b/packages/products/tdesign-react/packages/components/split/split.en-US.md new file mode 100644 index 000000000..2c2898009 --- /dev/null +++ b/packages/products/tdesign-react/packages/components/split/split.en-US.md @@ -0,0 +1,45 @@ +:: BASE_DOC :: + +## API + +### Split Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +children | TNode | - | required。Must be a Panel component, and the quantity must match the initialSizes length.。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | Y +className | String | - | Container custom class name | N +direction | String | horizontal | Dividing direction. Horizontal: arranged horizontally; Vertical: arranged vertically.。options: horizontal/vertical | N +draggerIcon | TNode | - | Drag icons。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +gap | Number | 0 | The spacing (px) between panels will be reflected in the visual appearance of the divider. | N +lazy | Boolean | false | Deferred rendering mode | N +panelSize | Object | - | Define the maximum and minimum scale for each panel.。Typescript: `{min?: number; max?: number }` | N +splitterClassName | String | - | Custom divider style class name | N +splitterSize | Number | 6 | Width/height (px) of the interactive area of ​​the divider bar | N +onOnResize | Function | | Typescript: `(sizes: number[]) => void`
Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` | N +onOnResizeEnd | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag ends。Typescript: `{min?: number max?: number }` | N +onOnResizeStart | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag starts。Typescript: `{min?: number max?: number }` | N + +### SplitInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +getSizes | \- | `number[]` | Get the current pixel size of each panel。Typescript: `{min?: number max?: number }` +reset | \- | \- | Reset to initial size。Typescript: `{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | Programmatically set size。Typescript: `{min?: number max?: number }` + +### SplitPanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +children | TNode | - | Panel content。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +className | String | - | Panel Custom Class Name | N +defaultSize | String / Number | - | Initial panel size, supports numeric pixels (px) or text percentages (%). | N +max | String / Number | - | The maximum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.max | N +min | String / Number | - | The minimum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.min | N +resizable | Boolean | true | Enable drag-and-drop scaling? | N diff --git a/packages/products/tdesign-react/packages/components/split/split.md b/packages/products/tdesign-react/packages/components/split/split.md new file mode 100644 index 000000000..cd10289ca --- /dev/null +++ b/packages/products/tdesign-react/packages/components/split/split.md @@ -0,0 +1,45 @@ +:: BASE_DOC :: + +## API + +### Split Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式,TS 类型:`React.CSSProperties` | N +children | TNode | - | 必需。必须是 Panel 组件,数量需与 initialSizes 长度匹配。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | Y +className | String | - | 容器自定义类名 | N +direction | String | horizontal | 分割方向。horizontal:左右排列;vertical:上下排列。可选项:horizontal/vertical | N +draggerIcon | TNode | - | 拖拽图标。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +gap | Number | 0 | 面板之间的间距(px),会体现在分割条视觉上 | N +lazy | Boolean | false | 延迟渲染模式 | N +panelSize | Object | - | 定义每个面板的最大最小比例。TS 类型:`{min?: number; max?: number }` | N +splitterClassName | String | - | 自定义分割条的样式类名 | N +splitterSize | Number | 6 | 分割条的可交互区域宽度/高度(px) | N +onOnResize | Function | | TS 类型:`(sizes: number[]) => void`
拖拽过程中尺寸变化的回调(像素值数组)。TS 类型:`{min?: number max?: number }` | N +onOnResizeEnd | Function | | TS 类型:`(sizes: number[]) => void`
拖拽结束时的回调。TS 类型:`{min?: number max?: number }` | N +onOnResizeStart | Function | | TS 类型:`(sizes: number[]) => void`
开始拖拽时的回调。TS 类型:`{min?: number max?: number }` | N + +### SplitInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式,TS 类型:`React.CSSProperties` | N +getSizes | \- | `number[]` | 获取当前各面板的像素尺寸。TS 类型:`{min?: number max?: number }` +reset | \- | \- | 重置为初始尺寸。TS 类型:`{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | 程序化设置尺寸。TS 类型:`{min?: number max?: number }` + +### SplitPanel Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式,TS 类型:`React.CSSProperties` | N +children | TNode | - | 面板内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +className | String | - | 面板自定义类名 | N +defaultSize | String / Number | - | 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 | N +max | String / Number | - | 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max | N +min | String / Number | - | 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min | N +resizable | Boolean | true | 是否开启拖拽伸缩 | N diff --git a/packages/products/tdesign-react/packages/components/split/type.ts b/packages/products/tdesign-react/packages/components/split/type.ts new file mode 100644 index 000000000..ddf91368c --- /dev/null +++ b/packages/products/tdesign-react/packages/components/split/type.ts @@ -0,0 +1,109 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import type { TNode } from '../common'; + +export interface TdSplitProps { + /** + * 必须是 Panel 组件,数量需与 initialSizes 长度匹配 + */ + children: TNode; + /** + * 容器自定义类名 + * @default '' + */ + className?: string; + /** + * 分割方向。horizontal:左右排列;vertical:上下排列 + * @default horizontal + */ + direction?: 'horizontal' | 'vertical'; + /** + * 拖拽图标 + */ + draggerIcon?: TNode; + /** + * 面板之间的间距(px),会体现在分割条视觉上 + * @default 0 + */ + gap?: number; + /** + * 延迟渲染模式 + * @default false + */ + lazy?: boolean; + /** + * 定义每个面板的最大最小比例 + */ + panelSize?: { min?: number; max?: number }; + /** + * 自定义分割条的样式类名 + * @default '' + */ + splitterClassName?: string; + /** + * 分割条的可交互区域宽度/高度(px) + * @default 6 + */ + splitterSize?: number; + /** + * 拖拽过程中尺寸变化的回调(像素值数组) + */ + onOnResize?: (sizes: number[]) => void; + /** + * 拖拽结束时的回调 + */ + onOnResizeEnd?: (sizes: number[]) => void; + /** + * 开始拖拽时的回调 + */ + onOnResizeStart?: (sizes: number[]) => void; +} + +/** 组件实例方法 */ +export interface SplitInstanceFunctions { + /** + * 获取当前各面板的像素尺寸 + */ + getSizes?: () => number[]; + /** + * 重置为初始尺寸 + */ + reset?: () => void; + /** + * 程序化设置尺寸 + */ + setSizes?: (sizes: (number | string | 'auto')[]) => void; +} + +export interface TdSplitPanelProps { + /** + * 面板内容 + */ + children?: TNode; + /** + * 面板自定义类名 + * @default '' + */ + className?: string; + /** + * 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 + */ + defaultSize?: string | number; + /** + * 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max + */ + max?: string | number; + /** + * 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min + */ + min?: string | number; + /** + * 是否开启拖拽伸缩 + * @default true + */ + resizable?: boolean; +} diff --git a/packages/products/tdesign-vue-next/packages/components/split/props.ts b/packages/products/tdesign-vue-next/packages/components/split/props.ts new file mode 100644 index 000000000..cac493e31 --- /dev/null +++ b/packages/products/tdesign-vue-next/packages/components/split/props.ts @@ -0,0 +1,90 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSplitProps, TdSplitPanelProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 必须是 Panel 组件,数量需与 initialSizes 长度匹配 */ + children: { + type: [String, Function] as PropType, + required: true, + }, + /** 容器自定义类名 */ + className: { + type: String, + default: '', + }, + /** 分割方向。horizontal:左右排列;vertical:上下排列 */ + direction: { + type: String as PropType, + default: 'horizontal' as TdSplitProps['direction'], + validator(val: TdSplitProps['direction']): boolean { + if (!val) return true; + return ['horizontal', 'vertical'].includes(val); + }, + }, + /** 拖拽图标 */ + draggerIcon: { + type: [String, Function] as PropType, + }, + /** 面板之间的间距(px),会体现在分割条视觉上 */ + gap: { + type: Number, + default: 0, + }, + /** 延迟渲染模式 */ + lazy: Boolean, + /** 定义每个面板的最大最小比例 */ + panelSize: { + type: Object as PropType, + }, + /** 自定义分割条的样式类名 */ + splitterClassName: { + type: String, + default: '', + }, + /** 分割条的可交互区域宽度/高度(px) */ + splitterSize: { + type: Number, + default: 6, + }, + /** 拖拽过程中尺寸变化的回调(像素值数组) */ + onOnResize: Function as PropType, + /** 拖拽结束时的回调 */ + onOnResizeEnd: Function as PropType, + /** 开始拖拽时的回调 */ + onOnResizeStart: Function as PropType, +}; + +export default { + /** 面板内容 */ + children: { + type: [String, Function] as PropType, + }, + /** 面板自定义类名 */ + className: { + type: String, + default: '', + }, + /** 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 */ + defaultSize: { + type: [String, Number] as PropType, + }, + /** 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max */ + max: { + type: [String, Number] as PropType, + }, + /** 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min */ + min: { + type: [String, Number] as PropType, + }, + /** 是否开启拖拽伸缩 */ + resizable: { + type: Boolean, + default: true, + }, +}; diff --git a/packages/products/tdesign-vue-next/packages/components/split/split.en-US.md b/packages/products/tdesign-vue-next/packages/components/split/split.en-US.md new file mode 100644 index 000000000..d2cab4eba --- /dev/null +++ b/packages/products/tdesign-vue-next/packages/components/split/split.en-US.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### Split Props + +name | type | default | description | required +-- | -- | -- | -- | -- +children | String / Slot / Function | - | required。Must be a Panel component, and the quantity must match the initialSizes length.。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | Y +className | String | - | Container custom class name | N +direction | String | horizontal | Dividing direction. Horizontal: arranged horizontally; Vertical: arranged vertically.。options: horizontal/vertical | N +draggerIcon | String / Slot / Function | - | Drag icons。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +gap | Number | 0 | The spacing (px) between panels will be reflected in the visual appearance of the divider. | N +lazy | Boolean | false | Deferred rendering mode | N +panelSize | Object | - | Define the maximum and minimum scale for each panel.。Typescript: `{min?: number; max?: number }` | N +splitterClassName | String | - | Custom divider style class name | N +splitterSize | Number | 6 | Width/height (px) of the interactive area of ​​the divider bar | N +onOnResize | Function | | Typescript: `(sizes: number[]) => void`
Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` | N +onOnResizeEnd | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag ends。Typescript: `{min?: number max?: number }` | N +onOnResizeStart | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag starts。Typescript: `{min?: number max?: number }` | N + +### Split Events + +name | params | description +-- | -- | -- +on-resize | `(sizes: number[])` | Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` +on-resize-end | `(sizes: number[])` | Callback when drag ends。Typescript: `{min?: number max?: number }` +on-resize-start | `(sizes: number[])` | Callback when drag starts。Typescript: `{min?: number max?: number }` + +### SplitInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getSizes | \- | `number[]` | Get the current pixel size of each panel。Typescript: `{min?: number max?: number }` +reset | \- | \- | Reset to initial size。Typescript: `{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | Programmatically set size。Typescript: `{min?: number max?: number }` + +### SplitPanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +children | String / Slot / Function | - | Panel content。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +className | String | - | Panel Custom Class Name | N +defaultSize | String / Number | - | Initial panel size, supports numeric pixels (px) or text percentages (%). | N +max | String / Number | - | The maximum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.max | N +min | String / Number | - | The minimum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.min | N +resizable | Boolean | true | Enable drag-and-drop scaling? | N diff --git a/packages/products/tdesign-vue-next/packages/components/split/split.md b/packages/products/tdesign-vue-next/packages/components/split/split.md new file mode 100644 index 000000000..f26dcc77d --- /dev/null +++ b/packages/products/tdesign-vue-next/packages/components/split/split.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### Split Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +children | String / Slot / Function | - | 必需。必须是 Panel 组件,数量需与 initialSizes 长度匹配。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | Y +className | String | - | 容器自定义类名 | N +direction | String | horizontal | 分割方向。horizontal:左右排列;vertical:上下排列。可选项:horizontal/vertical | N +draggerIcon | String / Slot / Function | - | 拖拽图标。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +gap | Number | 0 | 面板之间的间距(px),会体现在分割条视觉上 | N +lazy | Boolean | false | 延迟渲染模式 | N +panelSize | Object | - | 定义每个面板的最大最小比例。TS 类型:`{min?: number; max?: number }` | N +splitterClassName | String | - | 自定义分割条的样式类名 | N +splitterSize | Number | 6 | 分割条的可交互区域宽度/高度(px) | N +onOnResize | Function | | TS 类型:`(sizes: number[]) => void`
拖拽过程中尺寸变化的回调(像素值数组)。TS 类型:`{min?: number max?: number }` | N +onOnResizeEnd | Function | | TS 类型:`(sizes: number[]) => void`
拖拽结束时的回调。TS 类型:`{min?: number max?: number }` | N +onOnResizeStart | Function | | TS 类型:`(sizes: number[]) => void`
开始拖拽时的回调。TS 类型:`{min?: number max?: number }` | N + +### Split Events + +名称 | 参数 | 描述 +-- | -- | -- +on-resize | `(sizes: number[])` | 拖拽过程中尺寸变化的回调(像素值数组)。TS 类型:`{min?: number max?: number }` +on-resize-end | `(sizes: number[])` | 拖拽结束时的回调。TS 类型:`{min?: number max?: number }` +on-resize-start | `(sizes: number[])` | 开始拖拽时的回调。TS 类型:`{min?: number max?: number }` + +### SplitInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getSizes | \- | `number[]` | 获取当前各面板的像素尺寸。TS 类型:`{min?: number max?: number }` +reset | \- | \- | 重置为初始尺寸。TS 类型:`{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | 程序化设置尺寸。TS 类型:`{min?: number max?: number }` + +### SplitPanel Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +children | String / Slot / Function | - | 面板内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +className | String | - | 面板自定义类名 | N +defaultSize | String / Number | - | 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 | N +max | String / Number | - | 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max | N +min | String / Number | - | 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min | N +resizable | Boolean | true | 是否开启拖拽伸缩 | N diff --git a/packages/products/tdesign-vue-next/packages/components/split/type.ts b/packages/products/tdesign-vue-next/packages/components/split/type.ts new file mode 100644 index 000000000..c690933b2 --- /dev/null +++ b/packages/products/tdesign-vue-next/packages/components/split/type.ts @@ -0,0 +1,109 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import type { TNode } from '../common'; + +export interface TdSplitProps { + /** + * 必须是 Panel 组件,数量需与 initialSizes 长度匹配 + */ + children: string | TNode; + /** + * 容器自定义类名 + * @default '' + */ + className?: string; + /** + * 分割方向。horizontal:左右排列;vertical:上下排列 + * @default horizontal + */ + direction?: 'horizontal' | 'vertical'; + /** + * 拖拽图标 + */ + draggerIcon?: string | TNode; + /** + * 面板之间的间距(px),会体现在分割条视觉上 + * @default 0 + */ + gap?: number; + /** + * 延迟渲染模式 + * @default false + */ + lazy?: boolean; + /** + * 定义每个面板的最大最小比例 + */ + panelSize?: { min?: number; max?: number }; + /** + * 自定义分割条的样式类名 + * @default '' + */ + splitterClassName?: string; + /** + * 分割条的可交互区域宽度/高度(px) + * @default 6 + */ + splitterSize?: number; + /** + * 拖拽过程中尺寸变化的回调(像素值数组) + */ + onOnResize?: (sizes: number[]) => void; + /** + * 拖拽结束时的回调 + */ + onOnResizeEnd?: (sizes: number[]) => void; + /** + * 开始拖拽时的回调 + */ + onOnResizeStart?: (sizes: number[]) => void; +} + +/** 组件实例方法 */ +export interface SplitInstanceFunctions { + /** + * 获取当前各面板的像素尺寸 + */ + getSizes?: () => number[]; + /** + * 重置为初始尺寸 + */ + reset?: () => void; + /** + * 程序化设置尺寸 + */ + setSizes?: (sizes: (number | string | 'auto')[]) => void; +} + +export interface TdSplitPanelProps { + /** + * 面板内容 + */ + children?: string | TNode; + /** + * 面板自定义类名 + * @default '' + */ + className?: string; + /** + * 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 + */ + defaultSize?: string | number; + /** + * 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max + */ + max?: string | number; + /** + * 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min + */ + min?: string | number; + /** + * 是否开启拖拽伸缩 + * @default true + */ + resizable?: boolean; +} diff --git a/packages/products/tdesign-vue/src/split/props.ts b/packages/products/tdesign-vue/src/split/props.ts new file mode 100644 index 000000000..cac493e31 --- /dev/null +++ b/packages/products/tdesign-vue/src/split/props.ts @@ -0,0 +1,90 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSplitProps, TdSplitPanelProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 必须是 Panel 组件,数量需与 initialSizes 长度匹配 */ + children: { + type: [String, Function] as PropType, + required: true, + }, + /** 容器自定义类名 */ + className: { + type: String, + default: '', + }, + /** 分割方向。horizontal:左右排列;vertical:上下排列 */ + direction: { + type: String as PropType, + default: 'horizontal' as TdSplitProps['direction'], + validator(val: TdSplitProps['direction']): boolean { + if (!val) return true; + return ['horizontal', 'vertical'].includes(val); + }, + }, + /** 拖拽图标 */ + draggerIcon: { + type: [String, Function] as PropType, + }, + /** 面板之间的间距(px),会体现在分割条视觉上 */ + gap: { + type: Number, + default: 0, + }, + /** 延迟渲染模式 */ + lazy: Boolean, + /** 定义每个面板的最大最小比例 */ + panelSize: { + type: Object as PropType, + }, + /** 自定义分割条的样式类名 */ + splitterClassName: { + type: String, + default: '', + }, + /** 分割条的可交互区域宽度/高度(px) */ + splitterSize: { + type: Number, + default: 6, + }, + /** 拖拽过程中尺寸变化的回调(像素值数组) */ + onOnResize: Function as PropType, + /** 拖拽结束时的回调 */ + onOnResizeEnd: Function as PropType, + /** 开始拖拽时的回调 */ + onOnResizeStart: Function as PropType, +}; + +export default { + /** 面板内容 */ + children: { + type: [String, Function] as PropType, + }, + /** 面板自定义类名 */ + className: { + type: String, + default: '', + }, + /** 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 */ + defaultSize: { + type: [String, Number] as PropType, + }, + /** 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max */ + max: { + type: [String, Number] as PropType, + }, + /** 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min */ + min: { + type: [String, Number] as PropType, + }, + /** 是否开启拖拽伸缩 */ + resizable: { + type: Boolean, + default: true, + }, +}; diff --git a/packages/products/tdesign-vue/src/split/split.en-US.md b/packages/products/tdesign-vue/src/split/split.en-US.md new file mode 100644 index 000000000..a34339cf4 --- /dev/null +++ b/packages/products/tdesign-vue/src/split/split.en-US.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### Split Props + +name | type | default | description | required +-- | -- | -- | -- | -- +children | String / Slot / Function | - | required。Must be a Panel component, and the quantity must match the initialSizes length.。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | Y +className | String | - | Container custom class name | N +direction | String | horizontal | Dividing direction. Horizontal: arranged horizontally; Vertical: arranged vertically.。options: horizontal/vertical | N +draggerIcon | String / Slot / Function | - | Drag icons。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +gap | Number | 0 | The spacing (px) between panels will be reflected in the visual appearance of the divider. | N +lazy | Boolean | false | Deferred rendering mode | N +panelSize | Object | - | Define the maximum and minimum scale for each panel.。Typescript: `{min?: number; max?: number }` | N +splitterClassName | String | - | Custom divider style class name | N +splitterSize | Number | 6 | Width/height (px) of the interactive area of ​​the divider bar | N +onOnResize | Function | | Typescript: `(sizes: number[]) => void`
Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` | N +onOnResizeEnd | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag ends。Typescript: `{min?: number max?: number }` | N +onOnResizeStart | Function | | Typescript: `(sizes: number[]) => void`
Callback when drag starts。Typescript: `{min?: number max?: number }` | N + +### Split Events + +name | params | description +-- | -- | -- +on-resize | `(sizes: number[])` | Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` +on-resize-end | `(sizes: number[])` | Callback when drag ends。Typescript: `{min?: number max?: number }` +on-resize-start | `(sizes: number[])` | Callback when drag starts。Typescript: `{min?: number max?: number }` + +### SplitInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getSizes | \- | `number[]` | Get the current pixel size of each panel。Typescript: `{min?: number max?: number }` +reset | \- | \- | Reset to initial size。Typescript: `{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | Programmatically set size。Typescript: `{min?: number max?: number }` + +### SplitPanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +children | String / Slot / Function | - | Panel content。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +className | String | - | Panel Custom Class Name | N +defaultSize | String / Number | - | Initial panel size, supports numeric pixels (px) or text percentages (%). | N +max | String / Number | - | The maximum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.max | N +min | String / Number | - | The minimum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.min | N +resizable | Boolean | true | Enable drag-and-drop scaling? | N diff --git a/packages/products/tdesign-vue/src/split/split.md b/packages/products/tdesign-vue/src/split/split.md new file mode 100644 index 000000000..ded6936a0 --- /dev/null +++ b/packages/products/tdesign-vue/src/split/split.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### Split Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +children | String / Slot / Function | - | 必需。必须是 Panel 组件,数量需与 initialSizes 长度匹配。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | Y +className | String | - | 容器自定义类名 | N +direction | String | horizontal | 分割方向。horizontal:左右排列;vertical:上下排列。可选项:horizontal/vertical | N +draggerIcon | String / Slot / Function | - | 拖拽图标。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +gap | Number | 0 | 面板之间的间距(px),会体现在分割条视觉上 | N +lazy | Boolean | false | 延迟渲染模式 | N +panelSize | Object | - | 定义每个面板的最大最小比例。TS 类型:`{min?: number; max?: number }` | N +splitterClassName | String | - | 自定义分割条的样式类名 | N +splitterSize | Number | 6 | 分割条的可交互区域宽度/高度(px) | N +onOnResize | Function | | TS 类型:`(sizes: number[]) => void`
拖拽过程中尺寸变化的回调(像素值数组)。TS 类型:`{min?: number max?: number }` | N +onOnResizeEnd | Function | | TS 类型:`(sizes: number[]) => void`
拖拽结束时的回调。TS 类型:`{min?: number max?: number }` | N +onOnResizeStart | Function | | TS 类型:`(sizes: number[]) => void`
开始拖拽时的回调。TS 类型:`{min?: number max?: number }` | N + +### Split Events + +名称 | 参数 | 描述 +-- | -- | -- +on-resize | `(sizes: number[])` | 拖拽过程中尺寸变化的回调(像素值数组)。TS 类型:`{min?: number max?: number }` +on-resize-end | `(sizes: number[])` | 拖拽结束时的回调。TS 类型:`{min?: number max?: number }` +on-resize-start | `(sizes: number[])` | 开始拖拽时的回调。TS 类型:`{min?: number max?: number }` + +### SplitInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getSizes | \- | `number[]` | 获取当前各面板的像素尺寸。TS 类型:`{min?: number max?: number }` +reset | \- | \- | 重置为初始尺寸。TS 类型:`{min?: number max?: number }` +setSizes | `(sizes: (number \| string \| 'auto')[]) ` | \- | 程序化设置尺寸。TS 类型:`{min?: number max?: number }` + +### SplitPanel Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +children | String / Slot / Function | - | 面板内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +className | String | - | 面板自定义类名 | N +defaultSize | String / Number | - | 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 | N +max | String / Number | - | 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max | N +min | String / Number | - | 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min | N +resizable | Boolean | true | 是否开启拖拽伸缩 | N diff --git a/packages/products/tdesign-vue/src/split/type.ts b/packages/products/tdesign-vue/src/split/type.ts new file mode 100644 index 000000000..c690933b2 --- /dev/null +++ b/packages/products/tdesign-vue/src/split/type.ts @@ -0,0 +1,109 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import type { TNode } from '../common'; + +export interface TdSplitProps { + /** + * 必须是 Panel 组件,数量需与 initialSizes 长度匹配 + */ + children: string | TNode; + /** + * 容器自定义类名 + * @default '' + */ + className?: string; + /** + * 分割方向。horizontal:左右排列;vertical:上下排列 + * @default horizontal + */ + direction?: 'horizontal' | 'vertical'; + /** + * 拖拽图标 + */ + draggerIcon?: string | TNode; + /** + * 面板之间的间距(px),会体现在分割条视觉上 + * @default 0 + */ + gap?: number; + /** + * 延迟渲染模式 + * @default false + */ + lazy?: boolean; + /** + * 定义每个面板的最大最小比例 + */ + panelSize?: { min?: number; max?: number }; + /** + * 自定义分割条的样式类名 + * @default '' + */ + splitterClassName?: string; + /** + * 分割条的可交互区域宽度/高度(px) + * @default 6 + */ + splitterSize?: number; + /** + * 拖拽过程中尺寸变化的回调(像素值数组) + */ + onOnResize?: (sizes: number[]) => void; + /** + * 拖拽结束时的回调 + */ + onOnResizeEnd?: (sizes: number[]) => void; + /** + * 开始拖拽时的回调 + */ + onOnResizeStart?: (sizes: number[]) => void; +} + +/** 组件实例方法 */ +export interface SplitInstanceFunctions { + /** + * 获取当前各面板的像素尺寸 + */ + getSizes?: () => number[]; + /** + * 重置为初始尺寸 + */ + reset?: () => void; + /** + * 程序化设置尺寸 + */ + setSizes?: (sizes: (number | string | 'auto')[]) => void; +} + +export interface TdSplitPanelProps { + /** + * 面板内容 + */ + children?: string | TNode; + /** + * 面板自定义类名 + * @default '' + */ + className?: string; + /** + * 初始面板大小,支持数字 px 或者文字 '百分比%' 类型 + */ + defaultSize?: string | number; + /** + * 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max + */ + max?: string | number; + /** + * 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min + */ + min?: string | number; + /** + * 是否开启拖拽伸缩 + * @default true + */ + resizable?: boolean; +} diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 872cfa92f..9237daea1 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -120073,6 +120073,954 @@ "Array" ] }, + { + "id": 1785668366, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "children", + "field_type": [ + "1", + "64" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "必须是 Panel 组件,数量需与 initialSizes 长度匹配", + "field_desc_en": "Must be a Panel component, and the quantity must match the initialSizes length.", + "field_required": 1, + "event_input": "", + "create_time": "2026-08-02 10:59:26", + "update_time": "2026-08-02 10:59:26", + "event_output": null, + "custom_field_type": "", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "TNode" + ] + }, + { + "id": 1785668269, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "className", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "容器自定义类名", + "field_desc_en": "Container custom class name", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:57:49", + "update_time": "2026-08-02 10:57:49", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785667918, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "direction", + "field_type": [ + "1" + ], + "field_default_value": "horizontal", + "field_enum": "horizontal/vertical", + "field_desc_zh": "分割方向。horizontal:左右排列;vertical:上下排列", + "field_desc_en": "Dividing direction. Horizontal: arranged horizontally; Vertical: arranged vertically.", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:51:58", + "update_time": "2026-08-02 10:51: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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785668466, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "draggerIcon", + "field_type": [ + "1", + "64" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "拖拽图标", + "field_desc_en": "Drag icons", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 11:01:06", + "update_time": "2026-08-02 11:01:06", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "TNode" + ] + }, + { + "id": 1785667969, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "gap", + "field_type": [ + "2" + ], + "field_default_value": "0", + "field_enum": "", + "field_desc_zh": "面板之间的间距(px),会体现在分割条视觉上", + "field_desc_en": "The spacing (px) between panels will be reflected in the visual appearance of the divider.", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:52:49", + "update_time": "2026-08-02 10:52:49", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "Number" + ] + }, + { + "id": 1785668424, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "lazy", + "field_type": [ + "4" + ], + "field_default_value": "false", + "field_enum": "", + "field_desc_zh": "延迟渲染模式", + "field_desc_en": "Deferred rendering mode", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 11:00:24", + "update_time": "2026-08-02 11:00:24", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "Boolean" + ] + }, + { + "id": 1785668557, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "panelSize", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "定义每个面板的最大最小比例", + "field_desc_en": "Define the maximum and minimum scale for each panel.", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 11:02:37", + "update_time": "2026-08-02 11:02:37", + "event_output": null, + "custom_field_type": "{min?: number; max?: number }", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668156, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "splitterClassName", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "自定义分割条的样式类名", + "field_desc_en": "Custom divider style class name", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:55:56", + "update_time": "2026-08-02 10:55:56", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785668109, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 1, + "field_name": "splitterSize", + "field_type": [ + "2" + ], + "field_default_value": "6", + "field_enum": "", + "field_desc_zh": "分割条的可交互区域宽度/高度(px)", + "field_desc_en": "Width/height (px) of the interactive area of ​​the divider bar", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:55:09", + "update_time": "2026-08-02 10:55:09", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "Number" + ] + }, + { + "id": 1785668599, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 2, + "field_name": "onResize", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "拖拽过程中尺寸变化的回调(像素值数组)", + "field_desc_en": "Callback (array of pixel values) for size changes during dragging.", + "field_required": 0, + "event_input": "(sizes: number[])", + "create_time": "2026-08-02 11:03:19", + "update_time": "2026-08-02 11:03:19", + "event_output": null, + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668746, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 2, + "field_name": "onResizeEnd", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "拖拽结束时的回调", + "field_desc_en": "Callback when drag ends", + "field_required": 0, + "event_input": "(sizes: number[])", + "create_time": "2026-08-02 11:05:46", + "update_time": "2026-08-02 11:05:46", + "event_output": null, + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668717, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 2, + "field_name": "onResizeStart", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "开始拖拽时的回调", + "field_desc_en": "Callback when drag starts", + "field_required": 0, + "event_input": "(sizes: number[])", + "create_time": "2026-08-02 11:05:17", + "update_time": "2026-08-02 11:05:17", + "event_output": null, + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668792, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 4, + "field_name": "getSizes", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "获取当前各面板的像素尺寸", + "field_desc_en": "Get the current pixel size of each panel", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 11:06:32", + "update_time": "2026-08-02 11:06:32", + "event_output": "number[]", + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Functions", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668892, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 4, + "field_name": "reset", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "重置为初始尺寸", + "field_desc_en": "Reset to initial size", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 11:08:12", + "update_time": "2026-08-02 11:08:12", + "event_output": null, + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Functions", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668850, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 4, + "field_name": "setSizes", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "程序化设置尺寸", + "field_desc_en": "Programmatically set size", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:07:30", + "update_time": "2026-08-02 11:07:30", + "event_output": "", + "custom_field_type": "{min?: number max?: number }", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Functions", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "Object" + ] + }, + { + "id": 1785668191, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 256, + "field_name": "splitterStyle", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "自定义分割条的内联样式", + "field_desc_en": "Customize the inline style of the splitter", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:56:31", + "update_time": "2026-08-02 10:56:31", + "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": "CSS Variables", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785668303, + "platform_framework": [ + "1", + "2" + ], + "component": "Split", + "field_category": 256, + "field_name": "style", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "容器内联样式", + "field_desc_en": "Container inline styles", + "field_required": 0, + "event_input": "", + "create_time": "2026-08-02 10:58:23", + "update_time": "2026-08-02 10:58:23", + "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": "CSS Variables", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785669186, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "children", + "field_type": [ + "1", + "64" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "面板内容", + "field_desc_en": "Panel content", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:13:06", + "update_time": "2026-08-02 11:13:06", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "TNode" + ] + }, + { + "id": 1785669125, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "className", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "面板自定义类名", + "field_desc_en": "Panel Custom Class Name", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:12:05", + "update_time": "2026-08-02 11:12:05", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, + { + "id": 1785669246, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "defaultSize", + "field_type": [ + "1", + "2" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "初始面板大小,支持数字 px 或者文字 '百分比%' 类型", + "field_desc_en": "Initial panel size, supports numeric pixels (px) or text percentages (%).", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:14:06", + "update_time": "2026-08-02 11:14:06", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "Number" + ] + }, + { + "id": 1785669101, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "max", + "field_type": [ + "1", + "2" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max", + "field_desc_en": "The maximum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.max", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:11:41", + "update_time": "2026-08-02 11:11:41", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "Number" + ] + }, + { + "id": 1785669035, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "min", + "field_type": [ + "1", + "2" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min", + "field_desc_en": "The minimum size of the current panel, supporting numbers in pixels (px) or percentages (%).-Inherited from parent panelSize.min", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:10:35", + "update_time": "2026-08-02 11:10:35", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "String", + "Number" + ] + }, + { + "id": 1785669272, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 1, + "field_name": "resizable", + "field_type": [ + "4" + ], + "field_default_value": "true", + "field_enum": "", + "field_desc_zh": "是否开启拖拽伸缩", + "field_desc_en": "Enable drag-and-drop scaling?", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:14:32", + "update_time": "2026-08-02 11:14:32", + "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(PC)", + "React(PC)" + ], + "field_type_text": [ + "Boolean" + ] + }, + { + "id": 1785669146, + "platform_framework": [ + "1", + "2" + ], + "component": "SplitPanel", + "field_category": 256, + "field_name": "style", + "field_type": [ + "1" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "面板内联样式", + "field_desc_en": "Panel Inline Style", + "field_required": 0, + "event_input": "(sizes: (number | string | 'auto')[]) ", + "create_time": "2026-08-02 11:12:26", + "update_time": "2026-08-02 11:12:26", + "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": "CSS Variables", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)" + ], + "field_type_text": [ + "String" + ] + }, { "id": 3457, "platform_framework": [ diff --git a/packages/scripts/map.json b/packages/scripts/map.json index 70eabcf1d..0c9b3fc69 100644 --- a/packages/scripts/map.json +++ b/packages/scripts/map.json @@ -906,6 +906,14 @@ "value": "Space", "label": "间距" }, + { + "value": "Split", + "label": "分屏视图" + }, + { + "value": "SplitPanel", + "label": "分屏视图面板" + }, { "value": "Statistic", "label": "统计数值" diff --git a/packages/server/controllers/ComponentApi/const.ts b/packages/server/controllers/ComponentApi/const.ts index df0d48d17..1ca8e2819 100644 --- a/packages/server/controllers/ComponentApi/const.ts +++ b/packages/server/controllers/ComponentApi/const.ts @@ -368,6 +368,8 @@ export const COMPONENTS_PC: Array = [ { value: 'AutoCompleteConfig', label: '自动填充全局配置', type: 'TS' }, { value: 'QRCode', label: '二维码' }, { value: 'QRCodeConfig', label: '二维码全局配置', type: 'TS' }, + { value: 'Split', label: '分屏视图' }, + { value: 'SplitPanel', label: '分屏视图面板' }, ].sort((a, b) => a.value.localeCompare(b.value)); export const COMPONENTS_MOBILE: Array = [