@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/l10n/en.json

@@ -294,6 +294,25 @@
     "JSON pointer": "JSON pointer",
     "Last": "Last",
     "Load more": "Load more",
+    "To do": "To do",
+    "Next step": "Next step",
+    "Review": "Review",
+    "No documents to review.": "No documents to review.",
+    "Partly public": "Partly public",
+    "To review": "To review",
+    "{reviewed} of {total} reviewed": "{reviewed} of {total} reviewed",
+    "Documents to review": "Documents to review",
+    "Reply": "Reply",
+    "Send": "Send",
+    "You": "You",
+    "No messages yet.": "No messages yet.",
+    "Conversation": "Conversation",
+    "The message could not be sent. Try again.": "The message could not be sent. Try again.",
+    "More": "More",
+    "More tabs": "More tabs",
+    "Due soon": "Due soon",
+    "Administration": "Administration",
+    "Details": "Details",
     "Actor": "Actor",
     "All types": "All types",
     "All actors": "All actors",
@@ -374,6 +393,7 @@
     "One of": "One of",
     "Open": "Open",
     "Open access:": "Open access:",
+    "Open row": "Open row",
     "Operator": "Operator",
     "Order": "Order",
     "Owner:": "Owner:",
@@ -992,7 +1012,41 @@
     "Capabilities in {group}, rated per system.": "Capabilities in {group}, rated per system.",
     "Yes": "Yes",
     "Partial": "Partial",
