@conduction/nextcloud-vue 2.62.0 → 2.64.0

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -35,7 +35,45 @@
 			{{ tr('No stages to show') }}
 		</p>
 		<template v-else>
+			<!-- The bars variant (`variant: "bars"`): equal columns, a thin bar
+			     per step coloured by state, the label under it and an optional
+			     date line. No description: eight Woo steps with their
+			     descriptions crowded into five lines and clipped the first
+			     label. The current step says so for a screen reader. -->
+			<ol
+				v-if="isBars"
+				class="cn-stages-widget__bars"
+				:aria-label="ariaLabel"
+				data-testid="cn-stages-widget-bars">
+				<li
+					v-for="stage in barStages"
+					:key="stage.id"
+					class="cn-stages-widget__bar-step"
+					:class="`cn-stages-widget__bar-step--${stage.state}`"
+					:aria-current="stage.state === 'current' ? 'step' : null"
+					:data-testid="`cn-stages-widget-bar-${stage.id}`">
+					<span class="cn-stages-widget__bar" aria-hidden="true" />
+					<component
+						:is="stage.clickable ? 'button' : 'span'"
+						:type="stage.clickable ? 'button' : null"
+						class="cn-stages-widget__bar-label"
+						:title="stage.hint || stage.label"
+						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`"
+						@click="onBarClick(stage)">
+						{{ 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>
+					<span
+						v-if="stage.reason"
+						:class="stage.reasonVisible ? 'cn-stages-widget__reason' : 'cn-stages-widget__sr-only'"
+						:data-testid="`cn-stages-widget-reason-${stage.id}`">
+						{{ stage.reason }}
+					</span>
+				</li>
+			</ol>
 			<CnTimelineStages
+				v-else
 				:stages="timelineStages"
 				:currentStage="currentStageId"
 				:orientation="orientation"
@@ -310,13 +348,15 @@ export default {
 		 * `currentField`, `stagesEndpoint` or `stagesSource`, `transition`
 		 * (`{ kind: 'lifecycle' }` by default, or `{ kind: 'field' }`, or
 		 * absent for a read-only strip), `unreachableReason`, `orientation`,
-		 * `size`, `ariaLabel` and `label`.
+		 * `size`, `ariaLabel`, `label` and `variant` (`"bars"` draws a thin
+		 * coloured bar per step with the label under it and no description;
+		 * the source's `dateField` adds a date line).
 		 *
 		 * `ariaLabel` names the strip for a screen reader. It falls back to
 		 * `label`, the placement's own title, so a titled card does not have to
 		 * repeat itself, and then to "Stages".
 		 *
-		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string}}
+		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars')}}
 		 */
 		content: {
 			type: Object,
@@ -723,6 +763,45 @@ export default {
 			return label ? this.effectiveTranslate(label) : this.tr('Stages')
 		},
 
+		/**
+		 * Whether the bars variant is on (`content.variant: "bars"`). Off by
+		 * default: the dot strip renders as it always has.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @return {boolean}
+		 */
+		isBars() {
+			return this.content.variant === 'bars'
+		},
+
+		/**
+		 * The stages for the bars variant: each with its `state` (`done`
+		 * before the current stage, `current`, `todo` after it, every stage
+		 * `todo` when none is current), its `date`, and whether it is a
+		 * button (the strip is interactive and the stage is not the current
+		 * one).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @return {Array<object>}
+		 */
+		barStages() {
+			const current = this.stages.findIndex((s) => s.id === this.currentStageId)
+			return this.timelineStages.map((stage, index) => {
+				let state = 'todo'
+				if (current >= 0 && index < current) {
+					state = 'done'
+				} else if (index === current) {
+					state = 'current'
+				}
+				return {
+					...stage,
+					date: this.stages[index]?.date || '',
+					state,
+					clickable: this.interactive && state !== 'current',
+				}
+			})
+		},
+
 		/** @return {'horizontal'|'vertical'} The layout direction. */
 		orientation() {
 			return this.content.orientation === 'vertical' ? 'vertical' : 'horizontal'
@@ -969,6 +1048,26 @@ export default {
 		 * @param {{stage: {id: string}}} payload The CnTimelineStages event.
 		 * @return {void}
 		 */
+		/**
+		 * A click on a bar-variant step: a disabled step reports why (as
+		 * CnTimelineStages does through `stage-blocked`), any other goes
+		 * through the shared move path.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @param {object} stage The bar step.
+		 * @return {void}
+		 */
+		onBarClick(stage) {
+			if (!stage.clickable) {
+				return
+			}
+			if (stage.disabled) {
+				this.onStageBlocked({ stage })
+				return
+			}
+			this.onStageClick({ stage })
+		},
+
 		onStageClick({ stage }) {
 			if (!this.canMove || !stage) {
 				return
@@ -1340,6 +1439,85 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* The bars variant: equal columns, a thin bar per step. Theme hooks:
+   --cn-stages-bar-height, --cn-stages-bar-radius, --cn-stages-bar-done,
+   --cn-stages-bar-current, --cn-stages-bar-todo. */
+.cn-stages-widget__bars {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	grid-auto-flow: column;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-stages-widget__bar-step {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-stages-widget__bar {
+	display: block;
+	height: var(--cn-stages-bar-height, 6px);
+	border-radius: var(--cn-stages-bar-radius, 3px);
+	background: var(--cn-stages-bar-todo, var(--color-border));
+}
+
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar {
+	background: var(--cn-stages-bar-done, var(--color-primary-element));
+}
+
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar {
+	background: var(--cn-stages-bar-current, var(--color-error));
+}
+
+.cn-stages-widget__bar-label {
+	display: block;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--color-text-maxcontrast);
+	font: inherit;
+	font-size: 14px;
+	text-align: start;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+button.cn-stages-widget__bar-label {
+	cursor: pointer;
+}
+
+button.cn-stages-widget__bar-label[aria-disabled="true"] {
+	cursor: not-allowed;
+}
+
+button.cn-stages-widget__bar-label:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar-label {
+	color: var(--color-main-text);
+	font-weight: 600;
+}
+
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar-label {
+	color: var(--color-main-text);
+	font-weight: 700;
+}
+
+.cn-stages-widget__bar-date {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Text for screen readers only. */
 .cn-stages-widget__sr-only {
 	position: absolute;

package/src/components/CnStagesWidget/stagesModel.js

@@ -85,8 +85,9 @@ export function isTrue(value) {
  * the rows keep the order they arrived in.
  *
  * @param {Array<object>} rows The stage rows.
- * @param {{idField?: string, labelField?: string, descriptionField?: string, orderField?: string, finalField?: string}} [cfg] The field mapping.
- * @return {Array<{id: string, label: string, subtitle: string, final: boolean}>} The stages.
+ * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+ * @param {{idField?: string, labelField?: string, descriptionField?: string, dateField?: string, orderField?: string, finalField?: string}} [cfg] The field mapping.
+ * @return {Array<{id: string, label: string, subtitle: string, date: string, final: boolean}>} The stages.
  */
 export function normalizeStages(rows, cfg = {}) {
 	const list = Array.isArray(rows) ? rows.filter((r) => r && typeof r === 'object') : []
@@ -108,6 +109,8 @@ export function normalizeStages(rows, cfg = {}) {
 				id: rowId(row, cfg.idField),
 				label,
 				subtitle: cfg.descriptionField ? labelText(getByPath(row, cfg.descriptionField)) : '',
+				// An optional date line (`dateField`), drawn by the bars variant.
+				date: cfg.dateField ? labelText(getByPath(row, cfg.dateField)) : '',
 				final: cfg.finalField ? isTrue(getByPath(row, cfg.finalField)) : false,
 			}
 		})

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -94,7 +94,11 @@
 						{{ formattedTrend }}
 					</span>
 				</template>
-				<span v-if="!displayLoading && !displayError && content.caption" class="cn-kpi-card__label cn-stat-widget__caption">
+				<span
+					v-if="!displayLoading && !displayError && resolvedCaption"
+					class="cn-kpi-card__label cn-stat-widget__caption"
+					:class="captionVariantClass"
+					data-testid="cn-stat-widget-caption">
 					{{ resolvedCaption }}
 				</span>
 			</div>
@@ -461,7 +465,7 @@ export default {
 		 * counted between LOCAL CALENDAR DAYS, not as elapsed milliseconds, so
 		 * the time of day on a deadline never moves the answer.
 		 *
-		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string}>}}
+		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, captionVariant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), captionVariantWhen?: Array<{op: string, value: unknown, variant: string}>, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string, caption?: string, captionVariant?: string}>}}
 		 */
 		content: {
 			type: Object,
@@ -605,7 +609,10 @@ export default {
 		 * @return {string}
 		 */
 		resolvedCaption() {
-			const caption = this.content.caption
+			const override = this.activeOverride
+			const caption = (override && typeof override.caption === 'string' && override.caption !== '')
+				? override.caption
+				: this.content.caption
 			if (!caption) {
 				return ''
 			}
@@ -615,11 +622,58 @@ export default {
 			}
 			const payload = this.endpointMode ? this.epData : null
 			return translated.replace(/\{([A-Za-z0-9_.]+)\}/g, (whole, path) => {
+				// `{value}` is the tile's own number, so a caption can read
+				// "{value} due today" on a register-counted tile that has no
+				// payload to read fields from.
+				if (path === 'value' && (payload === null || getByPath(payload, path) === undefined)) {
+					return this.formattedValue === undefined || this.formattedValue === null ? '' : String(this.formattedValue)
+				}
 				const v = getByPath(payload, path)
 				return (v === undefined || v === null) ? '' : String(v)
 			}).replace(/\s{2,}/g, ' ').trim()
 		},
 
+		/**
+		 * The first `content.captionVariantWhen` rule the tile's value
+		 * matches (`[{ op, value, variant }]`, the `variantWhen` shape), or
+		 * null. Colours the caption on the value without recolouring the
+		 * tile: "1 due today" turns red while the number stays ink.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stat-tile-colours-its-caption-by-rule
+		 * @return {object|null}
+		 */
+		activeCaptionRule() {
+			const rules = this.content.captionVariantWhen
+			if (!Array.isArray(rules) || rules.length === 0) {
+				return null
+			}
+			const current = this.displayValue
+			if (current === null || current === undefined) {
+				return null
+			}
+			return rules.find((r) => r && this.matchesRule(current, r)) || null
+		},
+
+		/**
+		 * The caption's colour class: the matching override's
+		 * `captionVariant`, else `content.captionVariant`, as
+		 * `cn-kpi-card__label--<variant>`. '' for `default` or an unknown
+		 * variant, so an uncoloured caption is what it always was.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stat-tile-colours-its-caption-by-rule
+		 * @return {string}
+		 */
+		captionVariantClass() {
+			const override = this.activeOverride
+			const variant = (override && override.captionVariant)
+				|| (this.activeCaptionRule && this.activeCaptionRule.variant)
+				|| this.content.captionVariant
+			if (!variant || variant === 'default' || !Object.hasOwn(VARIANT_COLORS, variant)) {
+				return ''
+			}
+			return `cn-kpi-card__label--${variant === 'danger' ? 'error' : variant}`
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or null
 		 * on surfaces (dashboards) that don't provide one.

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -8,6 +8,7 @@
 		<CnTabs
 			:aria-label="stripLabel"
 			:moreLabel="moreLabel"
+			:variant="stripVariant"
 			class="cn-tabs-widget__tabs"
 			@update:activeIndex="onTabChange">
 			<!-- One Actions menu for the whole widget, bound to whichever child
@@ -246,9 +247,10 @@ export default {
 		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
-		 * `moreLabel` names that menu.
+		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
+		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string }}
+		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -464,6 +466,17 @@ export default {
 			return this.activeTab?.label || ''
 		},
 
+		/**
+		 * The strip's look: `segmented` when the content asks for it, else
+		 * CnTabs' default `line`. An unknown value falls back to `line`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-tabs-widget-renders-a-segmented-strip
+		 * @return {('line'|'segmented')} The CnTabs variant.
+		 */
+		stripVariant() {
+			return this.content?.variant === 'segmented' ? 'segmented' : 'line'
+		},
+
 		/**
 		 * Accessible name for the tab strip.
 		 *