@conduction/nextcloud-vue 2.63.0 → 2.64.0

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -69,6 +69,17 @@
 			     It used to gate both, so a caller who switched the menu off
 			     also lost the Save button for an inline edit, silently. -->
 			<div v-if="actionsAreVisible()" class="cn-widget-wrapper__actions">
+				<!-- One text link in the header (`headerLink`): "All deadlines",
+				     "To the board". A route is a router link, an href a plain
+				     anchor. Sits before the slot and the overflow menu. -->
+				<component
+					:is="headerLinkTag"
+					v-if="headerLinkTag"
+					class="cn-widget-wrapper__header-link"
+					data-testid="cn-widget-wrapper-header-link"
+					v-bind="headerLinkAttrs">
+					{{ headerLinkLabel }}
+				</component>
 				<!-- @slot actions Custom action buttons rendered before the
 				     built-in overflow menu. -->
 				<slot name="actions" />
@@ -351,6 +362,22 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * One text link in the header's actions group, before the overflow
+		 * menu: `{ label, route?, params?, query?, href? }`. A `route` is a
+		 * named router link (needs a router), an `href` a plain anchor. The
+		 * label goes through the host translate function. Null (the
+		 * default) draws nothing. Manifest: `headerLink` on the widget
+		 * definition or its layout entry.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @type {{label: string, route?: string, params?: object, query?: object, href?: string}|null}
+		 */
+		headerLink: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Whether the header's overflow action menu (Refresh / Documentation /
 		 * Request-a-feature + any `#action-items`) renders. Shown by default;
