@conduction/nextcloud-vue 2.69.0 → 2.71.0

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: 35499103 bytes
-sha256: fe1cf925335eec45a51c59903eb32d313c16bdcbdaf047c4b80fad05712db22a
+size: 35657637 bytes
+sha256: b7b966a528988db88e213ce0afc88832aae9c6b60341877ba5226dc3d833f211

package/dist/nextcloud-vue.css

@@ -1330,6 +1330,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* 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 {
@@ -2283,6 +2298,18 @@ a.cn-kpi-card--stacked:focus-visible {
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* The board's header buttons (`headerButtons`) at the end of the title row,
+   centred on the title and its count line. They wrap under the title on a
+   narrow page. */
+.cn-index-page__header-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-self: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-inline-start: auto;
+}
+
 .cn-index-page__below-header {
     margin-bottom: calc(4 * var(--default-grid-baseline));
 }
@@ -2814,6 +2841,50 @@ a.cn-kpi-card--stacked:focus-visible {
 .cn-requires-app.cn-requires-app .empty-content__action {
 	margin-top: var(--default-grid-baseline, 4px);
 }
+
+/* NcEmptyContent forces its icon's svg to 64px with !important while the
+ * rule above lets the icon box shrink, so the svg spilled out of its box and
+ * over the name. Hold the svg to the size the caller asked for. */
+.cn-requires-app.cn-requires-app .empty-content__icon svg {
+	width: 32px !important;
+	height: 32px !important;
+	max-width: 32px !important;
+	max-height: 32px !important;
+}
+
+/* The dashboard's compact "Install <app>" placeholder: two lines of text and
+ * the button, nothing else, so it fits a two-row tile even under a title row.
+ * `safe center` keeps the top in view when a tile is smaller still, and the
+ * body scrolls rather than clipping the button. */
+.cn-requires-app--compact {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: safe center;
+	gap: calc(2 * var(--default-grid-baseline, 4px));
+	box-sizing: border-box;
+	height: 100%;
+	min-height: 0;
+	overflow: auto;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+	text-align: center;
+}
+
+.cn-requires-app--compact .cn-requires-app__description {
+	display: -webkit-box;
+	margin: 0;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	line-height: 1.4;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+}
+
+.cn-requires-app--compact .button-vue {
+	flex-shrink: 0;
+}
 /* ========================================
    @conduction/nextcloud-vue — CnDetailPage Styles
    ======================================== */
@@ -2862,6 +2933,16 @@ a.cn-kpi-card--stacked:focus-visible {
 	row-gap: var(--cn-detail-header-row-gap, 22px);
 }
 
+/* That wrap must not take the actions off the title row. With `flex-basis:
+   auto` a long title claimed its whole text width, so the actions wrapped
+   under it. From a zero basis the title takes what the actions leave and
+   wraps (two lines, then an ellipsis) inside it; only on a page too narrow
+   for 16rem of title beside the actions do the actions drop a row. */
+.cn-detail-page__header--with-widget > :first-child {
+	flex: 1 1 0;
+	min-width: min(100%, 16rem);
+}
+
 .cn-detail-page__header-widget {
 	flex: 1 0 100%;
 	min-width: 0;
@@ -6173,6 +6254,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	margin: 0;
 	text-transform: uppercase;
 }
+
+/* The title is a small kicker, not a section heading, but it is an <h3> (or
+   whatever `titleTag` says) for the outline, and a theme that sizes every
+   heading with !important (thematiq's nldesign sheet: `h3 { font-size:
+   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to
+   an 18px uppercase heading. Only !important beats !important; the doubled
+   class makes this the more specific rule. Without such a theme the size is
+   the 0.85em above, unchanged. */
+.cn-next-step-card__title.cn-next-step-card__title[data-v-3a9ce962] {
+	font-size: 0.85em !important;
+}
 .cn-next-step-card__list[data-v-3a9ce962] {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline));
@@ -15597,6 +15689,15 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 }
 
 
+/* A select option breaks between words only, never inside one. */
+.cn-form-dialog__option[data-v-c3eeb0a2] {
+	display: block;
+	min-width: 0;
+	white-space: normal;
+	overflow-wrap: normal;
+	word-break: normal;
+	hyphens: manual;
+}
 .cn-form-dialog__draft-actions[data-v-c3eeb0a2] {
 	display: flex;
 	gap: 8px;
@@ -16465,6 +16566,14 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	gap: 16px;
 	width: 100%;
 }
