@conduction/nextcloud-vue 2.98.0 → 2.100.0

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;

package/src/components/CnSettingsField/CnSettingsField.vue

@@ -0,0 +1,449 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-settings-field" :data-testid="`cn-settings-field-${field.key}`">
+		<NcCheckboxRadioSwitch
+			v-if="kind === 'switch' || kind === 'boolean'"
+			:type="kind === 'switch' ? 'switch' : 'checkbox'"
+			:modelValue="!!modelValue"
+			:disabled="field.readOnly"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue($event)">
+			{{ label }}
+		</NcCheckboxRadioSwitch>
+		<div v-else-if="kind === 'image'"
+			class="cn-settings-field__image"
+			role="group"
+			:aria-labelledby="`${inputId}-label`">
+			<span :id="`${inputId}-label`" class="cn-settings-field__image-label">{{ label }}</span>
+			<div class="cn-settings-field__image-row">
+				<span class="cn-settings-field__image-tile" :data-testid="`cn-settings-field-image-${field.key}`">
+					<img v-if="stringValue" :src="stringValue" :alt="t('nextcloud-vue', 'Current {name}', { name: label })">
+					<span v-else class="cn-settings-field__image-initials" aria-hidden="true">{{ field.initials || '' }}</span>
+				</span>
+				<input
+					:id="inputId"
+					ref="file"
+					class="hidden-visually"
+					type="file"
+					:accept="field.accept || 'image/*'"
+					tabindex="-1"
+					:aria-labelledby="`${inputId}-label`"
+					:aria-describedby="describedBy"
+					@change="upload($event.target.files && $event.target.files[0])">
+				<NcButton
+					v-if="!field.readOnly && field.uploadUrl"
+					:disabled="uploading"
+					:aria-describedby="describedBy"
+					:data-testid="`cn-settings-field-upload-${field.key}`"
+					@click="$refs.file && $refs.file.click()">
+					<template v-if="uploading" #icon>
+						<NcLoadingIcon :size="20" />
+					</template>
+					{{ field.uploadLabel || t('nextcloud-vue', 'Upload {name}', { name: label }) }}
+				</NcButton>
+			</div>
+		</div>
+		<NcSelect
+			v-else-if="kind === 'select'"
+			:inputId="inputId"
+			:modelValue="selectedOption"
+			:options="normalizedOptions"
+			:inputLabel="label"
+			:placeholder="field.placeholder || ''"
+			:loading="optionsLoading"
+			:disabled="field.readOnly"
+			:clearable="!field.required"
+			label="label"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue(optionValue($event))" />
+		<NcTextArea
+			v-else-if="kind === 'textarea'"
+			:id="inputId"
+			:label="label"
+			:modelValue="stringValue"
+			:rows="field.rows || 4"
+			:placeholder="field.placeholder || ''"
+			:readonly="field.readOnly"
+			:error="!!error"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue($event)" />
+		<NcTextField
+			v-else-if="kind === 'secret'"
+			:id="inputId"
+			:label="label"
+			type="password"
+			autocomplete="new-password"
+			:modelValue="stringValue"
+			:placeholder="field.secretSet ? secretSetPlaceholder : (field.placeholder || '')"
+			:readonly="field.readOnly"
+			:error="!!error"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue($event)" />
+		<NcTextField
+			v-else-if="kind === 'number'"
+			:id="inputId"
+			:label="label"
+			type="number"
+			:min="field.min"
+			:max="field.max"
+			:modelValue="stringValue"
+			:readonly="field.readOnly"
+			:error="!!error"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue($event === '' ? null : Number($event))" />
+		<NcTextField
+			v-else
+			:id="inputId"
+			:label="label"
+			:type="kind === 'password' ? 'password' : 'text'"
+			:modelValue="stringValue"
+			:placeholder="field.placeholder || ''"
+			:readonly="field.readOnly"
+			:error="!!error"
+			:aria-describedby="describedBy"
+			@update:modelValue="emitValue($event)" />
+		<p v-if="shownError"
+			:id="`${inputId}-error`"
+			class="cn-settings-field__error"
+			:data-testid="`cn-settings-field-error-${field.key}`">
+			{{ shownError }}
+		</p>
+		<p v-else-if="hint" :id="`${inputId}-hint`" class="cn-settings-field__hint">
+			{{ hint }}
+		</p>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { buildHeaders, prefixUrl } from '../../utils/headers.js'
+import { readPath } from '../../utils/readPath.js'
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+
+let fieldUid = 0
+
+/** Field types and the names CnSettingsPage's manifest uses for them. */
+const KIND_ALIASES = { enum: 'select', string: 'text' }
+
+/**
+ * CnSettingsField - one settings field: the control for its type with its
+ * label, and under it an error or a hint. Shared by CnSettingsPage and
+ * CnSettingsFieldsSection.
+ *
+ * Types: `text` (default), `textarea`, `number`, `switch`, `boolean` (a checkbox),
+ * `select` (`enum`) with static `options` or options read from `optionsUrl`,
+ * `password` (a masked input that shows its value back) and `secret`
+ * (replace-only: the input stays empty, and with `secretSet` says a value is
+ * stored; the host sends it only when something is typed), and `image` (a
+ * preview tile, the initials without an image, and an upload button that
+ * posts the file to `uploadUrl` at once and emits `uploaded`).
+ *
+ * ```vue
+ * <CnSettingsField
+ *   :field="{ key: 'apiKey', label: 'API key', type: 'secret', secretSet: true }"
+ *   v-model="form.apiKey" />
+ * ```
+ */
+export default {
+	name: 'CnSettingsField',
+
+	components: { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextArea, NcTextField },
+
+	props: {
+		/**
+		 * The field: `{ key, label, type?, options?, optionsUrl?, optionsPath?,
+		 * optionLabel?, optionValue?, placeholder?, rows?, min?, max?, required?,
+		 * readOnly?, secretSet? }`. `label` arrives translated.
+		 *
+		 * @type {object}
+		 */
+		field: {
+			type: Object,
+			required: true,
+		},
+
+		/**
+		 * The value: text, a number, a boolean or a select value. Any type,
+		 * because a Boolean in a type list would read an empty string as true.
+		 */
+		modelValue: {
+			type: null,
+			default: null,
+		},
+
+		/** A validation message, drawn under the control and tied to it. */
+		error: {
+			type: String,
+			default: '',
+		},
+
+		/** A hint under the control (not drawn while there is an error). */
+		hint: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['update:modelValue', 'uploaded'],
+
+	data() {
+		fieldUid += 1
+		return {
+			uid: fieldUid,
+			fetchedOptions: null,
+			optionsLoading: false,
+			uploading: false,
+			uploadError: '',
+		}
+	},
+
+	computed: {
+		/** @return {string} The control kind. */
+		kind() {
+			const type = String(this.field.type || 'text')
+			return KIND_ALIASES[type] || type
+		},
+
+		/** @return {string} The label. */
+		label() {
+			return String(this.field.label || this.field.key || '')
+		},
+
+		/** @return {string} The control's id. */
+		inputId() {
+			return `cn-settings-field-${this.uid}-${String(this.field.key).replace(/[^A-Za-z0-9_-]/g, '-')}`
+		},
+
+		/** @return {string} The message shown under the control: an upload failure, else `error`. */
+		shownError() {
+			return this.uploadError || this.error
+		},
+
+		/** @return {string|null} The id of the error or hint the control is described by. */
+		describedBy() {
+			if (this.shownError) {
+				return `${this.inputId}-error`
+			}
+			return this.hint ? `${this.inputId}-hint` : null
+		},
+
+		/** @return {string} The value as text for a text control. */
+		stringValue() {
+			return this.modelValue === null || this.modelValue === undefined ? '' : String(this.modelValue)
+		},
+
+		/** @return {string} The placeholder of a secret that is stored. */
+		secretSetPlaceholder() {
+			return t('nextcloud-vue', 'Stored. Type a new value to replace it.')
+		},
+
+		/**
+		 * The select options as `{ label, value }`: the static `options` (strings,
+		 * numbers or objects), or those read from `optionsUrl`.
+		 *
+		 * @return {Array<{label: string, value: (string|number|boolean)}>}
+		 */
+		normalizedOptions() {
+			const raw = Array.isArray(this.field.options) ? this.field.options : (this.fetchedOptions || [])
+			return raw.map((option) => (option && typeof option === 'object'
+				? { ...option, label: String(option.label ?? option.value ?? ''), value: option.value }
+				: { label: String(option), value: option }))
+		},
+
+		/** @return {object|null} The option the value selects, for NcSelect. */
+		selectedOption() {
+			if (this.modelValue === null || this.modelValue === undefined || this.modelValue === '') {
+				return null
+			}
+			return this.normalizedOptions.find((option) => option.value === this.modelValue)
+				|| { label: String(this.modelValue), value: this.modelValue }
+		},
+	},
+
+	watch: {
+		'field.optionsUrl': {
+			handler() {
+				this.loadOptions()
+			},
+
+			immediate: true,
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Upload a chosen image to `uploadUrl` as multipart form data (the
+		 * file under `uploadField`, default `image`, plus `uploadParams`), then
+		 * take the new image url from the answer at `uploadValuePath` (or a
+		 * cache-busted `previewUrl`).
+		 *
+		 * @param {File|undefined} file The chosen file.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/settings-fields-section/specs/settings-fields-section/spec.md#requirement-an-image-field-uploads-at-once
+		 */
+		async upload(file) {
+			if (!file || !this.field.uploadUrl) {
+				return
+			}
+			const form = new FormData()
+			for (const [name, value] of Object.entries(this.field.uploadParams || {})) {
+				form.append(name, value)
+			}
+			form.append(this.field.uploadField || 'image', file)
+			this.uploading = true
+			this.uploadError = ''
+			try {
+				const response = await axios.post(prefixUrl(this.field.uploadUrl), form)
+				const fromAnswer = this.field.uploadValuePath ? readPath(response?.data, this.field.uploadValuePath) : ''
+				const next = fromAnswer || (this.field.previewUrl ? `${prefixUrl(this.field.previewUrl)}${this.field.previewUrl.includes('?') ? '&' : '?'}v=${Date.now()}` : '')
+				/**
+				 * @event uploaded An image was uploaded. Payload: its new url.
+				 */
+				this.$emit('uploaded', next)
+			} catch (error) {
+				this.uploadError = t('nextcloud-vue', 'The image could not be uploaded: {reason}', { reason: serverErrorMessage(error) })
+			} finally {
+				this.uploading = false
+				if (this.$refs.file) {
+					this.$refs.file.value = ''
+				}
+			}
+		},
+
+		/**
+		 * Report a new value.
+		 *
+		 * @param {unknown} value The value.
+		 * @return {void}
+		 */
+		emitValue(value) {
+			/**
+			 * @event update:modelValue The value changed. Payload: the new value.
+			 */
+			this.$emit('update:modelValue', value)
+		},
+
+		/**
+		 * The storable value of what NcSelect emits.
+		 *
+		 * @param {object|string|number|null} emitted An option, or null on clear.
+		 * @return {string|number|boolean|null}
+		 */
+		optionValue(emitted) {
+			if (emitted === null || emitted === undefined) {
+				return null
+			}
+			return typeof emitted === 'object' && 'value' in emitted ? emitted.value : emitted
+		},
+
+		/**
+		 * Read a sourced select's options: a list (or the list at
+		 * `optionsPath`, or under `results`) mapped through `optionLabel` and
+		 * `optionValue` (dotted paths; default `label`/`title`/`name` and `value`/`id`).
+		 *
+		 * @return {Promise<void>}
+		 */
+		async loadOptions() {
+			const url = this.kind === 'select' && !Array.isArray(this.field.options) ? this.field.optionsUrl : ''
+			if (!url) {
+				return
+			}
+			this.optionsLoading = true
+			try {
+				const response = await fetch(prefixUrl(url), { headers: buildHeaders() })
+				if (!response.ok) {
+					this.fetchedOptions = []
+					return
+				}
+				const data = await response.json()
+				const list = this.field.optionsPath ? readPath(data, this.field.optionsPath) : (Array.isArray(data) ? data : data?.results)
+				this.fetchedOptions = (Array.isArray(list) ? list : []).map((item) => {
+					if (!item || typeof item !== 'object') {
+						return { label: String(item), value: item }
+					}
+					const value = this.field.optionValue ? readPath(item, this.field.optionValue) : (item.value ?? item.id)
+					const label = this.field.optionLabel ? readPath(item, this.field.optionLabel) : (item.label ?? item.title ?? item.name ?? value)
+					return { label: String(label ?? ''), value }
+				})
+			} catch {
+				this.fetchedOptions = []
+			} finally {
+				this.optionsLoading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-settings-field {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.cn-settings-field__hint,
+.cn-settings-field__error {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.4;
+}
+
+.cn-settings-field__image {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-settings-field__image-label {
+	font-weight: 600;
+}
+
+.cn-settings-field__image-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+
+.cn-settings-field__image-tile {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 64px;
+	height: 64px;
+	overflow: hidden;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background: var(--color-primary-element-light);
+}
+
+.cn-settings-field__image-tile img {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+}
+
+.cn-settings-field__image-initials {
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+.cn-settings-field__hint {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-settings-field__error {
+	color: var(--color-error-text, var(--color-error));
+}
+</style>

package/src/components/CnSettingsField/index.js

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