@@ -634,6 +661,62 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The header link's tag: `router-link` for a route (when a router is
+		 * mounted), `a` for an href, '' when there is no usable link.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkTag() {
+			const link = this.headerLink
+			if (!link || typeof link.label !== 'string' || link.label === '') {
+				return ''
+			}
+			if (link.route && this.$router) {
+				return 'router-link'
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return 'a'
+			}
+			return ''
+		},
+
+		/**
+		 * The header link's attributes for its tag.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {object}
+		 */
+		headerLinkAttrs() {
+			const link = this.headerLink || {}
+			if (this.headerLinkTag === 'router-link') {
+				const to = { name: link.route }
+				if (link.params && typeof link.params === 'object') {
+					to.params = link.params
+				}
+				if (link.query && typeof link.query === 'object') {
+					to.query = link.query
+				}
+				return { to }
+			}
+			if (this.headerLinkTag === 'a') {
+				return { href: link.href }
+			}
+			return {}
+		},
+
+		/**
+		 * The header link's text, through the host translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkLabel() {
+			const label = this.headerLink && this.headerLink.label
+			return label ? this.effectiveTranslate(label) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -877,7 +960,7 @@ export default {
 		 * @return {boolean} True when the group would hold a visible control.
 		 */
 		actionsAreVisible() {
-			return this.showActions || this.actionsSlotRenders()
+			return this.showActions || this.actionsSlotRenders() || Boolean(this.headerLinkTag)
 		},
 
 		/**
@@ -1127,6 +1210,29 @@ export default {
 	flex-shrink: 0;
 }
 
+/* The header's text link (`headerLink`). Theme hooks: --cn-widget-header-link-size
+   and --cn-widget-header-link-weight. */
+.cn-widget-wrapper__header-link {
+	align-self: center;
+	padding: 0 calc(1 * var(--default-grid-baseline));
+	color: var(--color-primary-element);
+	font-size: var(--cn-widget-header-link-size, 14px);
+	font-weight: var(--cn-widget-header-link-weight, 600);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.cn-widget-wrapper__header-link:hover,
+.cn-widget-wrapper__header-link:focus-visible {
+	text-decoration: underline;
+}
+
+.cn-widget-wrapper__header-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
 /* Every widget's header icon is coloured — `--cn-widget-icon-color` is set on
    the header from titleIconStyle, and defaults to the theme colour if a
    wrapper is ever rendered without it. Material-design-icon components paint

package/src/css/detail-page.css

@@ -8,6 +8,12 @@
 	position: relative;
 }
 
+/* The breadcrumb line above the header (`config.breadcrumb`). */
+.cn-detail-page__breadcrumbs {
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+}
+
 /* Header */
 .cn-detail-page__header {
 	display: flex;
@@ -175,7 +181,7 @@
 
 .cn-detail-page__stats-table thead th {
 	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
-	text-align: left;
+	text-align: start;
 	font-weight: 600;
 	font-size: 0.9em;
 	color: var(--color-text-maxcontrast);
@@ -200,7 +206,7 @@
 }
 
 .cn-detail-page__stats-cell--indented {
-	padding-left: calc(5 * var(--default-grid-baseline)) !important;
+	padding-inline-start: calc(5 * var(--default-grid-baseline)) !important;
 }
 
 .cn-detail-page__stats-cell--center {
@@ -208,7 +214,7 @@
 }
 
 .cn-detail-page__stats-cell--right {
-	text-align: right;
+	text-align: end;
 }
 
 /* Body & content */
@@ -342,7 +348,7 @@
 
 .cn-detail-page__sidebar-toggle {
 	position: fixed;
-	right: calc(5 * var(--default-grid-baseline));
+	inset-inline-end: calc(5 * var(--default-grid-baseline));
 	top: 80px;
 	z-index: 10;
 }

package/src/css/kpi-card.css

@@ -133,7 +133,7 @@
 	padding: var(--cn-kpi-padding-flat, 8px);
 	box-sizing: border-box;
 	overflow: hidden;
-	text-align: left;
+	text-align: start;
 	text-decoration: none;
 	color: inherit;
 	background: transparent;
@@ -248,6 +248,29 @@
 	white-space: nowrap;
 }
 
+/* A caption coloured by a rule (`captionVariant` / `overrides[].captionVariant`):
+   "1 due today" in the error colour. Foreground tokens, which stay readable in
+   dark mode. */
+.cn-kpi-card__label--primary {
+	color: var(--color-primary-element);
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--success {
+	color: var(--color-text-success, var(--color-success-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	font-weight: 600;
+}
+
+.cn-kpi-card__label--error {
+	color: var(--color-text-error, var(--color-error-text));
+	font-weight: 600;
+}
+
 /* Semantic variants. Each re-points the ONE accent token, so the icon tint
    and the number move together by construction — there is no second place to
    forget. The inline KPI below shares the same modifiers for the same reason:

package/src/css/table.css

@@ -155,7 +155,7 @@
 .cn-data-table th,
 .cn-data-table td {
 	padding: calc(3 * var(--default-grid-baseline));
-	text-align: left;
+	text-align: start;
 	border-bottom: 1px solid var(--color-border);
 	vertical-align: middle;
 	max-width: var(--cn-table-cell-max-width, 22rem);
@@ -174,6 +174,18 @@
 	white-space: normal;
 }
 
+/* The secondary line of a cell (`columns[].secondary`): muted, smaller, on its
+   own line under the value. Theme hooks: --cn-table-secondary-size and
+   --cn-table-secondary-color. */
+.cn-data-table .cn-table-cell__secondary {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,
@@ -235,7 +247,7 @@
 }
 
 .cn-data-table td.cn-cell--end {
-	text-align: right;
+	text-align: end;
 	white-space: nowrap;
 }
 
@@ -273,7 +285,7 @@
 }
 
 .cn-table-sort-indicator {
-	margin-left: var(--default-grid-baseline);
+	margin-inline-start: var(--default-grid-baseline);
 	opacity: 0.6;
 }
 
@@ -383,7 +395,7 @@
 	justify-content: center;
 	min-width: 14px;
 	height: 14px;
-	margin-left: 2px;
+	margin-inline-start: 2px;
 	padding: 0 3px;
 	border-radius: 7px;
 	background-color: var(--color-primary-element);
@@ -448,7 +460,7 @@
 
 .cn-table-col--icon {
 	width: 40px;
-	padding-right: 0;
+	padding-inline-end: 0;
 	text-align: center;
 	color: var(--color-text-maxcontrast);
 }
@@ -511,7 +523,7 @@
 
 .viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
 
-.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
+.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: start; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
 
 .viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
 

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.45.0",
+	"version": "2.46.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -238,6 +238,40 @@
 					"type": "string",
 					"description": "Override label for the settings foldout's gear button. Defaults to 'Settings'."
 				},
+				"card": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["title"],
+					"description": "A card above the footer entries, rendered by CnAppNav (zuiddrecht-pixel-gaps): a title, a line of text and one link. Title, text and link label are i18n keys. Omitted, nothing renders there.",
+					"properties": {
+						"title": { "type": "string", "minLength": 1 },
+						"text": { "type": "string" },
+						"link": {
+							"type": "object",
+							"additionalProperties": false,
+							"required": ["label"],
+							"description": "The card's link: a `route` (named page, optional `params`) is a router link, an `href` a plain anchor, an `action` id a button that emits `card-action`.",
+							"properties": {
+								"label": { "type": "string", "minLength": 1 },
+								"route": { "type": "string" },
+								"params": { "type": "object", "additionalProperties": true },
+								"href": { "type": "string" },
+								"action": { "type": "string" }
+							}
+						}
+					}
+				},
+				"help": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["label"],
+					"description": "A help entry with a help icon in the navigation footer, above the settings foldout (zuiddrecht-pixel-gaps): `route` (named page) or `href` (opens in a new tab).",
+					"properties": {
+						"label": { "type": "string", "minLength": 1 },
+						"route": { "type": "string" },
+						"href": { "type": "string" }
+					}
+				},
 				"primaryAction": {
 					"$ref": "#/$defs/primaryAction",
 					"description": "App-wide default primary action rendered as an NcAppNavigationNew button above the main menu list. A page-scoped pages[].primaryAction for the current route wins over this default."
@@ -251,6 +285,10 @@
 							"type": "string",
 							"description": "URL of the logo image. Decorative when `name` is set."
 						},
