@conduction/nextcloud-vue 2.100.0 → 2.101.0

package/l10n/en.json

@@ -1700,7 +1700,27 @@
     "Run test": "Run test",
     "Test with a record": "Test with a record",
     "admin": "admin",
-    "Wizard": "Wizard"
+    "Wizard": "Wizard",
+    "{done} of {total} reviewed": "{done} of {total} reviewed",
+    "{open} still to review": "{open} still to review",
+    "{action}: {name}": "{action}: {name}",
+    "On the map": "On the map",
+    "Show them in the table": "Show them in the table",
+    "Linked": "Linked",
+    "Now": "Now",
+    "Tell me above a number": "Tell me above a number",
+    "Threshold": "Threshold",
+    "A message to you when there are {threshold} or more": "A message to you when there are {threshold} or more",
+    "Save this search or open a saved one to set an alert on it.": "Save this search or open a saved one to set an alert on it.",
+    "The alert could not be saved.": "The alert could not be saved.",
+    "Your exports could not be loaded.": "Your exports could not be loaded.",
+    "You have no exports here.": "You have no exports here.",
+    "Expires today": "Expires today",
+    "Download": "Download",
+    "Made {date}": "Made {date}",
+    "expires {date}": "expires {date}",
+    "Loading …": "Loading …",
+    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys"
   },
   "plurals": {
     "{count} selected": [
@@ -1798,6 +1818,22 @@
     "Showing %n flow": [
       "Showing %n flow",
       "Showing %n flows"
+    ],
+    "%n without an address": [
+      "%n without an address",
+      "%n without an address"
+    ],
+    "%n with an address on the map": [
+      "%n with an address on the map",
+      "%n with an address on the map"
+    ],
+    "%n result": [
+      "%n result",
+      "%n results"
+    ],
+    "downloaded %n time": [
+      "downloaded %n time",
+      "downloaded %n times"
     ]
   }
 }

package/l10n/nl.json

@@ -1915,7 +1915,25 @@
     "Run test": "Test uitvoeren",
     "Test with a record": "Testen met een record",
     "admin": "beheerder",
