@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/composables/__tests__/useFormDraft.spec.js

@@ -17,11 +17,21 @@
  * one, and it would be this library's fault in somebody else's app.
  */
 
+jest.mock('@nextcloud/auth', () => ({
+	...jest.requireActual('@nextcloud/auth'),
+	getCurrentUser: jest.fn(() => null),
+}))
+
+import { getCurrentUser } from '@nextcloud/auth'
 import {
+	clearAnonymousDrafts,
 	clearDraft,
 	DRAFT_MAX_AGE_MS,
 	draftKey,
+	hasDraftChanges,
 	readDraft,
+	resolveDraftUserId,
+	sameDraftValue,
 	writeDraft,
 } from '../useFormDraft.js'
 
@@ -170,3 +180,62 @@ describe('when storage is not available', () => {
 		expect(() => clearDraft('cn-form-draft:a:s:new:u')).not.toThrow()
 	})
 })
+
+// @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+describe('resolveDraftUserId', () => {
+	afterEach(() => getCurrentUser.mockReturnValue(null))
+
+	it('prefers the id the host passed', () => {
+		getCurrentUser.mockReturnValue({ uid: 'cluade' })
+		expect(resolveDraftUserId('anne')).toBe('anne')
+	})
+
+	it('falls back to the signed-in user', () => {
+		getCurrentUser.mockReturnValue({ uid: 'cluade' })
+		expect(resolveDraftUserId('')).toBe('cluade')
+	})
+
+	it('is empty when nobody is signed in, and when the lookup throws', () => {
+		expect(resolveDraftUserId()).toBe('')
+		getCurrentUser.mockImplementationOnce(() => {
+			throw new Error('no head')
+		})
+		expect(resolveDraftUserId()).toBe('')
+	})
+})
+
+describe('clearAnonymousDrafts', () => {
+	beforeEach(() => window.localStorage.clear())
+
+	it('removes only drafts stored under anonymous', () => {
+		const anon = draftKey({ appId: 'pipelinq', schema: 'crmTask', objectId: 't1' })
+		const anne = draftKey({ appId: 'pipelinq', schema: 'crmTask', objectId: 't1', userId: 'anne' })
+		writeDraft(anon, { title: 'x' })
+		writeDraft(anne, { title: 'y' })
+		window.localStorage.setItem('unrelated:anonymous', 'keep')
+
+		expect(clearAnonymousDrafts()).toBe(1)
+		expect(window.localStorage.getItem(anon)).toBeNull()
+		expect(window.localStorage.getItem(anne)).not.toBeNull()
+		expect(window.localStorage.getItem('unrelated:anonymous')).toBe('keep')
+	})
+})
+
+// @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-is-written-only-after-a-person-changes-a-field
+describe('hasDraftChanges', () => {
+	it('treats empty values as equal', () => {
+		expect(sameDraftValue(null, '')).toBe(true)
+		expect(sameDraftValue(undefined, [])).toBe(true)
+		expect(sameDraftValue('a', 'b')).toBe(false)
+		expect(sameDraftValue({ a: 1 }, { a: 1 })).toBe(true)
+	})
+
+	it('counts only fields a person edited', () => {
+		const baseline = { title: 'Call back', notes: '' }
+		// The form changed `notes` by itself; nobody edited it.
+		expect(hasDraftChanges({ title: 'Call back', notes: 'filled in' }, baseline, [])).toBe(false)
+		// Edited, but back to what it was.
+		expect(hasDraftChanges({ title: 'Call back' }, baseline, ['title'])).toBe(false)
+		expect(hasDraftChanges({ title: 'Call back tomorrow' }, baseline, ['title'])).toBe(true)
+	})
+})

package/src/composables/useAppManifest.js

