@conduction/nextcloud-vue 2.56.0-beta.12 → 2.56.0-beta.13

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35197196 bytes
-sha256: 893c086c8da03029e46dfe50d98a24e639f212abee995c1345acd72a41ab45be
+size: 35355767 bytes
+sha256: e048d3627c1eba03f90228c9f300e9341baf3086530119fe40b4af2106f5b7b2

package/dist/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;
@@ -3210,6 +3279,11 @@
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -16875,7 +16949,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 +17394,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 +18393,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;
@@ -30431,6 +30572,19 @@ to {
 .cn-dashboard-page__empty[data-v-824052fe] {
 	padding: 60px 20px;
 }
+
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch[data-v-824052fe] {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty[data-v-824052fe] {
+	padding: 40px 20px;
+}
 .cn-dashboard-page__page-filters[data-v-824052fe] {
 	display: flex;
 	flex-wrap: wrap;
@@ -33247,6 +33401,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 +33439,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/l10n/en.json

@@ -49,6 +49,7 @@
     "This integration is not available.": "This integration is not available.",
     "Integrations": "Integrations",
     "View": "View",
+    "Views": "Views",
     "current step": "current step",
     "{app} not available": "{app} not available",
     "{app} not configured": "{app} not configured",
@@ -408,6 +409,7 @@
     "Any": "Any",
     "To": "To",
     "Equals": "Equals",
+    "Contains": "Contains",
     "Clear": "Clear",
     "Apply": "Apply",
     "This column cannot list its objects.": "This column cannot list its objects.",
@@ -1088,6 +1090,7 @@
     "The actions of an attention card are declared in the manifest.": "The actions of an attention card are declared in the manifest.",
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
+    "This view has no widgets yet.": "This view has no widgets yet.",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",

package/l10n/nl.json

@@ -49,6 +49,7 @@
     "This integration is not available.": "Deze integratie is niet beschikbaar.",
     "Integrations": "Integraties",
     "View": "Weergave",
+    "Views": "Weergaven",
     "current step": "huidige stap",
     "{app} not available": "{app} niet beschikbaar",
     "{app} not configured": "{app} niet geconfigureerd",
@@ -408,6 +409,7 @@
     "Any": "Alle",
     "To": "Tot",
     "Equals": "Is gelijk aan",
+    "Contains": "Bevat",
     "Clear": "Wissen",
     "Apply": "Toepassen",
     "This column cannot list its objects.": "Deze kolom kan zijn objecten niet tonen.",
@@ -1132,6 +1134,7 @@
     "The actions of an attention card are declared in the manifest.": "De acties van een aandachtskaart staan in het manifest.",
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
+    "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.12",
+  "version": "2.56.0-beta.13",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppNav/CnAppNav.vue

@@ -246,7 +246,7 @@
 				</NcAppNavigationItem>
 			</template>
 		</template>
-		<template v-if="footerItems.length > 0 || showSettingsFoldout || resolvedCard || resolvedHelp" #footer>
+		<template v-if="footerItems.length > 0 || showSettingsFoldout || resolvedCard || showsHelp" #footer>
 			<!--
 				@slot card
 				@description Replace the card above the footer entries
@@ -282,11 +282,15 @@
 			     hover highlight are scoped to itself, so they survive being
 			     slotted. The main list's inset comes from NcAppNavigation's
 			     scope, which slot content does not carry. -->
-			<NcAppNavigationList v-if="footerItems.length > 0 || resolvedHelp" class="cn-app-nav__footer-list">
+			<NcAppNavigationList
+				v-if="footerItems.length > 0 || showsHelp"
+				class="cn-app-nav__footer-list"
+				:class="{ 'cn-app-nav__footer-list--after-settings': settingsFirst }">
 				<!-- The help entry (`nav.help`): a link to the app's own help
-				     with a help icon, above the footer entries. -->
+				     with a help icon, above the footer entries (or after them,
+				     when a declared `nav.footer` names it last). -->
 				<NcAppNavigationItem
-					v-if="resolvedHelp"
+					v-if="showsHelp && !helpAfterItems"
 					:name="resolvedHelp.label"
 					:to="resolvedHelp.to"
 					:href="resolvedHelp.href"
@@ -318,6 +322,17 @@
 							:active="isActive(item)" />
 					</template>
 				</NcAppNavigationItem>
+				<NcAppNavigationItem
+					v-if="showsHelp && helpAfterItems"
+					:name="resolvedHelp.label"
+					:to="resolvedHelp.to"
+					:href="resolvedHelp.href"
+					:target="resolvedHelp.href ? '_blank' : undefined"
+					data-testid="cn-nav-help">
+					<template #icon>
+						<HelpCircleOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
 			</NcAppNavigationList>
 			<!-- Settings foldout (section: "settings" items). NC-native
 			     gear-icon button that slides open a panel; the first entry
@@ -326,6 +341,7 @@
 			<NcAppNavigationSettings
 				v-if="showSettingsFoldout"
 				:name="settingsFoldoutLabel"
+				:class="{ 'cn-app-nav__settings--first': settingsFirst }"
 				data-testid="cn-nav-settings">
 				<ul class="cn-app-nav__settings-list">
 					<NcAppNavigationItem
@@ -958,17 +974,113 @@ export default {
 		 * Documentation, Features & Roadmap, About.
 		 */
 		footerItems() {
-			return this.visibleItems.filter((item) => item.section === 'footer')
+			const footer = this.visibleItems.filter((item) => item.section === 'footer')
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return footer
+			}
+			// A declared footer (`nav.footer`) keeps only the entries it names,
+			// in the order it names them.
+			return declared
+				.map((id) => footer.find((item) => item.id === id))
+				.filter(Boolean)
+		},
+
+		/**
+		 * The footer the manifest declares (`nav.footer`): an ordered list of
+		 * menu entry ids plus the reserved ids `help` (the `nav.help` entry)
+		 * and `settings` (the settings foldout). Null when the manifest
+		 * declares none, which keeps today's footer: the help entry, then
+		 * every `section: "footer"` entry, then the foldout.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<string>|null}
+		 */
+		declaredFooter() {
+			const declared = this.effectiveManifest?.nav?.footer
+			if (!Array.isArray(declared)) {
+				return null
+			}
+			return declared.filter((id) => typeof id === 'string' && id !== '')
+		},
+
+		/**
+		 * Footer-section entries a declared footer leaves out. They move into
+		 * the settings foldout rather than disappearing, so a page such as
+		 * Store or Reports stays reachable. Empty without `nav.footer`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<object>}
+		 */
+		undeclaredFooterItems() {
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return []
+			}
+			return this.visibleItems.filter((item) => item.section === 'footer' && !declared.includes(item.id))
+		},
+
+		/**
+		 * Whether the help entry renders: whenever it resolves, unless a
+		 * declared footer leaves `help` out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		showsHelp() {
+			if (!this.resolvedHelp) {
+				return false
+			}
+			return this.declaredFooter === null || this.declaredFooter.includes('help')
+		},
+
+		/**
+		 * Whether the help entry goes AFTER the footer entries. Only a declared
+		 * footer that names an entry before `help` puts it there; by default
+		 * it leads the list.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		helpAfterItems() {
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return false
+			}
+			const help = declared.indexOf('help')
+			return this.footerItems.some((item) => declared.indexOf(item.id) < help)
+		},
+
+		/**
+		 * Whether the settings foldout goes ABOVE the footer list: only when a
+		 * declared footer names `settings` before every other entry
+		 * (`["settings", "help"]`, the board's "Instellingen" then "Hulp en
+		 * uitleg"). Done with CSS `order` on the two siblings, so the markup
+		 * of both stays as it is.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		settingsFirst() {
+			const declared = this.declaredFooter
+			return declared !== null && declared.indexOf('settings') === 0
 		},
 
 		/**
 		 * Items that render INSIDE the NcAppNavigationSettings foldout
 		 * (section: "settings"). The foldout is the NC-native gear-icon
 		 * button that slides a panel open; these entries are app-level
-		 * configuration pages (Forms, Pipelines, Automations, …).
+		 * configuration pages (Forms, Pipelines, Automations, …). A declared
+		 * footer (`nav.footer`) adds the footer entries it leaves out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<object>}
 		 */
 		settingsItems() {
-			return this.visibleItems.filter((item) => item.section === 'settings')
+			return [
+				...this.visibleItems.filter((item) => item.section === 'settings'),
+				...this.undeclaredFooterItems,
+			]
 		},
 
 		/**
@@ -2294,6 +2406,21 @@ export default {
 	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
@@ -2317,6 +2444,20 @@ export default {
 	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/src/components/CnBreadcrumbs/CnBreadcrumbs.vue

@@ -18,6 +18,7 @@
 	<NcBreadcrumbs
 		v-if="crumbs.length > 0"
 		:aria-label="ariaLabel"
+		:rootIcon="rootText ? '' : undefined"
 		data-testid="cn-breadcrumbs">
 		<!-- `name` falls back to '' because NcBreadcrumb declares it a REQUIRED
 		     String and warns per render on the label-less icon-only crumb. The
@@ -97,6 +98,19 @@ export default {
 			type: String,
 			default: () => t('nextcloud-vue', 'Breadcrumbs'),
 		},
+
+		/**
+		 * Draw the FIRST crumb's label as text. NcBreadcrumbs gives the root
+		 * crumb a home icon and prints its `label` only as the accessible
+		 * name, so "All cases" read as a house. Off by default, which keeps
+		 * the home icon. A first crumb with its own `icon` keeps that icon.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
+		 */
+		rootText: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {