feat: dashboard widget move mode

packages/dashboard/src/keyboard-controller.js

@@ -19,9 +19,15 @@ export class KeyboardController {
   }
 
   /** @private */
-  __focusout() {
-    this.host.__focused = false;
-    this.host.__selected = false;
+  __focusout(e) {
+    const focusOutElement = e.composedPath()[0];
+    if (this.host.offsetHeight && getComputedStyle(focusOutElement).display === 'none') {
+      this.host.__focusApply();
+    } else {
+      this.host.__exitMode();
+      this.host.__focused = false;
+      this.host.__selected = false;
+    }
   }
 
   /** @private */
@@ -57,8 +63,12 @@ export class KeyboardController {
   /** @private */
   __escape(e) {
     e.preventDefault();
-    this.host.__selected = false;
-    this.host.focus();
+    if (this.host.__moveMode) {
+      this.host.__exitMode(true);
+    } else {
+      this.host.__selected = false;
+      this.host.focus();
+    }
   }
 
   /** @private */

packages/dashboard/src/vaadin-dashboard-helpers.js

@@ -7,7 +7,7 @@
 export const WRAPPER_LOCAL_NAME = 'vaadin-dashboard-widget-wrapper';
 
 // The attributes that should be synchronized from the wrapper to widget/section
-export const SYNCHRONIZED_ATTRIBUTES = ['editable', 'dragging'];
+export const SYNCHRONIZED_ATTRIBUTES = ['editable', 'dragging', 'first-child', 'last-child'];
 
 /**
  * Returns the array of items that contains the given item.

packages/dashboard/src/vaadin-dashboard-item-mixin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * Shared functionality between widgets and sections
+ */
+export declare function DashboardItemMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DashboardItemMixinClass> & T;
+
+export declare class DashboardItemMixinClass {}

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -0,0 +1,159 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html } from 'lit';
+import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { KeyboardController } from './keyboard-controller.js';
+import { fireMove, fireRemove } from './vaadin-dashboard-helpers.js';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-styles.js';
+
+/**
+ * Shared functionality between widgets and sections
+ *
+ * @polymerMixin
+ * @mixes ResizeMixin
+ */
+export const DashboardItemMixin = (superClass) =>
+  class DashboardItemMixinClass extends ResizeMixin(superClass) {
+    static get styles() {
+      return dashboardWidgetAndSectionStyles;
+    }
+
+    static get properties() {
+      return {
+        /** @private */
+        __selected: {
+          type: Boolean,
+          reflectToAttribute: true,
+          attribute: 'selected',
+          observer: '__selectedChanged',
+        },
+
+        /** @private */
+        __focused: {
+          type: Boolean,
+          reflectToAttribute: true,
+          attribute: 'focused',
+        },
+
+        /** @private */
+        __moveMode: {
+          type: Boolean,
+          reflectToAttribute: true,
+          attribute: 'move-mode',
+        },
+      };
+    }
+
+    /** @private */
+    __renderDragHandle() {
+      return html`<button
+        id="drag-handle"
+        draggable="true"
+        class="drag-handle"
+        tabindex="${this.__selected ? 0 : -1}"
+        @click="${() => this.__enterMoveMode()}"
+      ></button>`;
+    }
+
+    /** @private */
+    __renderRemoveButton() {
+      return html`<button
+        id="remove-button"
+        tabindex="${this.__selected ? 0 : -1}"
+        @click="${() => fireRemove(this)}"
+      ></button>`;
+    }
+
+    /** @private */
+    __renderFocusButton() {
+      return html`<button
+        aria-label="Select Title for editing"
+        id="focus-button"
+        draggable="true"
+        class="drag-handle"
+        @click="${() => {
+          this.__selected = true;
+        }}"
+      ></button>`;
+    }
+
+    /** @private */
+    __renderModeControls() {
+      return html`<div
+        id="move-controls"
+        class="mode-controls"
+        .hidden="${!this.__moveMode}"
+        @pointerdown="${(e) => e.preventDefault()}"
+      >
+        <button title="Move backward" @click="${() => fireMove(this, -1)}" id="move-backward"></button>
+        <button title="Apply" @click="${() => this.__exitMode(true)}" id="move-apply"></button>
+        <button title="Move forward" @click="${() => fireMove(this, 1)}" id="move-forward"></button>
+      </div>`;
+    }
+
+    constructor() {
+      super();
+      this.__keyboardController = new KeyboardController(this);
+      this.__focusTrapController = new FocusTrapController(this);
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this.addController(this.__keyboardController);
+      this.addController(this.__focusTrapController);
+    }
+
+    /** @private */
+    __selectedChanged(selected) {
+      if (selected) {
+        this.__focusTrapController.trapFocus(this.$.focustrap);
+      } else {
+        this.__focusTrapController.releaseFocus();
+      }
+    }
+
+    focus() {
+      if (this.hasAttribute('editable')) {
+        this.$['focus-button'].focus();
+      } else {
+        super.focus();
+      }
+    }
+
+    /** @private */
+    __exitMode(focus) {
+      if (this.__moveMode) {
+        this.__moveMode = false;
+        if (focus) {
+          this.$['drag-handle'].focus();
+          this.__focusTrapController.trapFocus(this.$.focustrap);
+        }
+      }
+    }
+
+    /** @private */
+    __focusApply() {
+      if (this.__moveMode) {
+        this.$['move-apply'].focus();
+      }
+    }
+
+    /** @private */
+    __enterMoveMode() {
+      this.__selected = true;
+      this.__moveMode = true;
+      requestAnimationFrame(() => {
+        this.__focusTrapController.trapFocus(this.$['move-controls']);
+      });
+    }
+  };

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

@@ -31,6 +31,7 @@ export const DashboardLayoutMixin = (superClass) =>
         }
 
         #grid {
