@conduction/nextcloud-vue 2.111.0 → 2.113.0

package/src/components/CnPartyPicker/CnPartyPicker.vue

@@ -3,24 +3,39 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<CnSearchSelect
-		class="cn-party-picker"
-		:modelValue="selectedOption"
-		:options="options"
-		:inputLabel="inputLabel"
-		:labelOutside="labelOutside"
-		:placeholder="placeholder ? cnTranslate(placeholder) : ''"
-		:loading="searching"
-		:filterable="false"
-		:clearable="clearable"
-		:disabled="disabled"
-		data-testid="cn-party-picker"
-		@search="onSearch"
-		@update:modelValue="onPick" />
+	<div class="cn-party-picker">
+		<CnSearchSelect
+			:modelValue="selectedOption"
+			:options="options"
+			:inputLabel="inputLabel"
+			:labelOutside="labelOutside"
+			:placeholder="placeholder ? cnTranslate(placeholder) : ''"
+			:loading="searching"
+			:filterable="false"
+			:clearable="clearable"
+			:disabled="disabled"
+			data-testid="cn-party-picker"
+			@search="onSearch"
+			@update:modelValue="onPick" />
+		<p v-if="refusal"
+			class="cn-party-picker__refusal"
+			role="alert"
+			data-testid="cn-party-picker-refusal">
+			{{ t('nextcloud-vue', 'This search could not be read.') }} {{ refusal }}
+		</p>
+		<p v-for="name in unavailable"
+			:key="name"
+			class="cn-party-picker__unavailable"
+			role="status"
+			data-testid="cn-party-picker-unavailable">
+			{{ t('nextcloud-vue', '{source} could not be searched, so this list may be incomplete.', { source: name }) }}
+		</p>
+	</div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { CnSearchSelect } from '../CnSearchSelect/index.js'
@@ -142,6 +157,8 @@ export default {
 			known: null,
 			timer: null,
 			searchSeq: 0,
+			refusal: '',
+			unavailable: [],
 		}
 	},
 
@@ -185,6 +202,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * A source's row as a picker option.
 		 *
