@conduction/nextcloud-vue 2.140.0 → 2.141.0

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

@@ -52,13 +52,11 @@
 	grid-row: 2;
 }
 
-/* A list page's breadcrumb and note read 15px; the case page's row stays 14px. */
-.cn-look-board .cn-index-page .cn-page-header .cn-header-trail.cn-detail-page__header-row2 {
-	font-size: 15px;
-}
-
-.cn-look-board .cn-index-page .cn-header-trail.cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
-	font-size: 15px;
+/* The note after the breadcrumb ("38 contracten bij 21 leveranciers") is 14px
+   muted on every Dq list board (37 of 37).
+   @spec openspec/changes/board-index-header-meta-14/specs/index-page/spec.md */
+.cn-look-board .cn-index-page .cn-page-header .cn-header-trail .cn-detail-page__header-meta {
+	font-size: 14px;
 }
 
 .cn-look-board .cn-index-page .cn-page-header .cn-header-trail ~ .cn-page-header__description {
@@ -982,6 +980,17 @@
 	text-decoration: none;
 }
 
+/* `rowTitle: "strong"` (DqZaaktypeStatussen "Statussen", "Resultaten"): the
+   name column of a card's list, the cell's 14px at weight 600 in the main
+   ink, no underline; the row stays a link.
+   @spec openspec/changes/table-strong-title/specs/table-strong-title/spec.md#requirement-a-tables-title-column-can-read-as-a-strong-name */
+.cn-look-board .cn-table-container--board.cn-table-container--title-strong .cn-data-table td.cn-table-col--title {
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: none;
+}
+
 /* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
    the name, the e-mail under the name beside it. The name keeps the title's
    weight and size, and its underline: an inline-flex box is atomic, so the
@@ -2101,3 +2110,77 @@
 .cn-look-board .cn-index-page--with-side-panel:not(.cn-look-nextcloud *) > .cn-index-page__quick-filter-row {
 	margin-bottom: calc(var(--cn-board-section-gap) + 12px);
 }
+
+/* ---- The side panel's filters as checkbox lists (DqZakenSorteren) ------- */
+/* "Filters" with "Alles wissen" beside it; per field its 14px semibold label
+   over rows of a checkbox, the value and its count in 13px muted at the end,
+   32px each.
+   @spec openspec/changes/board-sidebar-filters-as-checkbox-lists/specs/index-sidebar/spec.md#requirement-the-board-look-draws-a-short-filter-as-a-checkbox-list-with-counts */
+.cn-look-board .cn-index-sidebar__filters-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin-bottom: 14px;
+}
+
+.cn-look-board .cn-index-sidebar__filters-head h3 {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-index-sidebar__filters-clear {
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__filter-group:has(> .cn-index-sidebar__checklist) .cn-index-sidebar__filter-label {
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar__checklist {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 32px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row > input[type='checkbox'] {
+	width: 18px;
+	min-width: 18px;
+	height: 18px;
+	min-height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+
+.cn-look-board .cn-index-sidebar__checklist-label {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-count {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}

package/src/css/look-board.css

@@ -2173,6 +2173,26 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A list in a side card draws a hairline over every row, the first too, so
+   a line separates the title from the list (DqZaaktype*, DqTenant,
+   DqSociaalDomein, DqTaak "Versies" and the like). Its row titles keep the
+   main ink without an underline: the plain side rule marks them as links,
+   and the board underlines on hover only. The footer note is 13px muted; the
+   theme sets paragraphs through its tokens with `!important`, so the note
+   hands it its size and ink through those tokens. */
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__item {
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__row:not(:hover):not(:focus-visible) .cn-record-list__title {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-record-list__footer-note:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+}
+
 /* An audit row is a board list row (DqHandhaving, DqTenant "Historie"): 10px
    above and below, a hairline over every row including the first, the head
    and the line under it at their normal line height, 2px apart: 56px, the
@@ -2412,6 +2432,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	gap: 2px;
 }
 
+/* A stacked list (`density: "stacked"`) keeps its rows unruled and unpadded
+   in the board look too, 10px apart (DqDagAfsluiten "Morgen eerst").
+   @spec openspec/changes/record-list-stacked-density/specs/record-list-stacked-density/spec.md#requirement-a-record-list-can-stack-its-rows */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked .cn-record-list__row {
+	min-height: 0;
+	padding-block: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked.cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 0;
+}
+
+/* A dashboard card's task list and decision list rule above every row, the
+   first one under the title included, as the record lists with ruleAbove do
+   (DqMijnWerk "Mijn taken", "Mijn archiefbeoordelingen"); no rule under the
+   last row.
+   @spec openspec/changes/board-dashboard-lists-rule-above/specs/board-dashboard-lists-rule-above/spec.md#requirement-a-dashboard-task-or-decision-list-rules-above-every-row */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-tasks-widget__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-decision-list__row {
+	border-block-end: 0;
+	border-top: 1px solid var(--color-border);
+}
+
 /* Hover: the whole row takes the hover ground, 8px beyond the text so the
    text does not move. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
@@ -2680,6 +2723,17 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0;
 }
 
+/* A chart in a section of a sections widget (a framed section card, 14px
+   16px in) takes none of the dashboard card's inset either: its bars and plot
+   start 17px in, not 39 (DqDoorlooptijd "Naleving": Naleving per zaaktype,
+   Verdeling doorlooptijd, Maandelijkse SLA-trend, Doorstroom).
+   @spec openspec/changes/board-sections-chart-single-inset/specs/board-sections-chart-single-inset/spec.md#requirement-a-chart-inside-a-dashboard-sections-card-is-inset-once */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__html,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__canvas,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget > .cn-chart-widget__footnote {
+	padding: 0;
+}
+
 /* ---- A plain sections widget on a dashboard card ------------------------ */
 /* The card is flush, because a sections widget usually draws its own cards;
    the plain one draws none, so its body takes the card's side inset and 20px
@@ -2805,6 +2859,27 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* A toned cell takes the theme's status badge grounds, as the board's tones
+   are (DqHandhaving: #E7F3EA, #FFF4DE, #FCEDEC); the darkest tone has its
+   own token and otherwise deepens the error ground. Nextcloud's own mix of
+   the status colours read a shade off each.
+   @spec openspec/changes/board-matrix-tones/specs/board-matrix-tones/spec.md#requirement-a-board-matrix-cell-takes-the-themes-status-grounds */
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--success {
+	background: var(--nldesign-component-status-badge-success-background-color, var(--color-success-light, color-mix(in srgb, var(--color-success) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--warning {
+	background: var(--nldesign-component-status-badge-warning-background-color, var(--color-warning-light, color-mix(in srgb, var(--color-warning) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--error {
+	background: var(--nldesign-component-status-badge-error-background-color, var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--danger {
+	background: var(--nldesign-component-status-badge-danger-background-color, color-mix(in srgb, var(--color-error) 10%, var(--nldesign-component-status-badge-error-background-color, var(--color-main-background))));
+}
+
 /* A cell without a tone ("geen") sits on the page ground in the muted ink,
    as the board draws it; toned and coloured cells keep their ground.
    @spec openspec/changes/board-matrix-plain-cells/specs/board-matrix-plain-cells/spec.md#requirement-a-board-matrix-cell-without-a-tone-sits-on-the-ground-in-the-muted-ink */
@@ -3002,6 +3077,23 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A bar list with the value at the bar's end (DqProcesanalyse "Doorlooptijd
+   per status") sets its rows in 13px, the label in the secondary text, the
+   value in the main ink at 600, rows 34px apart.
+   @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end */
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) {
+	gap: 16px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-line {
+	font-size: 13px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-label {
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
+	color: var(--cn-board-text-soft);
+}
+
 /* A dialog's options as the boards draw them (DqVolgendeStap, DqBesluit,
    DqDocumentGenereren, DqFilterBewerken): rounded at 10px, an idle option
    edged in the dark border grey, and an 18px radio. The chosen option keeps

package/src/css/table.css

@@ -226,6 +226,18 @@
 	overflow-wrap: anywhere;
 }
 
+/* In a table fitted to its tile every column but the growing one asks for
+   as little width as its content allows (`width: 1%`). With
+   `overflow-wrap: anywhere` that is one character, so a wrapping head broke
+   letter by letter ("D o e l", DqDoorlooptijd "Prestaties per zaaktype",
+   240px tall). Here a wrapping column breaks between words and only breaks
+   a word that is longer than the column.
+   @spec openspec/changes/fit-table-wrap-by-word/specs/fit-table-wrap-by-word/spec.md#requirement-a-wrapping-column-in-a-fitted-table-breaks-between-words */
+.cn-data-table--fit th.cn-cell--wrap,
+.cn-data-table--fit td.cn-cell--wrap {
+	overflow-wrap: break-word;
+}
+
 /* Opt-in fixed layout (CnDataTable's `fixedLayout` prop).
 
    Under the default `table-layout: auto` a column's declared `width` is only a

package/src/utils/groupSublines.js

@@ -0,0 +1,125 @@
+/**
+ * The line under a team in a picker: how many members it has and what it is
+ * for ("6 leden · bezwaar, beroep en Woo-advies", board DqOverdragen).
+ *
+ * The count comes from Nextcloud's group details; that endpoint answers
+ * administrators and group admins only, so for anyone else the count is left
+ * out rather than guessed. Nextcloud keeps no description for a group, so the
+ * text comes from an app's own records when the app names them (`describe`:
+ * `{ register, schema, groupField?, textField? }`, by default the record's
+ * `ncGroupId` and `description`).
+ *
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * @module utils/groupSublines
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+
+import axios from '@nextcloud/axios'
+import { translatePlural as n } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import { fetchReferenceObjects } from './boardReferenceColumns.js'
+
+const descriptionCache = new Map()
+
+/**
+ * Member counts by group id for the groups a search finds. Fails soft to `{}`.
+ *
+ * @param {string} query The search term.
+ * @return {Promise<Record<string, number>>} Counts by group id.
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+async function memberCounts(query) {
+	try {
+		const response = await axios.get(generateOcsUrl('cloud/groups/details'), {
+			headers: { 'OCS-APIRequest': 'true', Accept: 'application/json' },
+			params: { search: query || '', limit: 50 },
+		})
+		const data = response && response.data && response.data.ocs ? response.data.ocs.data : (response && response.data)
+		const groups = data && Array.isArray(data.groups) ? data.groups : []
+		const out = {}
+		for (const group of groups) {
+			const count = Number(group && group.usercount)
+			if (group && group.id && Number.isFinite(count)) {
+				out[String(group.id)] = count
+			}
+		}
+		return out
+	} catch {
+		return {}
+	}
+}
+
+/**
+ * Descriptions by group id from the app's records. Read once per source.
+ *
+ * @param {{register?: string, schema?: string, groupField?: string, textField?: string}|null} describe The source.
+ * @return {Promise<Record<string, string>>} Descriptions by group id.
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+async function descriptions(describe) {
+	if (!describe || !describe.register || !describe.schema) {
+		return {}
+	}
+	const groupField = describe.groupField || 'ncGroupId'
+	const textField = describe.textField || 'description'
+	const key = [describe.register, describe.schema, groupField, textField].join('/')
+	if (!descriptionCache.has(key)) {
+		descriptionCache.set(key, fetchReferenceObjects({ register: describe.register, schema: describe.schema, limit: 500 })
+			.then((rows) => {
+				const out = {}
+				for (const row of rows) {
+					const gid = row && row[groupField]
+					const text = row && typeof row[textField] === 'string' ? row[textField].trim() : ''
+					if (gid && text && out[String(gid)] === undefined) {
+						out[String(gid)] = text
+					}
+				}
+				return out
+			})
+			.catch(() => {
+				descriptionCache.delete(key)
+				return {}
+			}))
+	}
+	return descriptionCache.get(key)
+}
+
+/**
+ * The line under each group: its member count and its description, joined by
+ * " · ", either left out when unknown.
+ *
+ * @param {string[]} ids The group ids to describe.
+ * @param {string} query The search the groups came from.
+ * @param {object|null} [describe] Where the app keeps a group's description.
+ * @return {Promise<Record<string, string>>} The line by group id ('' when nothing is known).
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+export async function groupSublines(ids, query, describe = null) {
+	if (!Array.isArray(ids) || ids.length === 0) {
+		return {}
+	}
+	const [counts, texts] = await Promise.all([memberCounts(query), descriptions(describe)])
+	const out = {}
+	for (const id of ids) {
+		const parts = []
+		if (counts[id] !== undefined) {
+			parts.push(n('nextcloud-vue', '{count} member', '{count} members', counts[id], { count: counts[id] }))
+		}
+		if (texts[id]) {
+			parts.push(texts[id])
+		}
+		out[id] = parts.join(' · ')
+	}
+	return out
+}
+
+/**
+ * Forget the cached descriptions (tests, or after the source changed).
+ *
+ * @return {void}
+ */
+export function clearGroupSublineCache() {
+	descriptionCache.clear()
+}