Merge pull request #6358 from b7c/dialog-fix

Dialog: fix #6356 and implement #6357

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": [

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.',

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.

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() {