From bf6f21ca191e5d94be13c592dedbff6144376fa7 Mon Sep 17 00:00:00 2001 From: OriginRing Date: Wed, 13 Nov 2024 17:51:59 +0800 Subject: [PATCH 1/2] feat(module:cdkconnectedoverlay): supports disabling click on mask --- components/popconfirm/doc/index.en-US.md | 2 +- components/popover/demo/overlay.md | 14 ++++++++++ components/popover/demo/overlay.ts | 33 ++++++++++++++++++++++++ components/popover/doc/index.en-US.md | 29 +++++++++++---------- components/popover/doc/index.zh-CN.md | 31 +++++++++++----------- components/popover/popover.spec.ts | 27 +++++++++++++++++++ components/popover/popover.ts | 1 + components/tooltip/base.ts | 10 +++++++ 8 files changed, 117 insertions(+), 30 deletions(-) create mode 100755 components/popover/demo/overlay.md create mode 100644 components/popover/demo/overlay.ts diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md index 5cc9d9ef8fb..06d4b9374ec 100644 --- a/components/popconfirm/doc/index.en-US.md +++ b/components/popconfirm/doc/index.en-US.md @@ -40,7 +40,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; | `[nzPopconfirmBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | | Param | Description | Type | Default value | Global Config | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------- | ------------- | +| ------------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------- | ------------- | ------------- | | `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` | - | | `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` | - | | `[nzOkType]` | Button `type` of the Confirm button | `'primary' \| 'ghost' \| 'dashed' \| 'danger' \| 'default'` | `'primary'` | - | diff --git a/components/popover/demo/overlay.md b/components/popover/demo/overlay.md new file mode 100755 index 00000000000..0c5e418e4db --- /dev/null +++ b/components/popover/demo/overlay.md @@ -0,0 +1,14 @@ +--- +order: 8 +title: + zh-CN: 禁止通过蒙层关闭面板 + en-US: Disable closing popover through mask +--- + +## zh-CN + +在 `nzPopoverTrigger` 为 `'click'` 时，通过设置 `nzPopoverOverlayClickable` 为 `false` 禁止通过点击蒙层关闭面板。 + +## en-US + +`nzPopoverTrigger="click",[nzPopoverOverlayClickable]="fales"` Disable closing popover through mask. diff --git a/components/popover/demo/overlay.ts b/components/popover/demo/overlay.ts new file mode 100644 index 00000000000..43ff1e419fd --- /dev/null +++ b/components/popover/demo/overlay.ts @@ -0,0 +1,33 @@ +import { Component } from '@angular/core'; + +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzPopoverModule } from 'ng-zorro-antd/popover'; + +@Component({ + selector: 'nz-demo-popover-overlay', + imports: [NzButtonModule, NzPopoverModule], + template: ` + + + + + ` +}) +export class NzDemoPopoverOverlayComponent { + visible = false; + + visibleChange(value: boolean): void { + this.visible = value; + } +} diff --git a/components/popover/doc/index.en-US.md b/components/popover/doc/index.en-US.md index 467f0b395c2..6f7432ae152 100644 --- a/components/popover/doc/index.en-US.md +++ b/components/popover/doc/index.en-US.md @@ -21,20 +21,21 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; ### [nz-popover] -| Param | Description | Type | Default value | -| ------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` | -| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef` | - | -| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef` | - | -| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | -| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` | -| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - | -| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` | -| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter` | - | -| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` | -| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` | -| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - | -| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - | +| Param | Description | Type | Default value | +| ------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `[nzPopoverArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` | +| `[nzPopoverTitle]` | Title of the popover | `string \| TemplateRef` | - | +| `[nzPopoverContent]` | Content of the popover | `string \| TemplateRef` | - | +| `[nzPopoverTrigger]` | Popover trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | +| `[nzPopoverPlacement]` | The position of the popover relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` | +| `[nzPopoverOrigin]` | Origin of the tooltip | `ElementRef` | - | +| `[nzPopoverVisible]` | Show or hide popover | `boolean` | `false` | +| `(nzPopoverVisibleChange)` | Callback of hide or show | `EventEmitter` | - | +| `[nzPopoverMouseEnterDelay]` | Delay in seconds, before popover is shown on mouse enter | `number` | `0.15` | +| `[nzPopoverMouseLeaveDelay]` | Delay in seconds, before popover is hidden on mouse leave | `number` | `0.1` | +| `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - | +| `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - | +| `[nzPopoverOverlayClickable]` | Click the mask to close the bubble box. Only the `click` trigger behavior is valid | `boolean` | `true` | Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs. | `[nzPopoverBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | diff --git a/components/popover/doc/index.zh-CN.md b/components/popover/doc/index.zh-CN.md index 25ccdae919b..94e33453543 100644 --- a/components/popover/doc/index.zh-CN.md +++ b/components/popover/doc/index.zh-CN.md @@ -22,21 +22,22 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; ### [nz-popover] -| 参数 | 说明 | 类型 | 默认值 | -| ------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` | -| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef` | - | -| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef` | - | -| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | -| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` | -| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - | -| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` | -| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter` | - | -| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` | -| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` | -| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - | -| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - | -| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `[nzPopoverArrowPointAtCenter]` | 箭头指向锚点的中心 | `boolean` | `false` | +| `[nzPopoverTitle]` | 标题 | `string \| TemplateRef` | - | +| `[nzPopoverContent]` | 用于定义内容 | `string \| TemplateRef` | - | +| `[nzPopoverTrigger]` | 触发行为，为 `null` 时不响应光标事件 | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | +| `[nzPopoverPlacement]` | 气泡框位置 | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` | +| `[nzPopoverOrigin]` | 气泡框定位元素 | `ElementRef` | - | +| `[nzPopoverVisible]` | 显示隐藏气泡框 | `boolean` | `false` | +| `(nzPopoverVisibleChange)` | 显示隐藏的事件 | `EventEmitter` | - | +| `[nzPopoverMouseEnterDelay]` | 鼠标移入后延时多少才显示气泡框，单位：秒 | `number` | `0.15` | +| `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` | +| `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - | +| `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - | +| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | +| `[nzPopoverOverlayClickable]` | 点击蒙层关闭气泡框，仅`click`触发行为有效 | `boolean` | `true` | 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。 diff --git a/components/popover/popover.spec.ts b/components/popover/popover.spec.ts index fc43acfff22..ce6f8816b47 100644 --- a/components/popover/popover.spec.ts +++ b/components/popover/popover.spec.ts @@ -104,6 +104,18 @@ describe('NzPopover', () => { waitingForTooltipToggling(); expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop'); })); + + it('nzPopoverOverlayClickable: false is to prohibit hiding', fakeAsync(() => { + const triggerElement = component.hideTemplate.nativeElement; + + dispatchMouseEvent(triggerElement, 'click'); + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).toContain('content-string'); + + dispatchMouseEvent(document.body, 'click'); + waitingForTooltipToggling(); + expect(overlayContainerElement.textContent).toContain('content-string'); + })); }); @Component({ @@ -123,6 +135,17 @@ describe('NzPopover', () => { [nzPopoverBackdrop]="true" > + + Click + + title-template content-template @@ -141,6 +164,10 @@ export class NzPopoverTestComponent { @ViewChild('changePopover', { static: true, read: NzPopoverDirective }) changePopoverNzPopoverDirective!: NzPopoverDirective; + @ViewChild('hideTemplate', { static: false }) hideTemplate!: ElementRef; + @ViewChild('hideTemplate', { static: false, read: NzPopoverDirective }) + hideTemplateDirective!: NzPopoverDirective; + @ViewChild('backdropPopover', { static: true }) backdropPopover!: ElementRef; content = 'content'; diff --git a/components/popover/popover.ts b/components/popover/popover.ts index b676bbeb320..51224b2b455 100644 --- a/components/popover/popover.ts +++ b/components/popover/popover.ts @@ -54,6 +54,7 @@ export class NzPopoverDirective extends NzTooltipBaseDirective { @Input('nzPopoverMouseLeaveDelay') override mouseLeaveDelay?: number; @Input('nzPopoverOverlayClassName') override overlayClassName?: string; @Input('nzPopoverOverlayStyle') override overlayStyle?: NgStyleInterface; + @Input('nzPopoverOverlayClickable') override overlayClickable?: boolean; @Input() @WithConfig() nzPopoverBackdrop?: boolean = false; diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts index df3ee840d6a..a278dd9ecae 100644 --- a/components/tooltip/base.ts +++ b/components/tooltip/base.ts @@ -56,6 +56,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges mouseLeaveDelay?: number; overlayClassName?: string; overlayStyle?: NgStyleInterface; + overlayClickable?: boolean; cdkConnectedOverlayPush?: boolean; visibleChange = new EventEmitter(); @@ -99,6 +100,10 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges return this.overlayStyle || null; } + protected get _overlayClickable(): boolean { + return this.overlayClickable ?? true; + } + private internalVisible = false; protected getProxyPropertyMap(): PropertyMapping { @@ -272,6 +277,7 @@ export abstract class NzTooltipBaseDirective implements AfterViewInit, OnChanges mouseLeaveDelay: ['nzMouseLeaveDelay', () => this._mouseLeaveDelay], overlayClassName: ['nzOverlayClassName', () => this._overlayClassName], overlayStyle: ['nzOverlayStyle', () => this._overlayStyle], + overlayClickable: ['nzOverlayClickable', () => this._overlayClickable], arrowPointAtCenter: ['nzArrowPointAtCenter', () => this.arrowPointAtCenter], cdkConnectedOverlayPush: ['cdkConnectedOverlayPush', () => this.cdkConnectedOverlayPush], ...this.getProxyPropertyMap() @@ -342,6 +348,7 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit { nzArrowPointAtCenter: boolean = false; nzOverlayClassName!: string; nzOverlayStyle: NgStyleInterface = {}; + nzOverlayClickable: boolean = true; nzBackdrop = false; nzMouseEnterDelay?: number; nzMouseLeaveDelay?: number; @@ -467,6 +474,9 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit { } onClickOutside(event: MouseEvent): void { + if (!this.nzOverlayClickable) { + return; + } const target = _getEventTarget(event); if (!this.origin.nativeElement.contains(target) && this.nzTrigger !== null) { this.hide(); From 3835d45b791a21103ca2426f97e77b8fec250fcf Mon Sep 17 00:00:00 2001 From: Laffery <49607541+Laffery@users.noreply.github.com> Date: Wed, 15 Jan 2025 09:54:19 +0800 Subject: [PATCH 2/2] Update overlay.md --- components/popover/demo/overlay.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/demo/overlay.md b/components/popover/demo/overlay.md index 0c5e418e4db..51e92d9fc58 100755 --- a/components/popover/demo/overlay.md +++ b/components/popover/demo/overlay.md @@ -11,4 +11,4 @@ title: ## en-US -`nzPopoverTrigger="click",[nzPopoverOverlayClickable]="fales"` Disable closing popover through mask. +Set `nzPopoverOverlayClickable` to be `false` to disable closing popover by clicking the mask when `nzPopoverTrigger` is `'click'`.