-    "No": "No"
+    "No": "No",
+    "Nothing planned": "Nothing planned",
+    "today": "today",
+    "Late": "Late",
+    "This week, day by day": "This week, day by day",
+    "The items for this week could not be loaded.": "The items for this week could not be loaded.",
+    "Nothing to show yet": "Nothing to show yet",
+    "The numbers could not be loaded.": "The numbers could not be loaded.",
+    "Date field": "Date field",
+    "Title field": "Title field",
+    "Extra fields under the title (comma separated)": "Extra fields under the title (comma separated)",
+    "Days shown": "Days shown",
+    "Page an item opens (page id, optional)": "Page an item opens (page id, optional)",
+    "Text for a day without items": "Text for a day without items",
+    "A date field is required": "A date field is required",
+    "Field to group by": "Field to group by",
+    "Order of the segments (values, comma separated)": "Order of the segments (values, comma separated)",
+    "Text when there is nothing to count": "Text when there is nothing to count",
+    "A field to group by is required": "A field to group by is required",
+    "Layout": "Layout",
+    "Label above the title": "Label above the title",
+    "Reason (why this needs attention)": "Reason (why this needs attention)",
+    "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}",
+    "Good morning": "Good morning",
+    "Good afternoon, {name}": "Good afternoon, {name}",
+    "Good afternoon": "Good afternoon",
+    "Good evening, {name}": "Good evening, {name}",
+    "Good evening": "Good evening",
+    "Greet the user by name instead of showing the title": "Greet the user by name instead of showing the title",
+    "Show the date of today above the heading": "Show the date of today above the heading",
+    "Plain header without a coloured background": "Plain header without a coloured background",
+    "Loading…": "Loading…",
+    "A register and schema are required": "A register and schema are required"
   },
   "plurals": {
     "%n year": ["%n year", "%n years"],

package/l10n/nl.json

@@ -294,6 +294,25 @@
     "JSON pointer": "JSON-aanwijzer",
     "Last": "Laatste",
     "Load more": "Meer laden",
+    "To do": "Nog doen",
+    "Next step": "Volgende stap",
+    "Review": "Beoordelen",
+    "No documents to review.": "Geen documenten om te beoordelen.",
+    "Partly public": "Deels openbaar",
+    "To review": "Nog beoordelen",
+    "{reviewed} of {total} reviewed": "{reviewed} van {total} beoordeeld",
+    "Documents to review": "Documenten om te beoordelen",
+    "Reply": "Antwoord",
+    "Send": "Versturen",
+    "You": "U",
+    "No messages yet.": "Nog geen berichten.",
+    "Conversation": "Gesprek",
+    "The message could not be sent. Try again.": "Het bericht is niet verstuurd. Probeer het opnieuw.",
+    "More": "Meer",
+    "More tabs": "Meer tabbladen",
+    "Due soon": "Bijna te laat",
+    "Administration": "Beheer",
+    "Details": "Details",
     "Actor": "Actor",
     "All types": "Alle typen",
     "All actors": "Alle actoren",
@@ -372,6 +391,7 @@
     "One of": "Één van",
     "Open": "Openen",
     "Open access:": "Openbare toegang:",
+    "Open row": "Rij openen",
     "Operator": "Operator",
     "Order": "Volgorde",
     "Owner:": "Eigenaar:",
@@ -1036,7 +1056,41 @@
     "Capabilities in {group}, rated per system.": "Functionaliteiten in {group}, beoordeeld per systeem.",
     "Yes": "Ja",
     "Partial": "Gedeeltelijk",
-    "No": "Nee"
+    "No": "Nee",
+    "Nothing planned": "Niets gepland",
+    "today": "vandaag",
+    "Late": "Te laat",
+    "This week, day by day": "Deze week, dag voor dag",
+    "The items for this week could not be loaded.": "De items van deze week konden niet worden geladen.",
+    "Nothing to show yet": "Nog niets te tonen",
+    "The numbers could not be loaded.": "De aantallen konden niet worden geladen.",
+    "Date field": "Datumveld",
+    "Title field": "Titelveld",
+    "Extra fields under the title (comma separated)": "Extra velden onder de titel (gescheiden door komma's)",
+    "Days shown": "Aantal dagen",
+    "Page an item opens (page id, optional)": "Pagina die een item opent (pagina-id, optioneel)",
+    "Text for a day without items": "Tekst voor een dag zonder items",
+    "A date field is required": "Een datumveld is verplicht",
+    "Field to group by": "Veld om op te groeperen",
+    "Order of the segments (values, comma separated)": "Volgorde van de segmenten (waarden, gescheiden door komma's)",
+    "Text when there is nothing to count": "Tekst als er niets te tellen is",
+    "A field to group by is required": "Een veld om op te groeperen is verplicht",
+    "Layout": "Opmaak",
+    "Label above the title": "Label boven de titel",
+    "Reason (why this needs attention)": "Reden (waarom dit aandacht vraagt)",
+    "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}",
+    "Good morning": "Goedemorgen",
+    "Good afternoon, {name}": "Goedemiddag, {name}",
+    "Good afternoon": "Goedemiddag",
+    "Good evening, {name}": "Goedenavond, {name}",
+    "Good evening": "Goedenavond",
+    "Greet the user by name instead of showing the title": "Begroet de gebruiker bij naam in plaats van de titel te tonen",
+    "Show the date of today above the heading": "Toon de datum van vandaag boven de kop",
+    "Plain header without a coloured background": "Eenvoudige kop zonder gekleurde achtergrond",
+    "Loading…": "Laden…",
+    "A register and schema are required": "Een register en schema zijn verplicht"
   },
   "plurals": {
     "%n year": ["%n jaar", "%n jaar"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.58.0",
+  "version": "2.60.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

@@ -41,6 +41,7 @@
   "CnContainerWidget": 1,
   "CnContainerWidgetForm": 1,
   "CnContextMenu": 1,
+  "CnConversationThread": 1,
   "CnCopyDialog": 0.82,
   "CnCospendCreate": 1,
   "CnCospendPicker": 1,
@@ -67,6 +68,7 @@
   "CnDetailWidgetHost": 1,
   "CnDividerWidget": 1,
   "CnDividerWidgetForm": 1,
+  "CnDocumentReviewList": 1,
   "CnEmailPicker": 1,
   "CnExportWizard": 1,
   "CnFacetSidebar": 0.78,
@@ -152,6 +154,7 @@
   "CnNcDashboardWidgetForm": 1,
   "CnNcWidgetGridPicker": 1,
   "CnNcWidgetWidget": 1,
+  "CnNextStepCard": 1,
   "CnNoteCard": 0.67,
   "CnNotesCard": 0.81,
   "CnNotificationPreferences": 1,

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -109,7 +109,7 @@
 				@event add
 				@description User clicked the primary Add button. No payload.
 			-->
-			<!-- With `addHref` / `addTo` the button is a real link (middle-click, new tab), and still emits `add`. -->
+			<!-- With `addHref` / `addTo` the button is a real link (middle-click, new tab), and still emits `add`, except on a modified click, which opens a new tab. -->
 			<NcButton v-if="showAdd"
 				variant="primary"
 				:disabled="addDisabled"
@@ -153,8 +153,7 @@
 
 				<NcActionLink v-if="documentationUrl"
 					:href="documentationUrl"
-					target="_blank"
-					rel="noopener noreferrer">
+					target="_blank">
 					<template #icon>
 						<BookOpenVariantOutline :size="20" />
 					</template>
@@ -372,6 +371,7 @@ import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
 import ViewListOutline from 'vue-material-design-icons/ViewListOutline.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -923,12 +923,17 @@ export default {
 
 		/**
 		 * Add button click: a plain click on an in-app link routes in place,
-		 * anything else on a link is the browser's. Emits `add` either way.
+		 * anything else on a link is the browser's. Emits `add`, except for a
+		 * modified click on a link, which opens in a new tab: a host `@add`
+		 * would otherwise run in the tab the user is leaving.
 		 *
 		 * @param {MouseEvent} event The click event.
 		 */
 		onAddClick(event) {
 			if (this.addLink) {
+				if (isModifiedClick(event)) {
+					return
+				}
 				followItemActionLink(event, this.addLink, this.$router)
 			}
 			this.$emit('add')
@@ -936,13 +941,17 @@ export default {
 
 		/**
 		 * A header link entry was clicked: route a plain in-app click and emit
-		 * `header-action` as the button would.
+		 * `header-action` as the button would. A modified click is the
+		 * browser's alone (a new tab), so nothing is emitted for it.
 		 *
 		 * @param {object} entry The header action.
 		 * @param {object} link The resolved link.
 		 * @param {MouseEvent} event The click event.
 		 */
 		onHeaderLinkClick(entry, link, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
 			followItemActionLink(event, link, this.$router)
 			this.$emit('header-action', { action: entry.id, id: entry.id })
 		},

package/src/components/CnActionsMenu/CnActionsMenu.vue

@@ -69,7 +69,6 @@
 				v-if="showRequestFeature && resolvedRequestFeatureUrl"
 				:href="resolvedRequestFeatureUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-request-feature`"
 				:closeAfterClick="true"
 				@click="onRequestFeatureClick">
@@ -92,7 +91,6 @@
 				v-if="showReportBug && resolvedReportBugUrl"
 				:href="resolvedReportBugUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-report-bug`"
 				:closeAfterClick="true">
 				<template #icon>
@@ -104,7 +102,6 @@
 				v-if="showDocumentation && resolvedDocumentationUrl"
 				:href="resolvedDocumentationUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-documentation`"
 				:closeAfterClick="true">
 				<template #icon>
@@ -493,6 +490,19 @@ export default {
 			default: () => t('nextcloud-vue', 'Actions'),
 		},
 
+		/**
+		 * Tell the menu that `#primary-items` has content. Only needed by a
+		 * host that switches every built-in item off: the menu decides whether
+		 * to render at all in a computed, and a slot that fills in later (a
+		 * page's actions arrive after mount) is not something a computed
+		 * notices. With any built-in item showing, the menu renders anyway
+		 * and this changes nothing.
+		 */
+		hasPrimaryItems: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Prefix for the `data-testid`s emitted on the menu container and
 		 * its items: `<base>-actions` (container), `<base>-action-refresh`,
@@ -545,7 +555,7 @@ export default {
 			if (this.showRequestFeature) {
 				return true
 			}
-			if (this.$slots['primary-items']) {
+			if (this.hasPrimaryItems || this.$slots['primary-items']) {
 				return true
 			}
 			return Boolean(this.$slots['action-items']) || Boolean(this.$slots && this.$slots['action-items'])

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -47,8 +47,7 @@
 				<NcButton
 					v-if="showHelp && helpUrl"
 					:href="helpUrl"
-					target="_blank"
-					rel="noopener noreferrer">
+					target="_blank">
 					<template #icon>
 						<HelpCircleOutline :size="20" />
 					</template>

package/src/components/CnAppNav/CnAppNav.md

@@ -159,3 +159,29 @@ export default {
 }
 </script>
 ```
+
+A brand block at the top. The `brand` prop takes a logo, a name and a caption, and the manifest's `nav.brand` is the fallback. Use the `#brand` slot to draw the block yourself:
+
+```vue {static}
+<template>
+  <div style="height: 240px; width: 260px; background: var(--color-main-background); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden;">
+    <CnAppNav
+      :manifest="manifest"
+      :brand="{ name: 'dossiq', caption: 'Gemeente Zuiddrecht' }"
+      :translate="(key) => key" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      manifest: {
+        menu: [
+          { id: 'cases', label: 'All cases', icon: 'icon-folder', route: 'cases', order: 1 },
+        ],
+      },
+    }
+  },
+}
+</script>
+```

package/src/components/CnAppNav/CnAppNav.vue

@@ -75,7 +75,34 @@
 -->
 <template>
 	<NcAppNavigation :aria-label="ariaLabel" data-testid="cn-nav">
-		<template v-if="$slots.search || $slots.search" #search>
+		<template v-if="$slots.search || $slots.brand || resolvedBrand" #search>
+			<!--
+				@slot brand
+				@description Replace the brand block at the very top of the
+				navigation. Default content: the logo, name and caption from
+				the `brand` prop or the manifest's `nav.brand`. Renders
+				nothing when neither is set.
+				@binding {object|null} brand The resolved brand (`{ logo, name, caption, alt }`), or null.
+			-->
+			<slot name="brand" :brand="resolvedBrand">
+				<div
+					v-if="resolvedBrand"
+					class="cn-app-nav__brand"
+					data-testid="cn-nav-brand">
+					<!-- Decorative beside a name: the name already says whose
+					     app this is, and an alt text would say it twice. A logo
+					     on its own carries the name as its alt text. -->
+					<img
+						v-if="resolvedBrand.logo"
+						class="cn-app-nav__brand-logo"
+						:src="resolvedBrand.logo"
+						:alt="resolvedBrand.name ? '' : resolvedBrand.alt">
+					<span v-if="resolvedBrand.name || resolvedBrand.caption" class="cn-app-nav__brand-text">
+						<strong v-if="resolvedBrand.name" class="cn-app-nav__brand-name">{{ resolvedBrand.name }}</strong>
+						<span v-if="resolvedBrand.caption" class="cn-app-nav__brand-caption">{{ resolvedBrand.caption }}</span>
+					</span>
+				</div>
+			</slot>
 			<!--
 				@slot search
 				@description Forwarded into NcAppNavigation's #search slot.
@@ -531,6 +558,20 @@ export default {
 			type: String,
 			default: () => t('nextcloud-vue', 'Main navigation'),
 		},
+
+		/**
+		 * The brand block at the top of the navigation:
+		 * `{ logo?, name?, caption?, alt? }`. `logo` is an image URL, `name`
+		 * the app or organisation name, `caption` a line under it. Falls back
+		 * to the manifest's `nav.brand`. `null` (the default) with no manifest
+		 * brand renders nothing.
+		 *
+		 * @type {{logo?: string, name?: string, caption?: string, alt?: string}|null}
+		 */
+		brand: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	emits: ['primary-action', 'primary-action-click'],
@@ -560,6 +601,31 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The brand to draw: the `brand` prop, else the manifest's
+		 * `nav.brand`. Name and caption go through the translate function,
+		 * like every other manifest label. Null when there is nothing to
+		 * show, which is what keeps the block out of a navigation that
+		 * declares no brand.
+		 *
+		 * @return {{logo: string, name: string, caption: string, alt: string}|null} The brand, or null.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-navigation-brand
+		 */
+		resolvedBrand() {
+			const declared = this.brand ?? this.effectiveManifest?.nav?.brand
+			if (!declared || typeof declared !== 'object') {
+				return null
+			}
+			const text = (value) => (typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : '')
+			const brand = {
+				logo: typeof declared.logo === 'string' ? declared.logo : '',
+				name: text(declared.name),
+				caption: text(declared.caption),
+				alt: text(declared.alt),
+			}
+			return (brand.logo || brand.name || brand.caption) ? brand : null
+		},
+
 		/**
 		 * Manifest-declared root-level primary action (`nav.primaryAction`)
 		 * — retained for backwards compatibility with code that reads this
@@ -1479,6 +1545,43 @@ export default {
 </script>
 
 <style>
+/* The brand block at the top of the navigation. */
+.cn-app-nav__brand {
+	align-items: center;
+	display: flex;
+	gap: calc(2.5 * var(--default-grid-baseline));
+	min-width: 0;
+	padding: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+}
+
+.cn-app-nav__brand-logo {
+	flex: none;
+	height: 34px;
+	max-width: 50%;
+	object-fit: contain;
+	width: auto;
+}
+
+.cn-app-nav__brand-text {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.15;
+	min-width: 0;
+}
+
+.cn-app-nav__brand-name {
+	color: var(--color-main-text);
+	font-size: 1.2em;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+
+.cn-app-nav__brand-caption {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+	overflow-wrap: anywhere;
+}
+
 /*
  * The legacy `icon-*` classes in Nextcloud render a background-image
  * with a hardcoded dark fill, so they stay grey when an entry becomes