@conduction/nextcloud-vue 2.92.0 → 2.94.0

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,7 +130,7 @@
 								col.class || '',
 								pinClass(leadingCount + colIndex),
 								isGrowColumn(col) ? 'cn-table-col--grow' : '',
-								colIndex === 0 ? 'cn-table-head--title' : '',
+								colIndex === titleColumnIndex ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -259,7 +259,7 @@
 						<td
 							v-for="(col, colIndex) in effectiveColumns"
 							:key="col.key"
-							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
+							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === titleColumnIndex ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
 							:style="{ ...(col.width ? { maxWidth: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							@mouseenter="titleWhenClipped">
 							<!-- A row with a `rowClickRoute` is a real link: this anchor
@@ -267,7 +267,7 @@
 							     the URL, a middle or ctrl click opens a new tab natively,
 							     and the row is reachable with Tab. The row's own click
 							     handlers treat it as a nested control and leave it be. -->
-							<a v-if="colIndex === 0 && rowLinks[String(row[rowKey])]"
+							<a v-if="colIndex === titleColumnIndex && rowLinks[String(row[rowKey])]"
 								class="cn-table-row__link"
 								:href="rowLinks[String(row[rowKey])].href"
 								:aria-label="rowLinkLabel(row, col)"
@@ -281,9 +281,9 @@
 							     the record is locked. It renders nothing when unlocked,
 							     so an unlocked table is byte-for-byte what it was. -->
 							<CnUnreadMarker
-								v-if="colIndex === 0 && isUnreadRow(row)" />
+								v-if="colIndex === titleColumnIndex && isUnreadRow(row)" />
 							<CnLockIndicator
-								v-if="colIndex === 0"
+								v-if="colIndex === titleColumnIndex"
 								:object="row"
 								:size="16" />
 							<!-- Declared state indicators ride the first data cell
@@ -293,7 +293,7 @@
 							     however the record is shaped. Past the cap the rest move
 							     into the row menu, because a row of nine icons is not a
 							     row anyone can triage at a glance. -->
-							<span v-if="colIndex === 0 && indicatorsFor(row).shown.length > 0"
+							<span v-if="colIndex === titleColumnIndex && indicatorsFor(row).shown.length > 0"
 								class="cn-table-row-indicators"
 								data-testid="cn-row-indicators">
 								<span v-for="indicator in indicatorsFor(row).shown"
@@ -338,7 +338,7 @@
 							     file names it (OpenRegister `@self.matchedFile`): plain text,
 							     file name only, under the first cell. -->
 							<span
-								v-if="colIndex === 0 && matchedFileOf(row)"
+								v-if="colIndex === titleColumnIndex && matchedFileOf(row)"
 								class="cn-table-cell__secondary cn-table-cell__matched-file"
 								data-testid="cn-row-matched-file">{{ matchedFileLabel(row) }}</span>
 						</td>
@@ -404,7 +404,7 @@ import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { clearedColumnFilterParams, columnFilterDef, columnFilterParams, columnFilterState, isColumnFilterActive, isColumnSortable } from '../../utils/columnFilters.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, joinTemplateParts } from '../../utils/fillTemplate.js'
 import { lensUnavailableText, readLensReports } from '../../utils/lensAvailability.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { nextSortState } from '../../utils/multiColumnSort.js'
@@ -421,40 +421,6 @@ import { CnUnreadMarker } from '../CnUnreadMarker/index.js'
 // consuming app does not pull in the library's global css/index.css.
 import '../../css/table.css'
 
