@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -220,3 +220,103 @@ export async function resolveObjectFolderInfo({ apiBase, register, schema, objec
 		return null
 	}
 }
+
+/**
+ * Read a dotted path off a value without throwing on a missing segment.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @param {string} path A dotted path; empty answers the value itself.
+ * @return {(Array|object|string|number|boolean|null|undefined)} What sits at the path, or undefined.
+ */
+function readPath(value, path) {
+	if (typeof path !== 'string' || path === '') {
+		return value
+	}
+	return path.split('.').reduce((acc, key) => (acc === null || acc === undefined ? undefined : acc[key]), value)
+}
+
+/**
+ * Turn a host endpoint's answer into the browser's `rowData`: the host's own
+ * record for each file, keyed by file id.
+ *
+ * The answer may be a list of records (directly, at `path`, or under `items`
+ * or `results`), each naming its file in `key` (`fileId` unless the host says
+ * otherwise); a record without one is skipped. An object that is not a list
+ * and holds neither is taken as already keyed by file id. Anything else is
+ * an empty map: the extra columns stay empty, the files still list.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} data The endpoint answer.
+ * @param {object} [options] Where to look.
+ * @param {string} [options.path] A dotted path to the list in the answer.
+ * @param {string} [options.key] The record field that holds the file id.
+ * @return {object} The records by file id.
+ */
+export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
+	let picked = readPath(data, path)
+	if (picked && typeof picked === 'object' && !Array.isArray(picked)) {
+		if (Array.isArray(picked.items)) {
+			picked = picked.items
+		} else if (Array.isArray(picked.results)) {
+			picked = picked.results
+		} else {
+			return { ...picked }
+		}
+	}
+	if (!Array.isArray(picked)) {
+		return {}
+	}
+	const byId = {}
+	picked.forEach((record) => {
+		if (!record || typeof record !== 'object') {
+			return
+		}
+		const id = record[key]
+		if (id === null || id === undefined || id === '') {
+			return
+		}
+		byId[String(id)] = record
+	})
+	return byId
+}
+
+/**
+ * Whether a host row action is offered on a file, by its `visibleIf`.
+ *
+ * `visibleIf.extension` lists file extensions (no case, a leading dot is
+ * allowed); `visibleIf.mime` lists mime types, where one ending in `/` or
+ * `/*` names the whole family. Every condition named must hold. An action
+ * without `visibleIf` is offered on every file, as before.
+ *
+ * @param {object} action The declared action.
+ * @param {object} node The file (`basename`, `mime`).
+ * @return {boolean} True when the action belongs on this file.
+ */
+export function hostActionApplies(action, node) {
+	const condition = action && action.visibleIf
+	if (!condition || typeof condition !== 'object') {
+		return true
+	}
+	if (Array.isArray(condition.extension)) {
+		const name = String((node && node.basename) || '')
+		const dot = name.lastIndexOf('.')
+		const extension = dot > 0 ? name.slice(dot + 1).toLowerCase() : ''
+		const wanted = condition.extension.map((entry) => String(entry).replace(/^\./, '').toLowerCase())
+		if (extension === '' || !wanted.includes(extension)) {
+			return false
+		}
+	}
+	if (Array.isArray(condition.mime)) {
+		const mime = String((node && node.mime) || '').toLowerCase()
+		const matches = condition.mime.some((entry) => {
+			const wanted = String(entry).toLowerCase()
+			if (wanted.endsWith('/*') || wanted.endsWith('/')) {
+				return mime.startsWith(wanted.replace(/\*$/, ''))
+			}
+			return mime === wanted
+		})
+		if (!matches) {
+			return false
+		}
+	}
+	return true
+}

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -219,3 +219,143 @@ export function sortNodesByColumn(nodes, column, ascending, rowData = null, isFo
 		return String(left).localeCompare(String(right)) * direction
 	})
 }
