@conduction/nextcloud-vue 2.99.0 → 2.101.0

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -233,6 +233,15 @@
 				{{ moreLabel }}
 			</p>
 		</template>
+		<!-- `content.footnote`: a line under the table ("Awb 4:17 en 4:18"),
+		     through the host translate. Not while the list waits for its
+		     context or failed to load. -->
+		<p
+			v-if="resolvedFootnote && !waitingForContext && !error"
+			class="cn-object-list-widget__footnote"
+			data-testid="cn-object-list-widget-footnote">
+			{{ resolvedFootnote }}
+		</p>
 		<!-- Create affordance (ADR-062): every collection carries its Add at
 		     the bottom of the widget; the host card's Actions menu calls the
 		     same openCreate() through the public method. Suppressed while the
@@ -430,8 +439,10 @@ export default {
 		 * `hideHeader: true` drops the table's column header row (CnDataTable's
 		 * `hideHeader`), for a short list that reads as rows, not as a table.
 		 *
+		 * `footnote` is a line under the table, through the host translate.
+		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, footnote?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
 		 */
 		content: {
 			type: Object,
@@ -918,6 +929,17 @@ export default {
 			return this.emptyText ? fn(this.emptyText) : this.emptyText
 		},
 
+		/**
+		 * `content.footnote` run through the host translate function, or ''.
+		 *
+		 * @return {string}
+		 */
+		resolvedFootnote() {
+			const note = typeof this.content.footnote === 'string' ? this.content.footnote : ''
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+			return note ? fn(note) : ''
+		},
+
 		/**
 		 * The rows actually rendered: capped to what fits the host grid cell
 		 * (ADR-062 — content adapts to the cell, never a nested scrollbar).
@@ -2027,6 +2049,12 @@ export default {
 	padding: 4px;
 }
 
+.cn-object-list-widget__footnote {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	margin: 8px 0 0;
+}
+
 /* Footer Add — same pattern as the integration leaves' footer action
    ("Open in Calendar"): full-width, centered, divider-topped, pinned to
    the card bottom. */

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -15,6 +15,11 @@
 			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
+			:headerActions="headerActions"
+			:rowButton="rowButton"
+			:reviewSummary="reviewSummary"
+			:footnote="footnote"
+			:nameSecondary="nameSecondary"
 			:linkedItems="linkedItems"
 			:columns="columns"
 			:rowData="rowDataSource"
@@ -420,6 +425,16 @@ export default {
 		 * @type {string[]}
 		 */
 		facets: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the host's own buttons in the bar. */
+		headerActions: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: one visible button on every file row. */
+		rowButton: { type: Object, default: null },
+		/** Forwarded to CnFilesBrowser: the review summary above the list. */
+		reviewSummary: { type: Object, default: null },
+		/** Forwarded to CnFilesBrowser: the host's own line under the list. */
+		footnote: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: the second line under each file's name. */
+		nameSecondary: { type: String, default: '' },
 		/** A dotted path to the list of records in the `rowDataUrl` answer; empty reads the answer itself. */
 		rowDataPath: { type: String, default: '' },
 		/** The record field that holds the Nextcloud file id. */

package/src/components/CnOrderedListField/CnOrderedListField.vue

@@ -17,7 +17,30 @@
 				v-for="(row, index) in rows"
 				:key="row.value"
 				class="cn-ordered-list-field__row"
-				:data-testid="`cn-ordered-list-row-${row.value}`">
+				:class="{
+					'cn-ordered-list-field__row--dragging': dragIndex === index,
+					'cn-ordered-list-field__row--over': dropIndex === index && dragIndex !== index,
+				}"
+				:data-testid="`cn-ordered-list-row-${row.value}`"
+				@dragover.prevent="onDragOver(index)"
+				@drop.prevent="onDrop(index)">
+				<!-- A drag handle (DqPersoonlijkeInstellingen). It is a button: a
+				     keyboard user moves the row with the arrow keys on it, and the
+				     up and down buttons stay for anyone who neither drags nor uses
+				     arrow keys. -->
+				<button
+					v-if="!disabled"
+					type="button"
+					class="cn-ordered-list-field__handle"
+					draggable="true"
+					:aria-label="t('nextcloud-vue', 'Reorder {item}: drag, or press the up and down arrow keys', { item: row.label })"
+					:data-testid="`cn-ordered-list-handle-${row.value}`"
+					@dragstart="onDragStart($event, index)"
+					@dragend="onDragEnd"
+					@keydown.up.prevent="move(index, index - 1, 'handle')"
+					@keydown.down.prevent="move(index, index + 1, 'handle')">
+					<DragVertical :size="20" />
+				</button>
 				<span class="cn-ordered-list-field__position" aria-hidden="true">{{ index + 1 }}</span>
 				<span v-if="row.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
 					<CnIcon :name="row.icon" :size="18" />
@@ -104,6 +127,7 @@ import { NcSelect } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 
 let orderedListUid = 0
@@ -134,7 +158,7 @@ let orderedListUid = 0
 export default {
 	name: 'CnOrderedListField',
 
-	components: { ChevronDown, ChevronUp, Close, CnIcon, NcSelect },
+	components: { ChevronDown, ChevronUp, Close, CnIcon, DragVertical, NcSelect },
 
 	props: {
 		/** The values in their order. */
@@ -205,6 +229,12 @@ export default {
 		return {
 			labelId: `cn-ordered-list-label-${orderedListUid}`,
 			announcement: '',
+			/** The value whose handle takes focus after the next render, or null. */
+			pendingHandleFocus: null,
+			/** The index of the row being dragged, or -1. */
+			dragIndex: -1,
+			/** The index of the row the drag is over, or -1. */
+			dropIndex: -1,
 		}
 	},
 
@@ -244,6 +274,20 @@ export default {
 		},
 	},
 
+	watch: {
+		// The parent's new order arrives as new rows; the moved row's handle
+		// lost focus when its row moved in the DOM, so it takes it back.
+		rows: {
+			flush: 'post',
+			handler() {
+				if (this.pendingHandleFocus !== null) {
+					this.focusPendingHandle()
+					this.pendingHandleFocus = null
+				}
+			},
+		},
+	},
+
 	methods: {
 		t,
 
@@ -270,13 +314,15 @@ export default {
 		},
 
 		/**
-		 * Move a row to another place and keep focus on the pressed button
-		 * where it still makes sense.
+		 * Move a row to another place and keep focus on the pressed control
+		 * where it still makes sense: the row's handle after an arrow key on
+		 * it, else the up or down button.
 		 *
 		 * @param {number} from Its index.
 		 * @param {number} to The index it moves to.
+		 * @param {string} [via] `handle` when the move came from the handle.
 		 */
-		move(from, to) {
+		move(from, to, via = '') {
 			if (to < 0 || to >= this.rows.length) {
 				return
 			}
@@ -286,7 +332,16 @@ export default {
 			const row = this.rows[from]
 			this.emitValue(values)
 			this.announcement = t('nextcloud-vue', '{item} moved to position {position} of {total}', { item: row.label, position: to + 1, total: values.length })
+			if (via === 'handle') {
+				// Re-focused once the parent hands the new order back: moving the
+				// row in the DOM takes focus off its handle.
+				this.pendingHandleFocus = row.value
+			}
 			this.$nextTick(() => {
+				if (via === 'handle') {
+					this.focusPendingHandle()
+					return
+				}
 				const direction = to < from ? 'up' : 'down'
 				const atEdge = (direction === 'up' && to === 0) || (direction === 'down' && to === values.length - 1)
 				const target = this.$el.querySelector(`[data-testid="cn-ordered-list-${atEdge ? (direction === 'up' ? 'down' : 'up') : direction}-${row.value}"]`)
@@ -296,6 +351,61 @@ export default {
 			})
 		},
 
+		/** Put focus back on the handle of the row just moved by its handle. */
+		focusPendingHandle() {
+			if (this.pendingHandleFocus === null) {
+				return
+			}
+			const handle = this.$el.querySelector(`[data-testid="cn-ordered-list-handle-${this.pendingHandleFocus}"]`)
+			if (handle) {
+				handle.focus()
+			}
+		},
+
+		/**
+		 * Start dragging a row by its handle.
+		 *
+		 * @param {DragEvent} event The drag event.
+		 * @param {number} index The row's index.
+		 */
+		onDragStart(event, index) {
+			this.dragIndex = index
+			if (event && event.dataTransfer) {
+				event.dataTransfer.effectAllowed = 'move'
+				event.dataTransfer.setData('text/plain', String(this.rows[index].value))
+			}
+		},
+
+		/**
+		 * Mark the row a drag is over as where the row will land.
+		 *
+		 * @param {number} index The row's index.
+		 */
+		onDragOver(index) {
+			if (this.dragIndex !== -1) {
+				this.dropIndex = index
+			}
+		},
+
+		/**
+		 * Drop the dragged row in the place of the row it is over.
+		 *
+		 * @param {number} index The row's index.
+		 */
+		onDrop(index) {
+			const from = this.dragIndex
+			this.onDragEnd()
+			if (from !== -1 && from !== index) {
+				this.move(from, index, 'handle')
+			}
+		},
+
+		/** End a drag, dropped or not. */
+		onDragEnd() {
+			this.dragIndex = -1
+			this.dropIndex = -1
+		},
+
 		/**
 		 * Remove a row.
 		 *
@@ -371,6 +481,42 @@ export default {
 	border-top: 1px solid var(--color-border);
 }
 
+.cn-ordered-list-field__row--dragging {
+	opacity: 0.5;
+}
+
+/* Where a dragged row will land: a primary line on the row's top edge. */
+.cn-ordered-list-field__row--over {
+	box-shadow: inset 0 2px 0 var(--color-primary-element);
+}
+
+.cn-ordered-list-field__handle {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	min-width: 28px;
+	height: 34px;
+	min-height: 34px;
+	margin: 0 -6px 0 -8px;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius-element, 8px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	cursor: grab;
+}
+
+.cn-ordered-list-field__handle:active {
+	cursor: grabbing;
+}
+
+.cn-ordered-list-field__handle:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+
 .cn-ordered-list-field__position {
 	flex: none;
 	min-width: 18px;

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -17,6 +17,22 @@
 		<p v-else-if="rows.length === 0" class="cn-record-list__empty" data-testid="cn-record-list-empty">
 			{{ emptyLabel }}
 		</p>
+		<!-- notice: the rows as sentences in one toned box ("2 waarschuwingen: ..."). -->
+		<div
+			v-else-if="presentation === 'notice'"
+			class="cn-record-list__notice"
+			:class="`cn-record-list__notice--${noticeVariant}`"
+			role="note"
+			data-testid="cn-record-list-notice">
+			<CnIcon
+				:name="noticeIcon"
+				:size="18"
+				class="cn-record-list__notice-icon"
+				aria-hidden="true" />
+			<p class="cn-record-list__notice-text">
+				{{ noticeText }}
+			</p>
+		</div>
 		<ul v-else class="cn-record-list__list">
 			<li
 				v-for="item in items"
@@ -210,7 +226,22 @@ import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
-const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards']
+const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards', 'notice']
+
+/** The tones a `notice` list takes. */
+const NOTICE_VARIANTS = ['info', 'warning', 'error']
+
+/**
+ * A row that is a plain string or number (an endpoint answering `["...", "..."]`)
+ * read as `{ value }`, so the templates reach it as `{value}` and a list
+ * without a `title` shows the value itself. An object row is returned as is.
+ *
+ * @param {(object|string|number)} row The row.
+ * @return {(object|string|number)} The row, or `{ value }` for a string or number.
+ */
+function scalarRow(row) {
+	return typeof row === 'string' || typeof row === 'number' ? { value: String(row) } : row
+}
 
 /**
  * Unwrap a value that may be a ref.
@@ -266,7 +297,7 @@ export default {
 	props: {
 		/**
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
-		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
+		 * presentation?, variant?, lead?, title?, meta?, text?, label?, pill?, trailing?, icon?,
 		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
 		 * valueLabels?, endpointSource?, bar? }`. `bar` (`{ valueField, maxField?,
 		 * overVariant? }`) draws a thin track under each row: filled to
@@ -275,7 +306,14 @@ export default {
 		 * largest row. `endpointSource` (`{ url, method?,
 		 * params?, responsePath? }`) reads the rows from an app endpoint instead
 		 * of `register` / `schema`. `valueLabels` maps a field's stored values to the labels
-		 * the templates show.
+		 * the templates show. `headerNote` and `headerLink.label` fill `{total}`
+		 * and `{count:<field>=<value>}`, the loaded rows with that value.
+		 * A row that is a plain string or number (an endpoint
+		 * answering `["…", "…"]`) is read as `{ value }`: templates reach it as
+		 * `{value}`, and without `title` a row shows the value itself.
+		 * `presentation: "notice"` draws the rows as sentences in one box toned by
+		 * `variant` (`info`, `warning` or `error`), after an optional `lead`
+		 * (`{total}` filled in).
 		 *
 		 * @type {object}
 		 */
@@ -334,6 +372,35 @@ export default {
 
 	computed: {
 		/** @return {string} `rows`, `feed`, `inline` or `cards`. */
+		/**
+		 * The tone of a `notice` list (`content.variant`): info, warning or error.
+		 *
+		 * @return {string} The variant, `info` when unset or unknown.
+		 * @spec openspec/changes/record-list-string-rows/specs/record-list-string-rows/spec.md#requirement-a-record-list-draws-rows-that-are-plain-strings
+		 */
+		noticeVariant() {
+			const value = this.content?.variant
+			return NOTICE_VARIANTS.includes(value) ? value : 'info'
+		},
+
+		/** @return {string} The icon of the notice tone. */
+		noticeIcon() {
+			return this.noticeVariant === 'info' ? 'InformationOutline' : 'AlertOutline'
+		},
+
+		/**
+		 * The rows of a `notice` list as one paragraph: each row's title, as
+		 * sentences, after the optional `lead` with `{total}` filled in.
+		 *
+		 * @return {string} The text.
+		 * @spec openspec/changes/record-list-string-rows/specs/record-list-string-rows/spec.md#requirement-a-record-list-draws-rows-that-are-plain-strings
+		 */
+		noticeText() {
+			const parts = this.items.map((item) => item.title).filter((text) => text !== '')
+			const lead = typeof this.content?.lead === 'string' && this.content.lead !== '' ? this.withTotal(this.content.lead) : ''
+			return [lead, ...parts].filter(Boolean).join(' ')
+		},
+
 		presentation() {
 			const value = this.content?.presentation
 			return PRESENTATIONS.includes(value) ? value : 'rows'
@@ -421,7 +488,8 @@ export default {
 		items() {
 			const c = this.content || {}
 			const barScale = this.barScale
-			return this.rows.slice(0, this.limit).map((row, index) => {
+			return this.rows.slice(0, this.limit).map((raw, index) => {
+				const row = scalarRow(raw)
 				const link = this.rowLink(row)
 				return {
 					key: (row && (row.id || row['@self']?.id)) || `row-${index}`,
@@ -430,7 +498,7 @@ export default {
 					tag: link ? 'router-link' : 'div',
 					attrs: link ? { to: link } : {},
 					initials: this.initialsFor(row),
-					title: this.fill(c.title, row),
+					title: this.fill(c.title || (row !== raw ? '{value}' : ''), row),
 					meta: this.metaOf(row),
 					text: this.fill(c.text, row),
 					label: this.fill(c.label, row),
@@ -638,13 +706,22 @@ export default {
 		},
 
 		/**
-		 * Replace `{total}` in a translated label.
+		 * Fill a translated label's counts: `{total}` is the list's total, and
+		 * `{count:<field>=<value>}` the loaded rows whose field reads that
+		 * value ("{count:status=done} van {total} stappen klaar"). The count
+		 * reads the rows the list loaded, so it is exact when `limit` covers
+		 * the list.
 		 *
 		 * @param {string} label The label.
 		 * @return {string} The text.
 		 */
 		withTotal(label) {
-			return this.translate(label).replace(/\{total\}/g, String(this.total))
+			return this.translate(label)
+				.replace(/\{total\}/g, String(this.total))
+				.replace(/\{count:([^=}]+)=([^}]*)\}/g, (match, field, value) => {
+					const wanted = value.trim()
+					return String(this.rows.filter((row) => String(readPath(row, field.trim())) === wanted).length)
+				})
 		},
 
 		/**
@@ -1125,6 +1202,36 @@ export default {
 	margin: 0;
 }
 
+.cn-record-list__notice {
+	display: flex;
+	gap: 10px;
+	align-items: flex-start;
+	padding: 12px 14px;
+	border-radius: var(--border-radius-large, 10px);
+	background: var(--color-primary-element-light, var(--color-background-dark));
+	color: var(--color-main-text);
+}
+
+.cn-record-list__notice--warning {
+	background: var(--color-warning-light, rgba(255, 196, 0, 0.12));
+	color: var(--color-warning-text, var(--color-main-text));
+}
+
+.cn-record-list__notice--error {
+	background: var(--color-error-light, rgba(219, 0, 0, 0.08));
+	color: var(--color-error-text, var(--color-main-text));
+}
+
+.cn-record-list__notice-icon {
+	flex: 0 0 auto;
+	margin-top: 1px;
+}
+
+.cn-record-list__notice-text {
+	margin: 0;
+	line-height: 1.5;
+}
+
 .cn-record-list__loading {
 	display: flex;
 	justify-content: center;