-/**
- * Fill a `secondary` template such as `"{identifier} · {requester}"`.
- *
- * A field without a value takes its separator with it: the text between two
- * fields belongs to the field after it, so an empty requester leaves
- * "2026-0002", not "2026-0002 ·", and an empty first field does not leave a
- * leading separator either. Text before the first field and after the last
- * one is kept as written. A template whose fields all have values fills
- * exactly as before.
- *
- * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-empty-field-takes-its-separator-with-it
- * @param {string} template The template, with `{field}` placeholders.
- * @param {(key: string) => string} valueOf The text of a field ('' when empty).
- * @return {string} The filled template.
- */
-function fillSecondaryTemplate(template, valueOf) {
-	// split() with a capture group alternates literal, field, literal, …
-	const parts = template.split(/\{([^}]+)\}/)
-	const lead = parts[0]
-	const tail = parts[parts.length - 1]
-	let body = ''
-	for (let i = 1; i < parts.length; i += 2) {
-		const value = valueOf(parts[i].trim())
-		if (value === '') {
-			continue
-		}
-		// The literal before this field: the separator, unless nothing has
-		// been written yet (then there is nothing to separate from).
-		const separator = i === 1 ? '' : parts[i - 1]
-		body += (body === '' ? '' : separator) + value
-	}
-	return lead + body + tail
-}
-
 /**
  * CnDataTable — Generic sortable data table for list views.
  *
@@ -566,7 +532,10 @@ export default {
 		 * formats through `fillTemplate`), or a function of the row. Empty fields leave their placeholder blank; a line that
 		 * resolves to nothing is not drawn.
 		 *
-		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, secondary: (string|((row: object) => string))}|string>}
+		 * `link: true` makes that column the one that names the row: it carries
+		 * the row link and the title look. Without it the first column does.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, link: boolean, secondary: (string|((row: object) => string))}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -776,6 +745,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Draw an unread record (`@self.unread`) in bold with the unread dot.
+		 * Off, every row reads alike whatever its read state.
+		 *
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-unread-rows-are-marked-only-where-the-reader-asked-for-them
+		 */
+		showUnread: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * How the board look draws the title column: `link` (the default) is
 		 * the 15px weight 600 underlined title of the DqZaken board; `plain` is
