@conduction/nextcloud-vue 2.148.0 → 2.150.0

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

@@ -751,6 +751,14 @@
 	padding: calc(12px - var(--cn-board-first-line-leading)) var(--cn-board-card-inline-padding) 20px;
 }
 
+/* A card that opens on a record-list table starts 12px under its title: the
+   table's head row sets its own padding and line height, so no first line
+   carries the half-leading the rule above takes off (r31 DqZaaktype
+   "Berichten aan de aanvrager" sat 2.2px high). */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content:has(> .cn-record-list > .cn-record-list__table:first-child):not(.cn-look-nextcloud *) {
+	padding-top: 12px;
+}
+
 /* A history card with stacked rows (DqTaak "Historie") opens on the first
    row's hairline 6px under the title, the row's own 12px padding above its
    text, as drawn: 19px from the title to the first action.
@@ -841,6 +849,15 @@
 	font-weight: 500;
 }
 
+/* The files table's checkbox column is the board's 42px (12px either side
+   of the 18px box): DqZaakDocumenten and DqDocumentenBeheer both draw it so.
+   The component's 36px pushed the file icon and name 6px left (r31: name 96
+   vs 100; probed with the rule: icon 54 as drawn, name 102).
+   @spec openspec/changes/board-files-select-column-42/specs/board-files-select-column-42/spec.md#requirement-the-files-tables-checkbox-column-is-42px */
+.cn-look-board .cn-files-browser__col-select:not(.cn-look-nextcloud *) {
+	width: 42px;
+}
+
 /* A labelled select in a page card is the board's field, as in a board
    dialog (dialog.css): its label above the control at 14px/600 on the normal
    line (the theme's label weight token set to 600 here), the control 40px,
@@ -1584,10 +1601,10 @@
 
 /* The buttons above the groups are the card's 34px controls ("Bekijken als
    flow", "Taak toevoegen"), not the page's 40px ones. */
-/* The buttons sit 14px under the subtitle and 14px above the groups, the
-   card's gap (the content's own 12px top padding plus 2px). */
+/* The buttons sit 14px above the groups, the card's gap; above them the
+   content's own top padding is the space under the subtitle. */
 .cn-look-board .cn-grouped-cards__actions.cn-grouped-cards__actions:not(.cn-look-nextcloud *) {
-	margin-block: 2px 14px;
+	margin-block: 0 14px;
 }
 
 .cn-look-board .cn-grouped-cards__actions:not(.cn-look-nextcloud *) .button-vue {
@@ -2379,3 +2396,35 @@
 .cn-look-board .cn-timeline-manage__draft-label:not(.cn-look-nextcloud *) {
 	line-height: 1.2;
 }
+
+/* A facts card's link with an icon (Werkinstructie) sets the icon beside its
+   text, 10px apart, the text on the normal line starting 10px under the
+   title, as the Dq boards draw it. The anchor was a block, so the icon stood
+   on its own line above the text (r31).
+   @spec openspec/changes/board-facts-link-icon-beside-text/specs/facts-widget/spec.md */
+.cn-look-board .cn-facts-widget .cn-facts-widget__link:has(> .material-design-icon):not(.cn-look-nextcloud *) {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-top: var(--cn-board-first-line-leading);
+	line-height: normal;
+}
+
+/* A table in a detail page card names each row in the link colour at 14px,
+   as DqZaakGerelateerd draws "Deelzaken" and "Objecten" (r31: 15px in the
+   body ink). The row opens the record, so its name reads as the link.
+   @spec openspec/changes/board-detail-table-title-cells/specs/board-tables/spec.md */
+.cn-look-board .cn-detail-page .cn-object-list-widget td.cn-table-col--title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-page .cn-object-list-widget td.cn-table-col--title .cn-cell-renderer:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+	line-height: 1.2;
+	color: var(--color-primary-element);
+}
+
+/* A data card keeps its 14px under a subtitle too (DqZaakBetrokkenen
+   "Zetels"): the subtitle rule's 12px won over the data card's 14px, so the
+   labels sat 2.2px high (r31).
+   @spec openspec/changes/board-data-card-under-subtitle/specs/board-card/spec.md */
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *):has(> .cn-widget-wrapper__header .cn-widget-wrapper__subtitle) > .cn-widget-wrapper__content:has(> .cn-object-data-widget__grid-wrap) {
+	padding-top: 14px;
+}

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

@@ -1079,8 +1079,9 @@
    @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral {
 	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft);
 	font-size: 13px;
+	line-height: normal;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar:has(.cn-cell-renderer__avatar-initials--neutral) {
@@ -1513,17 +1514,19 @@
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 	text-decoration: none;
 	white-space: normal;
 }
 
 .cn-look-board .cn-object-card--board .cn-object-card__record-meta {
 	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: normal;
 	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
 }
 
 /* The meta line, note and description are paragraphs: each hands the theme,
@@ -1531,11 +1534,13 @@
 .cn-look-board .cn-object-card--board .cn-object-card__record-note {
 	--nldesign-component-paragraph-font-size: 13px;
 	--nldesign-component-paragraph-font-weight: 600;
+	--nldesign-component-paragraph-line-height: normal;
 	--nldesign-component-paragraph-color: var(--cn-board-text-soft);
 	margin: 0;
 	color: var(--cn-board-text-soft);
 	font-size: 13px;
 	font-weight: 600;
+	line-height: normal;
 }
 
 .cn-look-board .cn-object-card--board .cn-object-card__record-note--purple {
@@ -1703,9 +1708,19 @@
 	--app-sidebar-width: 360px;
 }
 
+/* The subtitle 2px under the title at a normal line height, and the tab's
+   content 20px in from the panel edge (the tab's 10px and 10px here), as
+   DqFilterBeheren draws the side panel.
+   @spec openspec/changes/board-side-panel-rhythm/specs/board-side-panel-rhythm/spec.md */
 .cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar-header__subname {
+	margin-top: 2px;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .cn-index-sidebar__section {
+	padding: 10px;
 }
 
 .cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar__close {
@@ -1924,9 +1939,33 @@
    @spec openspec/changes/board-index-sidebar-title-inset/specs/board-index-sidebar-title-inset/spec.md#requirement-the-index-side-panel-title-is-inset-as-the-board-draws-it */
 .cn-look-board .cn-index-sidebar-panel .app-sidebar-header.app-sidebar-header .app-sidebar-header__info .app-sidebar-header__desc.app-sidebar-header__desc {
 	padding-block-start: 15px;
+	padding-block-end: 0;
 	padding-inline-start: 20px;
 }
 
+/* The line under the title is a paragraph the theme sets with `!important`
+   (15px, its own leading): 14px muted at its normal leading, 2px under the
+   title, so the tab row starts 14px under it and the first field 20px under
+   the tabs (DqZakenSorteren, DqFilterBeheren: title 20, line 46, tabs 77,
+   search field 137).
+   @spec openspec/changes/board-side-panel-header-rhythm/specs/board-side-panel-header-rhythm/spec.md#requirement-the-side-panel-header-and-first-field-sit-as-the-boards-draw-them */
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__subname {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: normal;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	font-size: 14px !important;
+	line-height: normal !important;
+	margin-block-start: -3px !important;
+}
+
+.cn-look-board .cn-index-sidebar-panel .cn-index-sidebar__tab-content > .cn-index-sidebar__section:first-child {
+	padding-top: 8px;
+}
+
+.cn-look-board .cn-index-sidebar-panel .cn-index-sidebar__tab-content > .cn-index-sidebar__section:first-child > .input-field {
+	margin-top: 0;
+}
+
 .cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__nav[role="tablist"] {
 	justify-content: flex-start;
 	gap: 4px;
@@ -2119,6 +2158,7 @@
 .cn-look-board .cn-saved-views-panel:not(.cn-look-nextcloud *) .cn-saved-views-panel__name-text {
 	font-size: 14px;
 	font-weight: 600;
+	line-height: normal;
 }
 
 /* A view's count: a grey pill at the end of its row (DqFilterBeheren). */

package/src/css/look-board.css

@@ -942,14 +942,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 }
 
 /* A saved view's manage menu (DqFilterBeheren, DqFilterInMenu "Beheer
-   <view>"): 264px wide, rows of at least 40px, 6px 10px in, 8px rounded,
+   <view>"): 278px wide outside (the board's 264px of content, 6px in and a
+   1px line), rows of at least 40px, 6px 10px in, 8px rounded,
    the icon 12px before a 14px label at 600 with its explanation under it in
    12px muted text at 400; the separator in the soft line, and Delete in the
    error red. Its rows carry the panel's `cn-saved-views-` test ids.
    @spec openspec/changes/board-saved-view-manage-menu/specs/board-saved-view-manage-menu/spec.md#requirement-a-saved-views-manage-menu-is-the-boards-menu */
 body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-item__popper:has(li[data-testid^="cn-saved-views-"]) .v-popper__wrapper .v-popper__inner {
 	box-sizing: border-box;
-	width: 264px;
+	width: 278px;
 	max-width: calc(100vw - 32px);
 }
 
@@ -1520,8 +1521,8 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	text-align: start;
 }
 
-/* Body rows are 42px as on the boards (10px, a 21px line, 10px, the rule).
-   A row header (dossiq's prerequisites) reads as a strong cell, not as a
+/* Body cells read 14px at 1.2, as the boards' settings tables do; a row's
+   height comes from its content (a pill or a 34px button). A row header (dossiq's prerequisites) reads as a strong cell, not as a
    head: the theme paints every th, so its tokens are handed the cell's. */
 .cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) td,
 .cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) tbody th {
@@ -1529,7 +1530,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border-bottom: 1px solid var(--color-background-dark);
 	color: var(--color-main-text);
 	font-size: 14px;
-	line-height: 1.5;
+	line-height: 1.2;
 	vertical-align: middle;
 }
 
