@conduction/nextcloud-vue 2.143.0 → 2.145.0

package/l10n/en.json

@@ -1706,6 +1706,12 @@
     "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",
+    "Board {name}": "Board {name}",
+    "list {name}": "list {name}",
+    "Tentative": "Tentative",
+    "Confirmed": "Confirmed",
+    "Cancelled": "Cancelled",
+    "{start} until {end}": "{start} until {end}",
     "No contacts linked": "No contacts linked",
     "No relations yet": "No relations yet",
     "Period": "Period",

package/l10n/nl.json

@@ -1919,6 +1919,12 @@
     "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",
+    "Board {name}": "Bord {name}",
+    "list {name}": "lijst {name}",
+    "Tentative": "Voorlopig",
+    "Confirmed": "Bevestigd",
+    "Cancelled": "Geannuleerd",
+    "{start} until {end}": "{start} tot {end}",
     "No contacts linked": "Geen contacten gekoppeld",
     "No relations yet": "Nog geen relaties",
     "Period": "Periode",
@@ -1940,6 +1946,8 @@
     "Absent today": "Vandaag afwezig",
     "{message} until {time}": "{message} tot {time}",
     "Away": "Afwezig",
+    "Present": "Aanwezig",
+    "Absent until {date}": "Afwezig tot {date}",
     "Busy": "Bezet",
     "No one in the team": "Niemand in het team",
     "Also replace the criteria with the current filters": "Vervang ook de criteria door de huidige filters",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.143.0",
+  "version": "2.145.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/CnActionDialog/CnActionDialog.vue

@@ -145,7 +145,7 @@
 				:heading="text(config.note.title)"
 				data-testid="cn-action-dialog-note">
 				<template v-if="config.note.icon" #icon>
-					<CnIcon :name="config.note.icon" :size="20" />
+					<CnIcon class="cn-action-dialog__note-icon" :name="config.note.icon" :size="20" />
 				</template>
 				{{ text(config.note.text) }}
 			</NcNoteCard>
@@ -191,6 +191,7 @@ import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
 import CnFormField from '../CnFormField/CnFormField.vue'
 import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { BUILT_IN_FORMATTERS } from '../../utils/builtInFormatters.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { readPath } from '../../utils/readPath.js'
 import { CnDialog } from '../CnDialog/index.js'
@@ -219,7 +220,8 @@ let reasonSeq = 0
  *   `eyebrow` a template filled from the record ("Close off · {identifier}").
  * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
  *   the record (`source` an endpointSource to read it from, else `object`).
- * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template.
+ * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template; a
+ *   `{path|<formatter>}` token reads through the built-in and app formatters.
  * - `checklist`: `{ title?, source, itemsPath?, labels?, required? }`: items
  *   `{ id, met, label?, detail? }` read from `source`; `labels[id]` gives an
  *   item's `{ label, detail?, unmetDetail? }`; the ids in `required` must be