@@ -1079,6 +1059,20 @@ export default {
 		 * @return {string|null} The column key, or null when not fitting.
 		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
 		 */
+		/**
+		 * The column that names the row: it carries the row link, the title
+		 * look and the unread, lock and indicator marks. The first column with
+		 * `link: true`, else the first column (DqTeamwachtrij puts the waiting
+		 * time first and links the case title in the second).
+		 *
+		 * @return {number} The index in `effectiveColumns`.
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-a-column-can-carry-the-row-link
+		 */
+		titleColumnIndex() {
+			const index = this.effectiveColumns.findIndex((c) => c && c.link === true)
+			return index === -1 ? 0 : index
+		},
+
 		growColumnKey() {
 			if (!this.fitWidth || this.effectiveColumns.length === 0) {
 				return null
@@ -1399,13 +1393,14 @@ export default {
 
 		/**
 		 * Whether a row's record changed since the user last looked
-		 * (`@self.unread`). A row without the marker renders as it always did.
+		 * (`@self.unread`), when `showUnread` is on. A row without the marker
+		 * renders as it always did.
 		 *
 		 * @param {object} row The row.
 		 * @return {boolean} True when the row is unread.
 		 */
 		isUnreadRow(row) {
-			return !!(row && row['@self'] && row['@self'].unread === true)
+			return this.showUnread && !!(row && row['@self'] && row['@self'].unread === true)
 		},
 
 		/**
@@ -1790,7 +1785,7 @@ export default {
 				return ''
 			}
 			if (spec.includes('{')) {
-				const filled = fillSecondaryTemplate(spec, (key) => (key.includes('|')
+				const filled = joinTemplateParts(spec, (key) => (key.includes('|')
 					? fillTemplate(`{${key}}`, row)
 					: this.secondaryFieldText(row, key)))
 				// A template whose every field is empty leaves only separators:

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2631,8 +2631,10 @@ export default {
 		/**
 		 * The meta line on row 2 of the board look's header (manifest
 		 * `config.headerMeta`): a field template such as `"via {channel}"`.
-		 * Every `{path}` is read from the record; a line with an empty value
-		 * is dropped. Only the board look draws it.
+		 * Every `{path}` is read from the record (an enum field as its label);
+		 * `{path|format}` formats it (`weekday`, `longdate`, `time`, `user`,
+		 * `currency:EUR`, ...). An empty token drops itself and its separator;
+		 * a line with no value at all is dropped. Only the board look draws it.
 		 *
 		 * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-the-detail-header-is-two-rows-on-the-ground
 		 */
@@ -2991,7 +2993,7 @@ export default {
 		 * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-the-detail-header-is-two-rows-on-the-ground
 		 */
 		headerMetaText() {
-			return resolveHeaderMeta(this.headerMeta ? this.effectiveTranslate(this.headerMeta) : '', this.resolvedObject)
+			return resolveHeaderMeta(this.headerMeta ? this.effectiveTranslate(this.headerMeta) : '', this.resolvedObject, { schema: this.currentSchema, translate: this.effectiveTranslate })
 		},
 
 		/**

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -257,7 +257,7 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `fields` — the entries, in order. Each is `{ path, label?, as?, format?, map?, itemPath?, parts?, separator?, route?, variant?, variantMap?, colorMap?, icon?, copy?, reveal?, text?, title?, subtitle?, initialsPath?, tone? }`.
+		 * - `fields` — the entries, in order. Each is `{ path, label?, as?, from?, format?, map?, itemPath?, parts?, separator?, route?, variant?, variantMap?, colorMap?, icon?, copy?, reveal?, text?, title?, subtitle?, initialsPath?, tone? }`.
 		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`) or `pill`.
 		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
@@ -265,7 +265,7 @@ export default {
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
-		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object.
+		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `link` — `{ label, route? | href? }` at the foot.
 		 * - `hideEmpty` — drop an entry whose value is empty (default true).
 		 * - `emptyText` — shown when no entry has a value.
@@ -370,8 +370,8 @@ export default {
 		 * @return {Array<object>}
 		 */
 		blocks() {
-			const record = this.record
-			if (!record) {
+			const sourceRecord = this.record
+			if (!sourceRecord) {
 				return []
 			}
 			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
@@ -381,6 +381,8 @@ export default {
 				if (!field || typeof field !== 'object') {
 					return
 				}
+				// `from: "object"` reads the page's own object while the card shows a `source`.
+				const record = field.from === 'object' && this.objectData ? this.objectData : sourceRecord
 				const kind = this.kindOf(field)
 				const key = String(field.key || field.path || `${kind}-${index}`).replace(/[^\w-]/g, '-')
 				const value = this.entryValue(record, field, kind)

package/src/components/CnFeaturesAndRoadmapPage/CnFeaturesAndRoadmapPage.vue

@@ -29,7 +29,11 @@
 		:llmSkillsUrl="resolvedLlmSkillsUrl"
 		:suggestUrl="resolvedSuggestUrl"
 		:documentationUrl="resolvedDocumentationUrl"
-		:capabilityComparison="resolvedCapabilityComparison" />
+		:capabilityComparison="resolvedCapabilityComparison"
+		:categories="categories || {}"
+		:board="board || {}"
+		:title="title"
+		:appVersion="resolvedAppVersion" />
 </template>
 
 <script>
@@ -188,6 +192,47 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Feature category key to caption, for the board look's groups.
+		 * Manifest `config.categories`.
+		 *
+		 * @type {object|null}
+		 */
+		categories: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * Board look options (`layout`, `tabs`, `filter`, `statusLabels`,
+		 * `next`, `issueLabels`, `subtitle`, `notice`, `documentationButton`,
+		 * `suggestButton`). Manifest `config.board`; see CnFeaturesBoard.
+		 *
+		 * @type {object|null}
+		 */
+		board: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * Page title, lifted from the manifest page's `title`. Shown in the
+		 * board look.
+		 */
+		title: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * The app version for the board look's subtitle. Manifest config >
+		 * initialState (`features_roadmap_app_version`) > ''.
+		 */
+		appVersion: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Override for the appId used to namespace loadState lookups.
 		 * Tests pass an explicit value; production reads it from the
@@ -283,6 +328,11 @@ export default {
 				|| readInitialState(this.effectiveAppId, 'features_roadmap_suggest_url', '')
 		},
 
+		resolvedAppVersion() {
+			return this.appVersion
+				|| readInitialState(this.effectiveAppId, 'features_roadmap_app_version', '')
+		},
+
 		resolvedDocumentationUrl() {
 			return this.documentationUrl
 				|| readInitialState(this.effectiveAppId, 'features_roadmap_documentation_url', '')

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -7,6 +7,19 @@
 				</template>
 			</NcEmptyContent>
 		</div>
+		<CnFeaturesBoard
+			v-else-if="isBoardLook"
+			:features="features"
+			:categories="categories"
+			:repo="repo"
+			:title="title"
+			:appVersion="appVersion"
+			:documentationUrl="resolvedDocumentationUrl"
+			:suggestUrl="resolvedSuggestUrl"
+			:openbuiltUrl="resolvedOpenbuiltUrl"
+			:llmSkillsUrl="resolvedLlmSkillsUrl"
+			v-bind="boardOptions"
+			@support="openSupportDialog" />
 		<template v-else>
 			<header class="cn-features-and-roadmap-view__header">
 				<h2 class="cn-features-and-roadmap-view__title">
@@ -57,19 +70,18 @@
 					:comparison="capabilityComparison" />
 				<CnRoadmapTab v-else :repo="repo" />
 			</main>
-
-			<CnSupportDialog
-				v-if="showSupportDialog"
-				:appName="resolvedAppName"
-				:appSlug="resolvedAppSlug"
-				:appStoreUrl="resolvedAppStoreUrl"
-				:featureRequestUrl="resolvedFeatureRequestUrl"
-				:donateUrl="donateUrl"
-				:supportUrl="supportUrl"
-				:founderName="founderName"
-				:founderTitle="founderTitle"
-				@close="showSupportDialog = false" />
 		</template>
+		<CnSupportDialog
+			v-if="showSupportDialog && !disabled"
+			:appName="resolvedAppName"
+			:appSlug="resolvedAppSlug"
+			:appStoreUrl="resolvedAppStoreUrl"
+			:featureRequestUrl="resolvedFeatureRequestUrl"
+			:donateUrl="donateUrl"
+			:supportUrl="supportUrl"
+			:founderName="founderName"
+			:founderTitle="founderTitle"
+			@close="showSupportDialog = false" />
 	</div>
 </template>
 
@@ -111,9 +123,11 @@ import RoadVariant from 'vue-material-design-icons/RoadVariant.vue'
 import TableSearch from 'vue-material-design-icons/TableSearch.vue'
 import CnCapabilityTable from '../CnCapabilityTable/CnCapabilityTable.vue'
 import CnFeaturesAndRoadmapSidebar from '../CnFeaturesAndRoadmapSidebar/CnFeaturesAndRoadmapSidebar.vue'
+import CnFeaturesBoard from '../CnFeaturesBoard/CnFeaturesBoard.vue'
 import CnFeaturesTab from '../CnFeaturesTab/CnFeaturesTab.vue'
 import CnRoadmapTab from '../CnRoadmapTab/CnRoadmapTab.vue'
 import CnSupportDialog from '../CnSupportDialog/CnSupportDialog.vue'
+import { normalizeLook } from '../../composables/useLook.js'
 import { warnCapabilityComparisonDeprecated } from '../../utils/capabilityComparison.js'
 import { buildFeatureRequestUrl, DEFAULT_FORGE } from '../../utils/forge.js'
 
@@ -137,6 +151,7 @@ export default {
 		RoadVariant,
 		TableSearch,
 		CnCapabilityTable,
+		CnFeaturesBoard,
 		CnFeaturesTab,
 		CnRoadmapTab,
 		CnSupportDialog,
@@ -158,6 +173,8 @@ export default {
 		 * unmount. Same holder CnIndexPage uses.
 		 */
 		cnIndexSidebarConfig: { default: () => ({ value: null }) },
+		/** The app's look, provided by CnAppRoot (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -192,6 +209,46 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Feature category key to caption, in the order the board look shows
+		 * the groups. A feature names its group with `category`.
+		 *
+		 * @type {object}
+		 */
+		categories: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/**
+		 * Board look options, passed to CnFeaturesBoard: `layout` (`cards` or
+		 * `rows`), `tabs`, `filter` (`chips` or `segmented`), `statusLabels`,
+		 * `next`, `issueLabels`, `subtitle`, `notice`, `documentationButton`
+		 * and `suggestButton`. Ignored in the default look.
+		 *
+		 * @type {object}
+		 */
+		board: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/**
+		 * Page title in the board look. Empty reads "Features and roadmap".
+		 */
+		title: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * The app version, for `{appVersion}` in the board look's subtitle.
+		 */
+		appVersion: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Admin opt-out flag — when true the entire view collapses to a
 		 * single "disabled by admin" empty state.
@@ -387,6 +444,32 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the page is drawn in the board look.
+		 *
+		 * @return {boolean}
+		 */
+		isBoardLook() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * The board options CnFeaturesBoard declares, so an unknown key in the
+		 * manifest never lands on its root element as an attribute.
+		 *
+		 * @return {object}
+		 */
+		boardOptions() {
+			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'documentationButton', 'suggestButton']
+			const options = {}
+			for (const key of keys) {
+				if (this.board && this.board[key] !== undefined && this.board[key] !== null) {
+					options[key] = this.board[key]
+				}
+			}
+			return options
+		},
+
 		/**
 		 * The stops the header toggle cycles through. Without a capability
 		 * comparison this is the two-stop list every consumer has today, and
@@ -580,7 +663,9 @@ export default {
 			if (!this.cnHostsIndexSidebar || !this.cnIndexSidebarConfig) {
 				return
 			}
-			if (this.disabled) {
+			// The board look has no right-hand column: its links sit in the
+			// board's Actions menu.
+			if (this.disabled || this.isBoardLook) {
 				this.cnIndexSidebarConfig.value = null
 				return
 			}