diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json index d013fb0765..ff0b8d0d29 100644 --- a/apps/showcase/doc/common/apidoc/index.json +++ b/apps/showcase/doc/common/apidoc/index.json @@ -22911,6 +22911,19 @@ "returnType": "void", "description": "Fired when a dialog gets unmaximized." }, + { + "name": "dragstart", + "parameters": [ + { + "name": "event", + "optional": false, + "type": "Event", + "description": "Browser event." + } + ], + "returnType": "void", + "description": "Fired when a dialog drag begins." + }, { "name": "dragend", "parameters": [ diff --git a/packages/primevue/scripts/components/dialog.js b/packages/primevue/scripts/components/dialog.js index e7e737c6b2..8cd46b85ab 100644 --- a/packages/primevue/scripts/components/dialog.js +++ b/packages/primevue/scripts/components/dialog.js @@ -180,6 +180,17 @@ const DialogEvents = [ } ] }, + { + name: 'dragstart', + description: 'Fired when a dialog drag begins.', + arguments: [ + { + name: 'event', + type: 'object', + description: 'Event Object' + } + ] + }, { name: 'dragend', description: 'Fired when a dialog drag completes.', diff --git a/packages/primevue/src/dialog/Dialog.d.ts b/packages/primevue/src/dialog/Dialog.d.ts index 23cab45554..c25b32a9e8 100755 --- a/packages/primevue/src/dialog/Dialog.d.ts +++ b/packages/primevue/src/dialog/Dialog.d.ts @@ -401,6 +401,11 @@ export interface DialogEmitsOptions { * @param {event} event - Browser event. */ unmaximize(event: Event): void; + /** + * Fired when a dialog drag begins. + * @param {event} event - Browser event. + */ + dragstart(event: Event): void; /** * Fired when a dialog drag completes. * @param {event} event - Browser event. diff --git a/packages/primevue/src/dialog/Dialog.vue b/packages/primevue/src/dialog/Dialog.vue index 430dae48ca..2176b23b35 100755 --- a/packages/primevue/src/dialog/Dialog.vue +++ b/packages/primevue/src/dialog/Dialog.vue @@ -79,7 +79,7 @@ export default { name: 'Dialog', extends: BaseDialog, inheritAttrs: false, - emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'], + emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragstart', 'dragend'], provide() { return { dialogRef: computed(() => this._instance) @@ -163,6 +163,10 @@ export default { if (this.modal) { !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave'); } + + if (this.dragging && this.documentDragEndListener) { + this.documentDragEndListener(); + } }, onLeave() { this.$emit('hide'); @@ -320,6 +324,8 @@ export default { this.container.style.margin = '0'; document.body.setAttribute('data-p-unselectable-text', 'true'); !this.isUnstyled && addStyle(document.body, { 'user-select': 'none' }); + + this.$emit('dragstart', event); } }, bindGlobalListeners() {