@conduction/nextcloud-vue 2.60.0 → 2.61.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: 34515119 bytes
-sha256: 5f3fcfa87667eab7bfc0a4c99e86f6e46f2b136b344fa184d53d9e04aff4db7e
+size: 34609538 bytes
+sha256: c869939a6bed082d5118c299d33615f1b775c22e374698978bf2cec085595abb

package/dist/nextcloud-vue.css

@@ -2660,9 +2660,17 @@
 	font-weight: 700;
 	line-height: 1.3;
 	color: var(--color-main-text);
-	white-space: nowrap;
+	/* Two lines, then an ellipsis. One line cut a long case title short on a
+	   page with room to spare, and the title is the one thing that says which
+	   record this is. The element carries the full text as its `title`, so a
+	   title cut after two lines is still reachable. `overflow-wrap` breaks a
+	   word longer than the line, which nowrap used to hide. */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
 	overflow: hidden;
-	text-overflow: ellipsis;
+	overflow-wrap: anywhere;
 }
 
 .cn-detail-page__subtitle {
@@ -32005,6 +32013,88 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+.cn-link-cards-page[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(6 * var(--default-grid-baseline));
+	padding: calc(5 * var(--default-grid-baseline));
+}
+.cn-link-cards-page__title[data-v-2f9a546b] {
+	margin: 0 0 var(--default-grid-baseline);
+}
+.cn-link-cards-page__description[data-v-2f9a546b],
+.cn-link-cards-page__empty[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+	max-width: 70ch;
+}
+.cn-link-cards-page__group[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3 * var(--default-grid-baseline));
+}
+.cn-link-cards-page__caption[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	margin: 0;
+	text-transform: uppercase;
+}
+.cn-link-cards-page__grid[data-v-2f9a546b] {
+	display: grid;
+	gap: calc(3 * var(--default-grid-baseline));
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-link-cards-page__cell[data-v-2f9a546b] {
+	display: flex;
+}
+.cn-link-cards-page__card[data-v-2f9a546b] {
+	align-items: flex-start;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-large);
+	color: var(--color-main-text);
+	display: flex;
+	flex: 1;
+	gap: calc(3 * var(--default-grid-baseline));
+	min-width: 0;
+	padding: calc(4 * var(--default-grid-baseline));
+	text-decoration: none;
+}
+.cn-link-cards-page__card[data-v-2f9a546b]:hover {
+	background: var(--color-background-hover);
+	border-color: var(--color-primary-element);
+}
+.cn-link-cards-page__card[data-v-2f9a546b]:focus-visible {
+	border-color: var(--color-primary-element);
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-link-cards-page__icon[data-v-2f9a546b] {
+	color: var(--color-primary-element);
+	flex: none;
+}
+.cn-link-cards-page__body[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	min-width: 0;
+}
+.cn-link-cards-page__label[data-v-2f9a546b] {
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-link-cards-page__card-description[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	line-height: 1.4;
+}
+
+
 /* NcDialog supplies the padding and the heading (via `name`); this div keeps only
    the body's own column layout. */
 .cn-page-config[data-v-9e9a9cf8] {

package/l10n/en.json

@@ -294,6 +294,7 @@
     "JSON pointer": "JSON pointer",
     "Last": "Last",
     "Load more": "Load more",
+    "Nothing to open here.": "Nothing to open here.",
     "To do": "To do",
     "Next step": "Next step",
     "Review": "Review",

package/l10n/nl.json

@@ -294,6 +294,7 @@
     "JSON pointer": "JSON-aanwijzer",
     "Last": "Laatste",
     "Load more": "Meer laden",
+    "Nothing to open here.": "Hier is niets te openen.",
     "To do": "Nog doen",
     "Next step": "Volgende stap",
     "Review": "Beoordelen",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.60.0",
+  "version": "2.61.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/scripts/.jsdoc-baselines.json

@@ -130,6 +130,7 @@
   "CnLifecycleActions": 1,
   "CnLinkButtonWidget": 1,
   "CnLinkButtonWidgetForm": 1,
+  "CnLinkCardsPage": 1,
   "CnLinksWidget": 1,
   "CnLinksWidgetForm": 1,
   "CnLockedBanner": 1,

package/src/components/CnAppNav/CnAppNav.vue

@@ -1184,11 +1184,51 @@ export default {
 			return this.effectiveTranslate(item.label)
 		},
 
+		/**
+		 * Whether a menu entry is the page the reader is on.
+		 *
+		 * Two entries may share a route and differ only in `query` ("My
+		 * work" and "Queue" on one list). The route name alone lit both. An
+		 * entry with a `query` is active only when the address carries that
+		 * query; an entry without one steps back when a sibling's query
+		 * matches, so exactly one of them is marked.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {boolean} True when the entry is the current page.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-menu-entries-that-differ-in-query
+		 */
 		isActive(item) {
 			if (item.href || !item.route) {
 				return false
 			}
-			return item.route === this.activeRouteName
+			if (item.route !== this.activeRouteName) {
+				return false
+			}
+			if (item.query && typeof item.query === 'object') {
+				return this.queryMatches(item)
+			}
+			const siblings = []
+			for (const entry of this.visibleItems) {
+				siblings.push(entry, ...this.visibleChildren(entry))
+			}
+			return !siblings.some((entry) => entry !== item
+				&& entry.route === item.route
+				&& entry.query && typeof entry.query === 'object'
+				&& this.queryMatches(entry))
+		},
+
+		/**
+		 * Whether the address carries every key of an entry's `query`.
+		 * Values are compared as strings, since an address has no numbers.
+		 *
+		 * @param {object} item Menu entry with a `query`.
+		 * @return {boolean} True when every declared key matches.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-menu-entries-that-differ-in-query
+		 */
+		queryMatches(item) {
+			const current = this.$route?.query ?? {}
+			const keys = Object.keys(item.query)
+			return keys.length > 0 && keys.every((key) => String(current[key] ?? '') === String(item.query[key]))
 		},
 
 		/**

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -359,7 +359,9 @@ export default {
 				return this.fillValue(reason)
 			}
 			const title = this.title || (this.content && this.content.title) || ''
-			return title ? this.displayText : ''
+			// A card that sets `text` to the same words as its `title` says
+			// them once.
+			return title && this.displayText !== this.displayTitle ? this.displayText : ''
 		},
 
 		/**
@@ -512,7 +514,12 @@ export default {
 				const value = await readVisibleWhenValue(cond)
 				this.conditionValue = value
 				this.conditionMet = compareVisibleWhen(value, cond.op || 'eq', cond.value)
-			} catch {
+			} catch (error) {
+				// Still hidden: a banner that cannot tell whether it applies
+				// should not claim attention. But not silently, because a
+				// failed count and "nothing to report" look the same on screen.
+				// eslint-disable-next-line no-console
+				console.warn('[CnBannerWidget] visibleWhen could not be evaluated, banner hidden:', error?.message || error)
 				this.conditionMet = false
 				this.conditionValue = null
 			}

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -2748,16 +2748,24 @@ export default {
 		 * the registry branch forwards to CnBannerWidget), or in the legacy
 		 * manifest `props` blob (the fallback getStatsBlockProps and
 		 * getChartProps already honour for their own widget types). `text`
-		 * is only meaningful for banners.
+		 * is only meaningful for banners: it is what the banner would show,
+		 * which for an attention card is its `title` when it has no `text`.
 		 *
 		 * @param {object} def Widget definition.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-an-attention-card-with-a-title-keeps-its-cell
 		 * @return {{ text: string, visibleWhen: (object|null) }}
 		 */
 		widgetDisplayConfig(def) {
 			const content = (def && typeof def.content === 'object' && def.content) || {}
 			const props = (def && typeof def.props === 'object' && def.props) || {}
+			// An attention card (`layout: "attention"`) is headed by `title`,
+			// and its title only FALLS BACK to `text`. Reading `text` alone
+			// called a card with a title and a reason empty, and gave its cell
+			// up before its `visibleWhen` was even looked at.
+			const layout = content.layout || props.layout || ''
+			const title = layout === 'attention' ? (content.title || props.title || '') : ''
 			return {
-				text: content.text || props.text || '',
+				text: content.text || props.text || title || '',
 				visibleWhen: (def && def.visibleWhen) || content.visibleWhen || props.visibleWhen || null,
 			}
 		},

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -103,7 +103,10 @@
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
 						</p>
-						<h2 v-if="displayTitle" class="cn-detail-page__title">
+						<h2
+							v-if="displayTitle"
+							class="cn-detail-page__title"
+							:title="displayTitle">
 							{{ displayTitle }}
 						</h2>
 						<!--

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -496,7 +496,9 @@ export default {
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
-				padding: this.isPlain ? '0' : '16px 24px',
+				// Plain drops the coloured background, not the card padding:
+				// at 0 the greeting sat flush against the card's left edge.
+				padding: this.isPlain ? '16px' : '16px 24px',
 				'box-sizing': 'border-box',
 				gap: '8px',
 				'text-align': this.textAlign,