+						"emblem": {
+							"type": ["string", "boolean"],
+							"description": "An emblem drawn in place of the logo (zuiddrecht-pixel-gaps): the municipality's mark beside the app name, distinct from the wordmark in the top bar. A URL, or `true` to draw the theme's emblem from the `--nldesign-emblem-url` custom property. Decorative when `name` is set."
+						},
 						"name": {
 							"type": "string",
 							"description": "i18n key / text for the app or organisation name."
@@ -1158,6 +1196,23 @@
 				},
 				"payload": {
 					"description": "Free-form payload echoed back to the host inside the @primary-action-click event."
+				},
+				"action": {
+					"$ref": "#/$defs/action",
+					"description": "A page action to run on click (zuiddrecht-pixel-gaps): CnAppNav then renders the button through CnActionButtons, so `type: \"open-form\"` (with `register` + `schema`) opens the create dialog without a create page, `navigate` pushes a route, `api-call` calls an endpoint. Drawn as one solid full-width primary button. `route` / `href` on the primary action itself are ignored while `action` is set."
+				},
+				"solid": {
+					"type": "boolean",
+					"default": false,
+					"description": "Draw the primary action as a solid, full-width primary button whatever its form (zuiddrecht-pixel-gaps). Default: a link action is already a primary button; a plain one is NcAppNavigationNew."
+				},
+				"permission": {
+					"type": "string",
+					"description": "Permission the reader must hold for the action to render, checked like `menuItem.permission` (zuiddrecht-pixel-gaps)."
+				},
+				"visibleIf": {
+					"$ref": "#/$defs/visibleIfCondition",
+					"description": "Display condition evaluated at render time, like `menuItem.visibleIf` (zuiddrecht-pixel-gaps). A gated-out page-scoped action falls back to `nav.primaryAction`."
 				}
 			}
 		},
@@ -1221,9 +1276,20 @@
 				"count": {
 					"oneOf": [
 						{ "type": "integer", "minimum": 0 },
-						{ "type": "string", "enum": ["auto"] }
+						{ "type": "string", "enum": ["auto"] },
+						{
+							"type": "object",
+							"additionalProperties": false,
+							"required": ["register", "schema"],
+							"description": "A FILTERED count (zuiddrecht-pixel-gaps): the total of this register and schema with `filter` applied (filter-value tokens such as `@me` and `@today` resolve at fetch time), fetched by CnAppRoot under the entry's own key so an index page's whole-schema total is untouched. Renders \"My work 6\" beside \"All cases 48\".",
+							"properties": {
+								"register": { "type": "string", "minLength": 1 },
+								"schema": { "type": "string", "minLength": 1 },
+								"filter": { "type": "object", "additionalProperties": true }
+							}
+						}
 					],
-					"description": "Counter badge in the entry's #counter slot. Positive integer renders as-is; 'auto' resolves from cnMenuCounts (populated by CnAppRoot from useObjectStore totals) for the entry's resolved index-type page (register + schema)."
+					"description": "Counter badge in the entry's #counter slot. Positive integer renders as-is; 'auto' resolves from cnMenuCounts (populated by CnAppRoot from useObjectStore totals) for the entry's resolved index-type page (register + schema); an object `{ register, schema, filter? }` is the total of that filtered list."
 				},
 				"pinned": {
 					"type": "boolean",
@@ -1485,6 +1551,19 @@
 					"minimum": 1,
 					"description": "Row span (>= 1)."
 				},
