@conduction/nextcloud-vue 2.61.0 → 2.63.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -282,9 +282,9 @@
 					<NcEmptyContent
 						:name="installAppLabel(missingRequiredApp(item))"
 						:description="t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.')"
-						class="cn-dashboard-page__requires-app">
+						class="cn-dashboard-page__requires-app cn-requires-app">
 						<template #icon>
-							<Download :size="32" />
+							<Download :size="24" />
 						</template>
 						<template #action>
 							<NcButton
@@ -2752,8 +2752,12 @@ export default {
 		 * which for an attention card is its `title` when it has no `text`.
 		 *
 		 * @param {object} def Widget definition.
+		 * `layout` is returned so the page can tell an attention card from a
+		 * plain banner: only the former keeps its cell when its check fails.
+		 *
 		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-an-attention-card-with-a-title-keeps-its-cell
-		 * @return {{ text: string, visibleWhen: (object|null) }}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+		 * @return {{ text: string, visibleWhen: (object|null), layout: string }}
 		 */
 		widgetDisplayConfig(def) {
 			const content = (def && typeof def.content === 'object' && def.content) || {}
@@ -2767,6 +2771,7 @@ export default {
 			return {
 				text: content.text || props.text || title || '',
 				visibleWhen: (def && def.visibleWhen) || content.visibleWhen || props.visibleWhen || null,
+				layout,
 			}
 		},
 
@@ -2776,15 +2781,22 @@ export default {
 		 * text at all — and must therefore surrender its grid cell in live
 		 * mode instead of leaving an empty card behind.
 		 *
+		 * One exception: an attention card whose `visibleWhen` request FAILED
+		 * keeps its cell, so the card can say it could not check. A collapsed
+		 * cell reads as "nothing needs attention", which a failed count does
+		 * not know. A count that was read and does not meet the condition
+		 * still collapses.
+		 *
 		 * @param {object} item Layout item.
 		 * @return {boolean} true when the cell must collapse.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		isCollapsedWidget(item) {
 			const def = this.getWidgetDef(item.widgetId)
 			if (!def || !def.type) {
 				return false
 			}
-			const { text, visibleWhen } = this.widgetDisplayConfig(def)
+			const { text, visibleWhen, layout } = this.widgetDisplayConfig(def)
 			if (this.isBannerDef(def) && text === '') {
 				return true
 			}
@@ -2792,6 +2804,9 @@ export default {
 				return false
 			}
 			const outcome = this.widgetConditionOutcome[item.widgetId]
+			if (outcome && outcome.failed === true && layout === 'attention' && this.isBannerDef(def)) {
+				return false
+			}
 			return !outcome || outcome.met !== true
 		},
 
@@ -2802,13 +2817,17 @@ export default {
 		 * Runs on created() and again whenever `widgets` changes (the
 		 * in-app editor mutates defs in place). Fail-safe like the banner
 		 * itself: any fetch/shape error counts as "not met", so a broken
-		 * predicate collapses the cell rather than breaking the page.
+		 * predicate collapses the cell rather than breaking the page. The
+		 * outcome of a failed read carries `failed: true` and the `reason`,
+		 * which `isCollapsedWidget` and CnBannerWidget use to show an
+		 * attention card's "Could not check" line instead of nothing.
 		 *
 		 * Flips `widgetConditionsSettled` when the initial round is done —
 		 * synchronously when there is nothing to evaluate, so a dashboard
 		 * without conditional widgets never waits.
 		 *
 		 * @return {Promise<void>}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateWidgetConditions() {
 			const conditional = (this.widgets || []).filter((def) => def && def.id && def.type
@@ -2830,12 +2849,17 @@ export default {
 			}
 			await Promise.all(conditional.map(async (def) => {
 				const cond = this.widgetDisplayConfig(def).visibleWhen
-				let outcome = { met: false, value: null }
+				let outcome
 				try {
 					const value = await readVisibleWhenValue(cond)
 					outcome = { met: compareVisibleWhen(value, cond.op || 'eq', cond.value), value }
-				} catch {
-					// fail-safe: hidden
+				} catch (error) {
+					// Fail-safe: not met. But the failure is kept, and said
+					// out loud: a failed count and "nothing to report" look
+					// the same on screen.
+					outcome = { met: false, value: null, failed: true, reason: typeof error?.message === 'string' ? error.message : String(error ?? '') }
+					// eslint-disable-next-line no-console
+					console.warn(`[CnDashboardPage] visibleWhen of widget "${def.id}" could not be evaluated:`, error?.message || error)
 				}
 				// A newer run owns the map now — a stale verdict (possibly for
 				// a def that no longer exists) must not overwrite its writes.

package/src/components/CnDataTable/CnColumnFilterPopover.vue

@@ -0,0 +1,524 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!-- SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl> -->
+<template>
+	<Teleport to="body" :disabled="!teleport">
+		<div
+			ref="panel"
+			class="cn-column-filter"
+			role="dialog"
+			:aria-labelledby="headingId"
+			:style="panelStyle"
+			data-testid="cn-column-filter"
+			@keydown.esc.stop.prevent="close"
+			@keydown.enter="onEnter">
+			<p :id="headingId" class="cn-column-filter__heading">
+				{{ headingText }}
+			</p>
+
+			<!-- enum and reference: a checkbox list of real inputs -->
+			<template v-if="def.kind === 'enum' || def.kind === 'reference'">
+				<label v-if="def.kind === 'reference'" class="cn-column-filter__field">
+					<span class="cn-column-filter__label">{{ searchLabel }}</span>
+					<input
+						v-model="query"
+						class="cn-column-filter__input"
+						type="search"
+						data-testid="cn-column-filter-search"
+						@input="onSearchInput">
+				</label>
+				<p v-if="def.kind === 'reference' && referenceLoading" class="cn-column-filter__hint" role="status">
+					{{ loadingLabel }}
+				</p>
+				<p v-else-if="def.kind === 'reference' && referenceError" class="cn-column-filter__hint" role="status">
+					{{ referenceError }}
+				</p>
+				<fieldset class="cn-column-filter__options">
+					<legend class="cn-column-filter__sr-only">
+						{{ headingText }}
+					</legend>
+					<label
+						v-for="option in listOptions"
+						:key="option.value"
+						class="cn-column-filter__option">
+						<input
+							type="checkbox"
+							:value="option.value"
+							:checked="draft.values.includes(option.value)"
+							data-testid="cn-column-filter-option"
+							@change="toggleValue(option.value)">
+						<span>{{ option.label }}</span>
+					</label>
+					<p v-if="listOptions.length === 0 && !referenceLoading" class="cn-column-filter__hint">
+						{{ noOptionsLabel }}
+					</p>
+				</fieldset>
+			</template>
+
+			<!-- boolean: yes, no, any -->
+			<fieldset v-else-if="def.kind === 'boolean'" class="cn-column-filter__options">
+				<legend class="cn-column-filter__sr-only">
+					{{ headingText }}
+				</legend>
+				<label v-for="option in booleanOptions" :key="option.value" class="cn-column-filter__option">
+					<input
+						type="radio"
+						:name="headingId + '-bool'"
+						:value="option.value"
+						:checked="draft.value === option.value"
+						data-testid="cn-column-filter-option"
+						@change="draft.value = option.value">
+					<span>{{ option.label }}</span>
+				</label>
+			</fieldset>
+
+			<!-- number and date: from and to -->
+			<div v-else-if="def.kind === 'number' || def.kind === 'date'" class="cn-column-filter__range">
+				<label class="cn-column-filter__field">
+					<span class="cn-column-filter__label">{{ fromLabel }}</span>
+					<input
+						v-model="draft.from"
+						class="cn-column-filter__input"
+						:type="def.kind === 'date' ? 'date' : 'number'"
+						data-testid="cn-column-filter-from">
+				</label>
+				<label class="cn-column-filter__field">
+					<span class="cn-column-filter__label">{{ toLabel }}</span>
+					<input
+						v-model="draft.to"
+						class="cn-column-filter__input"
+						:type="def.kind === 'date' ? 'date' : 'number'"
+						data-testid="cn-column-filter-to">
+				</label>
+			</div>
+
+			<!-- string: equals -->
+			<label v-else class="cn-column-filter__field">
+				<span class="cn-column-filter__label">{{ equalsLabel }}</span>
+				<input
+					v-model="draft.value"
+					class="cn-column-filter__input"
+					type="text"
+					data-testid="cn-column-filter-text">
+			</label>
+
+			<div class="cn-column-filter__actions">
+				<button
+					type="button"
+					class="cn-column-filter__button"
+					data-testid="cn-column-filter-clear"
+					@click="clear">
+					{{ clearLabel }}
+				</button>
+				<button
+					type="button"
+					class="cn-column-filter__button cn-column-filter__button--primary"
+					data-testid="cn-column-filter-apply"
+					@click="apply">
+					{{ applyLabel }}
+				</button>
+			</div>
+		</div>
+	</Teleport>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+
+let popoverSeq = 0
+
+/**
+ * CnColumnFilterPopover — the small panel a table header's filter button opens.
+ *
+ * Renders the control that fits the column: a checkbox list for an enum, yes,
+ * no or any for a boolean, from and to for a number or a date, a searchable
+ * list of referenced objects for a reference, and an equals box for text.
+ * Real inputs throughout, so every control works from the keyboard. Escape
+ * closes it and the host returns focus to the filter button.
+ *
+ * Internal to CnDataTable. It emits a state object; CnDataTable turns that
+ * into query parameters with `columnFilterParams`.
+ *
+ * @spec openspec/changes/table-header-sort-and-filter/specs/cn-data-table/spec.md#requirement-every-backed-column-filters-from-its-header
+ */
+export default {
+	name: 'CnColumnFilterPopover',
+
+	props: {
+		/** The filter definition from `columnFilterDef`. */
+		def: {
+			type: Object,
+			required: true,
+		},
+
+		/** The column's current state from `columnFilterState`. */
+		state: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The translated column label. */
+		label: {
+			type: String,
+			default: '',
+		},
+
+		/** The filter button's bounding rect, to place the panel under it. */
+		anchorRect: {
+			type: Object,
+			default: null,
+		},
+
+		/** Register slug a reference column's objects live in, when the column names none. */
+		register: {
+			type: String,
+			default: '',
+		},
+
+		/** Render into `<body>`, so a scrolling table cannot clip the panel. */
+		teleport: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ['apply', 'close'],
+
+	data() {
+		popoverSeq += 1
+		const s = this.state || {}
+		return {
+			headingId: 'cn-column-filter-' + popoverSeq,
+			draft: {
+				values: Array.isArray(s.values) ? [...s.values] : [],
+				value: s.value !== undefined && s.value !== null ? String(s.value) : '',
+				from: s.from || '',
+				to: s.to || '',
+			},
+
+			query: '',
+			referenceOptions: [],
+			referenceLabels: {},
+			referenceLoading: false,
+			referenceError: '',
+			searchTimer: null,
+		}
+	},
+
+	computed: {
+		headingText() {
+			return t('nextcloud-vue', 'Filter {column}', { column: this.label })
+		},
+
+		/**
+		 * The options a list filter shows. For a reference, the search results
+		 * plus any picked object that is not among them, so a selection never
+		 * disappears from view.
+		 *
+		 * @return {Array<{value: string, label: string}>}
+		 */
+		listOptions() {
+			if (this.def.kind !== 'reference') {
+				return this.def.options || []
+			}
+			const shown = new Set(this.referenceOptions.map((o) => o.value))
+			const picked = this.draft.values
+				.filter((v) => !shown.has(v))
+				.map((v) => ({ value: v, label: this.referenceLabels[v] || v }))
+			return [...picked, ...this.referenceOptions]
+		},
+
+		booleanOptions() {
+			return [
+				{ value: '', label: t('nextcloud-vue', 'Any') },
+				{ value: 'true', label: t('nextcloud-vue', 'Yes') },
+				{ value: 'false', label: t('nextcloud-vue', 'No') },
+			]
+		},
+
+		panelStyle() {
+			if (!this.teleport || !this.anchorRect) {
+				return {}
+			}
+			const width = 280
+			const viewport = typeof window !== 'undefined' ? window.innerWidth : 1024
+			const left = Math.max(8, Math.min(this.anchorRect.left, viewport - width - 8))
+			return { position: 'fixed', top: `${this.anchorRect.bottom + 4}px`, left: `${left}px`, width: `${width}px` }
+		},
+
+		searchLabel() {
+			return t('nextcloud-vue', 'Search')
+		},
+
+		loadingLabel() {
+			return t('nextcloud-vue', 'Loading…')
+		},
+
+		noOptionsLabel() {
+			return t('nextcloud-vue', 'Nothing to choose from here.')
+		},
+
+		fromLabel() {
+			return t('nextcloud-vue', 'From')
+		},
+
+		toLabel() {
+			return t('nextcloud-vue', 'To')
+		},
+
+		equalsLabel() {
+			return t('nextcloud-vue', 'Equals')
+		},
+
+		clearLabel() {
+			return t('nextcloud-vue', 'Clear')
+		},
+
+		applyLabel() {
+			return t('nextcloud-vue', 'Apply')
+		},
+	},
+
+	mounted() {
+		document.addEventListener('mousedown', this.onOutsideMouseDown, true)
+		if (this.def.kind === 'reference') {
+			this.loadReferenceOptions('')
+		}
+		this.$nextTick(() => {
+			const first = this.$refs.panel && this.$refs.panel.querySelector('input, button')
+			if (first && typeof first.focus === 'function') {
+				first.focus()
+			}
+		})
+	},
+
+	beforeUnmount() {
+		document.removeEventListener('mousedown', this.onOutsideMouseDown, true)
+		clearTimeout(this.searchTimer)
+	},
+
+	methods: {
+		toggleValue(value) {
+			this.draft.values = this.draft.values.includes(value)
+				? this.draft.values.filter((v) => v !== value)
+				: [...this.draft.values, value]
+		},
+
+		/**
+		 * The state this panel applies, in the shape `columnFilterParams` reads.
+		 *
+		 * @return {object}
+		 */
+		draftState() {
+			if (this.def.kind === 'enum' || this.def.kind === 'reference') {
+				return { values: [...this.draft.values] }
+			}
+			if (this.def.kind === 'number' || this.def.kind === 'date') {
+				return { from: this.draft.from, to: this.draft.to }
+			}
+			return { value: this.draft.value }
+		},
+
+		apply() {
+			/**
+			 * @event apply The person applied the filter.
+			 * @type {object} The column filter state.
+			 */
+			this.$emit('apply', this.draftState())
+		},
+
+		clear() {
+			this.$emit('apply', this.def.kind === 'enum' || this.def.kind === 'reference'
+				? { values: [] }
+				: (this.def.kind === 'number' || this.def.kind === 'date') ? { from: '', to: '' } : { value: '' })
+		},
+
+		close() {
+			/**
+			 * @event close The panel should close without applying.
+			 */
+			this.$emit('close')
+		},
+
+		onEnter(event) {
+			// Enter in a text, number or date box applies, like a form submit.
+			// On a checkbox or a button it keeps its own meaning.
+			const target = event && event.target
+			if (target && target.tagName === 'INPUT' && ['text', 'number', 'date', 'search'].includes(target.type)) {
+				event.preventDefault()
+				this.apply()
+			}
+		},
+
+		onOutsideMouseDown(event) {
+			const panel = this.$refs.panel
+			if (panel && event && event.target && !panel.contains(event.target)) {
+				this.close()
+			}
+		},
+
+		onSearchInput() {
+			clearTimeout(this.searchTimer)
+			this.searchTimer = setTimeout(() => this.loadReferenceOptions(this.query), 250)
+		},
+
+		/**
+		 * Search the referenced objects. The value is the object's uuid,
+		 * because that is what the server filters a reference on.
+		 *
+		 * @param {string} search The search term.
+		 * @return {Promise<void>}
+		 */
+		async loadReferenceOptions(search) {
+			const ref = this.def.reference || {}
+			const register = ref.register || this.register
+			if (!register || !ref.schema) {
+				this.referenceError = t('nextcloud-vue', 'This column cannot list its objects.')
+				return
+			}
+			this.referenceLoading = true
+			this.referenceError = ''
+			try {
+				const [{ default: axios }, { generateUrl }] = await Promise.all([
+					import('@nextcloud/axios'),
+					import('@nextcloud/router'),
+				])
+				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', {
+					register,
+					schema: String(ref.schema),
+				})
+				const params = { _limit: 50 }
+				if (search) {
+					params._search = search
+				}
+				const response = await axios.get(url, { params })
+				const rows = (response && response.data && (response.data.results || response.data)) || []
+				const list = Array.isArray(rows) ? rows : []
+				const options = list
+					.map((row) => {
+						const self = (row && row['@self']) || {}
+						const value = String(self.id || self.uuid || row.id || row.uuid || '')
+						const label = String((ref.labelField && row[ref.labelField]) || row.name || row.title || self.name || value)
+						return { value, label }
+					})
+					.filter((o) => o.value !== '')
+				this.referenceOptions = options
+				this.referenceLabels = { ...this.referenceLabels, ...Object.fromEntries(options.map((o) => [o.value, o.label])) }
+			} catch {
+				this.referenceOptions = []
+				this.referenceError = t('nextcloud-vue', 'The list could not load.')
+			} finally {
+				this.referenceLoading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-column-filter {
+	z-index: 10000;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	box-sizing: border-box;
+	max-height: 60vh;
+	overflow-y: auto;
+	padding: 12px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-large, 8px);
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	font-weight: normal;
+	text-align: start;
+}
+
+.cn-column-filter__heading {
+	margin: 0;
+	font-weight: bold;
+}
+
+.cn-column-filter__options {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.cn-column-filter__option {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 32px;
+	cursor: pointer;
+}
+
+.cn-column-filter__range {
+	display: flex;
+	gap: 8px;
+}
+
+.cn-column-filter__field {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.cn-column-filter__label {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-column-filter__input {
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0;
+}
+
+.cn-column-filter__hint {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-column-filter__actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+
+.cn-column-filter__button {
+	min-height: 34px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.cn-column-filter__button--primary {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+
+.cn-column-filter__button:focus-visible,
+.cn-column-filter__input:focus-visible,
+.cn-column-filter__option input:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-column-filter__sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+</style>

package/src/components/CnDataTable/CnDataTable.md

@@ -186,7 +186,7 @@ export default {
 | `includeColumns` | Array | `null` | Column keys to include (whitelist) in schema mode |
 | `sortKey` | String | `null` | Currently active sort column key (controlled) |
 | `sortOrder` | String | `'asc'` | Current sort direction: `'asc'` or `'desc'` |
-| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty |
+| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty. Priority badges show only when two or more rendered, sortable columns are sorted; a key whose column is not rendered or not sortable (such as a `_uuid` tie-break) still sorts, but is not counted or numbered |
 | `selectedIds` | Array | `[]` | Array of selected row IDs (controlled) |
 | `rowClass` | Function | `null` | `(row) => string` — CSS class(es) applied to each `<tr>` |
 | `rowClickToView` | Boolean | `false` | Emit `row-click` on a row-body click even while `selectable` (selection then via the checkbox column only) |
@@ -201,6 +201,9 @@ export default {
 | `hideHeader` | Boolean | `false` | Hide the column-header row (`<thead>`) — for compact dashboard list widgets that want a plain bordered-row list without column labels |
 | `fixedLayout` | Boolean | `false` | Switch to `table-layout: fixed` so each column's `width` is authoritative rather than a hint the browser may override from cell content. Long unbreakable values (a PHP FQCN, a UUID) then wrap inside their cell instead of widening the column or painting past it, and no single unsized column soaks up all remaining width. Size every column when using it — percentages summing to 100 are easiest to reason about |
 | `fillHeight` | Boolean | `false` | Fill the parent's height (a flex-column card / widget content area) so an optional `#footer` is pushed to the bottom instead of floating under a short list; the footer stays pinned via its sticky rule when the list overflows. No-op outside a height-constrained parent — opt-in |
+| `filterable` | Boolean | `false` | Show a filter button in every header whose column can filter: enum, boolean, text, number, date and reference columns backed by a schema property. A column opts out with `filterable: false`. Applying a filter emits `column-filter`; the host owns the state and passes it back as `activeFilters`. `CnIndexPage` turns it on by default. |
+| `activeFilters` | Object | `{}` | The active filter map, `{ paramKey: values[] }`: the same map the facet sidebar writes, so a header filter and a sidebar filter on one field show the same state. |
+| `filterRegister` | String | `''` | Register slug a reference column's filter searches in when the column names none. |
 
 ## Slots