@@ -244,7 +263,9 @@ export default {
 		},
 
 		/**
-		 * Search every source at once; a source that fails adds nothing.
+		 * Search every source at once. A term a source refused (400) is said
+		 * under the field in its words; a source that could not be searched at
+		 * all is named, so an empty list never hides a missing source.
 		 *
 		 * @spec openspec/changes/party-picker/specs/party-picker/spec.md#requirement-one-search-field-over-several-kinds-of-party
 		 * @param {string} term The search term.
@@ -253,6 +274,8 @@ export default {
 		async search(term) {
 			const seq = ++this.searchSeq
 			this.searching = true
+			let refusal = ''
+			const unavailable = []
 			const sets = await Promise.all((this.sources || []).map(async (source) => {
 				try {
 					if (source.type === 'contacts') {
@@ -264,7 +287,16 @@ export default {
 					}
 					const { data } = await axios.get(generateUrl(`/apps/openregister/api/objects/${source.register}/${source.schema}`), { params: { _search: term, _limit: source.limit || 8 } })
 					return (data && Array.isArray(data.results) ? data.results : []).map((row) => this.optionOf(source, row))
-				} catch {
+				} catch (failure) {
+					// OpenRegister refuses a term it cannot parse with a 400 rather
+					// than answering nothing, so that refusal is said, not hidden.
+					const response = failure && failure.response
+					if (response && response.status === 400) {
+						const body = response.data
+						refusal = String((body && (body.message || body.error)) || (typeof body === 'string' ? body : '') || refusal)
+					} else {
+						unavailable.push(source.label ? this.cnTranslate(source.label) : String(source.id || ''))
+					}
 					return []
 				}
 			}))
@@ -272,6 +304,8 @@ export default {
 				return
 			}
 			this.options = sets.flat().filter(Boolean)
+			this.refusal = refusal
+			this.unavailable = unavailable.filter(Boolean)
 			this.searching = false
 		},
 
@@ -315,3 +349,15 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.cn-party-picker__refusal {
+	margin: 4px 0 0;
+	color: var(--color-error-text, var(--color-error));
+}
+
+.cn-party-picker__unavailable {
+	margin: 4px 0 0;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -48,6 +48,8 @@
 						<NcButton
 							v-else
 							:variant="button.variant"
+							:href="button.link ? button.link.href : undefined"
+							:target="button.link ? button.link.target : undefined"
 							:data-testid="`cn-reports-header-button-${button.key}`"
 							@click="onHeaderButton(button)">
 							<template v-if="button.icon" #icon>
@@ -163,6 +165,7 @@ import { defineAsyncComponent } from 'vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import { useLook } from '../../composables/useLook.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
@@ -325,7 +328,11 @@ export default {
 		 * function, `navigate` (with `route`, and `params`), `emit`, `none`,
 		 * or a registry name; `type: "navigate"` with a `target` URL opens
 		 * that URL in a new tab. Every click also emits `header-action`
-		 * `{ action, id }`, except for `handler: "none"`.
+		 * `{ action, id }`, except for `handler: "none"`. An entry with `href`
+		 * makes its button a real link that runs and emits nothing: an
+		 * absolute `http(s)`, `mailto:`, `tel:` or `//host/...` URL as written,
+		 * an instance path (leading `/`) through `generateUrl()`, in a new tab with
+		 * `target: '_blank'`.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
 		 * @type {Array<object>|null}
@@ -451,24 +458,31 @@ export default {
 
 		/**
 		 * The declared header buttons that have a label and an action,
-		 * translated, each with a stable key and a variant.
+		 * translated, each with a stable key and a variant. A button naming a
+		 * header action with `href` carries that `link`.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
-		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, link: ({href: string, target: string}|null)}>} The buttons.
 		 */
 		resolvedHeaderButtons() {
 			const declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []
+			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
 			return declared
 				.filter((button) => button && typeof button === 'object'
 					&& typeof button.action === 'string' && button.action !== ''
 					&& typeof button.label === 'string' && button.label !== '')
-				.map((button) => ({
-					key: String(button.id || button.action),
-					label: this.tr(button.label),
-					action: button.action,
-					variant: button.variant === 'primary' ? 'primary' : 'secondary',
-					icon: typeof button.icon === 'string' ? button.icon : '',
-				}))
+				.map((button) => {
+					const entry = headerActionAsLink(actions.find((action) => action && action.id === button.action))
+					return {
+						key: String(button.id || button.action),
+						label: this.tr(button.label),
+						action: button.action,
+						variant: button.variant === 'primary' ? 'primary' : 'secondary',
+						icon: typeof button.icon === 'string' ? button.icon : '',
+						link: entry && typeof entry.href === 'string' && entry.href !== '' ? { href: entry.href, target: entry.target } : null,
+					}
+				})
 		},
 
 		/**
@@ -685,13 +699,18 @@ export default {
 
 		/**
 		 * A header button was clicked: run the `headerActions` entry it names
-		 * and emit `header-action`, as an index page's header button does.
+		 * and emit `header-action`, as an index page's header button does. A
+		 * button that is a link is left to the browser.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
-		 * @param {{action: string}} button The resolved button.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @param {{action: string, link?: object}} button The resolved button.
 		 * @return {void}
 		 */
 		onHeaderButton(button) {
+			if (button.link) {
+				return
+			}
 			const id = button.action
 			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
 			const entry = actions.find((action) => action && action.id === id) || null

package/src/components/CnSearchSelect/CnSearchSelect.vue

@@ -214,6 +214,13 @@ export default {
 	position: relative;
 }
 
+/* The field takes the row: NcSelect is an inline block of at least 260px,
+   which left the magnifier, placed at the row's end, outside the field
+   (DqOverdragen "Nieuw team"). */
+.cn-search-select :deep(.v-select) {
+	width: 100%;
+}
+
 /* The magnifier sits where the chevron was: in the field, at its end. */
 .cn-search-select__magnifier {
 	position: absolute;
@@ -222,6 +229,7 @@ export default {
 	height: var(--default-clickable-area, 34px);
 	display: flex;
 	align-items: center;
+	z-index: 1;
 	color: var(--color-text-maxcontrast);
 	pointer-events: none;
 }

package/src/composables/useRefLabels.js

@@ -65,6 +65,22 @@ export function pickRefLabel(obj, labelField) {
 	return null
 }
 
+/**
+ * Read one field off a referenced object, with no fallback: a colour or an
+ * icon name must not fall back to the title.
+ *
+ * @param {object|null} obj   The referenced object.
+ * @param {string}      field The (possibly nested) property.
+ * @return {string|null} The value as text, or null when it is empty.
+ */
+export function pickRefField(obj, field) {
+	if (!obj || typeof obj !== 'object' || !field) {
+		return null
+	}
+	const text = asText(readPath(obj, field))
+	return text !== '' ? text : null
+}
+
 /**
  * Create a resolver bound to an object store. Labels are cached per register,
  * schema and label field for the lifetime of the resolver.
@@ -91,9 +107,13 @@ export function createRefLabelResolver(getStore) {
 		 * @param {string}   schema     Schema slug of the referenced objects.
 		 * @param {string[]} ids        Ids to resolve (duplicates are dropped).
 		 * @param {string}   labelField Property holding the label (dotted paths allowed).
+		 * @param {{strict?: boolean}} [options] `strict`: read exactly that field, with no
+		 *   fallback to the title or name (a colour or an icon name).
 		 * @return {Promise<Object<string, string|null>>} Label by id.
 		 */
-		async resolve(register, schema, ids, labelField) {
+		async resolve(register, schema, ids, labelField, options = {}) {
+			const strict = options.strict === true
+			const pick = strict ? pickRefField : pickRefLabel
 			const distinct = [...new Set((ids || []).filter((id) => id !== null && id !== undefined && id !== '').map(String))]
 			const out = {}
 			if (distinct.length === 0) {
@@ -115,14 +135,14 @@ export function createRefLabelResolver(getStore) {
 				})
 				return out
 			}
-			const hit = bucket(`${type}::${labelField || ''}`)
+			const hit = bucket(`${type}::${labelField || ''}::${strict ? 'field' : 'label'}`)
 			const missing = []
 			for (const id of distinct) {
 				const stored = store.objects && store.objects[type] && store.objects[type][id]
 				if (hit.has(id)) {
 					continue
 				}
-				const label = stored ? pickRefLabel(stored, labelField) : null
+				const label = stored ? pick(stored, labelField) : null
 				if (label !== null) {
 					hit.set(id, label)
 				} else {
@@ -136,7 +156,7 @@ export function createRefLabelResolver(getStore) {
 					rows = await store.fetchCollectionForOptions(type, {
 						_ids: missing.join(','),
 						_limit: missing.length,
-						_fields: [...new Set([top, 'title', 'name'])].join(','),
+						_fields: (strict ? [top] : [...new Set([top, 'title', 'name'])]).join(','),
 					})
 				} catch {
 					rows = []
@@ -148,7 +168,7 @@ export function createRefLabelResolver(getStore) {
 						byId.set(String(id), row)
 					}
 				})
-				missing.forEach((id) => hit.set(id, pickRefLabel(byId.get(id), labelField)))
+				missing.forEach((id) => hit.set(id, pick(byId.get(id), labelField)))
 			}
 			distinct.forEach((id) => {
 				out[id] = hit.has(id) ? hit.get(id) : null

package/src/css/badge.css

@@ -3,12 +3,14 @@
    ======================================== */
 
 /* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -43,26 +45,26 @@
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 

package/src/css/board.css

@@ -55,7 +55,6 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;

package/src/css/dialog.css

@@ -20,7 +20,7 @@
 	--nldesign-component-dialog-border-radius: var(--cn-board-card-radius, 12px);
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
-	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
+	--cn-dialog-eyebrow-color: var(--color-primary-element-light-text, var(--color-main-text));
 	--cn-dialog-eyebrow-transform: none;
 	--cn-dialog-eyebrow-tracking: 0;
 }
@@ -86,6 +86,7 @@
 }
 
 .cn-dialog-header__eyebrow {
+	--nldesign-color-on-surface: var(--cn-dialog-eyebrow-color, var(--color-main-text));
 	margin-bottom: 4px;
 	font-size: 13px;
 	font-weight: 700;
@@ -101,13 +102,24 @@
 	color: var(--color-main-text);
 }
 
+/* The subtitle is a <p>, which the nldesign theme sizes and inks with
+   `!important` through its paragraph tokens: the board's 14px muted line
+   goes to those tokens too (DqOverdragen, DqDocumentGenereren). */
 .cn-dialog-header__subtitle {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
 
-.cn-dialog-header__close {
+/* The close button is a 36px circle. NcButton sizes an icon-only button by
+   --button-size with `!important`, so the size goes through that; the radius
+   also goes to the nldesign theme's button radius token. */
+.cn-dialog-header .cn-dialog-header__close.button-vue {
+	--button-size: 36px;
+	--nldesign-component-button-border-radius: 50%;
 	flex: 0 0 auto;
 	width: 36px;
 	min-width: 36px;
@@ -147,6 +159,28 @@
 	border-radius: var(--cn-board-control-radius, 8px);
 }
 
+/* The footer buttons set 14px text, 16px in at both sides, and 18px when
+   they carry an icon (DqOverdragen "Annuleren" and "Overdragen"). The padding
+   goes through NcButton's --button-padding. The mask class and the doubled
+   class outrank NcButton's text-only rule, `.button-vue[data-v-…]:has(…:empty)`
+   (four classes, in a stylesheet a spawned dialog loads later), and the board
+   look's general icon-and-label rule.
+   @spec openspec/changes/board-dialog-controls/specs/board-dialog-controls/spec.md#requirement-a-board-dialog-draws-its-controls-as-the-boards-do */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue {
+	--button-padding: 16px;
+	font-size: 14px;
+}
+
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)) {
+	--button-padding: 18px;
+}
+
+/* NcButton pads a text-only label 4px a side inside the button's own padding;
+   the board's 16px is the whole inset. */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue .button-vue__text.button-vue__text {
+	padding-inline: 0;
+}
+
 /* Cancel is an outlined secondary, never a text link. */
 .cn-dialog-board .dialog__actions .button-vue--vue-secondary,
 .cn-dialog-board .dialog__actions .button-vue--secondary {
@@ -223,15 +257,31 @@
 	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
 }
 
+/* The board draws the control's edge as a 1px border (DqOverdragen "Waarom de
+   zaak verhuist", DqBesluit); NcInputField and NcTextArea draw it as a shadow.
+   The colour is the one that meets WCAG's 3:1 for a control's edge, as the
+   footer's secondary button. Focus keeps NcInputField's own ring, which
+   carries `!important`. */
 .cn-dialog-board .dialog__content .input-field__input,
 .cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
 .cn-dialog-board .dialog__content .textarea__input,
 .cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border: 1px solid var(--color-border-maxcontrast);
 	border-radius: 8px;
-	box-shadow: 0 0 0 1px var(--color-border-dark);
+	box-shadow: none;
 	font-size: var(--cn-field-text-size, 15px);
 }
 
+/* A plain input an app puts in a board dialog (a date, a number) is the same
+   40px control; Nextcloud's core stylesheet makes it 34px. */
+.cn-dialog-board .dialog__content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.input-field__input) {
+	box-sizing: border-box;
+	height: var(--cn-field-height, 40px);
+	min-height: var(--cn-field-height, 40px);
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+}
+
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
 .cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
 	opacity: 1 !important;

package/src/css/index-page.css

@@ -102,11 +102,17 @@
 	overflow-y: auto;
 }
 
+/* The list scrolls inside the side column and the card for the rows without
+   a place stays under it, as the board draws it (DqZakenKaart). Scrolling the
+   column as a whole pushed that card below a page's worth of rows. */
 .cn-index-page__map-list {
 	display: flex;
+	flex: 0 1 auto;
 	flex-direction: column;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
+	overflow-y: auto;
 	border: 1px solid var(--color-border);
 	border-radius: 10px;
 	list-style: none;
@@ -114,6 +120,7 @@
 
 .cn-index-page__map-item {
 	display: flex;
+	flex: none;
 	gap: 12px;
 	padding: 12px 14px;
 }
@@ -152,11 +159,22 @@
 	min-width: 0;
 }
 
-.cn-index-page__map-title {
+/* The title is a button for the keyboard but reads as the row's title text.
+   Nextcloud styles every `button:not(.button-vue, ...)` (specificity 0,2,1)
+   as a 34px tinted pill with a 3px margin, which outranked a single class and
+   turned each title into a blue block (DqZakenKaart rows 111px against 89).
+   Three classes outrank it, and the box properties it sets are reset.
+   @spec openspec/changes/map-list-title-button/specs/map-list-title-button/spec.md#requirement-a-map-list-title-reads-as-text-not-as-a-button */
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title {
+	width: auto;
+	height: auto;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
 	border: 0;
+	border-radius: 0;
 	background: none;
+	box-shadow: none;
 	color: var(--color-main-text);
 	font: inherit;
 	font-size: 15px;
@@ -166,6 +184,12 @@
 	cursor: pointer;
 }
 
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:hover,
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:focus {
+	background: none;
+	color: var(--color-main-text);
+}
+
 .cn-index-page__map-sub,
 .cn-index-page__map-due {
 	color: var(--color-text-maxcontrast);
@@ -181,6 +205,7 @@
 
 .cn-index-page__map-missing {
 	display: flex;
+	flex: none;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 8px;