@conduction/nextcloud-vue 2.133.0 → 2.134.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 49478762 bytes
-sha256: 8128b7d868a0cfeceec9b70f82d8a27d9555e0c6df93c617918b7f3a5236a9b2
+size: 49551827 bytes
+sha256: e7994a49bfee10dad853249de60d6186e7c6b27b4852be03c39261a0a2f3e9f4

package/dist/nextcloud-vue.css

@@ -31613,27 +31613,27 @@ to { background-position: -200% 0;
 }
 
 
-.cn-integration-widget[data-v-2d91b76f] {
+.cn-integration-widget[data-v-1b6b243b] {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
 }
-.cn-integration-widget__tabbar[data-v-2d91b76f] {
+.cn-integration-widget__tabbar[data-v-1b6b243b] {
 	display: flex;
 	align-items: flex-end;
 	gap: 8px;
 	border-bottom: 1px solid var(--color-border);
 	margin-bottom: 12px;
 }
-.cn-integration-widget__tabs[data-v-2d91b76f] {
+.cn-integration-widget__tabs[data-v-1b6b243b] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 2px;
 	flex: 1;
 	min-width: 0;
 }
-.cn-integration-widget__tab[data-v-2d91b76f] {
+.cn-integration-widget__tab[data-v-1b6b243b] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -31646,27 +31646,27 @@ to { background-position: -200% 0;
 	font-size: 0.95em;
 	cursor: pointer;
 }
-.cn-integration-widget__tab[data-v-2d91b76f]:hover {
+.cn-integration-widget__tab[data-v-1b6b243b]:hover {
 	background: var(--color-background-hover);
 	color: var(--color-main-text);
 }
-.cn-integration-widget__tab[data-v-2d91b76f]:focus-visible {
+.cn-integration-widget__tab[data-v-1b6b243b]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: -2px;
 }
-.cn-integration-widget__tab--active[data-v-2d91b76f] {
+.cn-integration-widget__tab--active[data-v-1b6b243b] {
 	color: var(--color-main-text);
 	font-weight: 600;
 	border-bottom-color: var(--cn-iw-accent, var(--color-primary-element));
 }
-.cn-integration-widget__tab-icon[data-v-2d91b76f] {
+.cn-integration-widget__tab-icon[data-v-1b6b243b] {
 	color: var(--cn-iw-accent, currentColor);
 	flex-shrink: 0;
 }
-.cn-integration-widget__tab-label[data-v-2d91b76f] {
+.cn-integration-widget__tab-label[data-v-1b6b243b] {
 	white-space: nowrap;
 }
-.cn-integration-widget__header[data-v-2d91b76f] {
+.cn-integration-widget__header[data-v-1b6b243b] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -31674,23 +31674,23 @@ to { background-position: -200% 0;
 	margin-bottom: 8px;
 	border-bottom: 2px solid var(--cn-iw-accent, var(--color-border));
 }
-.cn-integration-widget__header-icon[data-v-2d91b76f] {
+.cn-integration-widget__header-icon[data-v-1b6b243b] {
 	color: var(--cn-iw-accent, var(--color-main-text));
 	flex-shrink: 0;
 }
-.cn-integration-widget__header-label[data-v-2d91b76f] {
+.cn-integration-widget__header-label[data-v-1b6b243b] {
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-integration-widget__header-actions[data-v-2d91b76f] {
+.cn-integration-widget__header-actions[data-v-1b6b243b] {
 	margin-inline-start: auto;
 	flex-shrink: 0;
 }
-.cn-integration-widget__panel[data-v-2d91b76f] {
+.cn-integration-widget__panel[data-v-1b6b243b] {
 	flex: 1;
 	min-height: 0;
 }
-.cn-integration-widget__panel[data-v-2d91b76f]:focus-visible {
+.cn-integration-widget__panel[data-v-1b6b243b]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: -2px;
 }
@@ -39208,38 +39208,38 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 }
 
 
-.cn-field-list-widget[data-v-6df666da] {
+.cn-field-list-widget[data-v-91c65ff8] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	min-width: 0;
 }
-.cn-field-list-widget__lead[data-v-6df666da] {
+.cn-field-list-widget__lead[data-v-91c65ff8] {
 	margin: 0;
 	font-weight: bold;
 }
-.cn-field-list-widget__rows[data-v-6df666da] {
+.cn-field-list-widget__rows[data-v-91c65ff8] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-field-list-widget__row[data-v-6df666da] {
+.cn-field-list-widget__row[data-v-91c65ff8] {
 	padding: 10px 0;
 	border-top: 1px solid var(--color-border);
 }
-.cn-field-list-widget__row[data-v-6df666da]:first-child {
+.cn-field-list-widget__row[data-v-91c65ff8]:first-child {
 	border-top: none;
 	padding-top: 0;
 }
-.cn-field-list-widget__line[data-v-6df666da] {
+.cn-field-list-widget__line[data-v-91c65ff8] {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
 }
-.cn-field-list-widget__avatar[data-v-6df666da] {
+.cn-field-list-widget__avatar[data-v-91c65ff8] {
 	flex: 0 0 auto;
 	display: inline-flex;
 	align-items: center;
@@ -39252,69 +39252,69 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	font-size: 12px;
 	font-weight: 700;
 }
-.cn-field-list-widget__main[data-v-6df666da] {
+.cn-field-list-widget__main[data-v-91c65ff8] {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
 	min-width: 0;
 }
-.cn-field-list-widget__title[data-v-6df666da] {
+.cn-field-list-widget__title[data-v-91c65ff8] {
 	font-weight: 600;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__meta[data-v-6df666da],
-.cn-field-list-widget__aside[data-v-6df666da],
-.cn-field-list-widget__detail[data-v-6df666da],
-.cn-field-list-widget__hint[data-v-6df666da],
-.cn-field-list-widget__empty[data-v-6df666da] {
+.cn-field-list-widget__meta[data-v-91c65ff8],
+.cn-field-list-widget__aside[data-v-91c65ff8],
+.cn-field-list-widget__detail[data-v-91c65ff8],
+.cn-field-list-widget__hint[data-v-91c65ff8],
+.cn-field-list-widget__empty[data-v-91c65ff8] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-field-list-widget__meta[data-v-6df666da],
-.cn-field-list-widget__aside[data-v-6df666da],
-.cn-field-list-widget__copies[data-v-6df666da] {
+.cn-field-list-widget__meta[data-v-91c65ff8],
+.cn-field-list-widget__aside[data-v-91c65ff8],
+.cn-field-list-widget__copies[data-v-91c65ff8] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 }
-.cn-field-list-widget__detail[data-v-6df666da] {
+.cn-field-list-widget__detail[data-v-91c65ff8] {
 	font-size: 13px;
 }
-.cn-field-list-widget__aside[data-v-6df666da] {
+.cn-field-list-widget__aside[data-v-91c65ff8] {
 	white-space: nowrap;
 }
-.cn-field-list-widget__detail[data-v-6df666da],
-.cn-field-list-widget__hint[data-v-6df666da],
-.cn-field-list-widget__empty[data-v-6df666da] {
+.cn-field-list-widget__detail[data-v-91c65ff8],
+.cn-field-list-widget__hint[data-v-91c65ff8],
+.cn-field-list-widget__empty[data-v-91c65ff8] {
 	margin: 4px 0 0;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__add[data-v-6df666da] {
+.cn-field-list-widget__add[data-v-91c65ff8] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
 	gap: 8px 12px;
 }
-.cn-field-list-widget__add[data-v-6df666da] > * {
+.cn-field-list-widget__add[data-v-91c65ff8] > * {
 	flex: 1 1 180px;
 }
-.cn-field-list-widget__add > button[data-v-6df666da] {
+.cn-field-list-widget__add > button[data-v-91c65ff8] {
 	flex: 0 0 auto;
 }
-.cn-field-list-widget__toolbar[data-v-6df666da] {
+.cn-field-list-widget__toolbar[data-v-91c65ff8] {
 	display: flex;
 	justify-content: flex-end;
 }
-.cn-field-list-widget__table-wrap[data-v-6df666da] {
+.cn-field-list-widget__table-wrap[data-v-91c65ff8] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	overflow-x: auto;
 }
-.cn-field-list-widget__table[data-v-6df666da] {
+.cn-field-list-widget__table[data-v-91c65ff8] {
 	width: 100%;
 	border-collapse: collapse;
 }
-.cn-field-list-widget__th[data-v-6df666da] {
+.cn-field-list-widget__th[data-v-91c65ff8] {
 	padding: 8px 12px;
 	text-align: start;
 	font-size: 13px;
@@ -39323,31 +39323,31 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	color: var(--color-text-maxcontrast);
 	background: var(--color-background-hover);
 }
-.cn-field-list-widget__th--menu[data-v-6df666da],
-.cn-field-list-widget__code[data-v-6df666da] {
+.cn-field-list-widget__th--menu[data-v-91c65ff8],
+.cn-field-list-widget__code[data-v-91c65ff8] {
 	font-size: 0.85em;
 	word-break: break-all;
 }
-.cn-field-list-widget__td--menu[data-v-6df666da] {
+.cn-field-list-widget__td--menu[data-v-91c65ff8] {
 	width: 1%;
 	text-align: end;
 }
-.cn-field-list-widget__tr[data-v-6df666da] {
+.cn-field-list-widget__tr[data-v-91c65ff8] {
 	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
 }
-.cn-field-list-widget__td[data-v-6df666da] {
+.cn-field-list-widget__td[data-v-91c65ff8] {
 	padding: 10px 12px;
 	vertical-align: middle;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__sr[data-v-6df666da] {
+.cn-field-list-widget__sr[data-v-91c65ff8] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	overflow: hidden;
 	clip-path: inset(50%);
 }
-.cn-field-list-widget__band[data-v-6df666da] {
+.cn-field-list-widget__band[data-v-91c65ff8] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -41042,22 +41042,40 @@ a.cn-record-list__inline-title[data-v-5aa15b1d] {
 }
 
 
-.cn-object-parties[data-v-196e7ade] {
+.cn-party-add[data-v-4157800c] {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__verdicts[data-v-196e7ade] {
+.cn-party-add__mode[data-v-4157800c] {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.cn-party-add__legend[data-v-4157800c] {
+	margin-bottom: var(--default-grid-baseline, 4px);
+	font-weight: 600;
+}
+
+
+.cn-object-parties[data-v-0c4e5c0c] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline, 4px) * 3);
+}
+.cn-object-parties__verdicts[data-v-0c4e5c0c] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
 }
-.cn-object-parties__role-label[data-v-196e7ade] {
+.cn-object-parties__role-label[data-v-0c4e5c0c] {
 	margin: 0 0 var(--default-grid-baseline, 4px) 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-object-parties__list[data-v-196e7ade] {
+.cn-object-parties__list[data-v-0c4e5c0c] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
@@ -41065,7 +41083,7 @@ a.cn-record-list__inline-title[data-v-5aa15b1d] {
 	padding: 0;
 	list-style: none;
 }
-.cn-object-parties__party[data-v-196e7ade] {
+.cn-object-parties__party[data-v-0c4e5c0c] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -41073,26 +41091,33 @@ a.cn-record-list__inline-title[data-v-5aa15b1d] {
 	padding: var(--default-grid-baseline, 4px);
 	border-radius: var(--border-radius, 4px);
 }
-.cn-object-parties__party[data-v-196e7ade]:hover {
+.cn-object-parties__party[data-v-0c4e5c0c]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-object-parties__name[data-v-196e7ade] {
+.cn-object-parties__name[data-v-0c4e5c0c] {
 	font-weight: bold;
 }
-.cn-object-parties__muted[data-v-196e7ade] {
+.cn-object-parties__muted[data-v-0c4e5c0c] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-object-parties__main-card[data-v-196e7ade] {
+.cn-object-parties__manage[data-v-0c4e5c0c] {
+	display: flex;
+	justify-content: flex-end;
+}
+.cn-object-parties__remove[data-v-0c4e5c0c] {
+	margin-inline-start: auto;
+}
+.cn-object-parties__main-card[data-v-0c4e5c0c] {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__main[data-v-196e7ade] {
+.cn-object-parties__main[data-v-0c4e5c0c] {
 	display: flex;
 	align-items: center;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__main-initials[data-v-196e7ade] {
+.cn-object-parties__main-initials[data-v-0c4e5c0c] {
 	display: flex;
 	flex: none;
 	align-items: center;
@@ -41104,28 +41129,28 @@ a.cn-record-list__inline-title[data-v-5aa15b1d] {
 	color: var(--color-main-text);
 	font-weight: 700;
 }
-.cn-object-parties__main-text[data-v-196e7ade] {
+.cn-object-parties__main-text[data-v-0c4e5c0c] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-object-parties__main-name[data-v-196e7ade] {
+.cn-object-parties__main-name[data-v-0c4e5c0c] {
 	font-size: 15px;
 }
-.cn-object-parties__main-role[data-v-196e7ade] {
+.cn-object-parties__main-role[data-v-0c4e5c0c] {
 	font-size: 13px;
 }
-.cn-object-parties__main-email[data-v-196e7ade] {
+.cn-object-parties__main-email[data-v-0c4e5c0c] {
 	display: flex;
 	align-items: center;
 	gap: calc(var(--default-grid-baseline, 4px) * 2.5);
 	color: var(--color-main-text);
 	overflow-wrap: anywhere;
 }
-.cn-object-parties__main-link[data-v-196e7ade] {
+.cn-object-parties__main-link[data-v-0c4e5c0c] {
 	color: var(--color-primary-element);
 	font-weight: 600;
 }
-.cn-object-parties__accepted[data-v-196e7ade] {
+.cn-object-parties__accepted[data-v-0c4e5c0c] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -41134,10 +41159,10 @@ a.cn-record-list__inline-title[data-v-5aa15b1d] {
 	border-radius: var(--border-radius-large, 10px);
 	background-color: var(--color-background-hover);
 }
-.cn-object-parties__accepted-label[data-v-196e7ade] {
+.cn-object-parties__accepted-label[data-v-0c4e5c0c] {
 	font-weight: 600;
 }
-.cn-object-parties__accepted-kind[data-v-196e7ade] {
+.cn-object-parties__accepted-kind[data-v-0c4e5c0c] {
 	border: 1px solid var(--color-border-dark);
 }
 

package/l10n/en.json

@@ -2379,7 +2379,17 @@
     "{field} is less than {value}": "{field} is less than {value}",
     "{field} is at most {value}": "{field} is at most {value}",
     "{field} is filled in": "{field} is filled in",
-    "No conditions: the rule always applies.": "No conditions: the rule always applies."
+    "No conditions: the rule always applies.": "No conditions: the rule always applies.",
+    "Add a party": "Add a party",
+    "Remove party": "Remove party",
+    "Remove {name} as {role}": "Remove {name} as {role}",
+    "Remove {name} as {role}?": "Remove {name} as {role}?",
+    "Someone already known": "Someone already known",
+    "Someone new": "Someone new",
+    "The change could not be saved. Nothing was changed.": "The change could not be saved. Nothing was changed.",
+    "The new person was not saved.": "The new person was not saved.",
+    "The party could not be added.": "The party could not be added.",
+    "You may not change who is on this record.": "You may not change who is on this record."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2629,7 +2629,17 @@
     "{field} is less than {value}": "{field} kleiner is dan {value}",
     "{field} is at most {value}": "{field} hoogstens {value} is",
     "{field} is filled in": "{field} is ingevuld",
-    "No conditions: the rule always applies.": "Geen voorwaarden: de regel geldt altijd."
+    "No conditions: the rule always applies.": "Geen voorwaarden: de regel geldt altijd.",
+    "Add a party": "Partij toevoegen",
+    "Remove party": "Partij verwijderen",
+    "Remove {name} as {role}": "{name} als {role} verwijderen",
+    "Remove {name} as {role}?": "{name} als {role} verwijderen?",
+    "Someone already known": "Iemand die al bekend is",
+    "Someone new": "Iemand nieuw",
+    "The change could not be saved. Nothing was changed.": "De wijziging kon niet worden opgeslagen. Er is niets veranderd.",
+    "The new person was not saved.": "De nieuwe persoon is niet opgeslagen.",
+    "The party could not be added.": "De partij kon niet worden toegevoegd.",
+    "You may not change who is on this record.": "U mag niet wijzigen wie er bij dit record hoort."
   },
   "plurals": {
     "{count} member": [

package/package.json

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

@@ -25,7 +25,16 @@
 				class="cn-field-list-widget__field"
 				:data-testid="`cn-field-list-input-${field.key}`">
 				<NcSelect
-					v-if="field.type === 'select'"
+					v-if="field.type === 'multiselect'"
+					v-model="draft[field.key]"
+					:inputLabel="field.label"
+					:options="field.options"
+					:reduce="(option) => option.value"
+					:multiple="true"
+					:keepOpen="true"
+					label="label" />
+				<NcSelect
+					v-else-if="field.type === 'select'"
 					v-model="draft[field.key]"
 					:inputLabel="field.label"
 					:options="field.options"
@@ -247,7 +256,16 @@
 				class="cn-field-list-widget__field"
 				:data-testid="`cn-field-list-input-${field.key}`">
 				<NcSelect
-					v-if="field.type === 'select'"
+					v-if="field.type === 'multiselect'"
+					v-model="draft[field.key]"
+					:inputLabel="field.label"
+					:options="field.options"
+					:reduce="(option) => option.value"
+					:multiple="true"
+					:keepOpen="true"
+					label="label" />
+				<NcSelect
+					v-else-if="field.type === 'select'"
 					v-model="draft[field.key]"
 					:inputLabel="field.label"
 					:options="field.options"
@@ -365,12 +383,12 @@ export default {
 		 * - `field` (required) — the object field holding the array.
 		 * - `key` — the item field that identifies an entry (default: the item itself for strings).
 		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when?, copy?: [{ path, label }] } }`. `detail.copy` puts a copy button beside the detail line for each named value of the row (an empty value gets none), such as a DNS record's name and value.
-		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
+		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select'|'multiselect'|'checkbox', options?, optionsSource?, required?, pattern?, patternMessage? }], unique?, defaults? }`. A `multiselect` field holds a list of values. `optionsSource` — `{ url, path?, valuePath?, labelPath? }` (default `id` and `name`) — adds options read from an endpoint after the static ones, each value once (tokens `@objectId`, `@object.<field>`), for choices that live in other records such as a case type's statuses.
 		 * - `remove` — `{ label? }`; omitted = no remove.
 		 * - `rowActions` — `[{ id, label, ariaLabel?, when?, placement?: 'band'|'inline', request: { method?, url, payload? } }]`, or `{ id, label, dialog, props }` to open a modal registered in the app registry with filled props (shown in `readOnly` too, since it writes nothing, and only when every token in `props` fills); tokens `@object.<field>`, `@objectId`, `@row.<field>`, `@index`. In the table variant `placement: 'inline'` draws the action as a button in the row instead of in the "..." menu; `ariaLabel` is a template filled from the row.
 		 * - `when` (row actions, `detail`) — `{ field: value }`, every field equal; or per field `{ eq?, neq?, set? }`, where a value `@row.<field>` (or `@<field>`) is another field of the same row: `{ deliveredRef: { set: true, neq: '@originalRef' } }`.
 		 * - `rowSource` — `{ url, path?, key }`: live per-row state merged by key.
-		 * - `variant: 'table'` + `columns` — `[{ header, path, map?, format?, strong?, pill?, variantMap? }]`: rows as a table; a per-row "..." menu holds the row actions and remove; `detail` lines become a warning band under the table, with the row actions that have `placement: 'band'`.
+		 * - `variant: 'table'` + `columns` — `[{ header, path, map?, format?, strong?, pill?, variantMap?, labelsFrom? }]` (a list value reads as its items joined; `labelsFrom` names an add field whose option labels word the values): rows as a table; a per-row "..." menu holds the row actions and remove; `detail` lines become a warning band under the table, with the row actions that have `placement: 'band'`.
 		 * - `add.trigger: 'button'`, `add.placement: 'header' | 'title' | 'footer'` — the add form opens from a button; `title` reports the button for the card's title row on the `header` event.
 		 * - `readOnly`, `hint`, `emptyText`.
 		 * - `row.href` — the path of a link for the row title; only http(s) and root-relative links, an absolute one opens in a new tab.
@@ -431,6 +449,8 @@ export default {
 			noticeType: 'error',
 			// What the last copy button put on the clipboard, said to a screen reader.
 			copied: '',
+			/** Options read through each add field's `optionsSource`, by field key. */
+			sourcedOptions: {},
 		}
 	},
 
@@ -528,9 +548,12 @@ export default {
 				.map((field) => ({
 					...field,
 					label: this.tr(field.label || field.key),
-					options: (Array.isArray(field.options) ? field.options : []).map((option) => (
-						typeof option === 'object' ? { value: option.value, label: this.tr(option.label || String(option.value)) } : { value: option, label: this.tr(String(option)) }
-					)),
+					options: [
+						...(Array.isArray(field.options) ? field.options : []).map((option) => (
+							typeof option === 'object' ? { value: option.value, label: this.tr(option.label || String(option.value)) } : { value: option, label: this.tr(String(option)) }
+						)),
+						...(this.sourcedOptions[field.key] || []),
+					],
 				}))
 		},
 
@@ -652,12 +675,14 @@ export default {
 		objectData() {
 			this.saved = null
 			this.loadLive()
+			this.loadOptions()
 		},
 	},
 
 	created() {
 		this.resetDraft()
 		this.loadLive()
+		this.loadOptions()
 	},
 
 	methods: {
@@ -746,12 +771,77 @@ export default {
 				}
 				return def.format === 'date-long' ? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1)) : formatBoardDate(date)
 			}
+			if (Array.isArray(raw)) {
+				return raw.map((item) => this.wordOf(item, def)).filter((word) => word !== '').join(', ')
+			}
+			return this.wordOf(raw, def)
+		},
+
+		/**
+		 * One value in words: through the column's `map`, then the option labels
+		 * of the add field it names in `labelsFrom`, else the value itself.
+		 *
+		 * @param {string|number|boolean|object} raw The value.
+		 * @param {object} def The column.
+		 * @return {string}
+		 */
+		wordOf(raw, def) {
 			if (def.map && Object.hasOwn(def.map, String(raw))) {
 				return this.tr(def.map[String(raw)])
 			}
+			if (def.labelsFrom) {
+				const field = this.addFields.find((candidate) => candidate.key === def.labelsFrom)
+				const option = field && field.options.find((candidate) => String(candidate.value) === String(raw))
+				if (option) {
+					return option.label
+				}
+			}
 			return typeof raw === 'object' ? '' : String(raw)
 		},
 
+		/**
+		 * The empty value of an add field: false for a checkbox, a list for a multiselect.
+		 *
+		 * @param {object} field The add field.
+		 * @return {boolean|Array|string}
+		 */
+		emptyValue(field) {
+			if (field.type === 'checkbox') {
+				return false
+			}
+			return field.type === 'multiselect' ? [] : ''
+		},
+
+		/**
+		 * Read the options of every add field that names an `optionsSource`.
+		 *
+		 * A source that cannot be read leaves the static options alone.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async loadOptions() {
+			const fields = this.content.add && Array.isArray(this.content.add.fields) ? this.content.add.fields : []
+			for (const field of fields) {
+				const source = field && field.optionsSource
+				if (!source || !source.url || !field.key) {
+					continue
+				}
+				try {
+					const { axios } = await this.http()
+					const response = await axios.get(prefixUrl(this.resolve(source.url, {})))
+					const list = source.path ? readPath(response && response.data, source.path) : response && response.data
+					const options = (Array.isArray(list) ? list : [])
+						.map((item) => ({ value: readPath(item, source.valuePath || 'id'), label: String(readPath(item, source.labelPath || 'name') ?? '') }))
+						.filter((option, index, all) => option.value !== undefined && option.value !== null && option.value !== ''
+							&& all.findIndex((other) => String(other.value) === String(option.value)) === index)
+					this.sourcedOptions = { ...this.sourcedOptions, [field.key]: options }
+				} catch (e) {
+					// eslint-disable-next-line no-console
+					console.warn('[CnFieldListWidget] optionsSource could not be read:', e?.message || e)
+				}
+			}
+		},
+
 		pillOf(entry, spec) {
 			if (!spec || !spec.path) {
 				return null
@@ -923,7 +1013,7 @@ export default {
 		resetDraft() {
 			const draft = {}
 			for (const field of this.addFields) {
-				const empty = field.type === 'checkbox' ? false : ''
+				const empty = this.emptyValue(field)
 				const first = field.type === 'select' && field.options.length > 0 ? field.options[0].value : empty
 				draft[field.key] = field.default !== undefined ? field.default : first
 			}
@@ -1078,10 +1168,10 @@ export default {
 			const errors = {}
 			for (const field of this.addFields) {
 				const value = this.draft[field.key]
-				const empty = value === undefined || value === null || String(value).trim() === ''
+				const empty = value === undefined || value === null || (Array.isArray(value) ? value.length === 0 : String(value).trim() === '')
 				if (field.required && empty) {
 					errors[field.key] = this.tr('Fill this in.')
-				} else if (!empty && field.pattern && !new RegExp(field.pattern).test(String(value).trim())) {
+				} else if (!empty && field.pattern && !Array.isArray(value) && !new RegExp(field.pattern).test(String(value).trim())) {
 					errors[field.key] = this.tr(field.patternMessage || 'This value is not valid.')
 				}
 			}
@@ -1161,7 +1251,7 @@ export default {
 			for (const [index, field] of this.addFields.entries()) {
 				const scalarValue = this.content.add?.scalar === true && index === 0 ? row.item : undefined
 				const value = row.item && typeof row.item === 'object' ? readPath(row.item, field.key) : scalarValue
-				draft[field.key] = value === undefined || value === null ? (field.type === 'checkbox' ? false : '') : value
+				draft[field.key] = value === undefined || value === null ? this.emptyValue(field) : value
 			}
 			this.draft = draft
 			this.errors = {}
@@ -1194,7 +1284,10 @@ export default {
 			const entry = { ...(add.defaults || {}) }
 			for (const field of this.addFields) {
 				const value = this.draft[field.key]
-				if (value !== undefined && value !== null && String(value).trim() !== '') {
+				if (Array.isArray(value)) {
+					// An emptied list is written as empty, so an edit can clear it.
+					entry[field.key] = value
+				} else if (value !== undefined && value !== null && String(value).trim() !== '') {
 					entry[field.key] = trimmed(value)
 				}
 			}