@conduction/nextcloud-vue 2.79.0 → 2.80.0

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);
@@ -229,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,
@@ -308,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,

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

@@ -301,6 +301,15 @@
 	color: var(--color-main-text);
 }
 
+/* A segment the page cannot open: drawn, as the boards do, but faded and inert. */
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled,
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled:hover {
+	background: transparent !important;
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 /* The search field: 40px, radius 8, not a pill. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__search {
 	flex: 1 1 260px;
@@ -448,6 +457,48 @@
 	border-bottom: 0;
 }
 
+/* The table fits its card (screens-index-table-fit-parity). Under the auto
+   layout every one-line cell asked for its whole text up to the 22rem cap, so
+   seven text columns made a 1500px table in a 1118px card at a 1440px
+   viewport: the last columns and the row menus sat past the card's edge. The
+   fixed layout shares the card's width: the selection and menu columns keep
+   their own width, the first data column takes 18%, the others split the
+   rest, and a value that does not fit is cut with an ellipsis (its full text
+   stays in the cell's tooltip). A column's own `width` still wins. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title {
+	width: 18%;
+}
+
+/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
+   the selection column; the selection and menu columns keep 16px. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+	padding-inline: 12px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
+	padding-inline-start: 18px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
+	display: block;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A narrow header cuts its label, not its filter funnel. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th .cn-table-header__sort:has(~ .cn-table-header__filter) {
+	max-width: calc(100% - 26px);
+}
+
 /* The selection column: 28px, 18px checkboxes. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: content-box;

package/src/css/look-board.css

@@ -12,9 +12,14 @@
  * counterpart default to one.
  */
 .cn-look-board {
-	/* Page content area: padding, max width, gap between blocks. */
+	/* Page content area: padding, max width, gap between blocks. The content
+	   spans the whole content area (screens-one-scroller-parity): grids grow
+	   with the window and shrink only when the sidebar takes its share. A
+	   1240px cap left dead space right of the content, and on a dashboard,
+	   which scrolled itself, put the scrollbar beside the content instead of
+	   at the window edge. */
 	--cn-board-content-padding: 24px 28px;
-	--cn-board-content-max-width: 1240px;
+	--cn-board-content-max-width: none;
 	--cn-board-section-gap: 20px;
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
@@ -54,6 +59,15 @@
 	gap: var(--cn-board-section-gap);
 }
 
+/* One scroller: the content area. CnDashboardPage scrolls itself
+   (`height: 100%; overflow-y: auto`), which nested a second scrollbar inside
+   NcAppContent's; under the board look the page grows with its widgets and
+   NcAppContent, which already spans to the window edge, scrolls it. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) {
+	height: auto;
+	overflow-y: visible;
+}
+
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-settings-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-index-page__below-header,
@@ -167,6 +181,27 @@
 	gap: 2px;
 }
 
+/* No scrollbars inside the navigation (screens-one-scroller-parity).
+   NcAppNavigation gives the region above the list `overflow-y: scroll`, an
+   always-on track (with arrow buttons on classic scrollbars) beside the
+   primary action that has nothing to scroll. It takes its content's height
+   instead. A menu taller than the window still scrolls (wheel, touch, focus),
+   without drawing a bar of its own; the one visible scrollbar is the page's. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body:not(.app-navigation__body--no-list) {
+	flex-shrink: 0;
+	overflow: visible;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list {
+	scrollbar-width: none;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list::-webkit-scrollbar,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list::-webkit-scrollbar {
+	display: none;
+}
+
 /* The board's vertical rhythm (AppZijbalk): the primary action 20px from the
    top, the list 20px under it, entries 2px apart. An empty search slot is a
    flex child too and pushed everything 20px down, so it goes. */

package/src/css/table.css

@@ -258,6 +258,25 @@
 	white-space: nowrap;
 }
 
+/* The secondary line of the growing column ("2026-0004" under a case title)
+   is a line of its own with its own ellipsis. The cell does not wrap, so in
+   the board look, where the secondary line is an inline block (the title
+   underline cannot reach an atomic inline box), it stayed on the title's line
+   and ran out of the tile. A full-width float is a block (computed `display:
+   block`) that always starts under the line before it, and, being out of the
+   flow, the cell's underline does not reach it either. The cell is a table
+   cell, which contains its floats, so the row grows to hold the line.
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-the-secondary-line-of-a-narrow-tables-growing-column-sits-under-the-value */
+.cn-data-table.cn-data-table--fit td.cn-table-col--grow .cn-table-cell__secondary {
+	float: inline-start;
+	clear: both;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;

package/src/index.js

@@ -112,6 +112,7 @@ export {
 	CnEnvironmentBanner,
 	CnExportWizard,
 	CnFacetSidebar,
+	CnFactsWidget,
 	CnFavouriteToggle,
 	CnFeaturesAndRoadmapLink,
 	CnFeaturesAndRoadmapPage,
@@ -120,6 +121,7 @@ export {
 	CnFeaturesTab,
 	CnFederationStatus,
 	CnFieldHelper,
+	CnFieldListWidget,
 	CnFileField,
 	CnFileManager,
 	CnFilePreview,
@@ -236,6 +238,7 @@ export {
 	CnQuickFilterBar,
 	CnQuicklinksWidget,
 	CnQuicklinksWidgetForm,
+	CnRecordListWidget,
 	CnReferencePreview,
 	CnRegisterMapping,
 	CnRegisterSchemaSelect,
@@ -258,6 +261,7 @@ export {
 	CnSaveViewDialog,
 	CnSchemaFormDialog,
 	CnSearchPage,
+	CnSectionsWidget,
 	CnSettingsCard,
 	CnSettingsPage,
 	CnSettingsSection,