feat(Split): new add Split api

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 };

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`<br/>Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` | N
+onOnResizeEnd | Function |  | Typescript: `(sizes: number[]) => void`<br/>Callback when drag ends。Typescript: `{min?: number max?: number }` | N
+onOnResizeStart | Function |  | Typescript: `(sizes: number[]) => void`<br/>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

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`<br/>拖拽过程中尺寸变化的回调（像素值数组）。TS 类型：`{min?: number max?: number }` | N
+onOnResizeEnd | Function |  | TS 类型：`(sizes: number[]) => void`<br/>拖拽结束时的回调。TS 类型：`{min?: number max?: number }` | N
+onOnResizeStart | Function |  | TS 类型：`(sizes: number[]) => void`<br/>开始拖拽时的回调。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

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;
+}

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<TdSplitProps['children']>,
+    required: true,
+  },
+  /** 容器自定义类名 */
+  className: {
+    type: String,
+    default: '',
+  },
+  /** 分割方向。horizontal：左右排列；vertical：上下排列 */
+  direction: {
+    type: String as PropType<TdSplitProps['direction']>,
+    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<TdSplitProps['draggerIcon']>,
+  },
+  /** 面板之间的间距（px），会体现在分割条视觉上 */
+  gap: {
+    type: Number,
+    default: 0,
+  },
+  /** 延迟渲染模式 */
+  lazy: Boolean,
+  /** 定义每个面板的最大最小比例 */
+  panelSize: {
+    type: Object as PropType<TdSplitProps['panelSize']>,
+  },
+  /** 自定义分割条的样式类名 */
+  splitterClassName: {
+    type: String,
+    default: '',
+  },
+  /** 分割条的可交互区域宽度/高度（px） */
+  splitterSize: {
+    type: Number,
+    default: 6,
+  },
+  /** 拖拽过程中尺寸变化的回调（像素值数组） */
+  onOnResize: Function as PropType<TdSplitProps['onOnResize']>,
+  /** 拖拽结束时的回调 */
+  onOnResizeEnd: Function as PropType<TdSplitProps['onOnResizeEnd']>,
+  /** 开始拖拽时的回调 */
+  onOnResizeStart: Function as PropType<TdSplitProps['onOnResizeStart']>,
+};
+
+export default {
+  /** 面板内容 */
+  children: {
+    type: [String, Function] as PropType<TdSplitPanelProps['children']>,
+  },
+  /** 面板自定义类名 */
+  className: {
+    type: String,
+    default: '',
+  },
+  /** 初始面板大小，支持数字 px 或者文字 '百分比%' 类型 */
+  defaultSize: {
+    type: [String, Number] as PropType<TdSplitPanelProps['defaultSize']>,
+  },
+  /** 当前面板的最大尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.max */
+  max: {
+    type: [String, Number] as PropType<TdSplitPanelProps['max']>,
+  },
+  /** 当前面板的最小尺寸,支持数字 px 或者文字 '百分比%' 类型-继承父级 panelSize.min */
+  min: {
+    type: [String, Number] as PropType<TdSplitPanelProps['min']>,
+  },
+  /** 是否开启拖拽伸缩 */
+  resizable: {
+    type: Boolean,
+    default: true,
+  },
+};

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`<br/>Callback (array of pixel values) for size changes during dragging.。Typescript: `{min?: number max?: number }` | N
+onOnResizeEnd | Function |  | Typescript: `(sizes: number[]) => void`<br/>Callback when drag ends。Typescript: `{min?: number max?: number }` | N
+onOnResizeStart | Function |  | Typescript: `(sizes: number[]) => void`<br/>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

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`<br/>拖拽过程中尺寸变化的回调（像素值数组）。TS 类型：`{min?: number max?: number }` | N
+onOnResizeEnd | Function |  | TS 类型：`(sizes: number[]) => void`<br/>拖拽结束时的回调。TS 类型：`{min?: number max?: number }` | N
+onOnResizeStart | Function |  | TS 类型：`(sizes: number[]) => void`<br/>开始拖拽时的回调。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