@conduction/nextcloud-vue 2.101.0 → 2.103.0

package/src/components/CnMenuWidget/CnMenuWidget.vue

@@ -239,6 +239,11 @@ export default {
 		CnMenuItemIcon,
 	},
 
+	inject: {
+		/** Host translate function provided by CnAppRoot, for the item labels. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Persisted widget content `{items, style, orientation, showIcons,
@@ -288,7 +293,26 @@ export default {
 		 */
 		items() {
 			const arr = this.content?.items
-			return Array.isArray(arr) ? arr : []
+			if (!Array.isArray(arr)) {
+				return []
+			}
+			// Labels are manifest strings: they go through the app's translate,
+			// children included, so "Case types" reads "Zaaktypen" (DqCatalogus).
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			const translated = (list) => list.map((item) => {
+				if (!item || typeof item !== 'object') {
+					return item
+				}
+				const out = { ...item }
+				if (typeof item.label === 'string' && item.label !== '') {
+					out.label = translate(item.label)
+				}
+				if (Array.isArray(item.children)) {
+					out.children = translated(item.children)
+				}
+				return out
+			})
+			return translated(arr)
 		},
 
 		/**

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -1385,7 +1385,8 @@ export default {
 		 * is the budget). Measures the cell's remaining height below the table
 		 * top, reserves room for the "View all" footer, and derives the row
 		 * budget from the first rendered row's height. No-ops (fitRows null =
-		 * render all fetched rows) outside a fixed-height cell.
+		 * render all fetched rows) outside a fixed-height cell and inside a
+		 * tab panel, unless the content sets `fit: true`.
 		 *
 		 * @return {void}
 		 */
@@ -1407,6 +1408,14 @@ export default {
 				this.fitRows = null
 				return
 			}
+			// A list inside a tab panel does not own the cell, as on a
+			// dashboard: it renders every fetched row unless the content asks
+			// for the fit with `fit: true`.
+			const panel = this.$el.closest('[role="tabpanel"]')
+			if (panel && cell.contains(panel) && !(this.content && this.content.fit === true)) {
+				this.fitRows = null
+				return
+			}
 			const table = this.$el.querySelector('.cn-object-list-widget__table table')
 			if (!table) {
 				return

package/src/components/CnQuickFilterBar/CnQuickFilterBar.md

@@ -59,6 +59,7 @@ In `manifest.json` (the usual entry-point — CnIndexPage mounts the bar for you
 - `selectLabel` (String, default `'Filter'`) — accessible label / placeholder for the dropdown control.
 - `placeholder` (String) — placeholder text for the dropdown (falls back to `selectLabel`).
 - `maxVisible` (Number, default `0`) — chips mode only: how many pills render inline before the rest move behind one more chip, a `⋯` pill that opens a small panel of the hidden lenses (also as chips). `0` renders every tab. The visible set is the first `maxVisible` entries of `tabs`, so their declared order decides what stays in the strip; an active hidden tab moves its label and fill onto that chip. Manifest: `config.quickFilterMaxVisible`.
+- `fit` (Boolean, default `false`) — chips mode only: show as many chips as the bar's own width holds and move the rest behind the overflow chip, measured again when the width, the tabs or the counts change. The bar takes the room its parent gives it; CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what the Filter button and the view switch leave on their row. With `maxVisible` too, the smaller of the two wins.
 - `counts` (Object or Array, default `null`): how many records each tab matches, keyed by tab index. A tab with a number shows it after its label. CnIndexPage fills this for tabs that set `showCount`.
 
 ### Events

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -24,8 +24,28 @@
 	</div>
 	<!-- Chips mode (default): the clickable tab strip. -->
 	<div v-else
+		ref="chipsRoot"
 		class="cn-quick-filter-bar"
-		:class="{ 'cn-quick-filter-bar--inline': inline }">
+		:class="{ 'cn-quick-filter-bar--inline': inline, 'cn-quick-filter-bar--fit': fit }">
+		<!-- With `fit`: an invisible copy of every chip and the overflow chip,
+		     measured to work out how many chips the bar's width holds. -->
+		<div v-if="fit"
+			ref="measure"
+			class="cn-quick-filter-bar__measure"
+			aria-hidden="true">
+			<span v-for="entry in entries"
+				:key="'m:' + entry.tab.label + ':' + entry.index"
+				class="cn-quick-filter-bar__tab"
+				:class="{ 'cn-quick-filter-bar__tab--active': isChipActive(entry.index) }"
+				data-measure="chip">
+				<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
+				<span v-if="countOf(entry) !== null" class="cn-quick-filter-bar__count">{{ ' ' + countOf(entry) }}</span>
+			</span>
+			<span class="cn-quick-filter-bar__tab cn-quick-filter-bar__more" data-measure="more">
+				<span v-if="overflowLabel" class="cn-quick-filter-bar__label">{{ overflowLabel }}</span>
+				<DotsHorizontal :size="16" class="cn-quick-filter-bar__icon" />
+			</span>
+		</div>
 		<!-- The tablist holds ONLY tabs: the overflow chip is a sibling, not a
 		     child, because a role="tablist" may not contain a menu button. -->
 		<!-- Board look: the tabs are chips, pressed buttons in a group, not a
@@ -266,6 +286,19 @@ export default {
 			type: [Object, Array],
 			default: null,
 		},
+
+		/**
+		 * Chips mode only: show as many chips as the bar's own width holds and
+		 * move the rest into the overflow chip, measured again whenever the
+		 * width, the tabs or the counts change. The bar takes the room it is
+		 * given (CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what
+		 * the Filter button and the view switch leave on their row). With
+		 * `maxVisible` too, the smaller of the two wins.
+		 */
+		fit: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['update:active-index', 'update:selected-indices'],
@@ -274,6 +307,8 @@ export default {
 		return {
 			/** Whether the overflow chip's panel is open. */
 			moreOpen: false,
+			/** With `fit`: how many chips the width holds; null before the first measure. */
+			fitCount: null,
 		}
 	},
 
@@ -303,10 +338,24 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		visibleEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return this.entries
 			}
-			return this.entries.slice(0, this.maxVisible)
+			return this.entries.slice(0, limit)
+		},
+
+		/**
+		 * How many chips render: `maxVisible`, and with `fit` no more than the
+		 * width holds; 0 for no limit.
+		 *
+		 * @return {number}
+		 */
+		effectiveMax() {
+			if (!this.fit || this.fitCount === null) {
+				return this.maxVisible
+			}
+			return this.maxVisible ? Math.min(this.maxVisible, this.fitCount) : this.fitCount
 		},
 
 		/**
@@ -316,10 +365,11 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		overflowEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return []
 			}
-			return this.entries.slice(this.maxVisible)
+			return this.entries.slice(limit)
 		},
 
 		/**
@@ -399,7 +449,79 @@ export default {
 		},
 	},
 
+	watch: {
+		tabs() {
+			this.scheduleFit()
+		},
+
+		counts: {
+			deep: true,
+			handler() {
+				this.scheduleFit()
+			},
+		},
+	},
+
+	mounted() {
+		if (this.fit && typeof ResizeObserver === 'function' && this.$refs.chipsRoot) {
+			this.fitObserver = new ResizeObserver(() => this.measureFit())
+			this.fitObserver.observe(this.$refs.chipsRoot)
+		}
+		this.scheduleFit()
+	},
+
+	beforeUnmount() {
+		if (this.fitObserver) {
+			this.fitObserver.disconnect()
+			this.fitObserver = null
+		}
+	},
+
 	methods: {
+		/** Measure the fit after the next render. */
+		scheduleFit() {
+			if (this.fit) {
+				this.$nextTick(() => this.measureFit())
+			}
+		},
+
+		/**
+		 * Work out how many chips the bar's width holds, from the invisible
+		 * copy: every chip that fits, and when not all do, room left for the
+		 * overflow chip. At least one chip always shows.
+		 */
+		measureFit() {
+			const box = this.$refs.measure
+			const root = this.$refs.chipsRoot
+			if (!this.fit || !box || !root) {
+				return
+			}
+			const available = root.clientWidth
+			const chips = [...box.querySelectorAll('[data-measure="chip"]')].map((el) => el.offsetWidth)
+			const more = box.querySelector('[data-measure="more"]')
+			const moreWidth = more ? more.offsetWidth : 0
+			const gap = parseFloat(getComputedStyle(box).columnGap) || 8
+			if (available <= 0 || chips.length === 0) {
+				this.fitCount = null
+				return
+			}
+			const total = chips.reduce((sum, width) => sum + width, 0) + gap * (chips.length - 1)
+			if (total <= available) {
+				this.fitCount = null
+				return
+			}
+			let used = moreWidth
+			let count = 0
+			for (const width of chips) {
+				if (used + gap + width > available) {
+					break
+				}
+				used += gap + width
+				count++
+			}
+			this.fitCount = Math.max(1, count)
+		},
+
 		/**
 		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
 		 * such as "Mine" reads in the user's language.
@@ -531,6 +653,38 @@ export default {
 /* Inline variant — bare strip for embedding inside another bar (e.g. the
    CnActionsBar #filters slot), so it reads as a control beside the view toggle
    rather than a separate bordered row. */
+/* With `fit`: one line, as wide as it is given; the chips it cannot hold
+   are in the overflow chip. The measuring copy takes no room and is never
+   seen or read. */
+.cn-quick-filter-bar--fit {
+	position: relative;
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar--fit .cn-quick-filter-bar__tabs {
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar__measure {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	display: flex;
+	gap: 8px;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+.cn-quick-filter-bar__measure > * {
+	flex: none;
+}
+
 .cn-quick-filter-bar--inline {
 	padding: 0;
 	border-bottom: none;

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -201,13 +201,38 @@
 				</span>
 			</li>
 		</ul>
+		<!-- `footerAction`: one action under the list, also under the empty
+		     text ("Beroep registreren"). With `disabledWhen` it greys out and
+		     says why (`disabledReason`: "Kan zodra de beslissing is
+		     verzonden"). -->
+		<div
+			v-if="footerAction && !error"
+			class="cn-record-list__footer"
+			data-testid="cn-record-list-footer">
+			<NcButton
+				variant="secondary"
+				:disabled="footerDisabled"
+				:aria-describedby="footerDisabled && footerAction.reason ? footerReasonId : null"
+				data-testid="cn-record-list-footer-action"
+				@click="runFooterAction">
+				<template v-if="footerAction.icon" #icon>
+					<CnIcon :name="footerAction.icon" :size="16" />
+				</template>
+				{{ footerAction.label }}
+			</NcButton>
+			<span
+				v-if="footerDisabled && footerAction.reason"
+				:id="footerReasonId"
+				class="cn-record-list__footer-reason"
+				data-testid="cn-record-list-footer-reason">{{ footerAction.reason }}</span>
+		</div>
 	</div>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -224,8 +249,12 @@ import { lensUnavailableText, readLensReports } from '../../utils/lensAvailabili
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { evaluateVisibleWhen } from '../../utils/visibleWhen.js'
 
 const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
+
+/** Gives each list's footer reason its own element id. */
+let footerSeq = 0
 const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards', 'notice']
 
 /** The tones a `notice` list takes. */
@@ -279,7 +308,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { ChevronRight, CnIcon, CnStatusBadge, NcLoadingIcon },
+	components: { ChevronRight, CnIcon, CnStatusBadge, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -314,6 +343,10 @@ export default {
 		 * `presentation: "notice"` draws the rows as sentences in one box toned by
 		 * `variant` (`info`, `warning` or `error`), after an optional `lead`
 		 * (`{total}` filled in).
+		 * `footerAction` (`{ label, icon?, type, ..., disabledWhen?,
+		 * disabledReason? }`) ends the card with one action, also under the
+		 * empty text; while the visibleWhen condition `disabledWhen` holds the
+		 * button is disabled and `disabledReason` shows under it.
 		 *
 		 * @type {object}
 		 */
@@ -367,10 +400,48 @@ export default {
 			error: false,
 			/** Personal-lens reports (`@self.lenses`) of the latest response. */
 			lenses: {},
+			/** Whether `footerAction.disabledWhen` holds. */
+			footerDisabled: false,
+			footerReasonId: `cn-record-list-footer-reason-${++footerSeq}`,
 		}
 	},
 
 	computed: {
+		/**
+		 * The action under the list (`footerAction`: `{ label, icon?, type,
+		 * ..., disabledWhen?, disabledReason? }`), labels through the host
+		 * translate, or null without a label.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {{label: string, icon: string, reason: string, action: object}|null}
+		 */
+		footerAction() {
+			const action = this.content?.footerAction
+			if (!action || typeof action !== 'object' || typeof action.label !== 'string' || action.label === '') {
+				return null
+			}
+			return {
+				label: this.translate(action.label),
+				icon: typeof action.icon === 'string' ? action.icon : '',
+				reason: typeof action.disabledReason === 'string' && action.disabledReason !== '' ? this.translate(action.disabledReason) : '',
+				action,
+			}
+		},
+
+		/**
+		 * What `footerAction.disabledWhen` depends on, so it is evaluated again
+		 * when the condition, the record or the workspace changes.
+		 *
+		 * @return {string}
+		 */
+		footerDisabledKey() {
+			const cond = this.content?.footerAction?.disabledWhen
+			if (!cond) {
+				return ''
+			}
+			return JSON.stringify({ cond, object: this.tokenCtx.object, workspace: this.tokenCtx.workspace, total: this.total })
+		},
+
 		/** @return {string} `rows`, `feed`, `inline` or `cards`. */
 		/**
 		 * The tone of a `notice` list (`content.variant`): info, warning or error.
@@ -595,6 +666,13 @@ export default {
 			this.fetchRows()
 		},
 
+		footerDisabledKey: {
+			immediate: true,
+			handler() {
+				this.evaluateFooterDisabled()
+			},
+		},
+
 		endpointKey() {
 			this.fetchRows()
 		},
@@ -621,6 +699,47 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * Settle whether the footer action is disabled: `disabledWhen` is a
+		 * visibleWhen condition read against the page's record (`field`), the
+		 * workspace, an endpoint or a source; `total` is the list's total.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {Promise<void>}
+		 */
+		async evaluateFooterDisabled() {
+			const cond = this.content?.footerAction?.disabledWhen
+			if (!cond) {
+				this.footerDisabled = false
+				return
+			}
+			const ctx = { ...this.tokenCtx, object: { ...(this.tokenCtx.object || {}), total: this.total } }
+			const key = this.footerDisabledKey
+			const disabled = await evaluateVisibleWhen(cond, ctx)
+			if (key === this.footerDisabledKey) {
+				this.footerDisabled = disabled
+			}
+		},
+
+		/**
+		 * Run the footer action through the page's dispatcher, with the page's
+		 * record as the token context.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {unknown} What the dispatcher returns.
+		 */
+		runFooterAction() {
+			const declared = this.footerAction?.action
+			if (!declared || this.footerDisabled) {
+				return undefined
+			}
+			const { disabledWhen, disabledReason, ...action } = declared
+			if (typeof this.cnDispatchAction === 'function') {
+				return this.cnDispatchAction(action)
+			}
+			return dispatchAction(action, { router: this.$router || null, tokenCtx: this.tokenCtx, source: { register: this.content?.register, schema: this.content?.schema } })
+		},
+
 		/**
 		 * A row's `bar`: its value, the maximum it is measured against (the
 		 * row's `maxField`, else the largest row), the filled share and
@@ -1196,6 +1315,19 @@ export default {
 	padding: 0;
 }
 
+.cn-record-list__footer {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 6px;
+	margin-top: 10px;
+}
+
+.cn-record-list__footer-reason {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-record-list__empty,
 .cn-record-list__error {
 	color: var(--color-text-maxcontrast);