Skip to content

Commit b4948a2

Browse files
liweijie0812github-actions[bot]uyarn
committed
feat(attach): support global attach config (#3437)
* feat: support global config attach * chore: update common * chore: api update * fix: test * fix: test * chore: update snapshot * chore: clear typograph code * chore: clear typograph code * chore: revert irrelevant docs change * feat: fix config * feat: fix config --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Uyarn <[email protected]>
1 parent da09588 commit b4948a2

File tree

12 files changed

+2462
-6184
lines changed

12 files changed

+2462
-6184
lines changed

‎src/config-provider/config-provider.en-US.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ name | type | default | description | required
6262
alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N
6363
anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N
6464
animation | Object | - | Typescript：`Partial<Record<'include'\|'exclude', Array<AnimationType>>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
65+
attach | String / Object / Function | - | Typescript：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
6566
calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N
6667
cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N
6768
classPrefix | String | t | \- | N
@@ -70,6 +71,7 @@ datePicker | Object | - | DatePicker global configs。Typescript：`DatePickerCo
7071
descriptions | Object | - | Descriptions global configs。Typescript：`DescriptionsConfig` | N
7172
dialog | Object | - | Dialog global configs。Typescript：`DialogConfig` | N
7273
drawer | Object | - | Drawer global configs。Typescript：`DrawerConfig` | N
74+
empty | Object | - | Empty global configs。Typescript：`EmptyConfig` | N
7375
form | Object | - | Form global configs。Typescript：`FormConfig` | N
7476
guide | Object | - | Guide global configs。Typescript：`GuideConfig` | N
7577
icon | Object | - | icon config。Typescript：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
@@ -390,3 +392,10 @@ skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default'
390392
name | type | default | description | required
391393
-- | -- | -- | -- | --
392394
rateText | Array | - | Typescript：`string[]` | N
395+
396+
### EmptyConfig
397+
398+
name | type | default | description | required
399+
-- | -- | -- | -- | --
400+
image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
401+
titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N

‎src/config-provider/config-provider.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ Vue.use(TDesign);
6363
alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N
6464
anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N
6565
animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial<Record<'include'\|'exclude', Array<AnimationType>>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
66+
attach | String / Object / Function | - | TS 类型：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
6667
calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N
6768
cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N
6869
classPrefix | String | t | CSS 类名前缀 | N
@@ -71,6 +72,7 @@ datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerC
7172
descriptions | Object | - | 描述全局配置。TS 类型：`DescriptionsConfig` | N
7273
dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N
7374
drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N
75+
empty | Object | - | 空状态全局配置。TS 类型：`EmptyConfig` | N
7476
form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N
7577
guide | Object | - | 引导全局配置。TS 类型：`GuideConfig` | N
7678
icon | Object | - | 图标全局配置。TS 类型：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
@@ -391,3 +393,10 @@ skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', the
391393
名称 | 类型 | 默认值 | 描述 | 必传
392394
-- | -- | -- | -- | --
393395
rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N
396+
397+
### EmptyConfig
398+
399+
名称 | 类型 | 默认值 | 描述 | 必传
400+
-- | -- | -- | -- | --
401+
image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
402+
titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N

‎src/config-provider/config-receiver.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { GlobalIconConfig } from 'tdesign-icons-vue';
44
import { defaultGlobalConfig } from './context';
55
import { GlobalConfigProvider, AnimationType } from './type';
66

7+
import type { AttachNode } from '../common';
8+
79
export type ValueOf<T> = T[keyof T];
810

911
export type ComponentConfigType = ValueOf<GlobalConfigProvider>;
@@ -202,3 +204,21 @@ export function getClassPrefixMixins(componentName: string) {
202204
},
203205
});
204206
}
207+
208+
// 用于非 composition api 的组件使用来自 config provider注入的 attach 使用
209+
export function getAttachConfigMixins(componentName: string) {
210+
return (Vue as VueConstructor<ConfigComponent>).extend({
211+
name: 'TAttachProvider',
212+
inject: {
213+
globalConfig: {
214+
default: undefined,
215+
},
216+
},
217+
methods: {
218+
globalAttach(): AttachNode {
219+
// @ts-ignore
220+
return this.globalConfig?.attach?.[componentName] || this.globalConfig?.attach || 'body';
221+
},
222+
},
223+
});
224+
}