@@ -262,6 +264,8 @@ export default {
 		cnTranslate: { default: () => (key) => key },
 		/** The page's pre-bound action dispatcher (CnPageRenderer), for `confirm.action`. */
 		cnDispatchAction: { default: null },
+		/** The app's named formatters (CnAppRoot), for `{path|<formatter>}` in a template. */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	props: {
@@ -594,7 +598,8 @@ export default {
 			if (typeof template !== 'string' || template === '') {
 				return ''
 			}
-			return fillTemplate(this.cnTranslate(template), row || this.record || {}).trim()
+			const formatters = { ...BUILT_IN_FORMATTERS, ...(this.cnFormatters || {}) }
+			return fillTemplate(this.cnTranslate(template), row || this.record || {}, new Date(), { formatters }).trim()
 		},
 
 		/**
@@ -836,6 +841,7 @@ export default {
 .cn-action-dialog__summary-text strong {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 .cn-action-dialog__summary-text .cn-action-dialog__muted {
@@ -945,11 +951,36 @@ export default {
 
 /* A checkbox field is a tinted box with a 2px edge, its label bold and its
    hint under it (DqArchiveren). */
+/* A note's own icon stands on the heading's line, as the variant's icon
+   does (NcNoteCard centres a slotted icon on the whole note). */
+.cn-action-dialog__note-icon {
+	align-self: flex-start;
+	margin-top: 1px;
+}
+
 .cn-action-dialog__checkbox {
 	padding: 12px 14px;
 	border: 2px solid var(--color-primary-element);
 	border-radius: var(--border-radius-element, 8px);
-	background: var(--color-primary-element-light);
+	background: var(--color-main-background);
+}
+
+/* The box sits at the card's inset, 12px before the label, the label on
+   its first line (DqArchiveren "Sanne de Vries laten weten ..."):
+   NcCheckboxRadioSwitch pads its row and centres a 34px target. */
+.cn-action-dialog__checkbox :deep(.checkbox-content) {
+	padding: 0;
+	gap: 12px;
+	align-items: flex-start;
+	min-height: 0;
+}
+
+.cn-action-dialog__checkbox :deep(.checkbox-content__icon) {
+	margin: 0;
+}
+
+.cn-action-dialog__checkbox :deep(.checkbox-radio-switch__input) {
+	min-height: 0;
 }
 
 .cn-action-dialog__checkbox-text {
@@ -961,6 +992,7 @@ export default {
 .cn-action-dialog__checkbox-label {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 .cn-action-dialog__checkbox .cn-action-dialog__muted {

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -69,9 +69,21 @@ import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
 import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { readPath } from '../../utils/readPath.js'
 import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
+/**
+ * A changed value as an entry records it: OpenRegister writes `{ old, new }`,
+ * other sources the value itself.
+ *
+ * @param {unknown} value The recorded change.
+ * @return {unknown} The value it changed to.
+ */
+function newValueOf(value) {
+	return value !== null && typeof value === 'object' && Object.hasOwn(value, 'new') ? value.new : value
+}
+
 /**
  * @param {object} entry An audit entry.
  * @return {number} When it happened, in ms; 0 when unreadable.
@@ -202,6 +214,18 @@ export default {
 		 * @type {{[key: string]: {[value: string]: string}}|null}
 		 */
 		valueLabels: { type: Object, default: null },
+		/**
+		 * What happened, in words, by the field an entry changed: rules
+		 * `[{ action?, field, to?, label }]`, the first whose `field` the entry
+		 * changed (to `to`, when given) wins over `actionLabels`. A label fills
+		 * the same tokens, plus `{object.<path>}` from `object`
+		 * ("Version {object.version} published" for `isDraft` set to false).
+		 *
+		 * @type {Array<{action?: string, field: string, to?: unknown, label: string}>}
+		 */
+		changeLabels: { type: Array, default: () => [] },
+		/** The audited record, for `{object.<path>}` in a label; null without one. */
+		object: { type: Object, default: null },
 		/**
 		 * Records beside the object whose events belong in its history:
 		 * `[{ as, register, schema, filter, limit? }]`. The card lists the
@@ -394,12 +418,16 @@ export default {
 		 * @return {string} The line.
 		 */
 		formatAction(entry) {
-			const label = this.labelFor(entry)
+			const label = this.changeLabelFor(entry) ?? this.labelFor(entry)
 			if (label !== null) {
 				return label
 					.replace('{actor}', this.actorName(entry))
 					.replace('{state}', entry.stateAfter || '')
 					.replace(/\{changed\.([\w-]+)\}/g, (match, key) => this.changedValue(entry, key))
+					.replace(/\{object\.([\w.-]+)\}/g, (match, path) => {
+						const value = this.object ? readPath(this.object, path) : undefined
+						return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+					})
 			}
 			const action = entry.action || entry.event || this.actionLabel
 			return entry.stateAfter ? `${action} (${entry.stateAfter})` : action
@@ -416,7 +444,7 @@ export default {
 		 */
 		changedValue(entry, key) {
 			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
-			const value = changed[key]
+			const value = newValueOf(changed[key])
 			if (value === null || value === undefined || typeof value === 'object') {
 				return ''
 			}
@@ -424,6 +452,31 @@ export default {
 			return words && typeof words[value] === 'string' ? words[value] : String(value)
 		},
 
+		/**
+		 * The `changeLabels` rule an entry matches: the first whose field the
+		 * entry changed, for its action and to its value when the rule names them.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string|null} The label, or null when no rule matches.
+		 */
+		changeLabelFor(entry) {
+			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
+			const action = entry.action || entry.event || ''
+			for (const rule of Array.isArray(this.changeLabels) ? this.changeLabels : []) {
+				if (!rule || typeof rule.label !== 'string' || rule.label === '' || typeof rule.field !== 'string' || !Object.hasOwn(changed, rule.field)) {
+					continue
+				}
+				if (rule.action && rule.action !== action) {
+					continue
+				}
+				if (Object.hasOwn(rule, 'to') && String(newValueOf(changed[rule.field])) !== String(rule.to)) {
+					continue
+				}
+				return rule.label
+			}
+			return null
+		},
+
 		/**
 		 * The `actionLabels` entry for an entry: by action and state first,
 		 * then by action.

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -20,6 +20,8 @@
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
+			:changeLabels="changeLabels"
+			:object="ctx.object || ctx.objectData || null"
 			:relatedSources="relatedSources"
 			:footnote="footnote"
 			v-bind="emptyText ? { noEntriesLabel: emptyText } : {}" />
@@ -193,6 +195,22 @@ export default {
 				.map(([key, text]) => [key, translate(text)]))
 		},
 
+		/**
+		 * `content.changeLabels`, each rule's label through the app's translate.
+		 *
+		 * @return {Array<object>}
+		 */
+		changeLabels() {
+			const rules = this.content.changeLabels
+			if (!Array.isArray(rules)) {
+				return []
+			}
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (text) => text
+			return rules
+				.filter((rule) => rule && typeof rule.label === 'string' && rule.label !== '')
+				.map((rule) => ({ ...rule, label: translate(rule.label) }))
+		},
+
 		/**
 		 * `content.footnote`, a muted line under the trail with the record's
 		 * fields filled in ("Reference {identifier}"); '' when a field is empty.

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -17,9 +17,11 @@
 					class="cn-conversation-thread__title">
 					{{ title }}
 				</component>
-				<p v-if="subtitle" class="cn-conversation-thread__subtitle" data-testid="cn-conversation-subtitle">
+				<!-- A div, not a <p>: a theme that sets every paragraph's size with
+				     !important would otherwise override the 14px subtitle. -->
+				<div v-if="subtitle" class="cn-conversation-thread__subtitle" data-testid="cn-conversation-subtitle">
 					{{ subtitle }}
-				</p>
+				</div>
 			</div>
 			<div v-if="$slots['header-actions']" class="cn-conversation-thread__header-actions">
 				<!-- @slot header-actions Buttons beside the title, for example "Log contact". -->
@@ -633,6 +635,7 @@ export default {
 .cn-conversation-thread__subtitle {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
 	margin: 0;
 }
 

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -31,6 +31,7 @@
 				v-else
 				type="button"
 				class="cn-detail-page__catalog-action"
+				:class="{ 'cn-detail-page__catalog-action--add': action.add === true }"
 				data-testid="cn-detail-widget-header-action"
 				@click="action.run()">
 				<CnIcon v-if="action.icon" :name="action.icon" :size="16" />
@@ -56,7 +57,7 @@ export default {
 	components: { CnIcon, CnStatusBadge, NcButton },
 
 	props: {
-		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, run }] }`. */
+		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, add?, run }] }`; `add: true` marks a list's Add. */
 		header: {
 			type: Object,
 			required: true,

package/src/components/CnEventsCard/CnEventsCard.vue

@@ -28,9 +28,12 @@
 				:key="keyOf(event, index)"
 				class="cn-events-card__event"
 				data-testid="cn-events-card-event">
-				<span class="cn-events-card__summary">{{ summaryOf(event) }}</span>
-				<span class="cn-events-card__when">{{ whenOf(event) }}</span>
-				<span v-if="event.location" class="cn-events-card__where">{{ event.location }}</span>
+				<span v-if="dayOf(event)" class="cn-events-card__day" aria-hidden="true">{{ dayOf(event) }}</span>
+				<span class="cn-events-card__text">
+					<span class="cn-events-card__summary">{{ summaryOf(event) }}</span>
+					<span class="cn-events-card__when">{{ whenOf(event) }}</span>
+					<span v-if="event.location" class="cn-events-card__where">{{ event.location }}</span>
+				</span>
 			</li>
 		</ul>
 		<p v-else class="cn-events-card__muted" data-testid="cn-events-card-empty">
@@ -292,6 +295,15 @@ export default {
 			return summary === '' ? t('nextcloud-vue', 'Appointment') : summary
 		},
 
+		/**
+		 * @param {object} event The event.
+		 * @return {string} The day of the month it starts on, '' when it has no readable start.
+		 */
+		dayOf(event) {
+			const parsed = new Date(String(event?.dtstart ?? '').trim())
+			return Number.isNaN(parsed.getTime()) ? '' : String(parsed.getDate())
+		},
+
 		/**
 		 * @param {object} event The event.
 		 * @return {string} When it is: its start and end, or whichever it has.
@@ -333,8 +345,7 @@ function formatMoment(value) {
 
 .cn-events-card__event {
 	display: flex;
-	flex-direction: column;
-	gap: 2px;
+	gap: 12px;
 	padding-bottom: 8px;
 	border-bottom: 1px solid var(--color-border);
 }
@@ -344,6 +355,17 @@ function formatMoment(value) {
 	border-bottom: none;
 }
 
+.cn-events-card__day {
+	display: none;
+}
+
+.cn-events-card__text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
 .cn-events-card__summary {
 	font-weight: 600;
 }

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -607,7 +607,7 @@ export default {
 		/**
 		 * The card title row's actions: the add button with `add.placement: "title"`.
 		 *
-		 * @return {Array<{label: string, icon: string, run: () => void}>} The actions.
+		 * @return {Array<{label: string, icon: string, add: boolean, run: () => void}>} The actions.
 		 */
 		titleActions() {
 			if (!(this.canAdd && this.addTrigger && this.addPlacement === 'title')) {
@@ -616,7 +616,7 @@ export default {
 			const run = () => {
 				this.adding = !this.adding
 			}
-			return [{ label: this.addLabel, icon: 'Plus', run }]
+			return [{ label: this.addLabel, icon: 'Plus', add: true, run }]
 		},
 
 		addLabel() {

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -2178,7 +2178,8 @@ export default {
 			const object = {
 				...entry,
 				name: node.basename,
-				modified: node.mtime,
+				// A template drops an object value, so the Date is handed over as ISO text.
+				modified: node.mtime instanceof Date ? node.mtime.toISOString() : node.mtime,
 				size: this.formatSize(node.size),
 				type: this.typeLabelOf(node),
 				...(owner ? { owner } : {}),
@@ -3648,6 +3649,19 @@ export default {
 	width: auto;
 }
 
+/* The row button and the row menu stand side by side on one line, not
+   stacked (DqZaakDocumenten: Beoordelen, then the menu, 14px apart).
+   @spec openspec/changes/files-row-button-beside-menu/specs/files-row-button-beside-menu/spec.md#requirement-a-files-row-button-stands-beside-the-row-menu */
+.cn-files-browser__col-actions > .cn-files-browser__row-button,
+.cn-files-browser__col-actions > .cn-files-browser__row-menu {
+	display: inline-flex;
+	vertical-align: middle;
+}
+
+.cn-files-browser__col-actions > .cn-files-browser__row-button + .cn-files-browser__row-menu {
+	margin-inline-start: 14px;
+}
+
 .cn-files-browser__col-name {
 	min-width: 0;
 }

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8940,7 +8940,7 @@ export default {
 				// through the app's label lookup.
 				const countText = this.presentedCountText
 				// The note after the breadcrumb already says how many there are.
-				if (!countText && !this.countSubtitle && this.headerMetaCarriesCount) {
+				if (!countText && !this.countSubtitle && (this.headerMetaCarriesCount || this.showCount === false)) {
 					return this.description
 				}
 				if (!countText && !this.countSubtitle) {
@@ -9877,9 +9877,12 @@ export default {
 			}
 			const sorted = [...groups].sort((a, b) => b.count - a.count)
 			const total = sorted.reduce((sum, g) => sum + g.count, 0)
+			// Each tab asks to be counted as the list counts it (within the
+			// active filters, through the list endpoint); the grouped number,
+			// over the page filter only, stands until that count arrives.
 			this.generatedQuickFilters = [
-				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total },
-				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count })),
+				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total, showCount: true },
+				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count, showCount: true })),
 			]
 		},
 
@@ -9993,7 +9996,7 @@ export default {
 			]
 			let counts
 			try {
-				counts = await fetchFilterCounts({ register: this.register, schema, entries, baseFilter: base, ctx })
+				counts = await fetchFilterCounts({ register: this.register, schema, entries, baseFilter: base, ctx, via: 'list' })
 			} catch {
 				counts = {}
 			}
@@ -10050,6 +10053,8 @@ export default {
 				})),
 				baseFilter: resolveFilterMap(this.filter, params, ctx),
 				ctx,
+				// The chips count what the list shows: the list's own request.
+				via: 'list',
 			})
 			if (requestKey !== this.countRequestKey) {
 				return

package/src/components/CnMailTab/CnMailTab.vue

@@ -19,9 +19,11 @@
 					<h3 v-if="heading" class="cn-mail-tab__title">
 						{{ heading }}
 					</h3>
-					<p v-if="description" class="cn-mail-tab__subtitle">
+					<!-- Divs, not <p>: a theme that sizes every paragraph with !important
+					     would override the card's 14px description. -->
+					<div v-if="description" class="cn-mail-tab__subtitle">
 						{{ description }}
-					</p>
+					</div>
 				</div>
 				<div v-if="hasHeaderActions" class="cn-mail-tab__header-actions">
 					<NcButton
@@ -77,9 +79,9 @@
 					{{ t('nextcloud-vue', 'Empty draft') }}
 				</NcButton>
 			</div>
-			<p v-if="hint" class="cn-mail-tab__hint">
+			<div v-if="hint" class="cn-mail-tab__hint">
 				{{ hint }}
-			</p>
+			</div>
 
 			<NcNoteCard
 				v-if="error"

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -96,6 +96,7 @@
 						:key="row.note.id"
 						class="cn-notes-card__note"
 						:class="{ 'cn-notes-card__note--reply': row.isReply }">
+						<span class="cn-notes-card__initials" aria-hidden="true">{{ initialsOf(getNoteAuthorName(row.note)) }}</span>
 						<div class="cn-notes-card__note-header">
 							<CnUserActionMenu
 								v-if="!isCurrentUser(row.note)"
@@ -175,6 +176,7 @@ import CnUserActionMenu from '../CnUserActionMenu/CnUserActionMenu.vue'
 import CnVisibilityChip from '../CnVisibilityChip/CnVisibilityChip.vue'
 import { useFileComments } from '../../composables/useFileComments.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { initialsOf } from '../../utils/initials.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
 import { extractMentionedGroupIds, extractMentionedIds } from '../../utils/mentions.js'
 import { quoteFor, supportsReplies, threadNotes, threadRootId } from '../../utils/noteThreads.js'
@@ -635,6 +637,8 @@ export default {
 			return note.actorId || note.author || ''
 		},
 
+		initialsOf,
+
 		getNoteAuthorName(note) {
 			return note.actorDisplayName || note.author || 'Unknown'
 		},
@@ -870,6 +874,10 @@ export default {
 	border-bottom: none;
 }
 
+.cn-notes-card__initials {
+	display: none;
+}
+
 .cn-notes-card__note-header {
 	display: flex;
 	justify-content: space-between;

package/src/components/CnNotificationMatrix/CnNotificationMatrix.vue

@@ -1135,7 +1135,10 @@ export default {
 		min-inline-size: 20px;
 		block-size: 20px;
 		min-block-size: 20px;
-		margin: 0;
+		/* A block box, so the line's baseline adds no height: the row is
+		   42px as on the board (10px, the 1px-low checkbox, 10px, the rule). */
+		display: block;
+		margin: 1px auto 0;
 	}
 
 	.cn-notification-matrix__group {