@conduction/nextcloud-vue 2.143.0 → 2.144.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",

package/package.json

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

@@ -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 {
@@ -949,7 +955,25 @@ export default {
 	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 +985,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/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/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/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

@@ -9993,7 +9993,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 +10050,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/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/CnObjectPartiesWidget/CnObjectPartiesWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-object-parties" data-testid="cn-object-parties">
+	<div class="cn-object-parties" :class="{ 'cn-object-parties--board': isBoard }" data-testid="cn-object-parties">
 		<div v-if="canAdd" class="cn-object-parties__manage">
 			<NcButton data-testid="cn-object-parties-add" @click="adding = true">
 				<template #icon>
@@ -112,51 +112,89 @@
 						class="cn-object-parties__party"
 						:data-party="party.partyUuid || party.contactUid"
 						data-testid="cn-object-parties-party">
-						<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
-						<span
-							v-if="primary && party.partyUuid === primary"
-							class="cn-status-badge cn-status-badge--primary"
-							data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
-						<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
-						<span
-							v-if="notAccepted(party)"
-							class="cn-status-badge cn-status-badge--warning"
-							data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
-						<span
-							v-for="(line, index) in extraLinesOf(party)"
-							:key="`line-${index}`"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-extra-line">{{ line }}</span>
-						<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
-						<span
-							v-if="representedBy(party)"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
-						<span
-							v-if="correspondenceOf(party)"
-							class="cn-object-parties__muted"
-							:data-party-documents="party.partyUuid || party.contactUid"
-							data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
-						<span
-							v-for="indicator in indicatorsFor(party)"
-							:key="`${party.partyUuid}-${indicator.key}`"
-							class="cn-status-badge cn-status-badge--default"
-							:class="`cn-object-parties__indicator--${indicator.severity}`"
-							:data-effect="indicator.effect"
-							:title="indicator.verdict"
-							data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
-						<NcButton
-							v-if="canRemove && party.partyUuid"
-							class="cn-object-parties__remove"
-							variant="tertiary"
-							:aria-label="removeLabel(party, group)"
-							:title="removeLabel(party, group)"
-							data-testid="cn-object-parties-remove"
-							@click="removing = { party, group }">
-							<template #icon>
-								<TrashCanOutline :size="20" />
-							</template>
-						</NcButton>
+						<!-- The board look draws a party as one ruled row (DqZaakBetrokkenen
+						     "Rollen"): an initials tile, the name over one meta line that
+						     names the role, the pills at the end. -->
+						<template v-if="isBoard">
+							<span class="cn-object-parties__tile" aria-hidden="true">{{ initialsOf(nameOf(party)) }}</span>
+							<span class="cn-object-parties__text">
+								<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+								<span class="cn-object-parties__meta" data-testid="cn-object-parties-meta">{{ boardMetaOf(party, group) }}</span>
+							</span>
+							<span class="cn-object-parties__end">
+								<span
+									v-if="notAccepted(party)"
+									class="cn-status-badge cn-status-badge--warning"
+									data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+								<span
+									v-for="indicator in indicatorsFor(party)"
+									:key="`${party.partyUuid}-${indicator.key}`"
+									class="cn-status-badge cn-status-badge--default"
+									:class="`cn-object-parties__indicator--${indicator.severity}`"
+									:data-effect="indicator.effect"
+									:title="indicator.verdict"
+									data-testid="cn-object-parties-indicator">{{ indicator.label }}</span>
+								<NcButton
+									v-if="canRemove && party.partyUuid"
+									class="cn-object-parties__remove"
+									variant="tertiary"
+									:aria-label="removeLabel(party, group)"
+									:title="removeLabel(party, group)"
+									data-testid="cn-object-parties-remove"
+									@click="removing = { party, group }">
+									<template #icon>
+										<TrashCanOutline :size="20" />
+									</template>
+								</NcButton>
+							</span>
+						</template>
+						<template v-else>
+							<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+							<span
+								v-if="primary && party.partyUuid === primary"
+								class="cn-status-badge cn-status-badge--primary"
+								data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
+							<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
+							<span
+								v-if="notAccepted(party)"
+								class="cn-status-badge cn-status-badge--warning"
+								data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+							<span
+								v-for="(line, index) in extraLinesOf(party)"
+								:key="`line-${index}`"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-extra-line">{{ line }}</span>
+							<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
+							<span
+								v-if="representedBy(party)"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
+							<span
+								v-if="correspondenceOf(party)"
+								class="cn-object-parties__muted"
+								:data-party-documents="party.partyUuid || party.contactUid"
+								data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
+							<span
+								v-for="indicator in indicatorsFor(party)"
+								:key="`${party.partyUuid}-${indicator.key}`"
+								class="cn-status-badge cn-status-badge--default"
+								:class="`cn-object-parties__indicator--${indicator.severity}`"
+								:data-effect="indicator.effect"
+								:title="indicator.verdict"
+								data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
+							<NcButton
+								v-if="canRemove && party.partyUuid"
+								class="cn-object-parties__remove"
+								variant="tertiary"
+								:aria-label="removeLabel(party, group)"
+								:title="removeLabel(party, group)"
+								data-testid="cn-object-parties-remove"
+								@click="removing = { party, group }">
+								<template #icon>
+									<TrashCanOutline :size="20" />
+								</template>
+							</NcButton>
+						</template>
 					</li>
 				</ul>
 			</section>
@@ -200,6 +238,7 @@ import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnPartyAddDialog from '../../dialogs/CnPartyAddDialog.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import innerHeading from '../../mixins/innerHeading.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { initialsOf } from '../../utils/initials.js'
@@ -287,6 +326,7 @@ export default {
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -347,6 +387,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws one ruled row per party. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/** @return {Array<object>} The role groups, primary first. */
 		groups() {
 			return rolesInOrder(this.listing, this.translatedMap(this.content?.roleLabels))
@@ -916,6 +961,29 @@ export default {
 		 * @param {object} party The listing row.
 		 * @return {Array<object>}
 		 */
+		/**
+		 * The board row's meta line: the primary mark, the role, the kind,
+		 * whom the party represents, its extra lines, e-mail and documents,
+		 * separated by middots.
+		 *
+		 * @param {object} party The party.
+		 * @param {object} group Its role group.
+		 * @return {string}
+		 */
+		boardMetaOf(party, group) {
+			const parts = []
+			if (this.primary && party.partyUuid === this.primary) {
+				parts.push(this.label('primary'))
+			}
+			parts.push(group.label, this.kindOf(party))
+			const represented = this.representedBy(party)
+			if (represented) {
+				parts.push(`${this.label('representedBy')}: ${represented}`)
+			}
+			parts.push(...this.extraLinesOf(party), party.email, this.correspondenceOf(party))
+			return parts.filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
 		indicatorsFor(party) {
 			const record = this.partyRecords[party.partyUuid]
 			if (!record) {

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -85,6 +85,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li v-for="hold in holds" :key="hold.id" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ hold.reason || t('nextcloud-vue', 'Legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'Placed on {date} by {by}', { date: hold.placedDate, by: hold.placedBy }) }}</span>
@@ -92,6 +93,7 @@
 						<CnStatusBadge :label="t('nextcloud-vue', 'Active')" variant="warning" />
 					</li>
 					<li v-if="holds.length === 0" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ t('nextcloud-vue', 'No legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'If an objection or appeal runs, destruction is suspended') }}</span>
@@ -107,6 +109,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li class="cn-retention__row">
+						<span class="cn-retention__mark" aria-hidden="true">ED</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ transfers ? t('nextcloud-vue', 'Goes to the e-Depot') : t('nextcloud-vue', 'Not applicable') }}</span>
 							<span class="cn-retention__muted">{{ transfers ? t('nextcloud-vue', 'After the retention period the record is transferred') : t('nextcloud-vue', 'Only records appraised to keep go to the e-Depot') }}</span>
@@ -643,17 +646,39 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
-	padding: 10px 0;
+	padding: 12px 0;
 	border-top: 1px solid var(--color-border);
 }
 
 .cn-retention__row-text {
 	display: flex;
+	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
 
+/* A round mark before a hold or transfer row: LH (legal hold) on the error
+   tint, ED (e-Depot) on the chip ground (DqZaakArchivering). */
+.cn-retention__mark {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-retention__mark--hold {
+	background: var(--color-error-light, #fcedec);
+	color: var(--color-error-text, #a30000);
+}
+
 .cn-retention__row-title {
 	font-weight: 600;
 }