@@ -1660,6 +1661,38 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	min-width: 0;
 }
 
+/* A settings card's first line sits where the boards draw it: an
+   "Uitleg tonen" link, a switch or a note adds no height beyond its text, so
+   the first text is 16px under the subtitle (DqBeheerinstellingen
+   "Zaak-e-mail" and "AI-ondersteunde verwerking", DqBeheerGeavanceerd "KCC"
+   and "Storeregister": 7px and 29px lower live). The controls keep their full
+   hit area; the negative margin only takes it out of the line.
+   @spec openspec/changes/board-settings-first-line/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__hints-toggle:not(.cn-look-nextcloud *) {
+	margin-block: -8px;
+}
+
+.cn-look-board .cn-settings-field--switch:not(.cn-look-nextcloud *) > .checkbox-radio-switch {
+	margin-block: -8px;
+}
+
+.cn-look-board .cn-settings-field--status:not(.cn-look-nextcloud *) > .notecard {
+	margin: 0;
+}
+
+/* A card's longer explanation reads as the boards' second paragraph: 14px
+   muted at 1.5, the fields 14px under it (DqBeheerGeavanceerd "Urgentie in de
+   werkvoorraad": 15px and 30px live). The theme sizes every paragraph through
+   its tokens. */
+.cn-look-board .cn-settings-section__description-text:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: 1.5;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
 @container (max-width: 400px) {
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions,
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .settings-section__desc) > .cn-settings-section__actions {
@@ -2614,6 +2647,12 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 500;
 }
 
+/* A compact card keeps its 15px/700 title on a dashboard page too (DqInspectie). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__card .cn-record-list__title {
+	font-weight: 700;
+	line-height: 1.2;
+}
+
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__main {
 	gap: 2px;
 }
@@ -3472,4 +3511,5 @@ html :where(.cn-look-board) :is(h2, h3, h5, h6):where(.cn-inner-heading) {
 .cn-look-board .cn-saved-view-share__mode:not(.cn-look-nextcloud *) {
 	border-radius: 8px;
 	background: var(--cn-board-sunken-ground);
+	line-height: normal;
 }

package/src/css/table.css

@@ -616,10 +616,13 @@
 	cursor: grab;
 }
 
-/* The handle before a reorderable row's name: a muted 16px grip 10px before it. */
+/* The handle before a reorderable row's name: a muted 16px grip 10px before
+   it. It floats, so a name that wraps in a narrow cell wraps beside the grip
+   instead of dropping under it. */
 .cn-table-row__handle {
 	display: inline-flex;
-	vertical-align: middle;
+	float: inline-start;
+	margin-block-start: 1px;
 	margin-inline-end: 10px;
 	color: var(--color-text-maxcontrast);
 	cursor: grab;

package/src/utils/fillTemplate.js

@@ -60,6 +60,22 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
 	}
 }
 
+/**
+ * How many entries a list holds; with a key, the entries of that list in each
+ * of its entries summed (`{sections|count:items}`: the questions of every
+ * section of a checklist).
+ *
+ * @param {Array} list The list.
+ * @param {string} key The key of each entry's own list, or '' to count the entries.
+ * @return {number} The count.
+ */
+function countEntries(list, key) {
+	if (key === '') {
+		return list.length
+	}
+	return list.reduce((sum, entry) => sum + (entry && Array.isArray(entry[key]) ? entry[key].length : 0), 0)
+}
+
 /**
  * Format one token value.
  *
@@ -76,7 +92,7 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
 function formatValue(value, format, now, arg = '', object = null, config = null, formatters = null) {
 	// `{list|count}`: how many entries a list holds, nothing for an empty one.
 	if (format === 'count') {
-		const count = Array.isArray(value) ? value.length : Number(value)
+		const count = Array.isArray(value) ? countEntries(value, arg) : Number(value)
 		return Number.isFinite(count) && count > 0 ? String(count) : ''
 	}
 	if (value === null || value === undefined || value === '' || typeof value === 'object') {
@@ -160,7 +176,8 @@ function formatValue(value, format, now, arg = '', object = null, config = null,
  * ("vandaag, 09.42"), `{path|ago}` says how long ago it was ("10 min
  * geleden", "vanochtend", "vrijdag"), and `{path|days}` is the
  * whole days since that date ("has waited {createdAt|days} days"),
- * `{path|count}` is how many entries a list holds (nothing for an empty one),
+ * `{path|count}` is how many entries a list holds (nothing for an empty one;
+ * `{path|count:key}` sums the `key` list of each entry),
  * `{path|lower}` writes the value in lower case ("Step 2: {statusLabel|lower}"
  * reads "Step 2: in progress" mid-sentence), and any other name is one of
  * the app's formatters, passed as `context.formatters` (`{id|caseAddress}`).