+          padding: 20px;
           /* Default min and max column widths */
           --_vaadin-dashboard-default-col-min-width: 25rem;
           --_vaadin-dashboard-default-col-max-width: 1fr;

packages/dashboard/src/vaadin-dashboard-section.d.ts

@@ -10,11 +10,12 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 
 /**
  * A Section component for use with the Dashboard component
  */
-declare class DashboardSection extends ControllerMixin(ElementMixin(HTMLElement)) {
+declare class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(HTMLElement))) {
   /**
    * The title of the section
    */

packages/dashboard/src/vaadin-dashboard-section.js

@@ -9,16 +9,14 @@
  * license.
  */
 import { html, LitElement } from 'lit';
-import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { KeyboardController } from './keyboard-controller.js';
 import { TitleController } from './title-controller.js';
-import { fireRemove } from './vaadin-dashboard-helpers.js';
-import { dashboardWidgetAndSectionStyles, hasWidgetWrappers } from './vaadin-dashboard-styles.js';
+import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
+import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
 
 /**
  * A section component for use with the Dashboard component
@@ -27,8 +25,9 @@ import { dashboardWidgetAndSectionStyles, hasWidgetWrappers } from './vaadin-das
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ControllerMixin
+ * @mixes DashboardItemMixin
  */
-class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElement))) {
+class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-dashboard-section';
   }
@@ -82,7 +81,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         }
       `,
       hasWidgetWrappers,
-      dashboardWidgetAndSectionStyles,
+      super.styles,
     ];
   }
 
@@ -96,42 +95,19 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         value: '',
         observer: '__onSectionTitleChanged',
       },
-
-      /** @private */
-      __selected: {
-        type: Boolean,
-        reflectToAttribute: true,
-        attribute: 'selected',
-        observer: '__selectedChanged',
-      },
-
-      /** @private */
-      __focused: {
-        type: Boolean,
-        reflectToAttribute: true,
-        attribute: 'focused',
-      },
     };
   }
 
   /** @protected */
   render() {
     return html`
-      <button
-        aria-label="Select Section Title for editing"
-        id="focus-button"
-        draggable="true"
-        class="drag-handle"
-        @click="${() => {
-          this.__selected = true;
-        }}"
-      ></button>
+      ${this.__renderFocusButton()} ${this.__renderModeControls()}
 
       <div id="focustrap">
         <header>
-          <button id="drag-handle" draggable="true" class="drag-handle" tabindex="${this.__selected ? 0 : -1}"></button>
+          ${this.__renderDragHandle()}
           <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
-          <button id="remove-button" tabindex="${this.__selected ? 0 : -1}" @click="${() => fireRemove(this)}"></button>
+          ${this.__renderRemoveButton()}
         </header>
       </div>
 
@@ -141,9 +117,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
 
   constructor() {
     super();
-    this.__keyboardController = new KeyboardController(this);
     this.__titleController = new TitleController(this);
-    this.__focusTrapController = new FocusTrapController(this);
     this.__titleController.addEventListener('slot-content-changed', (event) => {
       const { node } = event.target;
       if (node) {
@@ -155,9 +129,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
   /** @protected */
   ready() {
     super.ready();
-    this.addController(this.__keyboardController);
     this.addController(this.__titleController);
-    this.addController(this.__focusTrapController);
 
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'section');
@@ -168,23 +140,6 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
   __onSectionTitleChanged(sectionTitle) {
     this.__titleController.setTitle(sectionTitle);
   }
-
-  /** @private */
-  __selectedChanged(selected) {
-    if (selected) {
-      this.__focusTrapController.trapFocus(this.$.focustrap);
-    } else {
-      this.__focusTrapController.releaseFocus();
-    }
-  }
-
-  focus() {
-    if (this.hasAttribute('editable')) {
-      this.$['focus-button'].focus();
-    } else {
-      super.focus();
-    }
-  }
 }
 
 defineCustomElement(DashboardSection);