@@ -205,6 +205,7 @@ function loadInMemory(input) {
  * @param {object} options Configuration options (endpoint / fetcher /
  *   getAppConfigValue overrides).
  * @return {{ manifest: import('vue').Ref<object>, isLoading: import('vue').Ref<boolean>, validationErrors: import('vue').Ref<string[]|null>, unresolvedSentinels: import('vue').Ref<string[]> }}
+ * @spec openspec/changes/manifest-validator-self-contained/specs/manifest-validator-self-contained/spec.md#requirement-a-backend-manifest-delta-reaches-the-navigation
  */
 function loadFromBackend(appId, bundledManifest, options) {
 	// Shallow by default (manifest-shallow-reactivity-by-default) — see
@@ -284,9 +285,13 @@ function loadFromBackend(appId, bundledManifest, options) {
 			// The shallowRef reassignment is what re-renders consumers; the new
 			// object stays shallow (not deep-observed) unless CnAppRoot upgrades it.
 			manifest.value = resolved
-		} catch {
-			// Defensive: any unexpected error leaves the bundled manifest in
-			// place. Apps without a backend endpoint keep working.
+		} catch (error) {
+			// Any unexpected error leaves the bundled manifest in place, so
+			// apps keep working. Say so: a silent catch here once hid a
+			// validator that threw on every manifest, and the backend delta
+			// never reached the navigation.
+			// eslint-disable-next-line no-console
+			console.warn('[useAppManifest] Could not resolve the manifest; keeping the bundled manifest.', error)
 		} finally {
 			isLoading.value = false
 		}

package/src/composables/useFormDraft.js

@@ -23,6 +23,7 @@
  * value, and the audit trail is read by people answering "who changed this".
  */
 
+import { getCurrentUser } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 
 /** How long a draft stays interesting, in milliseconds (7 days). */
@@ -34,6 +35,9 @@ export const DRAFT_DEBOUNCE_MS = 500
 /** The prefix every draft key carries, so a sweep can find them. */
 export const DRAFT_KEY_PREFIX = 'cn-form-draft'
 
+/** The user part of a draft key when nobody is signed in. */
+export const DRAFT_ANONYMOUS_USER = 'anonymous'
+
 /**
  * The storage key one form's draft lives under.
  *
@@ -54,10 +58,124 @@ export function draftKey({ appId = '', schema = '', objectId = '', userId = '' }
 		String(appId || 'app'),
 		String(schema || 'schema'),
 		String(objectId || 'new'),
-		String(userId || 'anonymous'),
+		String(userId || DRAFT_ANONYMOUS_USER),
 	].join(':')
 }
 
+/**
+ * Who a draft belongs to: the id the host passed, else the signed-in
+ * Nextcloud user, else '' (which {@link draftKey} stores as `anonymous`).
+ *
+ * 🔴 A HOST THAT PASSES NOTHING STILL GETS PER-USER DRAFTS. Leaving the user
+ * to every host meant no host passed it, and every draft on a shared device
+ * was keyed `anonymous`: the next person at the counter was offered what the
+ * last one typed.
+ *
+ * @param {string} [explicit] The id the host passed (`draftUserId`).
+ * @return {string} The user id, or '' when nobody is signed in.
+ * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+ */
+export function resolveDraftUserId(explicit = '') {
+	if (explicit) {
+		return String(explicit)
+	}
+	try {
+		const uid = getCurrentUser()?.uid
+		return uid ? String(uid) : ''
+	} catch {
+		// No Nextcloud page around us (a test, an embed): nobody is signed in.
+		return ''
+	}
+}
+
+/**
+ * Remove every draft stored under the anonymous user.
+ *
+ * Called once a signed-in user is known. Such a draft was written by a page
+ * that did not know who was typing, so it may be somebody else's, and it is
+ * deleted rather than moved: moving it would hand it to whoever opened the
+ * form next.
+ *
+ * @return {number} How many drafts were removed.
+ * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+ */
+export function clearAnonymousDrafts() {
+	let removed = 0
+	try {
+		const storage = window.localStorage
+		const suffix = ':' + DRAFT_ANONYMOUS_USER
+		const doomed = []
+		for (let i = 0; i < storage.length; i++) {
+			const key = storage.key(i)
+			if (key && key.startsWith(DRAFT_KEY_PREFIX + ':') && key.endsWith(suffix)) {
+				doomed.push(key)
+			}
+		}
+		for (const key of doomed) {
+			storage.removeItem(key)
+			removed++
+		}
+	} catch {
+		// Blocked storage holds no drafts to leak.
+	}
+	return removed
+}
+
+/**
+ * Whether a value counts as empty for a draft: null, undefined, '' and [].
+ *
+ * @param {unknown} value The value.
+ * @return {boolean} True when empty.
+ */
+function isEmptyDraftValue(value) {
+	return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)
+}
+
+/**
+ * Whether two field values are the same for the purpose of a draft.
+ *
+ * Empty values are equal to each other: an input reports a missing value back
+ * as '', and that is the control normalising, not a person typing.
+ *
+ * @param {unknown} a One value.
+ * @param {unknown} b The other.
+ * @return {boolean} True when they are the same.
+ */
+export function sameDraftValue(a, b) {
+	if (isEmptyDraftValue(a) && isEmptyDraftValue(b)) {
+		return true
+	}
+	if (a === b) {
+		return true
+	}
+	try {
+		return JSON.stringify(a) === JSON.stringify(b)
+	} catch {
+		return false
+	}
+}
+
+/**
+ * Whether a person changed the form: one of the fields they edited holds a
+ * value different from the one the form opened with.
+ *
+ * 🔴 ONLY EDITED FIELDS COUNT. A form fills in values by itself after it
+ * opens (defaults, normalised dates, the active organisation, options that
+ * arrive later). Counting those wrote a draft and said "Saved just now" on a
+ * dialog nobody had touched.
+ *
+ * @param {object} values The current values.
+ * @param {object} baseline The values the form opened with.
+ * @param {string[]} editedKeys The fields a person edited.
+ * @return {boolean} True when there is something worth keeping.
+ * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-is-written-only-after-a-person-changes-a-field
+ */
+export function hasDraftChanges(values, baseline, editedKeys) {
+	const now = values || {}
+	const base = baseline || {}
+	return (editedKeys || []).some((key) => !sameDraftValue(now[key], base[key]))
+}
+
 /**
  * Read one draft back, or null when there is nothing usable.
  *
@@ -218,13 +336,6 @@ export function formDraftMixin() {
 				draftSavedAt: 0,
 				/** Non-reactive handle for the debounce. */
 				draftTimeout: null,
-				/**
-				 * Whether the form's own initial population has happened.
-				 *
-				 * The first change to the values is the component building
-				 * them, not a person typing. See the watcher that reads this.
-				 */
-				draftSeeded: false,
 			}
 		},
 
