feat: add max column count support to dashboard (#7670)

vaadin · Aug 19, 2024 · 19ccbe9 · 19ccbe9
1 parent d0dc816
commit 19ccbe9
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 9 deletions.
diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
@@ -25,6 +25,7 @@
         --vaadin-dashboard-col-min-width: 300px;
         --vaadin-dashboard-col-max-width: 500px;
         --vaadin-dashboard-gap: 20px;
+        --vaadin-dashboard-col-max-count: 3;
       }
     </style>
   </head>

diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -25,6 +25,7 @@ export const DashboardLayoutMixin = (superClass) =>
           /* Default min and max column widths */
           --_vaadin-dashboard-default-col-min-width: 25rem;
           --_vaadin-dashboard-default-col-max-width: 1fr;
+
           /* Effective min and max column widths */
           --_vaadin-dashboard-col-min-width: var(
             --vaadin-dashboard-col-min-width,
@@ -35,11 +36,17 @@ export const DashboardLayoutMixin = (superClass) =>
             var(--_vaadin-dashboard-default-col-max-width)
           );
 
+          /* Effective column count */
+          --_vaadin-dashboard-effective-col-count: min(
+            var(--_vaadin-dashboard-col-count),
+            var(--vaadin-dashboard-col-max-count)
+          );
+
           display: grid;
           overflow: auto;
 
           grid-template-columns: repeat(
-            auto-fill,
+            var(--_vaadin-dashboard-effective-col-count, auto-fill),
             minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width))
           );
 
@@ -51,7 +58,11 @@ export const DashboardLayoutMixin = (superClass) =>
         }
 
         ::slotted(*) {
-          grid-column: span min(var(--vaadin-dashboard-item-colspan, 1), var(--_vaadin-dashboard-item-max-colspan));
+          grid-column: span
+            min(
+              var(--vaadin-dashboard-item-colspan, 1),
+              var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
+            );
         }
       `;
     }
@@ -61,18 +72,18 @@ export const DashboardLayoutMixin = (superClass) =>
      * @override
      */
     _onResize() {
-      this.__updateItemMaxColspan();
+      this.__updateColumnCount();
     }
 
     /**
      * @private
      */
-    __updateItemMaxColspan() {
-      // Temporarily set max colspan to 1
-      this.style.setProperty('--_vaadin-dashboard-item-max-colspan', 1);
-      // Get the effective column count with no colspans
+    __updateColumnCount() {
+      // Clear the previously computed column count
+      this.style.removeProperty('--_vaadin-dashboard-col-count');
+      // Get the column count (with no colspans etc in effect)...
       const columnCount = getComputedStyle(this).gridTemplateColumns.split(' ').length;
-      // ...and set it as the new max colspan value
-      this.style.setProperty('--_vaadin-dashboard-item-max-colspan', columnCount);
+      // ...and set it as the new value
+      this.style.setProperty('--_vaadin-dashboard-col-count', columnCount);
     }
   };
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -8,6 +8,7 @@ import {
   getRowHeights,
   setColspan,
   setGap,
+  setMaximumColumnCount,
   setMaximumColumnWidth,
   setMinimumColumnWidth,
 } from './helpers.js';
@@ -252,4 +253,62 @@ describe('dashboard layout', () => {
       expect(item1Top - item0Bottom).to.eql(customGap);
     });
   });
+
+  describe('maximum column count', () => {
+    it('should not limit column count by default', () => {
+      dashboard.style.width = `${columnWidth * 100}px`;
+      expect(getColumnWidths(dashboard).length).to.eql(100);
+    });
+
+    it('should limit column count to custom value', async () => {
+      setMaximumColumnCount(dashboard, 5);
+      dashboard.style.width = `${columnWidth * 100}px`;
+      await nextFrame();
+      expect(getColumnWidths(dashboard).length).to.eql(5);
+    });
+
+    it('should limit column count to one', async () => {
+      setMaximumColumnCount(dashboard, 1);
+      dashboard.style.width = `${columnWidth * 10}px`;
+      await nextFrame();
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0],
+        [1],
+      ]);
+    });
+
+    it('should allow fewer columns', async () => {
+      setMaximumColumnCount(dashboard, 2);
+      dashboard.style.width = `${columnWidth}px`;
+      await nextFrame();
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0],
+        [1],
+      ]);
+    });
+
+    it('should limit to a single column even with colspan applied', async () => {
+      setMaximumColumnCount(dashboard, 1);
+      setColspan(childElements[0], 2);
+      await nextFrame();
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0],
+        [1],
+      ]);
+    });
+
+    it('should increase max column count dynamically', async () => {
+      setMaximumColumnCount(dashboard, 2);
+      dashboard.style.width = `${columnWidth * 100}px`;
+      await nextFrame();
+      expect(getColumnWidths(dashboard).length).to.eql(2);
+
+      setMaximumColumnCount(dashboard, 20);
+      await nextFrame();
+      expect(getColumnWidths(dashboard).length).to.eql(20);
+    });
+  });
 });
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
@@ -57,3 +57,10 @@ export function setColspan(element: HTMLElement, colspan?: number): void {
 export function setGap(dashboard: HTMLElement, gap?: number): void {
   dashboard.style.setProperty('--vaadin-dashboard-gap', gap !== undefined ? `${gap}px` : null);
 }
+
+/**
+ * Sets the maximum column count of the dashboard.
+ */
+export function setMaximumColumnCount(dashboard: HTMLElement, count?: number): void {
+  dashboard.style.setProperty('--vaadin-dashboard-col-max-count', count !== undefined ? `${count}` : null);
+}