+				"headerLink": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["label"],
+					"description": "One text link in the widget header's actions group, before the overflow menu (zuiddrecht-pixel-gaps): \"All deadlines\", \"To the board\". A `route` (named page, optional `params` / `query`) is a router link, an `href` a plain anchor. The label is an i18n key. Rendered by CnWidgetWrapper; CnDashboardPage reads it off the layout entry or the widget definition.",
+					"properties": {
+						"label": { "type": "string", "minLength": 1 },
+						"route": { "type": "string" },
+						"params": { "type": "object", "additionalProperties": true },
+						"query": { "type": "object", "additionalProperties": true },
+						"href": { "type": "string" }
+					}
+				},
 				"sizeToContent": {
 					"type": ["boolean", "integer"],
 					"minimum": 1,
@@ -3519,6 +3598,37 @@
 							"type": "string",
 							"description": "type='index': accessible name and tooltip for the split pane's close button. Defaults to \"Close\". Maps to CnIndexPage `splitCloseLabel`."
 						},
+						"showHeader": {
+							"type": "boolean",
+							"default": true,
+							"description": "type='dashboard': `false` drops the header row (title, description, header actions, edit toggle) for a page that opens with its own heading, such as a greeting widget; the title stays as a visually hidden heading (zuiddrecht-pixel-gaps). Maps to CnDashboardPage `showHeader`."
+						},
+						"showTitle": {
+							"type": "boolean",
+							"default": false,
+							"description": "type='index': show the page header (icon, title, description) inline. Default false: the title renders visually hidden and the sidebar names the page. Maps to CnIndexPage `showTitle`."
+						},
+						"countSubtitle": {
+							"type": "string",
+							"description": "type='index': an i18n key for the description line with `{total}` replaced by the collection's total, e.g. \"{total} open cases\" (zuiddrecht-pixel-gaps). Shown in place of `description` once a total is known. Maps to CnIndexPage `countSubtitle`."
+						},
+						"showTypeEyebrow": {
+							"type": "boolean",
+							"default": true,
+							"description": "type='detail': `false` drops the type eyebrow (the type label above the record name) once the record resolves, for a header that says the type in a pill instead (zuiddrecht-pixel-gaps). Maps to CnDetailPage `showTypeEyebrow`."
+						},
+						"breadcrumb": {
+							"type": "object",
+							"additionalProperties": false,
+							"required": ["label"],
+							"description": "type='detail': a breadcrumb line above the header (zuiddrecht-pixel-gaps): this crumb names the list the record belongs to (`route` + optional `params`, or `href`), the record's display name follows as the current crumb. Maps to CnDetailPage `breadcrumb`.",
+							"properties": {
+								"label": { "type": "string", "minLength": 1 },
+								"route": { "type": "string" },
+								"params": { "type": "object", "additionalProperties": true },
+								"href": { "type": "string" }
+							}
+						},
 						"mapConfig": {
 							"type": "object",
 							"additionalProperties": true,

package/src/utils/schemaRefSlug.js

@@ -35,9 +35,14 @@
  * registers author the slug by hand for multi-word titles) folds to one
  * `-`, leading/trailing dashes trimmed.
  *
- * Idempotent: a value that is already a slug (`report-period`, `cohort`)
- * passes through unchanged, so it is always safe to route an already-correct
- * value through this function defensively.
+ * Idempotent: a value that is already a slug (`report-period`, `cohort`,
+ * `statusType`) passes through unchanged, so it is always safe to route an
+ * already-correct value through this function defensively. A slug is any
+ * value that starts with a lowercase letter or digit and holds only
+ * letters, digits and dashes; only a title (capital initial, or spaces and
+ * punctuation) is kebab-cased.
+ *
+ * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-plain-schema-slug-is-left-as-written
  *
  * A numeric schema id (OpenRegister accepts either the slug or the numeric
  * id in the objects-API path) is returned unchanged — slugifying a number
@@ -63,6 +68,17 @@ export function schemaRefSlug(ref) {
 	if (tail === '') {
 		return ''
 	}
+	// A plain slug is left as written. OpenRegister matches a slug
+	// case-insensitively (`statusType`, `statustype` and `StatusType` all
+	// answer 200) but `status-type` is another slug and 404s, so a
+	// camelCase slug authored as a slug must not be kebab-cased. Only a
+	// `$ref` TITLE is: it starts with a capital (`ReportPeriod`) or carries
+	// spaces or punctuation (`Praktijkovereenkomst (POK)`). 2.62.0 kebab-cased
+	// everything and broke every camelCase slug (dossiq: statusType, caseType,
+	// caseObject, bezwaarDecision, bacAdviceRequest, wmsLayer, ...).
+	if (/^[a-z0-9][A-Za-z0-9-]*$/.test(tail)) {
+		return tail
+	}
 	const kebab = tail
 		// PascalCase / camelCase word boundaries: `ReportPeriod` -> `Report-Period`,
 		// an acronym run followed by a new capitalised word: `HTTPServer` -> `HTTP-Server`.