feat: add "dragged" event in Dialog (#8047)

packages/dialog/src/vaadin-dialog-draggable-mixin.js

@@ -116,9 +116,18 @@ export const DialogDraggableMixin = (superClass) =>
 
     /** @private */
     _stopDrag() {
+      this.dispatchEvent(
+        new CustomEvent('dragged', { bubbles: true, composed: true, detail: { top: this.top, left: this.left } }),
+      );
       window.removeEventListener('mouseup', this._stopDrag);
       window.removeEventListener('touchend', this._stopDrag);
       window.removeEventListener('mousemove', this._drag);
       window.removeEventListener('touchmove', this._drag);
     }
+
+    /**
+     * Fired when the dialog drag is finished.
+     *
+     * @event dragged
+     */
   };

packages/dialog/src/vaadin-dialog.d.ts

@@ -24,6 +24,11 @@ export type DialogResizeDimensions = {
   contentHeight: string;
 };
 
+export type DialogPosition = {
+  top: string;
+  left: string;
+};
+
 /**
  * Fired when the `opened` property changes.
  */
@@ -34,6 +39,11 @@ export type DialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DialogResizeEvent = CustomEvent<DialogResizeDimensions>;
 
+/**
+ * Fired when the dialog drag is finished.
+ */
+export type DialogDraggedEvent = CustomEvent<DialogPosition>;
+
 /**
  * Fired when the dialog is closed.
  */
@@ -45,6 +55,8 @@ export interface DialogCustomEventMap {
   closed: DialogClosedEvent;
 
   resize: DialogResizeEvent;
+
+  dragged: DialogDraggedEvent;
 }
 
 export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
@@ -108,6 +120,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
  */

packages/dialog/src/vaadin-dialog.js

@@ -76,6 +76,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
  *

packages/dialog/test/draggable-resizable.common.js

@@ -597,6 +597,17 @@ describe('draggable', () => {
     expect(dialog.top).to.be.equal(bounds.top);
     expect(dialog.left).to.be.equal(bounds.left);
   });
+
+  it('should fire "dragged" event on drag', async () => {
+    const onDragged = sinon.spy();
+    dialog.addEventListener('dragged', onDragged);
+    drag(container);
+    await nextRender();
+    expect(onDragged.calledOnce).to.be.true;
+    const { detail } = onDragged.args[0][0];
+    expect(detail.top).to.be.equal(dialog.top);
+    expect(detail.left).to.be.equal(dialog.left);
+  });
 });
 
 describe('touch', () => {

packages/dialog/test/typings/dialog.types.ts

@@ -7,7 +7,9 @@ import type { DialogResizableMixinClass } from '../../src/vaadin-dialog-resizabl
 import type {
   Dialog,
   DialogClosedEvent,
+  DialogDraggedEvent,
   DialogOpenedChangedEvent,
+  DialogPosition,
   DialogRenderer,
   DialogResizeDimensions,
   DialogResizeEvent,
@@ -35,6 +37,11 @@ dialog.addEventListener('resize', (event) => {
   assertType<DialogResizeDimensions>(event.detail);
 });
 
+dialog.addEventListener('dragged', (event) => {
+  assertType<DialogDraggedEvent>(event);
+  assertType<DialogPosition>(event.detail);
+});
+
 dialog.addEventListener('closed', (event) => {
   assertType<DialogClosedEvent>(event);
 });