-    "Wizard": "Assistent"
+    "Wizard": "Assistent",
+    "{done} of {total} reviewed": "{done} van {total} beoordeeld",
+    "{open} still to review": "Nog {open} te beoordelen",
+    "{action}: {name}": "{action}: {name}",
+    "On the map": "Op de kaart",
+    "Show them in the table": "Toon ze in de tabel",
+    "Linked": "Gekoppeld",
+    "Now": "Nu",
+    "Tell me above a number": "Melden boven een aantal",
+    "Threshold": "Grens",
+    "A message to you when there are {threshold} or more": "Bericht aan u als het er {threshold} of meer zijn",
+    "Save this search or open a saved one to set an alert on it.": "Sla deze zoekopdracht op of open een opgeslagen zoekopdracht om er een melding op te zetten.",
+    "The alert could not be saved.": "De melding kon niet worden opgeslagen.",
+    "Your exports could not be loaded.": "Uw exports konden niet worden geladen.",
+    "You have no exports here.": "U heeft hier geen exports.",
+    "Expires today": "Verloopt vandaag",
+    "Made {date}": "Gemaakt {date}",
+    "expires {date}": "verloopt {date}",
+    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag"
   },
   "plurals": {
     "{count} selected": [
@@ -2013,6 +2031,22 @@
     "Showing %n flow": [
       "%n flow",
       "%n flows"
+    ],
+    "%n without an address": [
+      "%n zonder adres",
+      "%n zonder adres"
+    ],
+    "%n with an address on the map": [
+      "%n met een adres op de kaart",
+      "%n met een adres op de kaart"
+    ],
+    "%n result": [
+      "%n resultaat",
+      "%n resultaten"
+    ],
+    "downloaded %n time": [
+      "%n keer gedownload",
+      "%n keer gedownload"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.100.0",
+  "version": "2.101.0",
   "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/CnChoiceCards/CnChoiceCards.md

@@ -87,4 +87,43 @@ under it through the `option-actions` slot (scope `{ option, selected }`):
 </div>
 ```
 
+The chosen option's own fields can also sit inside its frame, under its text,
+through the `option-details` slot (scope `{ option }`): rendered only for the
+selected option, and outside the radio's label.
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Next step"
+    layout="rows"
+    :model-value="'suspend'"
+    :options="[
+      { value: 'suspend', label: 'Suspend', description: 'The term stops until the answer is in.' },
+      { value: 'abort', label: 'Abort' },
+    ]">
+    <template #option-details="{ option }">
+      <p v-if="option.value === 'suspend'" style="margin: 0;">Reason and return date go here.</p>
+    </template>
+  </CnChoiceCards>
+</div>
+```
+
+A recorded choice shown back with `readonly`: every option at full contrast, the
+chosen one marked, nothing pickable. `disabled` greys the options out instead.
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Outcome"
+    layout="rows"
+    :readonly="true"
+    :model-value="'partial'"
+    :options="[
+      { value: 'public', label: 'Made public' },
+      { value: 'partial', label: 'Partly made public' },
+      { value: 'none', label: 'Not made public' },
+    ]" />
+</div>
+```
+
 `columns` fixes the card grid's column count; `:columns="1"` stacks the cards in one column.

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -20,17 +20,18 @@
 			<div
 				v-for="option in normalizedOptions"
 				:key="String(option.value)"
-				class="cn-choice-cards__cell">
+				class="cn-choice-cards__cell"
+				:class="{ 'cn-choice-cards__cell--with-details': hasDetails(option) }">
 				<label
 					class="cn-choice-cards__row"
-					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option) }">
+					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option), 'cn-choice-cards__row--readonly': readonly }">
 					<input
 						class="cn-choice-cards__row-input"
 						:type="multiple ? 'checkbox' : 'radio'"
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="isDisabled(option)"
+						:disabled="isDisabled(option) || readonly"
 						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnIcon v-if="option.icon"
@@ -47,6 +48,16 @@
 							data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
 					</span>
 				</label>
+				<div v-if="hasDetails(option)"
+					class="cn-choice-cards__details"
+					:data-testid="`cn-choice-cards-details-${option.value}`">
+					<!-- @slot option-details The chosen option's own fields, drawn
+					     inside the selected row's frame under its text (DqVolgendeStap:
+					     Opschorten's reason, days and return date). Rendered only for a
+					     selected option, outside the label so a field is not part of
+					     the radio's label. Scope: `{ option }`. -->
+					<slot name="option-details" :option="option" />
+				</div>
 				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
 					<slot name="option-actions" :option="option" :selected="isSelected(option)" />
 				</div>
@@ -64,7 +75,7 @@
 				class="cn-choice-cards__cell">
 				<label
 					class="cn-choice-cards__option"
-					:class="{ 'cn-choice-cards__option--selected': isSelected(option) }">
+					:class="{ 'cn-choice-cards__option--selected': isSelected(option), 'cn-choice-cards__option--disabled': isDisabled(option) }">
 					<!-- A REAL, VISIBLE input, not a styled div with a click handler.
 					     It carries the checked state to assistive technology and to
 					     Windows high-contrast mode for free, and it keeps the
@@ -76,7 +87,7 @@
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="isDisabled(option)"
+						:disabled="isDisabled(option) || readonly"
 						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnCard
@@ -191,6 +202,16 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Show the choice without letting it change: every option at full
+		 * contrast, the selected one marked, nothing pickable (DqBesluit's
+		 * recorded outcome). `disabled` greys the options out instead.
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Show a spinner instead of the grid while options are being fetched. */
 		loading: {
 			type: Boolean,
@@ -311,6 +332,17 @@ export default {
 		 * @param {object} option The normalised option.
 		 * @return {boolean} True when selected.
 		 */
+		/**
+		 * Whether a rows option draws the `option-details` slot in its frame:
+		 * the slot is given and the option is the chosen one.
+		 *
+		 * @param {object} option The option.
+		 * @return {boolean}
+		 */
+		hasDetails(option) {
+			return Boolean(this.$slots['option-details']) && this.isSelected(option)
+		},
+
 		/**
 		 * Whether an option cannot be picked: the whole group is disabled, or the option is.
 		 *
@@ -342,7 +374,7 @@ export default {
 		 * @return {void}
 		 */
 		onToggle(option) {
-			if (this.isDisabled(option)) {
+			if (this.readonly || this.isDisabled(option)) {
 				return
 			}
 			if (!this.multiple) {
@@ -452,7 +484,7 @@ export default {
 	cursor: default;
 }
 
-.cn-choice-cards__input:disabled + :deep(.cn-card) {
+.cn-choice-cards__option--disabled .cn-choice-cards__input + :deep(.cn-card) {
 	opacity: 0.6;
 }
 
@@ -462,11 +494,12 @@ export default {
 	gap: 8px;
 }
 
+/* 12px 14px, as the boards draw an option row (DqVolgendeStap, DqBesluit). */
 .cn-choice-cards__row {
 	display: flex;
 	align-items: flex-start;
 	gap: 12px;
-	padding: 14px 16px;
+	padding: 12px 14px;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 	background: var(--color-main-background);
@@ -485,9 +518,54 @@ export default {
 	background: var(--color-primary-element-light);
 }
 
-.cn-choice-cards__row--disabled {
+/* An option this record does not allow: the grey ground and the muted ink,
+   still legible (DqVolgendeStap), not faded. */
+.cn-choice-cards__row--disabled,
+.cn-choice-cards__row--disabled:hover {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	border-color: var(--color-border);
+	background: var(--color-background-hover);
+	color: var(--color-text-maxcontrast);
 	cursor: default;
-	opacity: 0.6;
+}
+
+/* The title takes the muted ink itself: a theme that colours every label
+   with `!important` (thematiq) would otherwise hand it the label colour. */
+.cn-choice-cards__row--disabled .cn-choice-cards__row-title {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+}
+
+/* The chosen option's fields share the selected row's frame: the cell draws
+   the 2px primary border and the ground, the row inside it draws none, and
+   the fields sit under the text, indented to it (DqVolgendeStap). */
+.cn-choice-cards__cell--with-details {
+	border: 1px solid var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	box-shadow: inset 0 0 0 1px var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+
+.cn-choice-cards__cell--with-details .cn-choice-cards__row,
+.cn-choice-cards__cell--with-details .cn-choice-cards__row:hover {
+	border-color: transparent;
+	box-shadow: none;
+	background: transparent;
+}
+
+.cn-choice-cards__details {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 0 14px 14px 44px;
+}
+
+.cn-choice-cards__row--readonly {
+	cursor: default;
+}
+
+.cn-choice-cards__row--readonly:not(.cn-choice-cards__row--selected):hover {
+	border-color: var(--color-border);
 }
 
 .cn-choice-cards__row:has(.cn-choice-cards__row-input:focus-visible) {
@@ -518,15 +596,14 @@ export default {
 	font-weight: 600;
 }
 
-.cn-choice-cards__row-description {
-	font-size: 13px;
-	color: var(--color-text-maxcontrast);
-}
-
+/* Regular weight on the span itself: a theme that sets every label bold
+   with `!important` (thematiq) reaches a span that only inherits. */
+.cn-choice-cards__row-description,
 .cn-choice-cards__reason {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	font-size: 13px;
+	font-weight: 400;
 	color: var(--color-text-maxcontrast);
-	font-style: italic;
 }
 
 .cn-choice-cards__reason--card {

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -42,12 +42,13 @@
 				     group ends the description line ("Week 41 · alle teams ·
 				     [Deze week | Dit kwartaal | Dit jaar]"). -->
 				<div
-					v-if="datePeriodInDescription"
+					v-if="datePeriodInDescription || descriptionPageFilters.length > 0"
 					class="cn-dashboard-page__description cn-dashboard-page__description--with-period"
 					data-testid="cn-dashboard-page-subtitle">
 					<span v-if="subtitleText">{{ subtitleText }}</span>
 					<span v-if="subtitleText" aria-hidden="true">&middot;</span>
 					<CnSegmentedControl
+						v-if="datePeriodInDescription"
 						size="compact"
 						mode="toggle"
 						:options="segmentedOptions"
@@ -55,6 +56,20 @@
 						:ariaLabel="datePeriodLabel"
 						data-testid="cn-dashboard-page-date-segmented"
 						@update:modelValue="onSegmentPick" />
+					<!-- A page filter with `control: "segmented"` and
+					     `placement: "description"` (DqProcesanalyse
+					     "Gemiddeld | Mediaan"): a segmented group on the
+					     description line that writes the workspace context. -->
+					<CnSegmentedControl
+						v-for="pf in descriptionPageFilters"
+						:key="pf.key"
+						size="compact"
+						mode="toggle"
+						:options="pageFilterSegments(pf)"
+						:modelValue="workspaceContext[pf.key]"
+						:ariaLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
+						:data-testid="'cn-page-filter-' + pf.key"
+						@update:modelValue="onPageFilterChange(pf, $event)" />
 				</div>
 				<p v-else-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
 					{{ subtitleText }}
@@ -316,23 +331,33 @@
 		     `@page.<key>` / `@workspace.<key>` token (e.g. an endpoint KPI's URL
 		     interpolating a chosen period). -->
 		<div
-			v-if="pageFilters && pageFilters.length"
+			v-if="rowPageFilters.length > 0"
 			class="cn-dashboard-page__page-filters"
 			data-testid="cn-dashboard-page-page-filters">
-			<label
-				v-for="pf in pageFilters"
-				:key="pf.key"
-				class="cn-dashboard-page__page-filter">
-				<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ pf.label }}</span>
-				<NcSelect
-					:modelValue="selectedPageFilterOption(pf)"
-					:options="pf.options || []"
-					:clearable="false"
-					:inputLabel="pf.label || pf.key"
-					label="label"
+			<template v-for="pf in rowPageFilters" :key="pf.key">
+				<CnSegmentedControl
+					v-if="pf.control === 'segmented'"
+					size="compact"
+					mode="toggle"
+					:options="pageFilterSegments(pf)"
+					:modelValue="workspaceContext[pf.key]"
+					:ariaLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
 					:data-testid="'cn-page-filter-' + pf.key"
 					@update:modelValue="onPageFilterChange(pf, $event)" />
-			</label>
+				<label
+					v-else
+					class="cn-dashboard-page__page-filter">
+					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ pf.label }}</span>
+					<NcSelect
+						:modelValue="selectedPageFilterOption(pf)"
+						:options="pf.options || []"
+						:clearable="false"
+						:inputLabel="pf.label || pf.key"
+						label="label"
+						:data-testid="'cn-page-filter-' + pf.key"
+						@update:modelValue="onPageFilterChange(pf, $event)" />
+				</label>
+			</template>
 		</div>
 
 		<!-- Declarative in-body sections, `placement: "before-grid"` — host-app
@@ -1678,13 +1703,18 @@ export default {
 		 * read it via a `@page.<key>` / `@workspace.<key>` token — e.g. a period
 		 * selector that every endpoint-bound KPI's URL interpolates.
 		 *
-		 * Each entry: `{ key, label?, type?: 'select', options: [{ value, label }],
-		 * default? }`. `key` is the workspace-context key written on change;
-		 * `default` (or the first option) seeds it on mount. Only `'select'` is
-		 * supported today. Empty (the default) renders no controls and leaves the
-		 * context untouched.
+		 * Each entry: `{ key, label?, type?: 'select', control?, placement?,
+		 * options: [{ value, label }], default? }`. `key` is the workspace-context
+		 * key written on change; `default` (or the first option) seeds it on
+		 * mount. The control is a select, or with `control: 'segmented'` a
+		 * compact segmented group; `placement: 'description'` puts a segmented
+		 * group on the header's description line, after the period group
+		 * (DqProcesanalyse "Gemiddeld | Mediaan"). An endpoint widget can read
+		 * the value in its `responsePath` too (`phaseDays.@workspace.measure`).
+		 * Empty (the default) renders no controls and leaves the context
+		 * untouched.
 		 *
-		 * @type {Array<{key: string, label?: string, type?: string, options: Array<{value: (string|number), label: string}>, default?: (string|number)}>}
+		 * @type {Array<{key: string, label?: string, type?: string, control?: ('select'|'segmented'), placement?: ('row'|'description'), options: Array<{value: (string|number), label: string}>, default?: (string|number)}>}
 		 */
 		pageFilters: {
 			type: Array,
@@ -2343,6 +2373,33 @@ export default {
 				&& this.dateRange.placement === 'description' && !this.hasCustomPreset
 		},
 
+		/**
+		 * The page filters drawn as a segmented group on the description
+		 * line (`control: "segmented"`, `placement: "description"`).
+		 * Without a header row they fall back to the filter row.
+		 *
+		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
+		 * @return {Array<object>}
+		 */
+		descriptionPageFilters() {
+			if (!this.showHeader) {
+				return []
+			}
+			return (this.pageFilters || []).filter((pf) => pf && pf.key && pf.control === 'segmented' && pf.placement === 'description')
+		},
+
+		/**
+		 * The page filters drawn in the filter row under the header: every
+		 * filter the description line does not draw.
+		 *
+		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
+		 * @return {Array<object>}
+		 */
+		rowPageFilters() {
+			const inDescription = this.descriptionPageFilters
+			return (this.pageFilters || []).filter((pf) => pf && pf.key && !inDescription.includes(pf))
+		},
+
 		/**
 		 * The preset list passed to the picker. Falls back to the
 		 * `DEFAULT_DATE_RANGE_PRESETS` constant when the consumer
@@ -2795,6 +2852,18 @@ export default {
 			return (pf.options || []).find((o) => o.value === current) || null
 		},
 
+		/**
+		 * A page filter's options as segments, labels through the host
+		 * translate.
+		 *
+		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
+		 * @param {object} pf The page-filter descriptor.
+		 * @return {Array<{value: (string|number), label: string}>}
+		 */
+		pageFilterSegments(pf) {
+			return (pf.options || []).map((o) => ({ value: o.value, label: o.label ? this.effectiveTranslate(o.label) : String(o.value) }))
+		},
+
 		/**
 		 * Write a page filter's new selection into the reactive workspace
 		 * context so every `@page.<key>` / `@workspace.<key>` token re-resolves.