Skip to content

Commit cf3e8c3

Browse files
FlowerBlackGuyarn
FlowerBlackG
and
uyarn
authored
feat(Dialog): add sizeDraggable to props (#725)
* feat(Dialog): add `sizeDraggable` to props. * feat(Dialog): add `sizeDraggable` to props (also for Vue). * chore: revert appcontext in vue2 --------- Co-authored-by: Uyarn <[email protected]>
1 parent 03dee49 commit cf3e8c3

File tree

10 files changed

+75
-4
lines changed

10 files changed

+75
-4
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-react/packages/components/dialog/defaultProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@ export const dialogDefaultProps: TdDialogProps = {
2020
preventScrollThrough: true,
2121
showInAttachedElement: false,
2222
showOverlay: true,
23+
sizeDraggable: false,
2324
theme: 'default',
2425
};

‎packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### DialogCard Props
65

76
name | type | default | description | required
@@ -40,6 +39,7 @@ placement | String | top | options: top/center | N
4039
preventScrollThrough | Boolean | true | \- | N
4140
showInAttachedElement | Boolean | false | \- | N
4241
showOverlay | Boolean | true | \- | N
42+
sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set max or min to limit size.。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N
4343
theme | String | default | options: default/info/warning/danger/success | N
4444
top | String / Number | - | \- | N
4545
visible | Boolean | - | \- | N

‎packages/products/tdesign-react/packages/components/dialog/dialog.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### DialogCard Props
65

76
名称 | 类型 | 默认值 | 描述 | 必传
@@ -40,6 +39,7 @@ placement | String | top | 对话框位置，内置两种：垂直水平居中
4039
preventScrollThrough | Boolean | true | 防止滚动穿透 | N
4140
showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N
4241
showOverlay | Boolean | true | 是否显示遮罩层 | N
42+
sizeDraggable | Boolean / Object | false | 弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N
4343
theme | String | default | 对话框风格。可选项：default/info/warning/danger/success | N
4444
top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级大于 placement | N
4545
visible | Boolean | - | 控制对话框是否显示 | N

‎packages/products/tdesign-react/packages/components/dialog/type.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,11 @@ export interface TdDialogProps {
114114
* @default true
115115
*/
116116
showOverlay?: boolean;
117+
/**
118+
* 弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。
119+
* @default false
120+
*/
121+
sizeDraggable?: boolean | SizeDragLimit;
117122
/**
118123
* 对话框风格
119124
* @default default
@@ -233,6 +238,13 @@ export interface DialogInstance {
233238
update: (props: DialogOptions) => void;
234239
}
235240

241+
export interface SizeDragLimit {
242+
maxWidth: number | undefined;
243+
minWidth: number | undefined;
244+
maxHeight: number | undefined;
245+
minHeight: number | undefined;
246+
}
247+
236248
export type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
237249

238250
export interface DialogCloseContext {

‎packages/products/tdesign-vue/src/dialog/dialog.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### DialogCard Props
65

76
name | type | default | description | required
@@ -54,6 +53,7 @@ placement | String | top | options: top/center | N
5453
preventScrollThrough | Boolean | true | \- | N
5554
showInAttachedElement | Boolean | false | \- | N
5655
showOverlay | Boolean | true | \- | N
56+
sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set max or min to limit size.。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N
5757
theme | String | default | options: default/info/warning/danger/success | N
5858
top | String / Number | - | \- | N
5959
visible | Boolean | - | \- | N

‎packages/products/tdesign-vue/src/dialog/dialog.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### DialogCard Props
65

76
名称 | 类型 | 默认值 | 描述 | 必传
@@ -54,6 +53,7 @@ placement | String | top | 对话框位置，内置两种：垂直水平居中
5453
preventScrollThrough | Boolean | true | 防止滚动穿透 | N
5554
showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N
5655
showOverlay | Boolean | true | 是否显示遮罩层 | N
56+
sizeDraggable | Boolean / Object | false | 弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N
5757
theme | String | default | 对话框风格。可选项：default/info/warning/danger/success | N
5858
top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级大于 placement | N
5959
visible | Boolean | - | 控制对话框是否显示 | N

‎packages/products/tdesign-vue/src/dialog/props.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,11 @@ export default {
105105
type: Boolean,
106106
default: true,
107107
},
108+
/** 弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。 */
109+
sizeDraggable: {
110+
type: [Boolean, Object] as PropType<TdDialogProps['sizeDraggable']>,
111+
default: false,
112+
},
108113
/** 对话框风格 */
109114
theme: {
110115
type: String as PropType<TdDialogProps['theme']>,

‎packages/products/tdesign-vue/src/dialog/type.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,11 @@ export interface TdDialogProps {
108108
* @default true
109109
*/
110110
showOverlay?: boolean;
111+
/**
112+
* 弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。
113+
* @default false
114+
*/
115+
sizeDraggable?: boolean | SizeDragLimit;
111116
/**
112117
* 对话框风格
113118
* @default default
@@ -277,6 +282,13 @@ export interface DialogInstance {
277282
update: (props: DialogOptions) => void;
278283
}
279284

285+
export interface SizeDragLimit {
286+
maxWidth: number | undefined;
287+
minWidth: number | undefined;
288+
maxHeight: number | undefined;
289+
minHeight: number | undefined;
290+
}
291+
280292
export type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
281293

282294
export interface DialogCloseContext {

‎packages/scripts/api.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45542,6 +45542,47 @@
4554245542
"Boolean"
4554345543
]
4554445544
},
45545+
{
45546+
"id": 1760007814,
45547+
"platform_framework": [
45548+
"1",
45549+
"2"
45550+
],
45551+
"component": "Dialog",
45552+
"field_category": 1,
45553+
"field_name": "sizeDraggable",
45554+
"field_type": [
45555+
"4",
45556+
"8"
45557+
],
45558+
"field_default_value": "false",
45559+
"field_enum": "",
45560+
"field_desc_zh": "弹窗大小可拖拽调整。`sizeDraggable.maxWidth`、`sizeDraggable.minWidth`、`sizeDraggable.maxHeight`、`sizeDraggable.minHeight` 用于控制拖拽尺寸大小限制。",
45561+
"field_desc_en": "allow resizing drawer width/height, set max or min to limit size.",
45562+
"field_required": 0,
45563+
"event_input": "",
45564+
"create_time": "2025-10-09 11:03:34",
45565+
"update_time": "2025-10-09 11:03:34",
45566+
"event_output": null,
45567+
"custom_field_type": "boolean | SizeDragLimit【interface SizeDragLimit { maxWidth: number|undefined, minWidth: number|undefined, maxHeight: number|undefined, minHeight: number|undefined }】",
45568+
"syntactic_sugar": null,
45569+
"readonly": 1,
45570+
"html_attribute": 0,
45571+
"trigger_elements": "",
45572+
"deprecated": 0,
45573+
"version": "",
45574+
"test_description": null,
45575+
"support_default_value": 0,
45576+
"field_category_text": "Props",
45577+
"platform_framework_text": [
45578+
"Vue(PC)",
45579+
"React(PC)"
45580+
],
45581+
"field_type_text": [
45582+
"Boolean",
45583+
"Object"
45584+
]
45585+
},
4554545586
{
4554645587
"id": 715,
4554745588
"platform_framework": [

0 commit comments

Comments
 (0)