‎src/config-provider/type.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ButtonProps } from '../button';
1010
import { FormErrorMessage } from '../form';
1111
import { MessageOptions } from '../message';
1212
import { ImageProps } from '../image';
13-
import { TNode, SizeEnum } from '../common';
13+
import { TNode, SizeEnum, AttachNode } from '../common';
1414

1515
export interface GlobalConfigProvider {
1616
/**
@@ -25,6 +25,10 @@ export interface GlobalConfigProvider {
2525
* 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`
2626
*/
2727
animation?: Partial<Record<'include' | 'exclude', Array<AnimationType>>>;
28+
/**
29+
* null
30+
*/
31+
attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode };
2832
/**
2933
* 日历组件全局配置
3034
*/

‎src/dialog/dialog.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ import { DialogCloseContext, TdDialogProps } from './type';
1414
import props from './props';
1515
import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
1616
import mixins from '../utils/mixins';
17-
import getConfigReceiverMixins, { DialogConfig, getGlobalIconMixins } from '../config-provider/config-receiver';
17+
import getConfigReceiverMixins, {
18+
DialogConfig,
19+
getGlobalIconMixins,
20+
getAttachConfigMixins,
21+
} from '../config-provider/config-receiver';
1822
import TransferDom from '../utils/transfer-dom';
1923
import { emitEvent } from '../utils/event';
20-
import { ClassName, Styles } from '../common';
24+
import { AttachNode, ClassName, Styles } from '../common';
2125
import { updateElement } from '../hooks/useDestroyOnClose';
2226
import stack from './stack';
2327
import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth';
@@ -43,7 +47,12 @@ if (typeof window !== 'undefined' && window.document && window.document.document
4347

4448
let key = 1;
4549

46-
export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('dialog'), getGlobalIconMixins()).extend({
50+
export default mixins(
51+
ActionMixin,
52+
getConfigReceiverMixins<Vue, DialogConfig>('dialog'),
53+
getGlobalIconMixins(),
54+
getAttachConfigMixins('dialog'),
55+
).extend({
4756
name: 'TDialog',
4857

4958
components: {
@@ -144,6 +153,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
144153
computedDialogStyle(): Styles {
145154
return !this.isFullScreen ? { width: getCSSValue(this.width), ...this.dialogStyle } : { ...this.dialogStyle }; // width全屏模式不生效;
146155
},
156+
computedAttach(): AttachNode {
157+
return this.showInAttachedElement ? undefined : this.attach || this.globalAttach();
158+
},
147159
},
148160

149161
watch: {
@@ -518,7 +530,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
518530
onBeforeLeave={this.beforeLeave}
519531
onAfterLeave={this.afterLeave}
520532
>
521-
<div v-show={this.visible} class={this.ctxClass} style={ctxStyle} v-transfer-dom={this.attach}>
533+
<div v-show={this.visible} class={this.ctxClass} style={ctxStyle} v-transfer-dom={this.computedAttach}>
522534
{view}
523535
</div>
524536
</transition>

‎src/drawer/drawer.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,27 @@ import props from './props';
66
import { FooterButton, DrawerCloseContext, TdDrawerProps } from './type';
77
import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
88
import mixins from '../utils/mixins';
9-
import getConfigReceiverMixins, { DrawerConfig, getGlobalIconMixins } from '../config-provider/config-receiver';
9+
import getConfigReceiverMixins, {
10+
DrawerConfig,
11+
getGlobalIconMixins,
12+
getAttachConfigMixins,
13+
} from '../config-provider/config-receiver';
1014
import TransferDom from '../utils/transfer-dom';
1115
import { emitEvent } from '../utils/event';
12-
import { ClassName, Styles } from '../common';
16+
import { AttachNode, ClassName, Styles } from '../common';
1317
import ActionMixin from '../dialog/actions';
1418
import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth';
1519

1620
type FooterButtonType = 'confirm' | 'cancel';
1721

1822
let key = 1;
1923

20-
export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('drawer'), getGlobalIconMixins()).extend({
24+
export default mixins(
25+
ActionMixin,
26+
getConfigReceiverMixins<Vue, DrawerConfig>('drawer'),
27+
getGlobalIconMixins(),
28+
getAttachConfigMixins('drawer'),
29+
).extend({
2130
name: 'TDrawer',
2231

2332
components: {
@@ -110,6 +119,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
110119
cursor: this.isHorizontal ? 'col-resize' : 'row-resize',
111120
};
112121
},
122+
computedAttach(): AttachNode {
123+
return this.showInAttachedElement ? undefined : this.attach || this.globalAttach();
124+
},
113125
},
114126

115127
watch: {
@@ -180,7 +192,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
180192
class={this.drawerClasses}
181193
style={{ zIndex: this.zIndex }}
182194
onKeydown={this.onKeyDown}
183-
v-transfer-dom={this.attach}
195+
v-transfer-dom={this.computedAttach}
184196
ref="drawerContainer"
185197
tabindex={0}
186198
v-show={this.visible}

‎src/popup/popup.en-US.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Popup Props
56

67
name | type | default | description | required
@@ -19,7 +20,7 @@ overlayStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((trigg
1920
placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N
2021
popperOptions | Object | - | popper initial options，details refer to https://popper.js.org/docs | N
2122
showArrow | Boolean | false | \- | N
22-
trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N
23+
trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N
2324
triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
2425
visible | Boolean | - | `v-model` is supported。Typescript：`boolean` | N
2526
defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N
@@ -44,4 +45,4 @@ name | params | default | description
4445
-- | -- | -- | --
4546
content | String / Slot / Function | - | required。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
4647
popupProps | Object | - | \-
47-
triggerElement | String | - | required
48+
triggerElement | String | - | required

‎src/popup/popup.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@
1111
{{ plugin }}
1212

1313
## API
14+
1415
### Popup Props
1516

16-
名称 | 类型 | 默认值 | 说明 | 必传
17+
名称 | 类型 | 默认值 | 描述 | 必传
1718
-- | -- | -- | -- | --
18-
attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
19+
attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1920
content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
2021
default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
2122
delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array<number>` | N
@@ -54,4 +55,4 @@ visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当
5455
-- | -- | -- | --
5556
content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
5657
popupProps | Object | - | 透传气泡框/浮层的属性
57-
triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可
58+
triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可

‎src/popup/popup.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@ import setStyle from '../_common/js/utils/set-style';
88
import props from './props';
99
import { PopupVisibleChangeContext, TdPopupProps } from './type';
1010
import Container from './container';
11-
import { getClassPrefixMixins } from '../config-provider/config-receiver';
11+
import { getClassPrefixMixins, getAttachConfigMixins } from '../config-provider/config-receiver';
1212
import mixins from '../utils/mixins';
1313
import { emitEvent } from '../utils/event';
1414
import {
1515
getPopperPlacement, attachListeners, triggers, defaultVisibleDelay,
1616
} from './utils';
17+
import { AttachNode } from '../common';
1718

1819
const classPrefixMixins = getClassPrefixMixins('popup');
1920

2021
const injectionKey = '__T_POPUP';
2122

22-
export default mixins(classPrefixMixins).extend({
23+
export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend({
2324
name: 'TPopup',
2425

2526
provide(this: any) {
@@ -89,6 +90,9 @@ export default mixins(classPrefixMixins).extend({
8990
close: delay[1] ?? delay[0],
9091
};
9192
},
93+
computeAttach(): AttachNode {
94+
return this.attach || this.globalAttach();
95+
},
9296
},
9397
watch: {
9498
visible(visible) {
@@ -449,7 +453,7 @@ export default mixins(classPrefixMixins).extend({
449453
}}
450454
parent={this}
451455
visible={visible}
452-
attach={() => ({ attach: this.attach, current: this.$el })}
456+
attach={() => ({ attach: this.computeAttach, current: this.$el })}
453457
>
454458
<transition
455459
slot="content"

‎src/popup/props.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@ import { TdPopupProps } from './type';
88
import { PropType } from 'vue';
99

1010
export default {
11-
/** 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
11+
/** 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
1212
attach: {
1313
type: [String, Function] as PropType<TdPopupProps['attach']>,
14-
default: 'body',
1514
},
1615
/** 浮层里面的内容 */
1716
content: {

0 commit comments

Comments
 (0)