+
+/**
+ * Whether a cell value counts as filled in.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @return {boolean} False for nothing, an empty string or an empty list.
+ */
+function isFilled(value) {
+	if (value === null || value === undefined || value === '') {
+		return false
+	}
+	return !(Array.isArray(value) && value.length === 0)
+}
+
+/**
+ * The single value a node is grouped under, as a string key: a list groups
+ * under its first entry, an object under its label, title, name or id.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The cell value.
+ * @return {(string|null)} The group key, or null when nothing is filled in.
+ */
+function groupKeyOf(value) {
+	const first = Array.isArray(value) ? value[0] : value
+	if (!isFilled(first)) {
+		return null
+	}
+	if (typeof first === 'object') {
+		const label = first.label ?? first.title ?? first.name ?? first.id
+		return isFilled(label) ? String(label) : null
+	}
+	return String(first)
+}
+
+/**
+ * The values a node carries in a column, as strings, for counting and
+ * filtering: every entry of a list, the one value otherwise.
+ *
+ * @param {object} column A resolved column.
+ * @param {object} node The node.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {string[]} The values, deduplicated.
+ */
+function facetValuesOf(column, node, rowData) {
+	const value = fileColumnValue(column, node, rowData)
+	const entries = Array.isArray(value) ? value : [value]
+	const out = []
+	entries.forEach((entry) => {
+		const key = groupKeyOf(entry)
+		if (key !== null && !out.includes(key)) {
+			out.push(key)
+		}
+	})
+	return out
+}
+
+/**
+ * Group nodes on a column's value, in the order each value is first met.
+ * Nodes with no value come last, in one group whose value is null.
+ *
+ * @param {Array<object>} nodes The nodes, already in display order.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: (string|null), nodes: Array<object>}>} The groups.
+ */
+export function groupNodes(nodes, column, rowData = null) {
+	const groups = []
+	const byKey = new Map()
+	const empty = { value: null, nodes: [] }
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		const key = column ? groupKeyOf(fileColumnValue(column, node, rowData)) : null
+		if (key === null) {
+			empty.nodes.push(node)
+			return
+		}
+		if (!byKey.has(key)) {
+			const group = { value: key, nodes: [] }
+			byKey.set(key, group)
+			groups.push(group)
+		}
+		byKey.get(key).nodes.push(node)
+	})
+	if (empty.nodes.length > 0) {
+		groups.push(empty)
+	}
+	return groups
+}
+
+/**
+ * The values in use in a column across the nodes, with how many nodes carry
+ * each; a list counts once per entry. Most used first, then in first-seen
+ * order.
+ *
+ * @param {Array<object>} nodes The nodes.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: string, count: number}>} The values and counts.
+ */
+export function facetCounts(nodes, column, rowData = null) {
+	const counts = []
+	const byValue = new Map()
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		facetValuesOf(column, node, rowData).forEach((value) => {
+			if (!byValue.has(value)) {
+				const entry = { value, count: 0 }
+				byValue.set(value, entry)
+				counts.push(entry)
+			}
+			byValue.get(value).count += 1
+		})
+	})
+	return counts
+		.map((entry, index) => ({ entry, index }))
+		.sort((a, b) => (b.entry.count - a.entry.count) || (a.index - b.index))
+		.map(({ entry }) => entry)
+}
+
+/**
+ * Whether a node passes the chosen facet values: within one facet any chosen
+ * value will do, and every facet with a choice must pass. A facet with
+ * nothing chosen does not filter.
+ *
+ * @param {object} node The node.
+ * @param {object} selections Chosen values by column key.
+ * @param {object} columnsByKey Resolved columns by key.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {boolean} True when the node stays in the list.
+ */
+export function nodeMatchesFacets(node, selections, columnsByKey, rowData = null) {
+	return Object.entries(selections || {}).every(([key, chosen]) => {
+		if (!Array.isArray(chosen) || chosen.length === 0) {
+			return true
+		}
+		const column = columnsByKey && columnsByKey[key]
+		if (!column) {
+			return true
+		}
+		const values = facetValuesOf(column, node, rowData)
+		return chosen.some((value) => values.includes(value))
+	})
+}

package/src/components/CnFormPage/CnFormPage.vue