+
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-stacked-bar--inset[data-v-c0bac1a2] {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
 .cn-stacked-bar__state[data-v-c0bac1a2] {
 	display: flex;
 	align-items: center;
@@ -16980,6 +17089,25 @@ button.cn-stages-widget__bar-label[data-v-358fde0f] {
 	line-height: inherit;
 	cursor: pointer;
 }
+
+/* The same label under a theme that restyles every button with !important
+   (thematiq's nldesign sheet: `button:not(.action-button)` gets 8px 16px
+   padding, `min-width: max-content` and `overflow: visible`), and under core's
+   `margin: 3px 3px 3px 0`, which outranks the scoped base rule. Together they
+   put each clickable label about 10px below the current step's <span> and let
+   a long label run over its neighbours, so eight Woo steps overlapped instead
+   of ending in an ellipsis. Only !important beats !important; this selector is
+   the more specific of the two. Without such a theme nothing changes: these
+   are the values the base rule already sets. */
+button.cn-stages-widget__bar-label.cn-stages-widget__bar-label[data-v-358fde0f] {
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	border-width: 0 !important;
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
+}
 button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-358fde0f] {
 	cursor: not-allowed;
 }
@@ -17459,6 +17587,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* 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 {
@@ -18405,6 +18548,30 @@ to { background-position: -200% 0;
 	flex: 1 1 320px;
 	width: auto;
 }
+
+/* The emblem beside the greeting (`content.emblem`): on one row with the
+   date line and heading, centred on them, as LpStart draws it. */
+.cn-header-widget--with-emblem[data-v-1b97430f] {
+	display: flex;
+	column-gap: var(--cn-header-emblem-gap, 16px);
+}
+.cn-header-widget--with-emblem .cn-header-widget__content[data-v-1b97430f] {
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 0;
+}
+.cn-header-widget__emblem[data-v-1b97430f] {
+	position: relative;
+	z-index: 1;
+	flex: none;
+	align-self: center;
+	height: var(--cn-header-emblem-size, 52px);
+	width: auto;
+}
+.cn-header-widget__emblem--theme[data-v-1b97430f] {
+	width: var(--cn-header-emblem-size, 52px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
 .cn-header-widget__views[data-v-1b97430f] {
 	position: relative;
 	z-index: 1;
@@ -19507,6 +19674,14 @@ to { background-position: -200% 0;
 .cn-week-strip[data-v-153dd4cb] {
 	width: 100%;
 }
+
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-week-strip--inset[data-v-153dd4cb] {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
 .cn-week-strip__state[data-v-153dd4cb] {
 	display: flex;
 	align-items: center;
@@ -30052,6 +30227,19 @@ to {
 }
 
 
+/* `separator`: a text separator in place of the chevron. The chevron's own
+   element stays (it carries NcBreadcrumbs' spacing and its "no separator after
+   the last crumb" rule); only its icon gives way to the text. */
+.cn-breadcrumbs--text-separator[data-v-296fde9b] .vue-crumb__separator svg {
+	display: none;
+}
+.cn-breadcrumbs--text-separator[data-v-296fde9b] .vue-crumb__separator::before {
+	content: var(--cn-breadcrumbs-separator);
+	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
+	color: var(--color-text-maxcontrast);
+}
+
+
 .cn-run-node-dialog__form[data-v-3eb7c55d] {
 	display: flex;
 	flex-direction: column;
@@ -30223,6 +30411,16 @@ to {
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
 }
+
+/* A size-to-content cell (`sizeToContent`) is measured by GridStack from the
+   content's first child, and a widget wrapper there filled the cell
+   (`height: 100%`), so the measure returned the cell's own height and the
+   cell never shrank: "Waiting for me" stayed a tall card around one row. In
+   such a cell the child takes its own height. A cell without the key keeps
+   the filling child. */
+.cn-dashboard-grid__item--fit[data-v-9f6b1a22] >  .grid-stack-item-content > * {
+	height: auto;
+}
 [data-v-9f6b1a22] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.69.0",
+  "version": "2.71.0",
   "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/CnActionsBar/CnActionsBar.md

@@ -204,3 +204,5 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `sortOptions` | Array | `[]` | Options `{ value, label }` for the sort dropdown. |
 | `sortValue` | String | `''` | Selected sort option value (controlled). |
 | `sortLabel` | String | *(i18n)* | Accessible label for the sort dropdown. |
+
+`showCount` (Boolean, default `true`): `false` drops the "Showing 20 of 258" line. `showActionsMenu` (Boolean, default `true`): `false` drops the overflow Actions menu, for a page that offers its actions as buttons elsewhere (CnIndexPage `headerButtons`).

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -12,13 +12,13 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="hasTotal" class="cn-actions-bar__count">
+			<span v-else-if="showCount && hasTotal" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<!-- @slot after-search Refinement controls rendered beside the search field on the LEFT side of the bar (e.g. a filter menu button). Convention: the left side groups the VISUAL controls — search, filters, view toggle — while the right cluster holds the ACT controls (add, overflow); the standalone sort select is a display control too but keeps its legacy right-side placement. -->
 			<slot name="after-search" />
 			<!-- Counter beside the search (`showCountWithSearch`): after the search and its #after-search controls. The live region stays mounted while there is no total, so results coming back after none are announced too. -->
-			<span v-if="showSearch && showCountWithSearch"
+			<span v-if="showCount && showSearch && showCountWithSearch"
 				class="cn-actions-bar__count cn-actions-bar__count--beside-search"
 				:class="{ 'cn-actions-bar__count--empty': !hasTotal }"
 				aria-live="polite">{{ hasTotal ? countText : '' }}</span>
@@ -140,6 +140,7 @@
 
 			<!-- Actions menu (Refresh, Import, Export, mass actions) -->
 			<NcActions
+				v-if="showActionsMenu"
 				:forceName="true"
 				:inline="inlineActionCount"
 				:menuName="actionsMenuName"
@@ -683,6 +684,31 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Whether the "Showing 20 of 258" line renders where the search field
+		 * is not. `false` drops it, for a page whose title line already says
+		 * how many there are. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showCount: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Whether the overflow Actions menu (Refresh, Import, Export, mass
+		 * actions, header actions) renders. `false` drops it, for a page that
+		 * offers its actions as buttons elsewhere (CnIndexPage
+		 * `headerButtons`). True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showActionsMenu: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Whether to show the Search/Columns sidebar toggle button. Lets the
 		 * index sidebar default to closed and be opened on demand.

package/src/components/CnAppNav/CnAppNav.vue

@@ -188,8 +188,8 @@
 					v-else
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:to="itemTo(item)"
-					:href="itemHref(item)"
+					:to="linkTo(item)"
+					:href="linkHref(item)"
 					:icon="cssIconClass(item)"
 					:active="isActive(item)"
 					:pinned="Boolean(item.pinned)"
@@ -224,8 +224,8 @@
 						v-for="child in visibleChildren(item)"
 						:key="child.id"
 						:name="resolveLabel(child)"
-						:to="itemTo(child)"
-						:href="itemHref(child)"
+						:to="linkTo(child)"
+						:href="linkHref(child)"
 						:icon="cssIconClass(child)"
 						:active="isActive(child)"
 						:pinned="Boolean(child.pinned)"
@@ -304,8 +304,8 @@
 					v-for="item in footerItems"
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:to="itemTo(item)"
-					:href="itemHref(item)"
+					:to="linkTo(item)"
+					:href="linkHref(item)"
 					:icon="cssIconClass(item)"
 					:active="isActive(item)"
 					:data-testid="`cn-nav-entry-${item.id}`"
@@ -402,8 +402,8 @@
 							v-else
 							:key="item.id"
 							:name="resolveLabel(item)"
-							:to="itemTo(item)"
-							:href="itemHref(item)"
+							:to="linkTo(item)"
+							:href="linkHref(item)"
 							:icon="cssIconClass(item)"
 							:active="isActive(item)"
 							:data-cn-route="item.route"
@@ -2026,6 +2026,72 @@ export default {
 			return to
 		},
 
+		/**
+		 * Whether another visible entry links to the same route, so the two
+		 * differ only in `query` or `params` ("All cases" and "Woo requests"
+		 * on one list).
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {boolean} True when the route is shared.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		sharesRoute(item) {
+			if (!item || item.href || item.action || !item.route) {
+				return false
+			}
+			return this.flatEntries.some((entry) => entry !== item && !entry.href && !entry.action && entry.route === item.route)
+		},
+
+		/**
+		 * The app's router, or null when the nav is mounted without one. Read
+		 * from the app's global properties: `this.$router` warns during render
+		 * on an instance that has none.
+		 *
+		 * @return {object|null} The router.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		appRouter() {
+			return this.$?.appContext?.config?.globalProperties?.$router ?? null
+		},
+
+		/**
+		 * The `:to` an entry renders with. An entry that shares its route
+		 * renders as a plain link instead (see `linkHref`): NcAppNavigationItem
+		 * marks a router link active whenever vue-router calls it active, and
+		 * vue-router ignores the query, so "Woo requests" lit up beside "All
+		 * cases" on the unfiltered list. As a plain link only `isActive`
+		 * decides, which marks the entry that matches best.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {object|null} The router target, or null.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		linkTo(item) {
+			if (this.appRouter() && this.sharesRoute(item)) {
+				return null
+			}
+			return this.itemTo(item)
+		},
+
+		/**
+		 * The `:href` an entry renders with: `itemHref`, or for an entry that
+		 * shares its route the address vue-router resolves its target to (a
+		 * click on it is still routed in the app, see `onItemClick`).
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {string|null} The address, or null.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		linkHref(item) {
+			const own = this.itemHref(item)
+			const router = this.appRouter()
+			if (own || !router || !this.sharesRoute(item)) {
+				return own
+			}
+			const to = this.itemTo(item)
+			return to ? router.resolve(to).href : null
+		},
+
 		/**
 		 * Build the `:href` value for an `NcAppNavigationItem`. Returns
 		 * the item's `href` so the entry renders as a real anchor whose
@@ -2175,6 +2241,17 @@ export default {
 				this.cnReplayWalkthrough(item.tourId)
 				return
 			}
+			// An entry that shares its route is a plain link (see linkTo); a
+			// plain click still navigates inside the app. A modified click
+			// (new tab, new window) is left to the browser.
+			if (this.appRouter() && this.sharesRoute(item) && event && !event.defaultPrevented
+				&& !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) && event.button !== 1) {
+				const to = this.itemTo(item)
+				if (to) {
+					event.preventDefault()
+					this.appRouter().push(to).catch(() => {})
+				}
+			}
 			// An entry left without a link (see itemTo) renders a `#` anchor;
 			// following it would change the address, so the click goes nowhere.
 			if (!item.href && this.unfilledRouteParam(item) && event && typeof event.preventDefault === 'function') {