@conduction/nextcloud-vue 2.59.0 → 2.61.0

package/src/components/CnBrandStripe/CnBrandStripe.md

@@ -0,0 +1,22 @@
+The brand stripe of the organisation. A theme sets its colours, shares and height through the `--cn-brand-stripe-*` custom properties. Without a theme it is one band in the primary colour.
+
+```vue
+<CnBrandStripe />
+```
+
+With the properties a theme would set:
+
+```vue
+<div style="--cn-brand-stripe-color-1: #cc0000; --cn-brand-stripe-color-2: #3669a5; --cn-brand-stripe-color-3: #cc0000; --cn-brand-stripe-ratio-1: 6; --cn-brand-stripe-ratio-2: 3; --cn-brand-stripe-ratio-3: 1; --cn-brand-stripe-height: 5px">
+  <CnBrandStripe />
+</div>
+```
+
+Down the side of a panel, with `orientation="vertical"`:
+
+```vue
+<div style="display: flex; height: 80px; gap: 12px;">
+  <CnBrandStripe orientation="vertical" />
+  <span>Content beside the stripe</span>
+</div>
+```

package/src/components/CnBrandStripe/CnBrandStripe.vue

@@ -0,0 +1,100 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div
+		class="cn-brand-stripe"
+		:class="{ 'cn-brand-stripe--vertical': orientation === 'vertical' }"
+		aria-hidden="true"
+		data-testid="cn-brand-stripe">
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--1" />
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--2" />
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--3" />
+	</div>
+</template>
+
+<script>
+/**
+ * CnBrandStripe draws the organisation's brand stripe: up to three coloured
+ * bands next to each other, for the top of a page, a card or a sidebar.
+ *
+ * The theme decides what it looks like, through the library's own custom
+ * properties: `--cn-brand-stripe-color-1/2/3` (the colours, start to end),
+ * `--cn-brand-stripe-ratio-1/2/3` (unitless shares, such as 6, 3 and 1)
+ * and `--cn-brand-stripe-height` (such as 5px). A theming app maps its own
+ * tokens onto these; the library never reads a theme's tokens. Without them the
+ * stripe is one band in the Nextcloud primary colour, 4px high.
+ *
+ * The stripe is decoration: it carries no meaning and is hidden from
+ * assistive technology.
+ *
+ * ```vue
+ * <CnBrandStripe />
+ * ```
+ */
+export default {
+	name: 'CnBrandStripe',
+
+	props: {
+		/**
+		 * The direction the stripe runs in: `horizontal` (the default, a bar
+		 * across the top) or `vertical` (a bar down the side; the height
+		 * token then sets its width).
+		 *
+		 * @type {'horizontal'|'vertical'}
+		 */
+		orientation: {
+			type: String,
+			default: 'horizontal',
+			validator: (v) => ['horizontal', 'vertical'].includes(v),
+		},
+	},
+}
+</script>
+
+<!--
+  The stripe reads the library's own `--cn-brand-stripe-*` properties, each
+  with a Nextcloud fallback. A theming app sets them from its own tokens.
+-->
+<style scoped>
+.cn-brand-stripe {
+	display: flex;
+	flex: none;
+	width: 100%;
+	height: var(--cn-brand-stripe-height, 4px);
+}
+
+.cn-brand-stripe--vertical {
+	flex-direction: column;
+	width: var(--cn-brand-stripe-height, 4px);
+	height: 100%;
+}
+
+.cn-brand-stripe__band {
+	flex-basis: 0;
+	flex-shrink: 1;
+}
+
+.cn-brand-stripe__band--1 {
+	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
+	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
+}
+
+.cn-brand-stripe__band--2 {
+	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
+	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
+}
+
+.cn-brand-stripe__band--3 {
+	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
+	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
+}
+
+@media print {
+	.cn-brand-stripe {
+		print-color-adjust: exact;
+		-webkit-print-color-adjust: exact;
+	}
+}
+</style>

package/src/components/CnBrandStripe/index.js

@@ -0,0 +1,4 @@
+import CnBrandStripe from './CnBrandStripe.vue'
+
+export default CnBrandStripe
+export { CnBrandStripe }

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -55,6 +55,43 @@
 			<span v-else :title="rawTitle">{{ formattedValue }}</span>
 		</template>
 
+		<!-- Built-in "avatar" widget: a person as an avatar with the name beside
+		     it. A user id (widgetProps.userField, or widgetProps.user for a cell
+		     that holds the id itself) gets the Nextcloud avatar; a free name
+		     gets its initials. The picture is decoration: the name is the text. -->
+		<template v-else-if="widget === 'avatar'">
+			<span v-if="avatarName || avatarUserId" class="cn-cell-renderer__avatar">
+				<span v-if="avatarUserId" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
+					<NcAvatar
+						:user="avatarUserId"
+						:displayName="avatarName || avatarUserId"
+						:size="avatarSize"
+						:disableMenu="true"
+						:disableTooltip="true" />
+				</span>
+				<span
+					v-else
+					class="cn-cell-renderer__avatar-initials"
+					:style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
+					aria-hidden="true">{{ avatarInitials }}</span>
+				<span class="cn-cell-renderer__avatar-name" :title="avatarName || avatarUserId">{{ avatarName || avatarUserId }}</span>
+			</span>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Built-in "date" widget: a date whose colour follows
+		     widgetProps.variantWhen, rules on the number of days until it
+		     (0 = today, negative = overdue). -->
+		<template v-else-if="widget === 'date'">
+			<time
+				v-if="dateTimestamp"
+				class="cn-cell-renderer__date"
+				:class="dateVariant ? 'cn-cell-renderer__date--' + dateVariant : null"
+				:datetime="dateTimestamp.toISOString()"
+				:title="rawTitle">{{ dateLabel }}</time>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
 		<!-- Explicit column formatter — overrides the type-aware paths below -->
 		<template v-else-if="hasFormatter">
 			<span :title="rawTitle">{{ formattedValue }}</span>
@@ -129,10 +166,13 @@
 </template>
 
 <script>
-import { NcDateTime } from '@nextcloud/vue'
+import { getCanonicalLocale } from '@nextcloud/l10n'
+import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
+import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
+import { objectFieldValue } from '../../utils/objectName.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { formatValue } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
@@ -162,6 +202,7 @@ export default {
 		CnStatusBadge,
 		CnFkResolveCell,
 		CheckBold,
+		NcAvatar,
 		NcDateTime,
 	},
 
