@conduction/nextcloud-vue 2.56.0-beta.47 → 2.56.0-beta.49

package/l10n/en.json

@@ -1517,7 +1517,12 @@
     "Your account": "Your account",
     "Only for you. Colleagues keep their own settings.": "Only for you. Colleagues keep their own settings.",
     "Sections of the settings": "Sections of the settings",
-    "Changes are saved straight away": "Changes are saved straight away"
+    "Changes are saved straight away": "Changes are saved straight away",
+    "Change the schema for {type}": "Change the schema for {type}",
+    "Show all types": "Show all types",
+    "All types set up": "All types set up",
+    "Set up": "Set up",
+    "{configured} of {total} set up": "{configured} of {total} set up"
   },
   "plurals": {
     "{count} selected": [
@@ -1599,6 +1604,18 @@
     "{count} more filter": [
       "{count} more filter",
       "{count} more filters"
+    ],
+    "%n type": [
+      "%n type",
+      "%n types"
+    ],
+    "And %n more type in this group, set up.": [
+      "And %n more type in this group, set up.",
+      "And %n more types in this group, all set up."
+    ],
+    "And %n more type in this group.": [
+      "And %n more type in this group.",
+      "And %n more types in this group."
     ]
   }
 }

package/l10n/nl.json

@@ -1703,7 +1703,12 @@
     "Your account": "Uw account",
     "Only for you. Colleagues keep their own settings.": "Alleen voor jou. Collega's houden hun eigen instellingen.",
     "Sections of the settings": "Onderdelen van de instellingen",
