@conduction/nextcloud-vue 2.135.0 → 2.136.0

package/l10n/en.json

@@ -1484,18 +1484,6 @@
     "Pages": "Pages",
     "Open {module}": "Open {module}",
     "{list} and {last}": "{list} and {last}",
-    "%n page: {pages}": [
-      "%n page: {pages}",
-      "%n pages: {pages}"
-    ],
-    "%n page, including {pages}": [
-      "%n page, including {pages}",
-      "%n pages, including {pages}"
-    ],
-    "{on} of %n is in the menu": [
-      "{on} of %n is in the menu",
-      "{on} of %n are in the menu"
-    ],
     "Put it in the menu:": "Put it in the menu:",
     "Admin settings": "Admin settings",
     "Support this app": "Support this app",
@@ -1513,10 +1501,6 @@
     "{status}, {expected}": "{status}, {expected}",
     "Build on this app": "Build on this app",
     "AI skills": "AI skills",
-    "%n feature": [
-      "%n feature",
-      "%n features"
-    ],
     "Your account": "Your account",
     "Only for you. Colleagues keep their own settings.": "Only for you. Colleagues keep their own settings.",
     "Sections of the settings": "Sections of the settings",
@@ -2254,10 +2238,6 @@
     "from {from}": "from {from}",
     "up to {to}": "up to {to}",
     "this week": "this week",
-    "within %n day": [
-      "within %n day",
-      "within %n days"
-    ],
     "Search term: {term}": "Search term: {term}",
     "New contact": "New contact",
     "Template": "Template",
@@ -2578,6 +2558,26 @@
     "%n minute": [
       "%n minute",
       "%n minutes"
+    ],
+    "%n page: {pages}": [
+      "%n page: {pages}",
+      "%n pages: {pages}"
+    ],
+    "%n page, including {pages}": [
+      "%n page, including {pages}",
+      "%n pages, including {pages}"
+    ],
+    "{on} of %n is in the menu": [
+      "{on} of %n is in the menu",
+      "{on} of %n are in the menu"
+    ],
+    "%n feature": [
+      "%n feature",
+      "%n features"
+    ],
+    "within %n day": [
+      "within %n day",
+      "within %n days"
     ]
   }
 }

package/l10n/nl.json

@@ -56,7 +56,7 @@
     "Save sharing": "Delen opslaan",
     "Failed to save sharing": "Delen opslaan is mislukt",
     "My views": "Mijn weergaven",
-    "Shared with me": "Met mij gedeeld",
+    "Shared with me": "Gedeeld met mij",
     "Share \"{name}\"": "\"{name}\" delen",
     "Save the current view to \"{name}\"": "Huidige weergave opslaan in \"{name}\"",
     "Save \"{name}\" as my view": "\"{name}\" opslaan als mijn weergave",
@@ -1671,18 +1671,6 @@
     "Pages": "Pagina's",
     "Open {module}": "{module} openen",
     "{list} and {last}": "{list} en {last}",
-    "%n page: {pages}": [
-      "%n pagina: {pages}",
-      "%n pagina's: {pages}"
-    ],
-    "%n page, including {pages}": [
-      "%n pagina, waaronder {pages}",
-      "%n pagina's, waaronder {pages}"
-    ],
-    "{on} of %n is in the menu": [
-      "{on} van %n staat in het menu",
-      "{on} van %n staan in het menu"
-    ],
     "Put it in the menu:": "In het menu zetten:",
     "Support this app": "Steun deze app",
     "No features with this status": "Geen functies met deze status",
@@ -1699,10 +1687,6 @@
     "{status}, {expected}": "{status}, {expected}",
     "Build on this app": "Bouw verder op deze app",
     "AI skills": "AI-vaardigheden",
-    "%n feature": [
-      "%n functie",
-      "%n functies"
-    ],
     "Your account": "Uw account",
     "Only for you. Colleagues keep their own settings.": "Alleen voor jou. Collega's houden hun eigen instellingen.",
     "Sections of the settings": "Onderdelen van de instellingen",
@@ -2504,10 +2488,6 @@
     "from {from}": "vanaf {from}",
     "up to {to}": "tot en met {to}",
     "this week": "deze week",
-    "within %n day": [
-      "binnen %n dag",
-      "binnen %n dagen"
-    ],
     "Search term: {term}": "Zoekterm: {term}",
     "New contact": "Nieuw contact",
     "Template": "Sjabloon",
@@ -2845,6 +2825,26 @@
     "%n minute": [
       "%n minuut",
       "%n minuten"
+    ],
+    "%n page: {pages}": [
+      "%n pagina: {pages}",
+      "%n pagina's: {pages}"
+    ],
+    "%n page, including {pages}": [
+      "%n pagina, waaronder {pages}",
+      "%n pagina's, waaronder {pages}"
+    ],
+    "{on} of %n is in the menu": [
+      "{on} van %n staat in het menu",
+      "{on} van %n staan in het menu"
+    ],
+    "%n feature": [
+      "%n functie",
+      "%n functies"
+    ],
+    "within %n day": [
+      "binnen %n dag",
+      "binnen %n dagen"
     ]
   }
 }

package/package.json

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

@@ -14,7 +14,9 @@
 		<div v-if="!done" class="cn-action-dialog">
 			<!-- The record the action is about: its title, a meta line, a badge. -->
 			<div v-if="summary" class="cn-action-dialog__summary" data-testid="cn-action-dialog-summary">
-				<CnIcon :name="config.summary.icon || 'FolderOutline'" :size="20" class="cn-action-dialog__summary-icon" />
+				<span class="cn-action-dialog__summary-icon">
+					<CnIcon :name="config.summary.icon || 'FolderOutline'" :size="20" />
+				</span>
 				<span class="cn-action-dialog__summary-text">
 					<strong>{{ summary.title }}</strong>
 					<span v-if="summary.meta" class="cn-action-dialog__muted">{{ summary.meta }}</span>
@@ -142,6 +144,9 @@
 				:type="noteType"
 				: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" />
+				</template>
 				{{ text(config.note.text) }}
 			</NcNoteCard>
 
@@ -239,7 +244,8 @@ let reasonSeq = 0
  * - `reason`: `{ label?, hint?, required?, field?, rows? }`: a text area; required by
  *   default; sent as `field` (default `reason`). `rows` is its height in lines
  *   (default 2; board DqBesluit draws 4).
- * - `note`: `{ variant?, title?, text }`: a read-only note.
+ * - `note`: `{ variant?, title?, text, icon? }`: a read-only note; `icon` an
+ *   icon name in place of the variant's own ("LockOutline").
  * - `confirm`: `{ label, icon?, request?: { method?, url, body? }, action? }`.
  *   `request` posts itself (`body` templates filled with the record and
  *   `{reason}`); `action` dispatches a manifest action through the page.
@@ -808,10 +814,32 @@ export default {
 .cn-action-dialog__summary {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: 12px;
 	padding: 12px 14px;
 	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius-large, 8px);
+	border-radius: var(--border-radius-large, 10px);
+}
+
+/* The record's icon on a tinted tile (DqArchiveren). */
+.cn-action-dialog__summary-icon {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 8px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-action-dialog__summary-text strong {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-action-dialog__summary-text .cn-action-dialog__muted {
+	font-size: 13px;
 }
 
 .cn-action-dialog__summary-text {
@@ -853,13 +881,26 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 }
 
+/* The server draws every dt as a 130px right-aligned inline block and pads
+   dt and dd 12px; a fact is a label over its value. */
+.cn-action-dialog__facts dt,
+.cn-action-dialog__facts dd {
+	display: block;
+	width: auto;
+	white-space: normal;
+	text-align: start;
+}
+
 .cn-action-dialog__facts dt {
+	margin: 0;
+	padding: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
 
 .cn-action-dialog__facts dd {
 	margin: 0;
+	padding: 0;
 	font-size: 15px;
 	font-weight: 500;
 }

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -47,6 +47,9 @@
 				</p>
 			</li>
 		</ul>
+		<p v-if="footnote" class="cn-audit-card__footnote" data-testid="cn-audit-trail-widget-footnote">
+			{{ footnote }}
+		</p>
 		<template v-if="shownEntries.length > maxDisplay" #footer>
 			<button class="cn-audit-card__show-all" @click="$emit('show-all')">
 				{{ showAllLabel }} ({{ shownEntries.length }})
@@ -93,6 +96,12 @@ export default {
 	components: { CnDetailCard, NcLoadingIcon },
 
 	props: {
+		/**
+		 * A muted line under the trail, inside the card ("Kenmerk ZT-OMV-REG").
+		 *
+		 * @spec openspec/changes/audit-trail-footnote/specs/audit-trail/spec.md#requirement-a-history-card-can-end-in-a-line-about-the-record
+		 */
+		footnote: { type: String, default: '' },
 		/** OpenRegister register id (slug or uuid). Optional for `scope: "app"`. */
 		register: { type: String, default: '' },
 		/** OpenRegister schema id (slug or uuid). Optional for `scope: "app"`. */
@@ -523,6 +532,12 @@ export default {
 	padding: 12px 0;
 }
 
+.cn-audit-card__footnote {
+	margin: 12px 0 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-audit-card__show-all {
 	background: none;
 	border: none;

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -20,10 +20,8 @@
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
 			:relatedSources="relatedSources"
+			:footnote="footnote"
 			v-bind="emptyText ? { noEntriesLabel: emptyText } : {}" />
-		<p v-if="footnote" class="cn-audit-trail-widget__footnote" data-testid="cn-audit-trail-widget-footnote">
-			{{ footnote }}
-		</p>
 	</div>
 </template>
 
@@ -283,14 +281,8 @@ export default {
 </script>
 
 <style scoped>
-/* The card keeps its own box; the wrapper only adds the line under it. */
+/* The card keeps its own box, footnote included. */
 .cn-audit-trail-widget {
 	display: contents;
 }
-
-.cn-audit-trail-widget__footnote {
-	margin: 0;
-	font-size: 13px;
-	color: var(--color-text-maxcontrast);
-}
 </style>

package/src/components/CnDataTable/CnDataTable.md

@@ -209,6 +209,7 @@ export default {
 | `filterable` | Boolean | `false` | Show a filter button in every header whose column can filter: enum, boolean, text, number, date and reference columns backed by a schema property. A column opts out with `filterable: false`. Applying a filter emits `column-filter`; the host owns the state and passes it back as `activeFilters`. `CnIndexPage` turns it on by default. |
 | `activeFilters` | Object | `{}` | The active filter map, `{ paramKey: values[] }`: the same map the facet sidebar writes, so a header filter and a sidebar filter on one field show the same state. |
 | `filterSchema` | Object | `null` | The schema the header filters read instead of `schema`, for a page that filters through other fields than the rows' own (a named source's search fields). Null: the header filters read `schema`. |
+| `filterChips` | Boolean | `true` | Draw the active header filters as removable chips above the table. A host that lists them itself (the index page's board Active line) turns this off, so a filter is not shown twice. |
 | `filterRegister` | String | `''` | Register slug a reference column's filter searches in when the column names none. |
 | `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable personal lens in self-fetch mode, keyed `<lens>.<reason>` or `<reason>`. Without it the library's text is used (see below). |
 

package/src/components/CnDataTable/CnDataTable.vue

@@ -24,7 +24,7 @@
 
 		<!-- Active header filters, one removable chip each. -->
 		<ul
-			v-if="!isLoading && activeColumnFilterChips.length > 0"
+			v-if="filterChips && !isLoading && activeColumnFilterChips.length > 0"
 			class="cn-data-table__filter-chips"
 			:aria-label="activeFiltersLabel"
 			data-testid="cn-table-filter-chips">
@@ -1081,6 +1081,18 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Draw the active header filters as removable chips above the table.
+		 * A host that lists them itself (the index page's board Active line)
+		 * turns this off, so a filter is not shown twice.
+		 *
+		 * @spec openspec/changes/index-table-filter-chips-once/specs/cn-data-table/spec.md#requirement-a-host-that-lists-the-active-filters-itself-turns-the-table-chips-off
+		 */
+		filterChips: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * The active filter map, `{ paramKey: values[] }`: the same map the
 		 * facet sidebar writes, so a header filter and a sidebar filter on one

package/src/components/CnDetailPage/CnDetailPage.md

@@ -372,6 +372,7 @@ The header carries the shared [CnActionsMenu](./cn-actions-menu.md) overflow (Re
 | `formSize` (`form-size`) | String | `'normal'` | NcDialog size for this page's create and edit form dialogs (`'small'`, `'normal'`, `'large'`). Set from the manifest as `config.formSize`. Before 2.44.0 the page passed no size, so both forms sat at `normal` however many properties the schema declared, while a manifest `open-form` header action could already ask for `large`. |
 | `formColumns` (`form-columns`) | Number | `1` | How many columns the create and edit forms flow their fields into (`1` or `2`). Pair `2` with `formSize: 'large'`, or the two columns are merely two narrow ones. Textareas and JSON editors still span both, and the layout collapses back to one column below 700px. Set from the manifest as `config.formColumns`. |
 | `editLabel` | String | `''` | Label for the header Edit button. Defaults to a translated "Edit". |
+| `editTitle` | String | `''` | Title of the record edit form, run through the host translate. Empty uses the Edit button's label. |
 | `editSubtitle` | String | `''` | One line under the edit form's title, run through the host translate. Empty shows none. |
 | `showRequestFeature` | Boolean | `true` | Show the Request-a-feature item. Emits `@request-feature`; the default opens the forge's feature-request issue form (repo and forge injected by CnAppRoot) in a new tab, pre-filled with the page title and `surface: "detail:<id>"`. |
 | `documentationUrl` | String | `''` | When set, adds a **Documentation** entry opening the link in a new tab. Empty hides it. |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1324,7 +1324,7 @@
 				:schema="currentSchema"
 				:item="currentObject"
 				:register="register"
-				:dialogTitle="editActionLabel"
+				:dialogTitle="editFormTitle"
 				:subtitle="editFormSubtitle"
 				:excludeFields="excludeFields"
 				:includeFields="includeFields"
@@ -2454,6 +2454,12 @@ export default {
 			default: '',
 		},
 
+		/** Title of the record edit form, run through the host translate. Empty uses the Edit button's label. */
+		editTitle: {
+			type: String,
+			default: '',
+		},
+
 		/** One line under the edit form's title, run through the host translate. Empty shows none. */
 		editSubtitle: {
 			type: String,
@@ -4790,6 +4796,11 @@ export default {
 			return this.editLabel ? this.effectiveTranslate(this.editLabel) : t('nextcloud-vue', 'Edit')
 		},
 
+		/** @return {string} The edit form's title, translated; the Edit button's label when none is configured. */
+		editFormTitle() {
+			return this.editTitle ? this.effectiveTranslate(this.editTitle) : this.editActionLabel
+		},
+
 		/** @return {string} The edit form's subtitle, translated; empty when none is configured. */
 		editFormSubtitle() {
 			return this.editSubtitle ? this.effectiveTranslate(this.editSubtitle) : ''

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -871,6 +871,7 @@
 				<CnDataTable
 					v-else-if="currentViewMode === 'table'"
 					:schema="effectiveSchema"
+					:filterChips="!isBoardLook"
 					:columns="renderedColumns"
 					:pinnedCount="pinnedColumnCount"
 					:rowIcon="rowIcon"
@@ -10863,7 +10864,8 @@ export default {
 		/**
 		 * A view's state as the edit dialog shows it under a criteria choice:
 		 * its filters, search term and sort in sentences, read against the
-		 * page schema's titles.
+		 * page schema's titles and the page's `filterLabels` (a `hidden`
+		 * filter is left out).
 		 *
 		 * @param {object} state A view state (`extractViewState` or `currentViewState`).
 		 * @return {string} The sentences.
@@ -10873,6 +10875,7 @@ export default {
 			const schema = this.effectiveSchema
 			return viewCriteriaSummary(state, {
 				properties: (schema && schema.properties) || {},
+				filterLabels: this.filterLabels || {},
 				translate: (text) => this.cnTranslate(text),
 			})
 		},

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -6,7 +6,7 @@
 <template>
 	<div
 		class="cn-record-list"
-		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true }]"
+		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true, 'cn-record-list--data-table': presentation === 'table' && content.tableLook === 'data' }]"
 		data-testid="cn-record-list">
 		<p v-if="intro && !absent" class="cn-record-list__intro" data-testid="cn-record-list-intro">
 			{{ intro }}
@@ -448,7 +448,21 @@
 			data-testid="cn-record-list-action-error">
 			{{ actionError }}
 		</p>
-		<p v-if="footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)" class="cn-record-list__footnote" data-testid="cn-record-list-footnote">
+		<div
+			v-if="footnoteTone && footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)"
+			class="cn-record-list__notice cn-record-list__notice--footnote"
+			:class="`cn-record-list__notice--${footnoteTone}`"
+			data-testid="cn-record-list-footnote">
+			<CnIcon
+				:name="footnoteTone === 'info' ? 'InformationOutline' : 'AlertOutline'"
+				:size="16"
+				class="cn-record-list__notice-icon"
+				aria-hidden="true" />
+			<p class="cn-record-list__notice-text">
+				{{ footnote }}
+			</p>
+		</div>
+		<p v-else-if="footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)" class="cn-record-list__footnote" data-testid="cn-record-list-footnote">
 			{{ footnote }}
 		</p>
 		<!-- `footerLink`: a text link under the rows ("Naar Mijn werk"). -->
@@ -685,6 +699,11 @@ export default {
 		 * `pill.cases` (`[{ when, label, variant? }]`) labels a row by the
 		 * first case whose `when` holds on it, else by the pill's own `label`
 		 * and `variant` (Concept, Vastgezet, Actief).
+		 * `footnoteVariant` (`info`, `warning` or `error`) draws the footnote
+		 * as a toned notice box with its icon (DqZaaktype opt-out note).
+		 * `tableLook: "data"` marks a `table` as a data table, which the board
+		 * look draws as its card table (header band, 40px rows, hairlines)
+		 * instead of the compact grid (DqZaaktype "Berichten aan de aanvrager").
 		 * `groupBy` (a field path) draws the rows in groups under a heading
 		 * per value, headed by the field's `valueLabels` entry; `groupOrder`
 		 * (values) orders the groups and `groupEmptyLabel` heads the rows
@@ -1212,6 +1231,19 @@ export default {
 			return typeof note === 'string' && note !== '' ? this.translate(note) : ''
 		},
 
+		/**
+		 * The tone the footnote is drawn in as a notice box
+		 * (`content.footnoteVariant`: info, warning or error); '' for a plain
+		 * muted line.
+		 *
+		 * @return {string} The tone, or ''.
+		 * @spec openspec/changes/record-list-data-table-and-notice-footnote/specs/record-list/spec.md#requirement-a-record-list-footnote-can-be-a-toned-notice
+		 */
+		footnoteTone() {
+			const tone = this.content?.footnoteVariant
+			return NOTICE_VARIANTS.includes(tone) ? tone : ''
+		},
+
 		/**
 		 * Whether the footnote reads the answer: it then shows with no rows too.
 		 *
@@ -2938,6 +2970,10 @@ export default {
 	color: var(--color-error-text, var(--color-main-text));
 }
 
+.cn-record-list__notice--footnote {
+	margin-top: 12px;
+}
+
 .cn-record-list__notice-icon {
 	flex: 0 0 auto;
 	margin-top: 1px;

package/src/components/CnWorkingCalendarWidget/CnWorkingCalendarWidget.vue

@@ -701,13 +701,20 @@ export default {
 	width: 1px;
 }
 
+/* A theme's paragraph rule sets every p's size and colour with !important
+   (thematiq), so the note and the footnote also set its tokens.
+   @spec openspec/changes/calendar-footnote-paragraph-tokens/specs/working-calendar-footnote/spec.md */
 .cn-working-calendar__note {
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
 /* @spec openspec/changes/working-calendar-footnote/specs/working-calendar-footnote/spec.md */
 .cn-working-calendar__footnote {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-line-height: 1.3;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	margin: 0;
 	font-size: 13px;
 	line-height: 1.3;

package/src/composables/indexSources.js

@@ -1401,6 +1401,32 @@ function searchSource(config = {}, context = {}) {
 	}
 }
 
+/**
+ * The members that match a search, in the asked order, and the page of them
+ * the pager asks for.
+ *
+ * @param {Array<object>} members The members, by name.
+ * @param {object} config `search`, `sortKey`, `sortOrder`, `limit`, `offset`.
+ * @return {{rows: Array<object>, total: number}} The page and how many match.
+ */
+function membersPage(members, config = {}) {
+	const term = String(config.search || '').trim().toLowerCase()
+	let rows = term === ''
+		? members.slice()
+		: members.filter((member) => ['displayname', 'function', 'roles', 'email'].some((field) => String(member[field] || '').toLowerCase().includes(term)))
+	if (config.sortKey) {
+		const sign = config.sortOrder === 'desc' ? -1 : 1
+		rows = rows.sort((a, b) => sign * String(a[config.sortKey] ?? '').localeCompare(String(b[config.sortKey] ?? '')))
+	}
+	const total = rows.length
+	const limit = Number(config.limit) || 0
+	if (limit > 0) {
+		const offset = Number(config.offset) || 0
+		rows = rows.slice(offset, offset + limit)
+	}
+	return { rows, total }
+}
+
 /**
  * The users source: the members of a Nextcloud group, with their function,
  * roles, e-mail and whether they are in today (`entitySource: "users"`,
@@ -1417,12 +1443,20 @@ function searchSource(config = {}, context = {}) {
  * Listing a group needs an admin or the group's sub-admin; a refused request
  * leaves the list empty.
  *
+ * The page gets a pager (`pages`), and the search term and the header's order
+ * come as `search` and `sortKey` / `sortOrder`: the group's members are read
+ * once and searched, sorted and paged here, so a new page, term or order does
+ * not read every member's presence again.
+ *
  * @return {object} The source adapter.
  * @spec openspec/changes/index-groups-users-source/specs/index-page/spec.md#requirement-an-index-page-can-list-nextcloud-groups-and-their-members
  */
 function usersSource() {
-	const state = reactive({ rows: [], loading: false })
+	const state = reactive({ rows: [], loading: false, total: 0 })
 	let seq = 0
+	// The members last read, for the group and request they were read for.
+	let readMembers = []
+	let membersKey = null
 	const presenceLabels = {
 		present: t('nextcloud-vue', 'Present'),
 		away: t('nextcloud-vue', 'Away'),
@@ -1441,6 +1475,15 @@ function usersSource() {
 		 */
 		load: async (config) => {
 			const group = String((config && (config.group || config.defaultGroup)) || '')
+			const { search, sortKey, sortOrder, limit, offset, ...request } = config || {}
+			const key = JSON.stringify({ ...request, group })
+			// A new page, term or order of the members already read: no request.
+			if (key === membersKey && (offset !== undefined || search !== undefined || sortKey !== undefined)) {
+				const page = membersPage(readMembers, config)
+				state.rows = page.rows
+				state.total = page.total
+				return
+			}
 			const mine = ++seq
 			state.loading = true
 			try {
@@ -1475,11 +1518,18 @@ function usersSource() {
 					}
 				}))
 				if (mine === seq) {
-					state.rows = rows.sort((a, b) => a.displayname.localeCompare(b.displayname))
+					readMembers = rows.sort((a, b) => a.displayname.localeCompare(b.displayname))
+					membersKey = key
+					const page = membersPage(readMembers, config)
+					state.rows = page.rows
+					state.total = page.total
 				}
 			} catch (error) {
 				if (mine === seq) {
+					readMembers = []
+					membersKey = null
 					state.rows = []
+					state.total = 0
 				}
 				throw error
 			} finally {
@@ -1490,10 +1540,26 @@ function usersSource() {
 		},
 
 		/**
-		 * @return {Array<object>} The members.
+		 * @return {Array<object>} The members on this page.
 		 */
 		rows: () => state.rows,
 
+		pages: true,
+
+		/**
+		 * @return {number} The members that match, on every page.
+		 */
+		total: () => state.total,
+
+		searchParam: 'search',
+
+		/**
+		 * @param {string} key The column.
+		 * @param {string} order `asc` or `desc`.
+		 * @return {object} The load arguments.
+		 */
+		sortParam: (key, order) => ({ sortKey: key, sortOrder: order }),
+
 		/**
 		 * @return {boolean} Whether a load is in flight.
 		 */