@conduction/nextcloud-vue 2.56.0-beta.31 → 2.56.0-beta.32

package/dist/esm/components/CnObjectListWidget/CnObjectListWidget.vue2.js

@@ -162,6 +162,15 @@ var script = {
 			page: 1,
 			/** Rows that fit the host cell; null = unconstrained (dashboards). */
 			fitRows: null,
+			/**
+			 * How far the table has been squeezed to the widget's width, so the
+			 * card never scrolls sideways: 0 = its own auto layout, 1 = one column
+			 * takes what is left and is cut with an ellipsis while the rest keep
+			 * their content on one line, 2 = a fixed layout, every column an equal
+			 * share with its text wrapped. Each step is taken only while the table
+			 * still scrolls sideways. `content.fitWidth` forces stage 1 on or off.
+			 */
+			fitStage: 0,
 			/** Whether the create dialog is open. */
 			showCreate: false,
 			/**
@@ -194,6 +203,27 @@ var script = {
 	},
 
 	computed: {
+		/**
+		 * Whether the table fits the widget's width (stage 1): `content.fitWidth`
+		 * when it says, else once the columns were measured not to fit.
+		 *
+		 * @return {boolean}
+		 */
+		fitWidthActive() {
+			const forced = this.content?.fitWidth;
+			return typeof forced === 'boolean' ? forced : this.fitStage === 1
+		},
+
+		/**
+		 * Whether the table takes a fixed layout, the last resort when even the
+		 * fitted table is wider than the widget (not with `content.fitWidth` set).
+		 *
+		 * @return {boolean}
+		 */
+		fixedLayoutActive() {
+			return typeof this.content?.fitWidth !== 'boolean' && this.fitStage >= 2
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or null
 		 * on surfaces (dashboards) that don't provide one.
@@ -333,7 +363,7 @@ var script = {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k];
 					}
@@ -879,6 +909,12 @@ var script = {
 	mounted() {
 		this.fetchRows();
 		this.loadHeadingsIfNeeded();
+		// A table wider than the widget fits its columns to the width instead of
+		// scrolling sideways (no inner scrollbars).
+		if (typeof ResizeObserver !== 'undefined') {
+			this._widthObserver = new ResizeObserver(() => this.measureWidthFit());
+			this._widthObserver.observe(this.$el);
+		}
 		// Re-read on a page-level refresh. This list fetches its own rows from
 		// OpenRegister and subscribed to nothing, so after a write elsewhere on
 		// the page it went on rendering the result set it fetched on mount —
@@ -917,6 +953,9 @@ var script = {
 		if (this._fitObserver) {
 			this._fitObserver.disconnect();
 		}
+		if (this._widthObserver) {
+			this._widthObserver.disconnect();
+		}
 	},
 
 	methods: {
@@ -991,7 +1030,10 @@ var script = {
 				const res = await axios.get(url, { params });
 				this.rows = (res && res.data && res.data.results) || [];
 				this.total = (res && res.data && typeof res.data.total === 'number') ? res.data.total : this.rows.length;
-				this.$nextTick(() => this.measureFit());
+				this.$nextTick(() => {
+					this.measureFit();
+					this.measureWidthFit();
+				});
 			} catch (e) {
 				// Keep the raw message OUT of the template — log it for
 				// debugging, surface only the quiet `loadErrorLabel` line.
@@ -1005,6 +1047,27 @@ var script = {
 			}
 		},
 
+		/**
+		 * Squeeze the table to the widget's width while it scrolls sideways: its
+		 * `.cn-data-table__scroll` wrapper is wider than it is visible. First the
+		 * fit (stage 1), then, if that is still too wide, a fixed layout
+		 * (stage 2). It never goes back (a squeezed table does not overflow, so
+		 * there is nothing to measure to relax it). No-op when `content.fitWidth`
+		 * is set.
+		 *
+		 * @return {void}
+		 */
+		measureWidthFit() {
+			if (this.fitStage >= 2 || typeof this.content?.fitWidth === 'boolean') {
+				return
+			}
+			const scroller = this.$el && this.$el.querySelector ? this.$el.querySelector('.cn-data-table__scroll') : null;
+			if (scroller && scroller.scrollWidth > scroller.clientWidth + 1) {
+				this.fitStage += 1;
+				this.$nextTick(() => this.measureWidthFit());
+			}
+		},
+
 		/**
 		 * Fit the visible row count to the host grid cell (ADR-062 — the cell
 		 * is the budget). Measures the cell's remaining height below the table