-    "Changes are saved straight away": "Wijzigingen worden meteen bewaard"
+    "Changes are saved straight away": "Wijzigingen worden meteen bewaard",
+    "Change the schema for {type}": "Schema wijzigen voor {type}",
+    "Show all types": "Alle soorten tonen",
+    "All types set up": "Alle soorten ingesteld",
+    "Set up": "Ingesteld",
+    "{configured} of {total} set up": "{configured} van {total} ingesteld"
   },
   "plurals": {
     "{count} selected": [
@@ -1785,6 +1790,18 @@
     "{count} more filter": [
       "Nog {count} filter",
       "Nog {count} filters"
+    ],
+    "%n type": [
+      "%n soort",
+      "%n soorten"
+    ],
+    "And %n more type in this group, set up.": [
+      "En nog %n soort in deze groep, ingesteld.",
+      "En nog %n soorten in deze groep, allemaal ingesteld."
+    ],
+    "And %n more type in this group.": [
+      "En nog %n soort in deze groep.",
+      "En nog %n soorten in deze groep."
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.47",
+  "version": "2.56.0-beta.49",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsMenu/CnActionsMenu.vue

@@ -32,6 +32,8 @@
 			<template #icon>
 				<DotsHorizontal :size="20" />
 			</template>
+			<!-- @slot lead-items Items rendered at the very top of the menu, above Refresh: the tabs a board strip lists here instead of drawing them (CnTabsWidget). The caller owns any separator after them. -->
+			<slot name="lead-items" />
 			<!-- Stays open while refreshing; onRefreshClick closes the menu once the refresh settles. -->
 			<NcActionButton
 				v-if="showRefresh"
@@ -569,7 +571,7 @@ export default {
 			if (this.showRequestFeature) {
 				return true
 			}
-			if (this.hasPrimaryItems || this.$slots['primary-items']) {
+			if (this.hasPrimaryItems || this.$slots['primary-items'] || this.$slots['lead-items']) {
 				return true
 			}
 			return Boolean(this.$slots['action-items']) || Boolean(this.$slots && this.$slots['action-items'])

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -139,7 +139,7 @@
 			<template #footer>
 				<!-- @slot footer Replaces the default support/SLA footer inside the version card. -->
 				<slot name="footer">
-					<div v-if="showSupport" class="cn-support-info">
+					<div v-if="showSupport && !supportAtEnd" class="cn-support-info">
 						<h4>{{ supportTitle }}</h4>
 						<p>
 							{{ supportLine }}
@@ -185,6 +185,24 @@
 		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. With `tabs`, only while the first tab is open. -->
 		<slot v-if="!versionCardAtEnd && onFirstTab" />
 
+		<!-- `supportPosition: "end"`: the support lines as their own wide card,
+		     last on the page (board PqBeheer), not in the version card. -->
+		<CnSettingsSection
+			v-if="showSupport && supportAtEnd && onFirstTab"
+			class="cn-admin-settings-shell__support"
+			:name="supportTitle"
+			:wide="true"
+			data-testid="cn-admin-settings-support">
+			<p class="cn-admin-settings-shell__support-line">
+				{{ supportLine }}
+				<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a>
+			</p>
+			<p v-if="slaEmail" class="cn-admin-settings-shell__support-line">
+				{{ slaLine }}
+				<a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a>
+			</p>
+		</CnSettingsSection>
+
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
 			v-if="showSetup && setupWizardOpen"
@@ -216,6 +234,7 @@ import { normalizeLook, useLook } from '../../composables/useLook.js'
 import { ensureTranslations } from '../../l10n/index.js'
 import { buildFeatureRequestUrl } from '../../utils/forge.js'
 import { prefixUrl } from '../../utils/headers.js'
+import { CnSettingsSection } from '../CnSettingsSection/index.js'
 import { CnTab, CnTabs } from '../CnTabs/index.js'
 import { CnVersionInfoCard } from '../CnVersionInfoCard/index.js'
 
@@ -327,6 +346,7 @@ export default {
 		BookOpenVariant,
 		NcSettingsSection,
 		CnCredentials,
+		CnSettingsSection,
 		CnVersionInfoCard,
 		CnSetupWizard,
 		CnTab,
@@ -616,6 +636,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Where the support lines go: `card`, in the version card's footer (the
+		 * default), or `end`, as their own wide card after everything else on
+		 * the first tab (board PqBeheer).
+		 *
+		 * @spec openspec/changes/admin-shell-support-end/specs/settings-board-look/spec.md#requirement-support-can-be-its-own-card-at-the-end
+		 */
+		supportPosition: {
+			type: String,
+			default: 'card',
+			validator: (value) => ['card', 'end'].includes(value),
+		},
+
 		/** Support contact email. */
 		supportEmail: {
 			type: String,
@@ -723,6 +756,11 @@ export default {
 			return this.versionCardPosition === 'end'
 		},
 
+		/** @return {boolean} Whether the support lines are their own card at the end. */
+		supportAtEnd() {
+			return this.supportPosition === 'end'
+		},
+
 		/**
 		 * The crumbs that have a label.
 		 *

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -193,6 +193,8 @@
 		<template v-else>
 			<!-- The brand block in Nextcloud's own header (board look); teleported, renders nothing here. -->
 			<CnBrandBar v-if="brandInHeader" :brand="resolvedBrandBlock" @unavailable="headerMissing = true" />
+			<!-- The app's own line on the header's search field (board look); renders nothing here. -->
+			<CnHeaderSearchLabel v-if="headerSearchLabel" :label="headerSearchLabel" />
 			<!--
 			  @slot menu
 			  @description Left-rail navigation surface. Default:
@@ -713,6 +715,7 @@ import CnCommandPalette from '../CnCommandPalette/CnCommandPalette.vue'
 import CnCredentials from '../CnCredentials/CnCredentials.vue'
 import CnDependencyMissing from '../CnDependencyMissing/CnDependencyMissing.vue'
 import CnEnvironmentBanner from '../CnEnvironmentBanner/CnEnvironmentBanner.vue'
+import CnHeaderSearchLabel from '../CnHeaderSearchLabel/CnHeaderSearchLabel.vue'
 import CnNotificationPreferences from '../CnNotificationPreferences/CnNotificationPreferences.vue'
 import CnObjectSidebar from '../CnObjectSidebar/CnObjectSidebar.vue'
 import CnSetupWizard from '../CnSetupWizard/CnSetupWizard.vue'
@@ -819,6 +822,7 @@ export default {
 
 	components: {
 		CnBrandBar,
+		CnHeaderSearchLabel,
 		NcAppContent,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -2195,6 +2199,22 @@ export default {
 				&& this.resolvedBrandBlock.placement !== 'nav'
 		},
 
+		/**
+		 * The line on the search field in Nextcloud's header: the manifest's
+		 * `nav.searchPlaceholder`, translated, under the board look on a page
+		 * with a header. Empty otherwise, and then the field keeps Nextcloud's line.
+		 *
+		 * @spec openspec/changes/screens-board-top-bar-search/specs/layout-components/spec.md#requirement-the-board-look-names-what-the-header-search-finds
+		 * @return {string}
+		 */
+		headerSearchLabel() {
+			const key = this.manifest?.nav?.searchPlaceholder
+			if (this.resolvedLook !== 'board' || !this.headerPresent || typeof key !== 'string' || key === '') {
+				return ''
+			}
+			return this.manifestTranslate(key)
+		},
+
 		/**
 		 * The label lookup provided as `cnTranslate`: the manifest's own
 		 * translations for the language first, then the host `translate`, then the

package/src/components/CnBrandBar/CnBrandBar.vue

@@ -1,8 +1,8 @@
 <!--
   CnBrandBar — the brand block in Nextcloud's own header (screens-brand-block-top-bar).
 
-  Draws the 237px brand block (emblem, organisation, app name, and a 1px
-  divider at its end) at the START of `#header`, before the app menu, under the
+  Draws the brand block (a 237px brand link with the emblem, organisation and
+  app name, then a 1px divider 12px on) at the START of `#header`, before the app menu, under the
   board look. CnAppRoot mounts it when a brand is declared and `#header` exists.
 
   `#header` is Nextcloud's and offers no extension point for apps, so this is
@@ -170,11 +170,12 @@ export default {
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	width: var(--cn-board-brand-width, 237px);
 }
 
+/* The brand link is 237px; the divider follows it, 12px on. */
 .cn-brand-bar__brand {
-	flex: 1 1 0;
+	flex: none;
+	width: var(--cn-board-brand-width, 237px);
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;

package/src/components/CnCountdownWidget/CnCountdownWidget.vue

@@ -4,8 +4,10 @@
 -->
 
 <template>
-	<div class="cn-kpi-card cn-countdown-widget" :class="`cn-countdown-widget--${variant}`">
-		<div class="cn-kpi-card__icon cn-countdown-widget__icon" :style="iconCircleStyle">
+	<div
+		class="cn-kpi-card cn-countdown-widget"
+		:class="[`cn-countdown-widget--${variant}`, { 'cn-kpi-card--board cn-countdown-widget--board': isBoardLook }]">
+		<div v-if="!isBoardLook" class="cn-kpi-card__icon cn-countdown-widget__icon" :style="iconCircleStyle">
 			<CnWidgetIcon :name="resolvedIcon" :size="24" />
 		</div>
 
@@ -16,9 +18,35 @@
 			<div class="cn-kpi-card__value cn-countdown-widget__value" :style="{ color: valueColor }">
 				{{ headline }}
 			</div>
-			<div v-if="subLabel" class="cn-countdown-widget__sub">
+			<div v-if="subLabel" class="cn-countdown-widget__sub" data-testid="cn-countdown-sub">
 				{{ subLabel }}
 			</div>
+			<dl v-if="facts.length" class="cn-countdown-widget__facts" data-testid="cn-countdown-facts">
+				<template v-for="fact in facts" :key="fact.label">
+					<dt>{{ fact.label }}</dt>
+					<dd>{{ fact.value }}</dd>
+				</template>
+			</dl>
+			<span
+				v-if="progress !== null"
+				class="cn-countdown-widget__progress"
+				role="meter"
+				:aria-label="progressLabel"
+				:aria-valuenow="Math.round(progress)"
+				aria-valuemin="0"
+				aria-valuemax="100"
+				data-testid="cn-countdown-progress">
+				<span class="cn-countdown-widget__progress-fill" :style="{ width: `${progress}%` }" />
+			</span>
+			<button
+				v-if="actionLabel"
+				type="button"
+				class="cn-countdown-widget__action"
+				:class="{ 'cn-countdown-widget__action--primary': content.action && content.action.variant === 'primary' }"
+				data-testid="cn-countdown-action"
+				@click="runAction">
+				{{ actionLabel }}
+			</button>
 		</div>
 	</div>
 </template>
@@ -28,7 +56,10 @@ import { translate as t } from '@nextcloud/l10n'
 import { inject } from 'vue'
 import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import { getByPath } from '../../composables/useEndpointSource.js'
+import { normalizeLook } from '../../composables/useLook.js'
+import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 import { userLocale } from '../../utils/userLocale.js'
 
 const MS_PER_DAY = 24 * 60 * 60 * 1000
@@ -106,8 +137,15 @@ export default {
 		 * - `showDate` — render the absolute date underneath (default true).
 		 * - `settledField` — property on the record that is truthy once the work is done; the tile then reads `settledLabel` and never counts overdue.
 		 * - `settledLabel` — the headline of a settled record, run through the host's translate function (default "Closed").
+		 * - `daysLabel` — `{ one, other }` with `{count}`, the headline while days remain ("27 dagen").
+		 * - `caption` — the line under the headline instead of the date, with `{date}` (the long date) and `{count}` (days left).
+		 * - `startField` — property holding the start of the term; a bar then shows how much of it has passed.
+		 * - `action` — one manifest action under the card (`{ label, type, variant?, ... }`, the headerActions shape; `variant: "primary"` draws it in the primary tint).
+		 * - `emptyLabel` — the headline while the date is unset (default a dash).
+		 * - `emptyCaption` — the line under it while the date is unset, with `{date}` read from `emptyDateField`.
+		 * - `facts` — `[{ label, field }]` rows under the caption.
 		 *
-		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean, settledField?: string, settledLabel?: string }}
+		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean, settledField?: string, settledLabel?: string, daysLabel?: {one?: string, other?: string}, caption?: string, startField?: string, action?: object, emptyLabel?: string, emptyCaption?: string, emptyDateField?: string, facts?: Array<{label: string, field: string}> }}
 		 */
 		content: {
 			type: Object,
@@ -131,6 +169,8 @@ export default {
 			cnObjectContextInjected: inject('cnObjectContext', null),
 			cnDetailObjectContextInjected: inject('cnDetailObjectContext', null),
 			cnTranslate: inject('cnTranslate', null),
+			cnLook: inject('cnLook', 'nextcloud'),
+			cnDispatchAction: inject('cnDispatchAction', null),
 		}
 	},
 
@@ -222,7 +262,7 @@ export default {
 			}
 			const days = this.daysRemaining
 			if (days === null) {
-				return '—'
+				return this.content?.emptyLabel ? this.translate(this.content.emptyLabel) : '—'
 			}
 			if (days < 0) {
 				const overdue = Math.abs(days)
@@ -233,12 +273,89 @@ export default {
 			if (days === 0) {
 				return t('nextcloud-vue', 'Due today')
 			}
+			const labels = this.content?.daysLabel
+			if (labels && typeof labels === 'object' && (labels.one || labels.other)) {
+				const template = this.translate((days === 1 ? labels.one : labels.other) || labels.other || labels.one)
+				return template.replace(/\{count\}/g, String(days))
+			}
 			if (days === 1) {
 				return t('nextcloud-vue', '1 day left')
 			}
 			return t('nextcloud-vue', '{count} days left', { count: days })
 		},
 
+		/**
+		 * Whether the app takes the board look: no icon circle.
+		 *
+		 * @return {boolean} True in the board look.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		isBoardLook() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * How much of the term has passed, from `startField` to the date, in
+		 * whole days and as a percentage (0 to 100), or null without a usable
+		 * start.
+		 *
+		 * @return {number|null} The share passed.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		progress() {
+			const field = this.content?.startField
+			if (!field || !this.record || !this.targetDate || this.isSettled) {
+				return null
+			}
+			const raw = getByPath(this.record, field)
+			const start = raw === null || raw === undefined || raw === '' ? null : new Date(raw)
+			if (!start || Number.isNaN(start.getTime())) {
+				return null
+			}
+			const startOfDay = (d) => Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())
+			const span = startOfDay(this.targetDate) - startOfDay(start)
+			if (span <= 0) {
+				return null
+			}
+			return Math.min(100, Math.max(0, ((startOfDay(new Date()) - startOfDay(start)) / span) * 100))
+		},
+
+		/**
+		 * The `facts` rows under the caption (`[{ label, field }]`), with
+		 * their values read off the record; a row without a value is left out.
+		 *
+		 * @return {Array<{label: string, value: string}>} The rows.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		facts() {
+			const rows = Array.isArray(this.content?.facts) ? this.content.facts : []
+			return rows
+				.filter((row) => row && typeof row.label === 'string' && typeof row.field === 'string')
+				.map((row) => {
+					const value = this.record ? getByPath(this.record, row.field) : null
+					return { label: this.translate(row.label), value: value === null || value === undefined ? '' : this.translate(String(value)) }
+				})
+				.filter((row) => row.value !== '')
+		},
+
+		/** @return {string} The accessible name of the progress bar. */
+		progressLabel() {
+			return t('nextcloud-vue', 'Time passed')
+		},
+
+		/**
+		 * The label of `content.action`, translated, or ''.
+		 *
+		 * @return {string} The label.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		actionLabel() {
+			const action = this.content?.action
+			return action && typeof action === 'object' && typeof action.label === 'string' && action.label !== ''
+				? this.translate(action.label)
+				: ''
+		},
+
 		/**
 		 * The absolute date under the headline, so the tile answers "how long"
 		 * and "when" at once.
@@ -246,10 +363,21 @@ export default {
 		 * @return {string} The formatted date, or ''.
 		 */
 		subLabel() {
+			if (!this.targetDate && typeof this.content?.emptyCaption === 'string' && this.content.emptyCaption !== '') {
+				const raw = this.content.emptyDateField && this.record ? getByPath(this.record, this.content.emptyDateField) : null
+				const when = raw ? new Date(raw) : null
+				const date = when && !Number.isNaN(when.getTime()) ? when.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' }) : ''
+				return this.translate(this.content.emptyCaption).replace(/\{date\}/g, date)
+			}
 			if (!this.targetDate || this.content?.showDate === false) {
 				return ''
 			}
-			return this.targetDate.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' })
+			const date = this.targetDate.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' })
+			const caption = this.content?.caption
+			if (typeof caption === 'string' && caption !== '') {
+				return this.translate(caption).replace(/\{date\}/g, date).replace(/\{count\}/g, String(this.daysRemaining ?? ''))
+			}
+			return date
 		},
 
 		/**
@@ -278,6 +406,9 @@ export default {
 
 		/** @return {string} The value colour for the current band. */
 		valueColor() {
+			if (this.isBoardLook && this.variant === 'default') {
+				return 'var(--color-main-text)'
+			}
 			return VARIANT_COLORS[this.variant] || VARIANT_COLORS.default
 		},
 
@@ -296,6 +427,39 @@ export default {
 			return { color: this.valueColor }
 		},
 	},
+
+	methods: {
+		/**
+		 * The host's translate, or the text unchanged.
+		 *
+		 * @param {string} text The text.
+		 * @return {string} The translation.
+		 */
+		translate(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * Dispatch `content.action` with the record's tokens resolved, through
+		 * the page's dispatcher when there is one.
+		 *
+		 * @return {unknown}
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		runAction() {
+			const action = this.content?.action
+			if (!action || typeof action !== 'object') {
+				return undefined
+			}
+			const ctx = resolveObjectTokenContext(this.cnObjectContextInjected, this.cnDetailObjectContextInjected) || {}
+			const tokenCtx = { ...ctx, object: this.record || ctx.object || null, objectId: this.record?.id ?? ctx.objectId ?? null }
+			const resolved = resolveDeepTokens(action, tokenCtx)
+			if (typeof this.cnDispatchAction === 'function') {
+				return this.cnDispatchAction(resolved)
+			}
+			return dispatchAction(resolved, { router: this.$router || null, tokenCtx })
+		},
+	},
 }
 </script>
 
@@ -304,6 +468,58 @@ export default {
 	white-space: nowrap;
 }
 
+.cn-countdown-widget__progress {
+	background: var(--color-border);
+	border-radius: 3px;
+	display: block;
+	height: 6px;
+	margin-block-start: 10px;
+	overflow: hidden;
+}
+
+.cn-countdown-widget__progress-fill {
+	background: var(--color-primary-element);
+	display: block;
+	height: 100%;
+}
+
+.cn-countdown-widget__action {
+	align-self: flex-start;
+	background: var(--color-background-dark);
+	border: 0;
+	border-radius: var(--border-radius-pill, 17px);
+	color: var(--color-main-text);
+	font-weight: 600;
+	margin-block-start: 10px;
+	min-height: 34px;
+	padding: 0 12px;
+}
+
+.cn-countdown-widget__action--primary {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-countdown-widget__facts {
+	display: grid;
+	gap: 8px 16px;
+	grid-template-columns: max-content 1fr;
+	margin: 10px 0 0;
+}
+
+.cn-countdown-widget__facts dt {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-countdown-widget__facts dd {
+	margin: 0;
+}
+
+.cn-countdown-widget__action:hover,
+.cn-countdown-widget__action:focus-visible {
+	background: var(--color-background-hover);
+}
+
 .cn-countdown-widget__sub {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;