@@ -116,6 +116,19 @@
 			v-if="!submitted || mode !== 'public'"
 			class="cn-form-page__form"
 			@submit.prevent="submit">
+			<!-- Spam protection: a field no person sees or reaches. A filled one
+			     means a bot; the submit then sends nothing (see `honeypot`). -->
+			<div v-if="honeypot" class="cn-form-page__honeypot" aria-hidden="true">
+				<label :for="`cn-form-page-hp-${honeypot}`">{{ t('nextcloud-vue', 'Leave this field empty') }}</label>
+				<input
+					:id="`cn-form-page-hp-${honeypot}`"
+					v-model="honeypotValue"
+					:name="honeypot"
+					type="text"
+					tabindex="-1"
+					autocomplete="off"
+					data-testid="cn-form-page-honeypot">
+			</div>
 			<!-- Paste to fill: only where it may be used (see smartPasteAvailable). -->
 			<div v-if="smartPasteAvailable" class="cn-form-page__smart-paste">
 				<NcButton type="button" data-testid="cn-form-page-smart-paste" @click="smartPasteOpen = true">
@@ -610,6 +623,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Name of a honeypot field for a form anonymous visitors fill in.
+		 * The field is rendered out of sight and out of the tab order; when
+		 * it is filled, submit sends nothing and shows the normal success,
+		 * so a bot learns nothing. Empty (default): no honeypot.
+		 */
+		honeypot: {
+			type: String,
+			default: '',
+		},
+
 		/** HTTP method for endpoint mode. POST | PUT | PATCH. */
 		submitMethod: {
 			type: String,
@@ -748,6 +772,8 @@ export default {
 			summaryKeys: [],
 			/** Per-field validation error messages, keyed by field.key. */
 			fieldErrors: {},
+			/** What a bot typed into the honeypot field; stays empty for a person. */
+			honeypotValue: '',
 			/**
 			 * Cache of resolved `endpoint`/`source` visibleWhen outcomes,
 			 * keyed by field.key. Resolved ONCE in `mounted()` — see the
@@ -1783,6 +1809,11 @@ export default {
 			}
 
 			this.lastError = null
+			if (this.honeypot && this.honeypotValue !== '') {
+				// A bot filled the field no person sees: send nothing, look done.
+				this.submitted = true
+				return
+			}
 			this.submitting = true
 			try {
 				if (this.submitEndpoint) {
@@ -1808,6 +1839,9 @@ export default {
 				// describes the transport ("Request failed with status code 400")
 				// and leaves the user to guess which field it meant.
 				this.lastError = serverErrorMessage(err)
+				// A refusal that names its fields (`findings[]`, as OpenRegister's
+				// form destination check answers 422) is marked on each field.
+				this.showServerFindings(err)
 				/**
 				 * Submit failure event. Payload is the thrown error / rejected reason.
 				 *
@@ -1820,6 +1854,45 @@ export default {
 			}
 		},
 
+		/**
+		 * Put each finding of a refused submit on its field.
+		 *
+		 * Reads `response.data.findings[]`, each `{ field?, property, message }`,
+		 * and marks the field whose key is the finding's `field`, or else its
+		 * `property`. Findings on no field of this form stay in the general
+		 * error above the form. Nothing happens for an answer without findings.
+		 *
+		 * @param {object} err The rejected request.
+		 * @return {void}
+		 */
+		showServerFindings(err) {
+			const findings = err?.response?.data?.findings
+			if (!Array.isArray(findings) || findings.length === 0) {
+				return
+			}
+			const keys = new Set(this.fields.map((f) => f && f.key))
+			const marked = []
+			for (const finding of findings) {
+				const key = finding && (finding.field || finding.property)
+				if (!key || !keys.has(key) || this.fieldErrors[key]) {
+					continue
+				}
+				this.fieldErrors[key] = String(finding.message || t('nextcloud-vue', 'This answer was refused.'))
+				marked.push(key)
+			}
+			if (marked.length === 0) {
+				return
+			}
+			this.summaryKeys = this.fields.map((f) => f.key).filter((key) => marked.includes(key))
+			if (this.hasSteps) {
+				const stepIndex = this.steps.findIndex((step) => this.stepFields(step).some((f) => f.key === this.summaryKeys[0]))
+				if (stepIndex >= 0) {
+					this.currentStepIndex = stepIndex
+				}
+			}
+			this.focusFirstError(this.summaryKeys[0])
+		},
+
 		async submitViaEndpoint() {
 			const method = (this.submitMethod || 'POST').toLowerCase()
 			const url = resolveParams(this.submitEndpoint, this.$route?.params || {})
@@ -1843,6 +1916,14 @@ export default {
 </script>
 
 <style>
+.cn-form-page__honeypot {
+	position: absolute;
+	left: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
 .cn-form-page {
 	display: flex;
 	flex-direction: column;

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -263,6 +263,31 @@
 					@update:activeIndex="onQuickFilterChange"
 					@update:selectedIndices="onQuickFilterMultiChange" />
 			</template>
+			<!-- Board look, `filterMenu` on a page with no filter sidebar: the
+			     board's Filter button, a menu of each enum column's values as
+			     toggleable filters. -->
+			<template v-if="boardFilterMenu" #filter-menu>
+				<NcActions
+					class="cn-actions-bar__filter-menu"
+					variant="secondary"
+					:forceMenu="true"
+					:menuName="t('nextcloud-vue', 'Filter')"
+					data-testid="cn-index-filter-menu">
+					<template #icon>
+						<Tune :size="16" />
+					</template>
+					<template v-for="field in filterableFields" :key="field.key">
+						<NcActionCaption :name="field.label" />
+						<NcActionCheckbox
+							v-for="val in field.values"
+							:key="`${field.key}-${val}`"
+							:modelValue="isFilterActive(field.key, val)"
+							@update:modelValue="toggleFilter(field.key, val)">
+							{{ val }}
+						</NcActionCheckbox>
+					</template>
+				</NcActions>
+			</template>
 		</CnActionsBar>
 
 		<!-- Quick edit: a few fields of one row, over the list, with the list
@@ -625,10 +650,10 @@
 					     the column menu lists every governed column as a visibility
 					     checkbox — compact, in-table alternatives to the sidebar. -->
 					<template
-						v-if="(filterMenu && filterableFields.length) || (columnMenu && governedColumns.length)"
+						v-if="(showHeaderFilterMenu) || (columnMenu && governedColumns.length)"
 						#actions-header>
 						<NcActions
-							v-if="filterMenu && filterableFields.length"
+							v-if="showHeaderFilterMenu"
 							:forceMenu="true"
 							:aria-label="t('nextcloud-vue', 'Filter')">
 							<template #icon>
@@ -968,6 +993,7 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Export from 'vue-material-design-icons/Export.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import Tune from 'vue-material-design-icons/Tune.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
@@ -1275,6 +1301,7 @@ export default {
 		DatabaseSearch,
 		Export,
 		FilterOutline,
+		Tune,
 		ViewColumnOutline,
 		NcCheckboxRadioSwitch,
 		CnPageHeader,
@@ -1456,7 +1483,6 @@ export default {
 			default: true,
 		},
 
-		// eslint-disable-next-line vue/no-unused-properties
 		/**
 		 * Draw this page in the `board` look (or `nextcloud`) whatever the app
 		 * does. Empty follows the `cnLook` CnAppRoot provides. Manifest key
@@ -1607,7 +1633,10 @@ export default {
 		 * unchanged. Under the board look a tab with `activeLabel` ("Pipeline:
 		 * Sales") adds a removable chip with that text to the Active line and
 		 * counts on the Filter badge while it is selected; removing the chip
-		 * goes back to the default tab.
+		 * goes back to the default tab. A tab can say `empty: "field"` (or a
+		 * list of fields) for the rows where the field has no value, and
+		 * `notEmpty` for the rows where it has one: it reads as the filter
+		 * `{ field: { isnull: true } }`.
 		 */
 		quickFilters: {
 			type: Array,
@@ -2892,6 +2921,8 @@ export default {
 		 * Show a filter menu (funnel button) in the table header, above the
 		 * row-actions column. Its menu lists every enum/badge column's values as
 		 * toggleable facet filters — a compact alternative to the facet sidebar.
+		 * Under the board look, on a page with no filter sidebar, it is the
+		 * toolbar's labelled Filter button instead (row 1, before the view switch).
 		 * Fed from the manifest as `pages[].config.filterMenu`.
 		 */
 		filterMenu: {
@@ -5606,6 +5637,27 @@ export default {
 			return !!this.resolvedSidebar.enabled && this.resolvedSidebar.show !== false
 		},
 
+		/**
+		 * Whether the board toolbar draws the Filter button as a menu: the
+		 * board look, `filterMenu` on, something to filter by, and no filter
+		 * sidebar (whose toggle is that button otherwise).
+		 *
+		 * @return {boolean}
+		 */
+		boardFilterMenu() {
+			return this.isBoardLook && this.filterMenu && !this.hasSidebar && this.filterableFields.length > 0
+		},
+
+		/**
+		 * Whether the funnel menu sits in the table header: `filterMenu` with
+		 * values to offer, unless the toolbar's Filter button is that menu.
+		 *
+		 * @return {boolean}
+		 */
+		showHeaderFilterMenu() {
+			return this.filterMenu && this.filterableFields.length > 0 && !this.boardFilterMenu
+		},
+
 		/** Search props forwarded to the embedded CnIndexSidebar (defaults applied per CnIndexSidebar). */
 		sidebarSearchProps() {
 			return (this.sidebar && this.sidebar.search) || {}

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -270,7 +270,7 @@ import Pin from 'vue-material-design-icons/Pin.vue'
 import PinOutline from 'vue-material-design-icons/PinOutline.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
 import { columnsFromSchema, filtersFromSchema } from '../../utils/schema.js'
 import { CnDateRangePicker, DEFAULT_DATE_RANGE_PRESETS } from '../CnDateRangePicker/index.js'
@@ -867,12 +867,12 @@ export default {
 		 * @param {object} filter Filter object
 		 */
 		getFilterOptions(filter) {
-			const facet = this.facetData[filter.key]
-			if (facet?.values?.length > 0) {
-				return facet.values.map((v) => ({
-					id: v.value,
-					label: facetOptionLabel(v),
-				}))
+			const live = facetOptions(
+				this.facetData[filter.key],
+				(count) => t('nextcloud-vue', 'No value ({count})', { count }),
+			)
+			if (live !== null) {
+				return live
 			}
 			// A reference picker's rows come from another list, and neither a
 			// schema enum nor a facet bucket can carry them.

package/src/components/CnNextStepCard/CnNextStepWidget.vue

@@ -21,7 +21,7 @@ import { resolveNextStep } from '../../utils/detailActionModel.js'
  * Renders CnNextStepCard for the bound record's stage from
  * `content: { field?, stages: { <stage>: { title?, checklist, after? } } }`.
  * The checklist only: the page's own primary button stays where the page
- * puts it. Resolved by its registry key, not exported.
+ * puts it. Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnNextStepWidget',

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,8 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:fitWidth="fitWidthActive"
+						:fixedLayout="fixedLayoutActive"
 						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
@@ -173,6 +175,8 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:fitWidth="fitWidthActive"
+					:fixedLayout="fixedLayoutActive"
 					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
@@ -448,6 +452,15 @@ export default {
 			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,
 			/**
@@ -480,6 +493,27 @@ export default {
 	},
 
 	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.
@@ -619,7 +653,7 @@ export default {
 				// `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']) {
+				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]
 					}
@@ -1165,6 +1199,12 @@ export default {
 	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 —
@@ -1203,6 +1243,9 @@ export default {
 		if (this._fitObserver) {
 			this._fitObserver.disconnect()
 		}
+		if (this._widthObserver) {
+			this._widthObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -1277,7 +1320,10 @@ export default {
 				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.
@@ -1291,6 +1337,27 @@ export default {
 			}
 		},
 
+		/**
+		 * 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