@conduction/nextcloud-vue 2.64.0 → 2.65.0

package/dist/esm/nextcloud-vue.css

@@ -1283,6 +1283,53 @@
 	font-size: var(--cn-kpi-value-size-stacked, 2rem);
 }
 
+/* Stacked: the board's tile (`content.layout: 'stacked'`). A plain muted
+   label, the number at 34px/700 in the text colour, and the caption on a line
+   of its own; CnStatWidget draws no icon circle in this layout. The padding
+   adds up with a dashboard card-fit cell's 8px 14px to the board's 18px 20px.
+   Every value is a token so a theme can move it. */
+.cn-kpi-card--stacked {
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+	padding: var(--cn-kpi-stacked-padding, 10px 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__body {
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__title {
+	font-size: var(--cn-kpi-stacked-title-size, 14px);
+	font-weight: var(--cn-kpi-stacked-title-weight, 400);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__value {
+	font-size: var(--cn-kpi-stacked-value-size, 34px);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: var(--cn-kpi-stacked-value-color, var(--color-main-text));
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	flex: 0 0 auto;
+	max-width: 100%;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+}
+
+/* A linked stacked tile reads as a tile, not as underlined link text. The
+   NL Design theme underlines every `a` with `!important`, so the opt-out
+   needs it too; it only applies to this opt-in layout. */
+a.cn-kpi-card--stacked,
+a.cn-kpi-card--stacked:hover,
+a.cn-kpi-card--stacked:focus-visible {
+	text-decoration: none !important;
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -2790,6 +2837,28 @@
 	min-width: 0;
 }
 
+/* A widget in the header (`config.headerWidget`) takes a row of its own under
+   the title and the actions. */
+.cn-detail-page__header--with-widget {
+	flex-wrap: wrap;
+	row-gap: var(--cn-detail-header-row-gap, 22px);
+}
+
+.cn-detail-page__header-widget {
+	flex: 1 0 100%;
+	min-width: 0;
+}
+
+/* The header as a card (`config.headerCard`): the board's case header, a
+   bordered box on the surface colour. The 56px inset that clears the
+   navigation toggle is not needed inside a card that starts below it. */
+.cn-detail-page__header--card {
+	padding: var(--cn-detail-header-card-padding, 22px 24px);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-detail-header-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
 .cn-detail-page__header-left {
 	display: flex;
 	align-items: center;
@@ -16875,7 +16944,17 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+/* A clickable label is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` a min-height of the clickable area (34 to
+   44px) with the text centred in it. That pushed each reachable stage's label
+   about 12px below the current one, which is a <span>. Zeroed here so all
+   labels sit 8px under their bar, as the board draws them. The visually
+   hidden "(current step)" is absolutely positioned and takes no space. */
 button.cn-stages-widget__bar-label[data-v-358fde0f] {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
 	cursor: pointer;
 }
 button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-358fde0f] {
@@ -17310,6 +17389,53 @@ button.cn-stages-widget__bar-label[data-v-358fde0f]:focus-visible {
 	font-size: var(--cn-kpi-value-size-stacked, 2rem);
 }
 
+/* Stacked: the board's tile (`content.layout: 'stacked'`). A plain muted
+   label, the number at 34px/700 in the text colour, and the caption on a line
+   of its own; CnStatWidget draws no icon circle in this layout. The padding
+   adds up with a dashboard card-fit cell's 8px 14px to the board's 18px 20px.
+   Every value is a token so a theme can move it. */
+.cn-kpi-card--stacked {
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+	padding: var(--cn-kpi-stacked-padding, 10px 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__body {
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__title {
+	font-size: var(--cn-kpi-stacked-title-size, 14px);
+	font-weight: var(--cn-kpi-stacked-title-weight, 400);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__value {
+	font-size: var(--cn-kpi-stacked-value-size, 34px);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: var(--cn-kpi-stacked-value-color, var(--color-main-text));
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	flex: 0 0 auto;
+	max-width: 100%;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+}
+
+/* A linked stacked tile reads as a tile, not as underlined link text. The
+   NL Design theme underlines every `a` with `!important`, so the opt-out
+   needs it too; it only applies to this opt-in layout. */
+a.cn-kpi-card--stacked,
+a.cn-kpi-card--stacked:hover,
+a.cn-kpi-card--stacked:focus-visible {
+	text-decoration: none !important;
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -18262,6 +18388,16 @@ to { background-position: -200% 0;
 	flex: 0 0 auto;
 	padding: 16px;
 }
+
+/* On the page ground (`content.ground`): no card, so no inset around the
+   view switch, and the heading at the board's 32px. */
+.cn-header-widget--ground .cn-header-widget__views[data-v-1b97430f] {
+	padding: 0;
+}
+.cn-header-widget--ground .cn-header-widget__title[data-v-1b97430f] {
+	font-size: var(--cn-header-ground-title-size, 32px);
+	letter-spacing: -0.01em;
+}
 .cn-header-widget__date[data-v-1b97430f] {
 	font-size: 14px;
 	line-height: 1.4;
@@ -33247,6 +33383,21 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	padding: calc(var(--default-grid-baseline, 4px) * 2);
 }
 
+/*
+ * The primary action never shrinks out of sight. NcAppNavigation renders it in
+ * `.app-navigation__body`, a flex child with `overflow-y: scroll` (so its
+ * minimum height is 0) beside a list of `height: 100%` and the footer. With a
+ * card and footer entries below the list, the column overflows and the body
+ * gives up its share of the shrink: "New case" showed as a 24px sliver of a
+ * 42px button. All three forms carry `.app-navigation-new` (the solid and
+ * link wrappers mirror NcAppNavigationNew's class), and the rule is scoped to
+ * this component's navigation, so a navigation without a primary action lays
+ * out exactly as before.
+ */
+.app-navigation[data-testid="cn-nav"] .app-navigation__body:has(> .app-navigation-new) {
+	flex-shrink: 0;
+}
+
 /*
  * Footer-section items (section: "footer") render in NcAppNavigation's
  * #footer slot, outside the scroll container, so they stay visible above
@@ -33270,6 +33421,19 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	overflow: visible !important;
 }
 
+/*
+ * A declared footer that names `settings` first (`nav.footer`) puts the
+ * foldout above the footer list. The two are siblings in NcAppNavigation's
+ * flex column, so `order` moves them without changing either's markup; the
+ * card above keeps order 0 and stays first.
+ */
+.cn-app-nav__settings--first {
+	order: 1;
+}
+.cn-app-nav__footer-list--after-settings {
+	order: 2;
+}
+
 /*
  * Align the settings foldout's items with the main/footer list items,
  * whose icons sit at a 16px inset. The foldout's items live in a bare

package/dist/esm/store/useObjectStore.js

@@ -264,6 +264,27 @@ const baseActions = {
 		this.facets = { ...this.facets, [slug]: {} };
 	},
 
+	/**
+	 * Give a registered type a second schema path segment to try once when
+	 * its own answers 404 (see `_fetchWithSchemaFallback`). Set by
+	 * `resolveObjectOpType` for a schema title it kebab-cased, with the
+	 * title as written. A type that is not registered is left alone.
+	 *
+	 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-schema-title-falls-back-to-its-written-form
+	 * @param {string} slug The type slug
+	 * @param {string} schema The fallback schema path segment
+	 */
+	setSchemaFallback(slug, schema) {
+		const config = this.objectTypeRegistry[slug];
+		if (!config || typeof schema !== 'string' || schema === '') {
+			return
+		}
+		this.objectTypeRegistry = {
+			...this.objectTypeRegistry,
+			[slug]: { ...config, schemaFallback: schema },
+		};
+	},
+
 	/**
 	 * Unregister an object type and clean up all its state.
 	 *
@@ -433,11 +454,12 @@ const baseActions = {
 	 *
 	 * @param {string} type The type slug
 	 * @param {string|null} [id] Optional object ID
+	 * @param {string|null} [schema] Schema path segment to use instead of the type's own
 	 * @return {string} Full API URL path
 	 */
-	_buildUrl(type, id = null) {
+	_buildUrl(type, id = null, schema = null) {
 		const config = this._getTypeConfig(type);
-		let url = `${this._options.baseUrl}/${config.register}/${config.schema}`;
+		let url = `${this._options.baseUrl}/${config.register}/${schema ?? config.schema}`;
 		if (id) {
 			url += `/${id}`;
 		}
@@ -458,11 +480,12 @@ const baseActions = {
 	 * @param {string} type The type slug
 	 * @param {object} [params] Extra query parameters
 	 * @param {string|null} [id] Optional object ID
+	 * @param {string|null} [schema] Schema path segment to use instead of the type's own
 	 * @return {string} Full API URL path including query string
 	 */
-	_buildUrlWithParams(type, params = {}, id = null) {
+	_buildUrlWithParams(type, params = {}, id = null, schema = null) {
 		const config = this._getTypeConfig(type);
-		let url = `${this._options.baseUrl}/${config.register}/${config.schema}`;
+		let url = `${this._options.baseUrl}/${config.register}/${schema ?? config.schema}`;
 		if (id) {
 			url += `/${id}`;
 		}
@@ -472,6 +495,54 @@ const baseActions = {
 		return url
 	},
 
+	/**
+	 * Fetch for a type, retrying ONCE with its `schemaFallback` when the
+	 * schema path segment answers 404. A type without a fallback (every type
+	 * not registered by `resolveObjectOpType` for a kebab-cased title) makes
+	 * exactly the one request it always made. When the retry succeeds the
+	 * fallback becomes the type's schema, so later calls go straight to it;
+	 * when it does not, the first answer is returned and nothing changes.
+	 *
+	 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-schema-title-falls-back-to-its-written-form
+	 * @param {string} type The type slug
+	 * @param {function((string|null)): string} makeUrl Builds the URL; called with
+	 *   null for the type's own schema, or with the fallback segment.
+	 * @param {object} init The fetch options.
+	 * @return {Promise<Response>} The response to use.
+	 */
+	async _fetchWithSchemaFallback(type, makeUrl, init) {
+		// `makeUrl` wraps `_buildUrl` / `_buildUrlWithParams`, so `url` is built
+		// from the prefixed `_options.baseUrl` like every other request here.
+		let url = makeUrl(null);
+		const response = await fetch(url, init);
+		if (!response || response.status !== 404) {
+			return response
+		}
+		const config = this.objectTypeRegistry[type];
+		const fallback = config && config.schemaFallback;
+		if (!fallback || String(fallback) === String(config.schema)) {
+			return response
+		}
+		let retry;
+		try {
+			url = makeUrl(fallback);
+			retry = await fetch(url, init);
+		} catch {
+			return response
+		}
+		if (!retry || !retry.ok) {
+			discardResponseBody(retry);
+			return response
+		}
+		discardResponseBody(response);
+		const { schemaFallback: _, ...rest } = config;
+		this.objectTypeRegistry = {
+			...this.objectTypeRegistry,
+			[type]: { ...rest, schema: fallback },
+		};
+		return retry
+	},
+
 	/**
 	 * Clear the error state for a type.
 	 *
@@ -604,12 +675,14 @@ const baseActions = {
 				}
 			}
 
-			const url = this._buildUrlWithParams(type, fetchParams);
-
-			const response = await fetch(url, {
-				method: 'GET',
-				headers: this._buildHeaders(),
-			});
+			const response = await this._fetchWithSchemaFallback(
+				type,
+				(schema) => this._buildUrlWithParams(type, fetchParams, null, schema),
+				{
+					method: 'GET',
+					headers: this._buildHeaders(),
+				},
+			);
 
 			if (!response.ok) {
 				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) };
@@ -675,11 +748,14 @@ const baseActions = {
 	 */
 	async fetchCollectionForOptions(type, params = {}) {
 		try {
-			const url = this._buildUrlWithParams(type, params);
-			const response = await fetch(url, {
-				method: 'GET',
-				headers: this._buildHeaders(),
-			});
+			const response = await this._fetchWithSchemaFallback(
+				type,
+				(schema) => this._buildUrlWithParams(type, params, null, schema),
+				{
+					method: 'GET',
+					headers: this._buildHeaders(),
+				},
+			);
 
 			if (!response.ok) {
 				discardResponseBody(response);
@@ -734,10 +810,14 @@ const baseActions = {
 		this.errors = { ...this.errors, [type]: null };
 
 		try {
-			const response = await fetch(url, {
-				method: 'GET',
-				headers: this._buildHeaders(),
-			});
+			const response = await this._fetchWithSchemaFallback(
+				type,
+				(schema) => (schema === null ? url : this._buildUrl(type, id, schema)),
+				{
+					method: 'GET',
+					headers: this._buildHeaders(),
+				},
+			);
 
 			if (!response.ok) {
 				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) };
@@ -805,16 +885,19 @@ const baseActions = {
 
 		try {
 			const isUpdate = !!objectData.id;
-			const url = isUpdate
-				? this._buildUrl(type, objectData.id)
-				: this._buildUrl(type);
 			const method = isUpdate ? 'PUT' : 'POST';
 
-			const response = await fetch(url, {
-				method,
-				headers: this._buildHeaders(),
-				body: JSON.stringify(objectData),
-			});
+			const response = await this._fetchWithSchemaFallback(
+				type,
+				(schema) => (isUpdate
+					? this._buildUrl(type, objectData.id, schema)
+					: this._buildUrl(type, null, schema)),
+				{
+					method,
+					headers: this._buildHeaders(),
+					body: JSON.stringify(objectData),
+				},
+			);
 
 			if (!response.ok) {
 				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) };
@@ -866,12 +949,14 @@ const baseActions = {
 		this.errors = { ...this.errors, [type]: null };
 
 		try {
-			const url = this._buildUrl(type, id);
-
-			const response = await fetch(url, {
-				method: 'DELETE',
-				headers: this._buildHeaders(),
-			});
+			const response = await this._fetchWithSchemaFallback(
+				type,
+				(schema) => this._buildUrl(type, id, schema),
+				{
+					method: 'DELETE',
+					headers: this._buildHeaders(),
+				},
+			);
 
 			if (!response.ok) {
 				this.errors = { ...this.errors, [type]: await parseResponseError(response, type) };