@conduction/nextcloud-vue 2.56.0-beta.34 → 2.56.0-beta.36

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -59,8 +59,15 @@
 						class="cn-stages-widget__bar-label"
 						:title="stage.hint || stage.label"
 						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
 						:data-testid="`cn-stages-widget-stage-${stage.id}`"
 						@click="onBarClick(stage)">
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}<span v-if="stage.state === 'current'" class="cn-stages-widget__sr-only"> ({{ tr('current step') }})</span>
 					</component>
 					<span v-if="stage.date" class="cn-stages-widget__bar-date">{{ stage.date }}</span>
@@ -83,7 +90,19 @@
 				@stageClick="onStageClick"
 				@stageBlocked="onStageBlocked">
 				<template #label="{ stage }">
-					<span class="cn-timeline-stages__label" :data-testid="`cn-stages-widget-stage-${stage.id}`">
+					<span
+						class="cn-timeline-stages__label"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`">
+						<!-- The move in flight. A transition can take seconds, and
+						     a strip that shows nothing until it returns reads as
+						     one that never moved. -->
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}
 					</span>
 					<span v-if="stage.subtitle" class="cn-timeline-stages__subtitle">
@@ -156,8 +175,11 @@
 			v-if="pendingAction"
 			:transition="pendingAction"
 			:schema="schema"
+			:error="inputError"
+			:fieldErrors="inputFieldErrors"
+			:busy="busy"
 			@confirm="onInputConfirm"
-			@close="pendingAction = null" />
+			@close="closeInputDialog" />
 	</div>
 </template>
 
@@ -177,6 +199,7 @@ import {
 	performTransition,
 	readAvailableActions,
 	transitionError,
+	transitionFieldErrors,
 } from '../../composables/useLifecycleTransitions.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
@@ -534,6 +557,17 @@ export default {
 			pendingAction: null,
 			/** @type {boolean} Whether a move is running. */
 			busy: false,
+			/**
+			 * @type {string} The stage a running move leads to, or ''. Drives
+			 * the loading indicator on that one stage.
+			 */
+			movingTo: '',
+			/** @type {string} A refusal shown inside the open input dialog. */
+			inputError: '',
+			/** @type {string[]} The input keys that refusal named. */
+			inputFieldErrors: [],
+			/** @type {string[]} The input keys the last refused move named. */
+			lastFieldErrors: [],
 			/** @type {string} Why the last move failed, or ''. */
 			moveError: '',
 			/**
@@ -766,6 +800,20 @@ export default {
 			return this.interactive && !this.busy
 		},
 
+		/**
+		 * What the stage a move is running to says while it runs: the
+		 * loading indicator's name and the live region's sentence.
+		 *
+		 * @return {string} The sentence, or '' when nothing is moving.
+		 */
+		movingMessage() {
+			if (!this.movingTo) {
+				return ''
+			}
+			const stage = this.stages.find((s) => s.id === this.movingTo)
+			return this.tr('Moving to {stage}', { stage: stage ? stage.label : this.movingTo })
+		},
+
 		/**
 		 * The allowed moves by the stage they lead to, or null while they are
 		 * unknown.
@@ -1225,13 +1273,44 @@ export default {
 		 * @param {object} data The collected input values.
 		 * @return {void}
 		 */
-		onInputConfirm(data) {
+		async onInputConfirm(data) {
 			const pending = this.pendingAction
-			this.pendingAction = null
 			if (!pending || !pending.__request) {
+				this.closeInputDialog()
+				return
+			}
+			this.inputError = ''
+			this.inputFieldErrors = []
+			// THE DIALOG STAYS OPEN WHILE THE MOVE RUNS, with its confirm
+			// button busy. Closing it first left the person looking at an
+			// unchanged strip for as long as the transition took, which on a
+			// live case was long enough to reload the page thinking it had
+			// not been sent.
+			const moved = await this.performMove(pending.__request, data)
+			if (this.pendingAction !== pending) {
+				// Closed while the move ran; nothing left to update.
 				return
 			}
-			this.performMove(pending.__request, data)
+			if (moved) {
+				this.closeInputDialog()
+				return
+			}
+			// Refused. The sentence goes into the dialog the person is looking
+			// at, with what they typed still in it.
+			this.inputError = this.moveError
+			this.inputFieldErrors = this.lastFieldErrors
+			this.moveError = ''
+		},
+
+		/**
+		 * Close the input dialog and forget the refusal it was showing.
+		 *
+		 * @return {void}
+		 */
+		closeInputDialog() {
+			this.pendingAction = null
+			this.inputError = ''
+			this.inputFieldErrors = []
 		},
 
 		/**
@@ -1239,11 +1318,17 @@ export default {
 		 *
 		 * @param {{stage: {id: string, label: string}, action: string}} request The move.
 		 * @param {object} [data] The collected transition inputs, when any.
-		 * @return {Promise<void>}
+		 * @return {Promise<boolean>} Whether the move was made.
 		 */
 		async performMove(request, data) {
 			this.busy = true
+			this.movingTo = request.stage.id
 			this.moveError = ''
+			this.lastFieldErrors = []
+			// Said as the move starts, not only when it lands: a screen reader
+			// user otherwise hears nothing for as long as the server takes.
+			this.statusMessage = this.movingMessage
+			let moved = false
 			try {
 				if (this.lifecycleMode) {
 					await performTransition(this.recordId, request.action, data)
@@ -1270,11 +1355,16 @@ export default {
 				if (this.lifecycleMode) {
 					await this.loadActions()
 				}
+				moved = true
 			} catch (error) {
 				this.moveError = transitionError(error, this.tr('The move could not be made'))
+				this.lastFieldErrors = transitionFieldErrors(error)
+				this.statusMessage = this.moveError
 			} finally {
 				this.busy = false
+				this.movingTo = ''
 			}
+			return moved
 		},
 
 		/**
@@ -1501,6 +1591,13 @@ export default {
 	padding: 8px 0;
 }
 
+/* The stage a running move leads to: a small spinner before its label. */
+.cn-stages-widget__moving {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 4px;
+}
+
 .cn-stages-widget__notice {
 	margin: 0;
 	color: var(--color-text-maxcontrast);

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -1460,7 +1460,7 @@ export default {
 		 * @return {string}
 		 */
 		formattedValue() {
-			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null)
+			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,7 +17,7 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid }]">
+		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid, 'cn-stats-block-widget--tiles-box': isGrid && tiles === 'box' }]">
 		<!-- Grid layout: the `stats` (each a stat tile's content, so every
 		     source kind a stat takes: ratio, elapsed, computed...) in `columns`
 		     columns, inside this one card (the board's "Je week tot nu toe"
@@ -288,6 +288,21 @@ export default {
 			default: 2,
 		},
 
+		/**
+		 * How the grid layout draws its tiles: `'box'` gives each tile a
+		 * surface of its own (a grey ground, 10px radius, 14px 16px padding),
+		 * as board DcRapportages draws its efficiency figures. Empty (the
+		 * default) keeps the tiles as parts of the one card, without a box
+		 * (board PqMijnWerk "Je week tot nu toe").
+		 *
+		 * @type {'box'|null}
+		 * @spec openspec/changes/screens-stats-block-tile-box/specs/stats-block-grid/spec.md#requirement-a-stats-block-grid-can-box-its-tiles
+		 */
+		tiles: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * How the single-source value is shown: a style name (`'currency'`,
 		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
@@ -566,7 +581,7 @@ export default {
 			if (!fmt || this.loading) {
 				return null
 			}
-			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject)
+			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject, this.tl)
 		},
 
 		/**
@@ -598,7 +613,7 @@ export default {
 					return {
 						// The value as the entry's `format` says, money in the
 						// currency the entry names; null keeps the plain count.
-						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject) : null,
+						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject, this.tl) : null,
 						entry: entry || {},
 						key: `${(entry && entry.register) || ''}/${(entry && entry.schema) || ''}/${i}`,
 						count: resolved ? raw : 0,
@@ -961,7 +976,10 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* `width: 100%` plus this padding overflowed the card by 48px: the last
+   column ran past the card's right edge (visible once the tiles have a box). */
 .cn-stats-block-widget--grid {
+	box-sizing: border-box;
 	padding: 4px 24px 20px;
 }
 
@@ -977,6 +995,19 @@ export default {
 	min-width: 0;
 }
 
+/* `tiles: "box"`: each tile on a grey ground of its own (board DcRapportages,
+   "Vergaderingen en efficiëntie"), 12px apart. */
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid {
+	gap: 12px;
+}
+
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid-stat {
+	box-sizing: border-box;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--color-background-hover);
+}
+
 .cn-stats-block-widget__rows {
 	display: flex;
 	flex-direction: column;

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -311,6 +311,12 @@ export default {
 		cnLook: { default: 'nextcloud' },
 		/** The tab list's name under the board look, provided by CnDetailPage (`config.tabsLabel`). */
 		cnDetailTabsLabel: { default: null },
+		/**
+		 * The records the detail page's `visibilityContext` names, keyed
+		 * by name (a case's case type), provided by CnDetailPage. A tab's
+		 * `visibleWhen` reads them as `@context.<name>`. Null on any other page.
+		 */
+		cnDetailVisibilityRows: { default: null },
 		/**
 		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
 		 * label written in the manifest reads in the user's language.
@@ -475,6 +481,29 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * What a tab's `visibleWhen` reads: the record, with the records the
+		 * detail page's `visibilityContext` names under `@context.<name>`. Null while
+		 * the record, or one of those records, is not there yet.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		conditionData() {
+			if (!this.objectData) {
+				return null
+			}
+			const holder = this.cnDetailVisibilityRows
+			if (!holder) {
+				return this.objectData
+			}
+			const rows = holder.value
+			if (!rows) {
+				return null
+			}
+			return { ...this.objectData, '@context': rows }
+		},
+
 		/**
 		 * The open panel's own menu items, or an empty list.
 		 *
@@ -859,10 +888,11 @@ export default {
 				return 'visible'
 			}
 			if (isLocallyDecidableVisibleWhen(cond)) {
-				if (!this.objectData) {
+				const data = this.conditionData
+				if (!data) {
 					return 'pending'
 				}
-				return evaluateVisibleWhenLocal(cond, this.objectData) ? 'visible' : 'hidden'
+				return evaluateVisibleWhenLocal(cond, data) ? 'visible' : 'hidden'
 			}
 			const answer = this.sourceVisibility[index]
 			if (answer === undefined) {
@@ -883,7 +913,7 @@ export default {
 		async refreshSourceVisibility() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
 			const seq = ++this.visibilitySeq
-			const ctx = { objectId: this.objectId, object: this.objectData || undefined }
+			const ctx = { objectId: this.objectId, object: this.conditionData || this.objectData || undefined }
 			await Promise.all(tabs.map(async (tab, index) => {
 				const cond = tab && typeof tab === 'object' ? tab.visibleWhen : null
 				if (!cond || isLocallyDecidableVisibleWhen(cond)) {

package/src/components/CnWalkthrough/CnWalkthrough.vue

@@ -683,11 +683,27 @@ export default {
 		 * deferred tour) go through here — so a centered step cannot be
 		 * swallowed by either.
 		 *
+		 * A tour that declares `startOn` opens only on one of those route
+		 * names, whatever its first step looks like.
+		 *
 		 * @param {object} tour The tour definition.
 		 * @param {string} [routeName] The current route name.
 		 * @return {boolean} True when the tour may open on this route.
+		 * @spec openspec/changes/a-tour-starts-on-the-pages-it-names/specs/walkthrough/spec.md
 		 */
 		routeMatchesTour(tour, routeName) {
+			// A tour that names where it starts (`startOn`) opens only there.
+			// It wins over the centered-step rule below: a welcome card floats
+			// in the middle of the screen, but a user who opens a case from a
+			// mail link lands on that case, and the card then blocks the page
+			// they came for. Measured 13 October on dossiq: a staff user's first
+			// visit was a deep link to a Woo request, and "Welcome to Dossiq"
+			// opened over it. The tour waits in `_pendingAutoTour` and opens when
+			// the user reaches a named route.
+			const startOn = Array.isArray(tour && tour.startOn) ? tour.startOn.map(String) : []
+			if (startOn.length > 0) {
+				return !!routeName && startOn.includes(String(routeName))
+			}
 			const page = this.firstStepPage(tour)
 			if (!page) {
 				return true

package/src/components/CnWeekStripWidget/CnWeekStripWidget.vue

@@ -89,7 +89,8 @@ const DEFAULT_LIMIT = 100
  *
  * It renders the five working days by default (`days: 7` adds the weekend),
  * highlights today, marks items that are late, and says so when a day has
- * nothing. On a narrow screen the strip scrolls sideways.
+ * nothing. On a narrow screen the strip scrolls sideways; under the board
+ * look (`.cn-look-board`) the days wrap into rows instead.
  *
  * Items come from an OpenRegister source (one request for the whole week) or
  * from static `items`. Resolved by its registry type key `week-strip`.

package/src/css/form-field.css

@@ -183,3 +183,17 @@
 .cn-look-board .cn-form-page__footer .cn-form-page__primary {
 	margin-inline-start: auto;
 }
+
+/* A Nextcloud text area or text field with its label inside the field hides
+   its placeholder until the field takes focus, so the label and the
+   placeholder are never drawn over each other. A theme that forces every
+   placeholder visible (thematiq's nldesign system sets
+   `::placeholder { opacity: 1 !important }`) drew both: the dossiq DqTaak
+   notes field read "Een notitie toevoegen" over "Wat heb je gevonden, wie heb
+   je gebeld?". Under the board look the placeholder stays hidden at rest, as
+   Nextcloud intends; a field with its label outside keeps its placeholder.
+   @spec openspec/changes/board-field-label-over-placeholder/specs/form-field-board-look/spec.md#requirement-a-field-label-and-its-placeholder-are-never-drawn-over-each-other */
+.cn-look-board .textarea__input:not(:focus, .textarea__input--label-outside)::placeholder,
+.cn-look-board .input-field:not(.input-field--label-outside) .input-field__input:not(:focus)::placeholder {
+	opacity: 0 !important;
+}

package/src/css/form-widget.css

@@ -37,6 +37,7 @@
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -58,3 +59,13 @@
 	color: var(--color-error);
 	margin: 0;
 }
+
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}

package/src/css/kpi-card.css

@@ -444,6 +444,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;

package/src/css/look-board-reports.css

@@ -115,3 +115,61 @@
 .cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
 	padding: 0;
 }
+
+/* The widget area draws no panel of its own (board DcRapportages: the
+   highlighted report's card sits straight on the page ground). A theme's
+   catch-all for anything named like a widget (nldesign's element overrides:
+   `[class*="widget"]:not([class*="widget__"]):not(#header *)`, an id
+   specificity no class rule outranks) painted `__widgets` white, hence the
+   `!important`. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	background: transparent !important;
+}
+
+/* The grid insets every card by its 12px margin (CnDashboardPage's default
+   `gridMargin`); the page padding already places the area, so the card's
+   edges line up with the report cards above it. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets .cn-dashboard-grid {
+	width: calc(100% + 24px);
+	margin: -12px;
+}
+
+/* A report card is a link, but its title and description read as text, as on
+   the board: no underline, whatever a theme does to links. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card * {
+	text-decoration: none !important;
+}
+
+/* The header buttons beside the title (screens-reports-header-buttons, board
+   DcRapportages "Downloaden"): the board's 40px button with a grey border on
+   the main background, the primary one in the primary fill, as on the index
+   header. `!important` holds them under a theme that restyles every button
+   (nldesign). The buildiq square keeps its own rule. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}

package/src/css/look-board.css

@@ -616,6 +616,18 @@
 	font-weight: 600;
 }
 
+/* ---- Dashboard card titles --------------------------------------------- */
+/* A card's title on a dashboard (and on the widgets under a reports page) is
+   the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
+   the app dashboards; `--cn-board-heading-size`, as on a detail page's cards).
+   The wrapper's own 14px weight 600 stays for the Nextcloud look, and the
+   native-dashboard chrome keeps its 20px. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
+	font-size: var(--cn-board-heading-size, 17px);
+	font-weight: 700;
+	line-height: 1.3;
+}
+
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
 /* The dashboard's card body is flush, so the rows carry their own inset: the
    board's card pads 24px at the sides and each row 14px, a soft hairline
@@ -702,3 +714,22 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
 }
+
+/* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
+/* The days wrap inside the card instead of scrolling sideways: a row holds
+   as many days of at least 120px as the card fits, and the rest go to the
+   next row (dossiq at 1100 wide held 680px of days in a 494px card and
+   scrolled; now three days and two). 120px keeps a case title's words whole;
+   five 88px days fitted one row but broke "Bezwaar" mid-word. A card wide
+   enough for the week draws it as before, one row of equal columns. The
+   day's head wraps its "today" badge under the label when the day is
+   narrow.
+   @spec openspec/changes/board-week-strip-fits/specs/week-strip-board-look/spec.md#requirement-a-board-week-strip-fits-its-card */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__days {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
+	min-width: 0;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
+	flex-wrap: wrap;
+}