@@ -232,6 +273,12 @@ export default {
 		 * the built-in id `"badge"` renders `CnStatusBadge` and the built-in
 		 * id `"fkResolve"` renders `CnFkResolveCell` (uuid → related object
 		 * label, config via `widgetProps { register, schema, labelField }`).
+		 * The built-in id `"avatar"` renders a person as an avatar with the
+		 * name beside it (`widgetProps { userField?, user?, nameField?, size? }`;
+		 * a free name gets its initials), and the built-in id `"date"` renders
+		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
+		 * number of days until the date (`[{ op: "lt", value: 0, variant:
+		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
 		 * Takes precedence over `formatter`/the type-aware rendering, but the
 		 * value handed to the widget is the formatter-shaped `formatted` when
 		 * `formatter` is also set.
@@ -350,6 +397,112 @@ export default {
 			return Number.isNaN(date.getTime()) ? null : date
 		},
 
+		/**
+		 * `avatar` widget: the Nextcloud user id whose avatar to show, or ''
+		 * for a free name. Read from the row field `widgetProps.userField`,
+		 * or from the cell value itself when `widgetProps.user` is true.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarUserId() {
+			const props = this.widgetProps || {}
+			let id = ''
+			if (typeof props.userField === 'string' && props.userField !== '') {
+				id = objectFieldValue(this.row, props.userField)
+			} else if (props.user === true) {
+				id = this.value
+			}
+			return (typeof id === 'string' || typeof id === 'number') ? String(id) : ''
+		},
+
+		/**
+		 * `avatar` widget: the name shown beside the picture. Read from the
+		 * row field `widgetProps.nameField` when set, else the cell value.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarName() {
+			const props = this.widgetProps || {}
+			if (typeof props.nameField === 'string' && props.nameField !== '') {
+				const name = objectFieldValue(this.row, props.nameField)
+				if (typeof name === 'string' && name !== '') {
+					return name
+				}
+			}
+			if (!this.hasValue || typeof this.value === 'object') {
+				return ''
+			}
+			return String(this.hasFormatter ? this.formattedValue : this.value)
+		},
+
+		/**
+		 * `avatar` widget: the initials of a free name, at most two letters
+		 * (first and last word).
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarInitials() {
+			const words = this.avatarName.trim().split(/\s+/).filter((word) => word !== '')
+			if (words.length === 0) {
+				return ''
+			}
+			const first = Array.from(words[0])[0] || ''
+			const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] || '') : ''
+			return (first + last).toLocaleUpperCase()
+		},
+
+		/**
+		 * `avatar` widget: the picture size in pixels (`widgetProps.size`, default 24).
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarSize() {
+			const size = Number(this.widgetProps && this.widgetProps.size)
+			return Number.isFinite(size) && size > 0 ? size : 24
+		},
+
+		/**
+		 * `date` widget: the variant of the first `widgetProps.variantWhen`
+		 * rule the date matches, or '' for none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		dateVariant() {
+			const rules = this.widgetProps && this.widgetProps.variantWhen
+			const variant = resolveDateVariant(this.value, rules)
+			return variant === 'default' ? '' : variant
+		},
+
+		/**
+		 * `date` widget: the date written out in the user's locale.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		dateLabel() {
+			const date = parseDateValue(this.value)
+			if (date === null) {
+				return ''
+			}
+			const options = { day: 'numeric', month: 'short', year: 'numeric' }
+			let locale
+			try {
+				locale = getCanonicalLocale()
+			} catch {
+				locale = undefined
+			}
+			try {
+				return new Intl.DateTimeFormat(locale || undefined, options).format(date)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(date)
+			}
+		},
+
 		/** True when the property is a URI / URL (rendered as an external link). */
 		isUri() {
 			return this.property?.format === 'uri' || this.property?.format === 'url'
@@ -750,6 +903,59 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+.cn-cell-renderer__avatar {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	max-width: 100%;
+	vertical-align: middle;
+}
+
+.cn-cell-renderer__avatar-picture {
+	display: inline-flex;
+	flex: none;
+}
+
+.cn-cell-renderer__avatar-initials {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 0.75em;
+	font-weight: 700;
+	line-height: 1;
+}
+
+.cn-cell-renderer__avatar-name {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A date that matched a rule is also set in a heavier weight, so the signal
+   does not rest on colour alone. */
+.cn-cell-renderer__date--success,
+.cn-cell-renderer__date--warning,
+.cn-cell-renderer__date--error {
+	font-weight: 600;
+}
+
+.cn-cell-renderer__date--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__date--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__date--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
 .cn-cell-renderer__icon--success {
 	color: var(--color-success);
 }

package/src/components/CnConversationThread/CnConversationThread.md

@@ -0,0 +1,51 @@
+A thread with a reply box:
+
+```vue
+<CnConversationThread
+  title="Contact with the resident"
+  reply-label="Answer to the resident"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', time: '2026-10-04T10:52:00', side: 'them',
+      text: 'Thank you. I would like to see all documents about the lighting.' },
+    { id: 2, time: '2026-10-04T10:24:00', side: 'us',
+      text: 'Construction starts in March. There will be lighting along the whole cycle path.' },
+  ]" />
+```
+
+Read-only, for a closed record:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  :allow-reply="false"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', time: '4 Oct, 10:52', side: 'them', text: 'Thank you.' },
+  ]" />
+```
+
+No messages yet:
+
+```vue
+<CnConversationThread title="Contact" :messages="[]" />
+```
+
+Posting to an endpoint. The reply goes out as `{ message, ...payload }`. `title-tag`, `placeholder`, `send-label`, `us-label` and `empty-text` adjust the wording, and the `reply-actions` slot adds buttons before Send:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  title-tag="h2"
+  placeholder="Write your answer"
+  send-label="Send to resident"
+  us-label="Municipality"
+  empty-text="Nobody has written yet."
+  endpoint="/apps/example/api/cases/42/messages"
+  :payload="{ channel: 'portal' }"
+  :messages="[
+    { id: 1, time: '2026-10-04T11:00:00', side: 'us', text: 'We received your request.' },
+  ]">
+  <template #reply-actions="{ draft }">
+    <NcButton :disabled="!draft">Save draft</NcButton>
+  </template>
+</CnConversationThread>
+```