@@ -265,6 +376,26 @@ export function formDraftMixin() {
 				}, DRAFT_DEBOUNCE_MS)
 			},
 
+			/**
+			 * The form is back to what it opened with: cancel a pending write,
+			 * remove a draft written earlier and stop announcing anything.
+			 *
+			 * @param {string} key The storage key.
+			 * @return {void}
+			 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-is-written-only-after-a-person-changes-a-field
+			 */
+			settleUnchangedDraft(key) {
+				if (this.draftTimeout) {
+					clearTimeout(this.draftTimeout)
+					this.draftTimeout = null
+				}
+				if (this.draftState !== 'idle') {
+					clearDraft(key)
+					this.draftState = 'idle'
+					this.draftSavedAt = 0
+				}
+			},
+
 			/**
 			 * Drop the draft and stop announcing anything about it.
 			 *

package/src/css/form-field.css

@@ -82,6 +82,20 @@
 	min-height: var(--cn-field-height);
 }
 
+/* NcTextField draws its input inside `.input-field__main-wrapper`, which has a
+   FIXED height (`--default-clickable-area`, 34px on Nextcloud 34) and a 2px
+   padding ring for the focus outline. The min-height above makes the input
+   40px, so without this the input overflowed its wrapper by 6px and the help
+   line under it, which starts at the wrapper's bottom edge, sat behind the
+   input's lower border. NcSelect grows with its content, which is why only
+   plain inputs showed it. The wrapper now takes the field height plus its
+   padding ring, so the input fits and the help line starts below it.
+   @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-help-text-starts-below-every-input */
+.cn-look-board .cn-form-dialog__field .input-field__main-wrapper,
+.cn-look-board .cn-form-page__field .input-field__main-wrapper {
+	height: calc(var(--cn-field-height) + 2 * var(--border-width-input-focused, 2px));
+}
+
 .cn-look-board .cn-form-dialog__field textarea,
 .cn-look-board .cn-form-page__field textarea {
 	padding: 10px 12px;

package/src/css/index-page.css

@@ -240,3 +240,74 @@
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
+
+/* An index page with cards beside its list (`sidePanel`,
+   screens-index-stat-row): the header rows span the page, the toolbar and the
+   list take the first column and the side panel the second (300px, 20px
+   apart), spanning both. Every other child (dialogs, the inline sidebar) sits
+   in a zero-height area after them. The list row is the flexible one, so a
+   side panel taller than the toolbar never opens a gap under the toolbar.
+   Below 1024px the panel moves above the toolbar. */
+.cn-index-page--with-side-panel {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) var(--cn-index-side-panel-width, 300px);
+	grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+	grid-template-areas:
+		"head head"
+		"below below"
+		"stats stats"
+		"bar side"
+		"body side"
+		"extra extra";
+	column-gap: 20px;
+	align-content: start;
+}
+
+.cn-index-page--with-side-panel > * {
+	grid-area: extra;
+	min-width: 0;
+}
+
+.cn-index-page--with-side-panel > :first-child {
+	grid-area: head;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__below-header {
+	grid-area: below;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__stat-row {
+	grid-area: stats;
+}
+
+.cn-index-page--with-side-panel > .cn-actions-bar {
+	grid-area: bar;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__body {
+	grid-area: body;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+	grid-area: side;
+	align-self: start;
+}
+
+@media (max-width: 1024px) {
+	.cn-index-page--with-side-panel {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas:
+			"head"
+			"below"
+			"stats"
+			"side"
+			"bar"
+			"body"
+			"extra";
+		grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
+	}
+
+	.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+		margin-bottom: 20px;
+	}
+}

package/src/css/kpi-card.css

@@ -450,6 +450,38 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-weight: 400;
 }
 
+/* A caption on a line of its own wraps, up to two lines (DqDashboard: "haalden
+   hun termijn, naar doorlooptijd" runs over two lines in a narrow tile). The
+   one-line rule of `.cn-kpi-card__label` is for a caption BESIDE the number,
+   where a second line would push the tile taller; this line has the width of
+   the tile to itself. The clamp is safe here because the element is a plain
+   span, not a flex row (compare the title note above).
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-a-kpi-tiles-caption-and-board-label-wrap-to-two-lines */
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Board look: the label wraps too, up to two lines, beside its icon badge
+   ("Afgehandeld deze maand"). The clamp sits on the label's own span
+   (`cn-kpi-card__title-text`), not on the title row, which stays the flex row
+   that carries the badge or the range select. */
+.cn-kpi-card--board .cn-kpi-card__title-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 /* The 18px glyph before the label, drawn only on a link tile. */
 .cn-kpi-card--board .cn-kpi-card__title {
 	display: flex;

package/src/css/look-board-detail.css

@@ -87,6 +87,61 @@
 	margin-bottom: 0;
 }
 
+/* The breadcrumb is a line of 14px text between the pills and the meta, as
+   the boards draw it (screens-detail-header-row-parity). NcBreadcrumbs grows to
+   the full row and draws each crumb as a 34px tertiary button, which pushed the
+   pills above it and the meta under it. The doubled class outranks its scoped
+   rules. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs.cn-detail-page__breadcrumbs {
+	flex: 0 1 auto;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	width: auto;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .breadcrumb__crumbs {
+	gap: 8px;
+	margin: 0;
+	min-height: 0;
+	padding: 0;
+	vertical-align: middle;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb.vue-crumb {
+	gap: 8px;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
+	background: transparent;
+	border: 0;
+	font-size: 14px;
+	font-weight: 400;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue__text {
+	font-weight: inherit;
+	line-height: 20px;
+	padding: 0;
+}
+
+/* The list is the link; the record's own crumb is plain muted text. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue[aria-current='page'] {
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb__separator {
+	margin: 0;
+}
+
 .cn-look-board .cn-detail-page__header-dot,
 .cn-look-board .cn-detail-page__header-meta {
 	color: var(--color-text-maxcontrast);
@@ -112,6 +167,16 @@
 	gap: 20px;
 }
 
+/* GridStack insets every cell by its 12px margin, the outer edge included, so
+   the tab strip started 12px below the top of the body column and stopped 12px
+   short of its end, while the side column started at the top. Pulling the grid
+   out by that margin puts its first card on the column's edges: the side column
+   is level with the strip, and the strip ends where the body column ends. */
+.cn-look-board.cn-detail-page--with-side > .cn-detail-page__body > .cn-detail-page__grid {
+	margin: -12px;
+	width: auto;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it
@@ -219,6 +284,22 @@
 	border-radius: 0;
 }
 
+/* A tab that holds a stack (`widgetIds`, screens-relation-pages): the panel
+   draws no frame and no padding; each widget is its own card. The first card
+   joins the open tab (the first-card rule above), the next ones stand 20px
+   apart, as the Overzicht of DqContact and PqOrganisatie draws them. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content:has(> .cn-tab:not([hidden]) > .cn-tabs-widget__stack) {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+}
+
+/* The stack's next cards are whole cards, not joined to the strip. */
+.cn-look-board .cn-tabs--board .cn-tabs__content .cn-tab .cn-tabs-widget__stack-item .cn-widget-wrapper {
+	border-radius: var(--cn-board-card-radius);
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
@@ -298,6 +379,12 @@
 	display: none;
 }
 
+/* A side card whose widget reports a header action (screens-relation-pages:
+   the "+ Toevoegen" of Contactkanalen and Relaties) keeps that one button. */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__actions:has(.cn-detail-page__catalog-action) {
+	display: flex;
+}
+
 /* The notice at the top of the side column: radius 12, padding 14px 16px. */
 .cn-look-board .cn-detail-page__side-item--notice .cn-widget-wrapper,
 .cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,