@conduction/nextcloud-vue 2.62.0 → 2.64.0

package/src/components/CnWalkthrough/CnWalkthrough.vue

@@ -25,7 +25,12 @@
 		     the greyed-out area reaches the app, which is the point. A centered
 		     step spotlights nothing, so its backdrop stays interactive and
 		     dismisses the tour. -->
-		<template v-if="isCentered || !rect">
+		<!-- Quiet: an app dialog is open, or the step's target belongs to
+		     another page. No dim and no cutout, so the overlay never sits on
+		     top of the dialog and never invites a click on the wrong page.
+		     Only the docked coachmark stays. -->
+		<template v-if="quiet" />
+		<template v-else-if="isCentered || !rect">
 			<div v-if="isCentered"
 				class="cn-walkthrough__dim cn-walkthrough__dim--full"
 				@click.self="onBackdrop" />
@@ -50,7 +55,7 @@
 		<!-- Coachmark card -->
 		<div ref="card"
 			class="cn-walkthrough__card"
-			:class="`cn-walkthrough__card--${cardPlacement}`"
+			:class="[`cn-walkthrough__card--${cardPlacement}`, { 'cn-walkthrough__card--docked': quiet }]"
 			:style="cardStyle">
 			<NcButton class="cn-walkthrough__close"
 				variant="tertiary"
@@ -183,7 +188,7 @@ export default {
 		translate: { type: Function, default: null },
 	},
 
-	emits: ['complete', 'dismiss', 'step-change', 'advance', 'handoff'],
+	emits: ['complete', 'dismiss', 'pause', 'progress', 'step-change', 'advance', 'handoff'],
 
 	setup(props) {
 		const wt = useWalkthrough(props.appId, props.manifest, {
@@ -200,6 +205,10 @@ export default {
 			cardPos: { top: 0, left: 0 },
 			cardPlacement: 'bottom',
 			targetEl: null,
+			// An app dialog (NcModal / NcDialog) is open over the page.
+			appModalOpen: false,
+			// The step's target was found on another page than the current one.
+			offPage: false,
 		}
 	},
 
@@ -228,6 +237,18 @@ export default {
 			return this.wt.isLast.value
 		},
 
+		/**
+		 * Whether the overlay steps back: no dim, no cutout, a docked card.
+		 * True while an app dialog is open or the step's target is on
+		 * another page.
+		 *
+		 * @spec openspec/changes/walkthrough-advance-pause-resume/specs/cn-walkthrough/spec.md
+		 * @return {boolean}
+		 */
+		quiet() {
+			return this.appModalOpen || this.offPage
+		},
+
 		isCentered() {
 			return this.step && this.step.placement === 'center'
 		},
@@ -321,6 +342,9 @@ export default {
 		},
 
 		cardStyle() {
+			if (this.quiet) {
+				return {}
+			}
 			if (this.isCentered || !this.rect) {
 				return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
 			}
@@ -339,6 +363,18 @@ export default {
 				 * @type {{ stepId: string, index: number }}
 				 */
 				this.$emit('step-change', { stepId: newStep.id, index: this.index })
+				/**
+				 * @event progress Emitted on every step change so the host can remember where the user is.
+				 * @type {{ tourId: string, stepId: string, index: number }}
+				 */
+				this.$emit('progress', {
+					tourId: (this.wt.activeTour.value && this.wt.activeTour.value.id) || '',
+					stepId: newStep.id,
+					index: this.index,
+				})
+				// A new step finds its own page again.
+				this._homeRoute = null
+				this.offPage = false
 				this.$nextTick(() => this.locateTarget())
 			}
 		},
@@ -377,6 +413,9 @@ export default {
 		// A qualifying auto-start tour whose first-step page is NOT the current
 		// route — held here until the user navigates to that page (see hookRouter).
 		this._pendingAutoTour = null
+		// The route the active step's target was first found on (see locateTarget).
+		this._homeRoute = null
+		this._modalObs = null
 	},
 
 	mounted() {
@@ -386,12 +425,27 @@ export default {
 		window.addEventListener('scroll', this._onScroll, true)
 		window.addEventListener('resize', this._onScroll)
 		this._onKey = (e) => {
-			if (e.key === 'Escape') {
-				this.onBackdrop()
+			if (e.key !== 'Escape' || !this.active) {
+				return
 			}
+			// ESC while an app dialog is open belongs to that dialog. It used
+			// to dismiss the tour too, so closing a create form ended it.
+			if (this.isAppModalOpen()) {
+				return
+			}
+			this.onBackdrop()
 		}
 		window.addEventListener('keydown', this._onKey)
-		this._onObjectCreated = (e) => this.wt.notify({ kind: 'object-created', object: (e && e.detail) || {} })
+		this._onObjectCreated = (e) => {
+			const d = (e && e.detail) || {}
+			this.wt.notify({
+				kind: 'object-created',
+				register: d.register,
+				schema: d.schema,
+				object: d.object && typeof d.object === 'object' ? d.object : d,
+			})
+		}
+		this.watchAppModals()
 		window.addEventListener('cn-walkthrough:object-created', this._onObjectCreated)
 		this.hookRouter()
 		if (this.active) {
@@ -404,6 +458,10 @@ export default {
 		window.removeEventListener('resize', this._onScroll)
 		window.removeEventListener('keydown', this._onKey)
 		window.removeEventListener('cn-walkthrough:object-created', this._onObjectCreated)
+		if (this._modalObs) {
+			this._modalObs.disconnect()
+			this._modalObs = null
+		}
 		if (typeof this._routeUnhook === 'function') {
 			this._routeUnhook()
 		}
@@ -411,6 +469,51 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether an app dialog (NcModal / NcDialog, or any other modal
+		 * dialog that is not this overlay) is open.
+		 *
+		 * @spec openspec/changes/walkthrough-advance-pause-resume/specs/cn-walkthrough/spec.md
+		 * @return {boolean}
+		 */
+		isAppModalOpen() {
+			if (typeof document === 'undefined') {
+				return false
+			}
+			const own = this.$el
+			const nodes = document.querySelectorAll('.modal-mask, [role="dialog"][aria-modal="true"]')
+			for (const node of nodes) {
+				if (own && typeof own.contains === 'function' && (own === node || own.contains(node))) {
+					continue
+				}
+				return true
+			}
+			return false
+		},
+
+		/**
+		 * Follow app dialogs opening and closing, so the overlay steps back
+		 * while one is open and comes back after.
+		 *
+		 * @return {void}
+		 */
+		watchAppModals() {
+			const update = () => {
+				const open = this.isAppModalOpen()
+				if (open !== this.appModalOpen) {
+					this.appModalOpen = open
+					if (!open && this.active) {
+						this.$nextTick(() => this.locateTarget())
+					}
+				}
+			}
+			update()
+			if (typeof window !== 'undefined' && window.MutationObserver) {
+				this._modalObs = new MutationObserver(update)
+				this._modalObs.observe(document.body, { childList: true, subtree: true })
+			}
+		},
+
 		/**
 		 * Translate an i18n key/text via the `translate` prop when given.
 		 *
@@ -598,6 +701,23 @@ export default {
 				return
 			}
 			const el = this.resolveTarget(this.step)
+			// A step's target belongs to the page it was first found on. The
+			// same `index-add` button exists on every list page, and a step
+			// left half-done on Products used to spotlight the Clients page's
+			// button too, inviting a click that belonged to another step.
+			const kind = (this.step.target && this.step.target.kind) || ''
+			const routeName = this.$route ? this.$route.name : null
+			if (el && kind !== 'page' && kind !== 'nav-item' && routeName) {
+				if (this._homeRoute === null) {
+					this._homeRoute = routeName
+				} else if (this._homeRoute !== routeName) {
+					this.offPage = true
+					this.targetEl = null
+					this.rect = null
+					return
+				}
+			}
+			this.offPage = false
 			this.targetEl = el
 			if (!el) {
 				// Optional step whose target is absent → skip; else wait for it.
@@ -862,6 +982,10 @@ export default {
 		 * @return {void}
 		 */
 		focusCard() {
+			// Never take focus from an open app dialog.
+			if (this.appModalOpen) {
+				return
+			}
 			this.$nextTick(() => {
 				const btn = this.$refs.firstBtn && this.$refs.firstBtn.$el
 				if (btn && typeof btn.focus === 'function') {
@@ -1058,16 +1182,20 @@ export default {
 		},
 
 		/**
-		 * Dismiss the tour from a backdrop click or ESC.
+		 * Pause the tour from a backdrop click or ESC. The tour hides and
+		 * keeps its step; only Skip (the close button) and Finish end it.
+		 * Pressing ESC used to dismiss it, and the host recorded that as
+		 * "seen", so the tour never came back.
 		 *
+		 * @spec openspec/changes/walkthrough-advance-pause-resume/specs/cn-walkthrough/spec.md
 		 * @return {void}
 		 */
 		onBackdrop() {
-			this.wt.dismiss()
+			this.wt.pause()
 			/**
-			 * @event dismiss Emitted when the user dismisses the tour (backdrop / ESC).
+			 * @event pause Emitted when the user hides the tour (backdrop / ESC). The tour can continue later.
 			 */
-			this.$emit('dismiss')
+			this.$emit('pause')
 		},
 	},
 }
@@ -1126,6 +1254,11 @@ export default {
 	pointer-events: auto;
 }
 
+.cn-walkthrough__card--docked {
+	inset-block-end: 16px;
+	inset-inline-start: 16px;
+}
+
 .cn-walkthrough__close {
 	/* !important beats NcButton's own `position: relative`, which would otherwise
 	   leave the close button in-flow at the card's top-left. */

package/src/components/CnWidgetGrid/builtInWidgets.js

@@ -25,6 +25,7 @@ import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnObjectMetadataWidget from '../CnObjectMetadataWidget/CnObjectMetadataWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
 import CnTextWidget from '../CnTextWidget/CnTextWidget.vue'
+import CnTimelineWidget from '../CnTimelineWidget/CnTimelineWidget.vue'
 import CnWidgetCardGrid from '../CnWidgetCardGrid/CnWidgetCardGrid.vue'
 import CnWidgetFormRenderer from '../CnWidgetFormRenderer/CnWidgetFormRenderer.vue'
 import CnWidgetMapViewer from '../CnWidgetMapViewer/CnWidgetMapViewer.vue'
@@ -84,6 +85,7 @@ export const BUILT_IN_WIDGETS = {
 	integration: CnIntegrationWidget,
 	banner: CnBannerWidget,
 	'audit-trail': CnAuditTrailWidget,
+	timeline: CnTimelineWidget,
 	header: CnHeaderWidget,
 	text: CnTextWidget,
 	divider: CnDividerWidget,

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -72,6 +72,7 @@ import '../CnObjectDataWidget/dashboardRegistration.js'
 import '../CnObjectGeoWidget/dashboardRegistration.js'
 import '../CnWidgetObjectTable/dashboardRegistration.js'
 import '../CnAuditTrailWidget/dashboardRegistration.js'
+import '../CnTimelineWidget/dashboardRegistration.js'
 import '../CnKbSearchWidget/index.js'
 import '../CnInteractionFormWidget/index.js'
 import '../CnBannerWidget/index.js'

package/src/components/CnWidgetWrapper/CnWidgetWrapper.md

@@ -163,3 +163,7 @@ Request a feature / Report a bug / Documentation render on every widget; the sha
 ## High contrast
 
 `high-contrast` declares that this widget wants a high contrast treatment. The flag reaches the theme; the component picks no colour. See [the reference page](../../../docs/components/cn-widget-wrapper.md#high-contrast).
+
+### A text link in the header (`headerLink`)
+
+`headerLink` (`{ label, route?, params?, query?, href? }`) draws one text link in the header before the overflow menu, such as "All deadlines".

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -69,6 +69,17 @@
 			     It used to gate both, so a caller who switched the menu off
 			     also lost the Save button for an inline edit, silently. -->
 			<div v-if="actionsAreVisible()" class="cn-widget-wrapper__actions">
+				<!-- One text link in the header (`headerLink`): "All deadlines",
+				     "To the board". A route is a router link, an href a plain
+				     anchor. Sits before the slot and the overflow menu. -->
+				<component
+					:is="headerLinkTag"
+					v-if="headerLinkTag"
+					class="cn-widget-wrapper__header-link"
+					data-testid="cn-widget-wrapper-header-link"
+					v-bind="headerLinkAttrs">
+					{{ headerLinkLabel }}
+				</component>
 				<!-- @slot actions Custom action buttons rendered before the
 				     built-in overflow menu. -->
 				<slot name="actions" />
@@ -351,6 +362,22 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * One text link in the header's actions group, before the overflow
+		 * menu: `{ label, route?, params?, query?, href? }`. A `route` is a
+		 * named router link (needs a router), an `href` a plain anchor. The
+		 * label goes through the host translate function. Null (the
+		 * default) draws nothing. Manifest: `headerLink` on the widget
+		 * definition or its layout entry.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @type {{label: string, route?: string, params?: object, query?: object, href?: string}|null}
+		 */
+		headerLink: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Whether the header's overflow action menu (Refresh / Documentation /
 		 * Request-a-feature + any `#action-items`) renders. Shown by default;
@@ -634,6 +661,62 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The header link's tag: `router-link` for a route (when a router is
+		 * mounted), `a` for an href, '' when there is no usable link.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkTag() {
+			const link = this.headerLink
+			if (!link || typeof link.label !== 'string' || link.label === '') {
+				return ''
+			}
+			if (link.route && this.$router) {
+				return 'router-link'
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return 'a'
+			}
+			return ''
+		},
+
+		/**
+		 * The header link's attributes for its tag.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {object}
+		 */
+		headerLinkAttrs() {
+			const link = this.headerLink || {}
+			if (this.headerLinkTag === 'router-link') {
+				const to = { name: link.route }
+				if (link.params && typeof link.params === 'object') {
+					to.params = link.params
+				}
+				if (link.query && typeof link.query === 'object') {
+					to.query = link.query
+				}
+				return { to }
+			}
+			if (this.headerLinkTag === 'a') {
+				return { href: link.href }
+			}
+			return {}
+		},
+
+		/**
+		 * The header link's text, through the host translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @return {string}
+		 */
+		headerLinkLabel() {
+			const label = this.headerLink && this.headerLink.label
+			return label ? this.effectiveTranslate(label) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -877,7 +960,7 @@ export default {
 		 * @return {boolean} True when the group would hold a visible control.
 		 */
 		actionsAreVisible() {
-			return this.showActions || this.actionsSlotRenders()
+			return this.showActions || this.actionsSlotRenders() || Boolean(this.headerLinkTag)
 		},
 
 		/**
@@ -1127,6 +1210,29 @@ export default {
 	flex-shrink: 0;
 }
 
+/* The header's text link (`headerLink`). Theme hooks: --cn-widget-header-link-size
+   and --cn-widget-header-link-weight. */
+.cn-widget-wrapper__header-link {
+	align-self: center;
+	padding: 0 calc(1 * var(--default-grid-baseline));
+	color: var(--color-primary-element);
+	font-size: var(--cn-widget-header-link-size, 14px);
+	font-weight: var(--cn-widget-header-link-weight, 600);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.cn-widget-wrapper__header-link:hover,
+.cn-widget-wrapper__header-link:focus-visible {
+	text-decoration: underline;
+}
+
+.cn-widget-wrapper__header-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
 /* Every widget's header icon is coloured — `--cn-widget-icon-color` is set on
    the header from titleIconStyle, and defaults to the theme colour if a
    wrapper is ever rendered without it. Material-design-icon components paint

package/src/components/CnWizardDialog/CnWizardDialog.vue

@@ -105,7 +105,7 @@
 				</NcButton>
 				<NcButton variant="primary"
 					data-testid="cn-wizard-next"
-					:disabled="loading"
+					:disabled="loading || nextDisabled"
 					@click="isLast ? submit() : next()">
 					<template #icon>
 						<NcLoadingIcon v-if="loading" :size="20" />
@@ -280,6 +280,19 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * Disable the Next / Submit button, whatever the step's `validate`
+		 * would say. For a host that knows the wizard cannot go on yet, such as
+		 * `CnSetupWizard` while a required app is missing.
+		 *
+		 * @type {boolean}
+		 * @spec openspec/changes/setup-wizard-card-load-and-dependency-gate/specs/cn-setup-wizard/spec.md#requirement-the-wizard-checks-dependencies-before-any-step
+		 */
+		nextDisabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['close', 'step-change', 'submit'],
@@ -396,6 +409,9 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async next() {
+			if (this.nextDisabled) {
+				return
+			}
 			if (this.isLast) {
 				return this.submit()
 			}
@@ -467,6 +483,9 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async submit() {
+			if (this.nextDisabled) {
+				return
+			}
 			const ok = await this.runValidation()
 			if (!ok) {
 				return

package/src/components/index.js

@@ -17,6 +17,7 @@ export { CnLeafDependencySettings } from './CnLeafDependencySettings/index.js'
 export { CnStatsBlock } from './CnStatsBlock/index.js'
 export { CnStructuredDocReview } from './CnStructuredDocReview/index.js'
 export { CnConfigurationCard } from './CnConfigurationCard/index.js'
+export { CnAdminActionCard } from './CnAdminActionCard/index.js'
 export { CnVersionInfoCard } from './CnVersionInfoCard/index.js'
 export { CnAdminSettingsShell } from './CnAdminSettingsShell/index.js'
 export { CnCellRenderer } from './CnCellRenderer/index.js'
@@ -103,6 +104,7 @@ export { CnSearchPage } from './CnSearchPage/index.js'
 export { CnCommandPalette } from './CnCommandPalette/index.js'
 export { CnTabbedFormDialog } from './CnTabbedFormDialog/index.js'
 export { CnTimelineStages } from './CnTimelineStages/index.js'
+export { CnTimelineWidget } from './CnTimelineWidget/index.js'
 export { CnTreeView } from './CnTreeView/index.js'
 export { CnUserActionMenu } from './CnUserActionMenu/index.js'
 export { CnNotesCard } from './CnNotesCard/index.js'

package/src/composables/useDependencyCheck.js

@@ -0,0 +1,61 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+import { useAppStatus } from './useAppStatus.js'
+
+/**
+ * Resolve `manifest.dependencies` entries to their live status.
+ *
+ * Accepts the manifest's own shape: an app-id string (a REQUIRED dependency)
+ * or `{ id, name?, required? }` where `required` defaults to true. Each entry
+ * becomes `{ id, name, required, installed, enabled }`.
+ *
+ * `serverStatuses` is the optional `dependency_statuses` initial state an app
+ * injects from PHP, keyed by app id: `{ installed, enabled }`. It wins over
+ * the browser heuristic, because only the server can tell "installed but
+ * disabled" from "not installed". Without it, `useAppStatus` answers, which
+ * is the same resolution `CnAppRoot` uses for its dependency-missing phase.
+ *
+ * @param {Array<string|{id: string, name?: string, required?: boolean}>} entries The declared dependencies.
+ * @param {object} [serverStatuses] Server-reported statuses keyed by app id.
+ * @return {Array<{id: string, name: string, required: boolean, installed: boolean, enabled: boolean}>} One row per valid entry.
+ *
+ * @spec openspec/changes/setup-wizard-card-load-and-dependency-gate/specs/cn-setup-wizard/spec.md#requirement-the-wizard-checks-dependencies-before-any-step
+ *
+ * @example
+ * const missing = checkDependencies(manifest.dependencies)
+ *   .filter((d) => d.required && !(d.installed && d.enabled))
+ */
+export function checkDependencies(entries, serverStatuses = {}) {
+	const list = Array.isArray(entries) ? entries : []
+	const server = (serverStatuses && typeof serverStatuses === 'object') ? serverStatuses : {}
+	return list
+		.map((entry) => {
+			const isObject = entry !== null && typeof entry === 'object'
+			const id = isObject ? entry.id : entry
+			if (typeof id !== 'string' || id === '') {
+				return null
+			}
+			const required = isObject ? entry.required !== false : true
+			const name = (isObject && entry.name) || id
+			const reported = server[id]
+			if (reported !== undefined && reported !== null) {
+				return { id, name, required, installed: !!reported.installed, enabled: !!reported.enabled }
+			}
+			const status = useAppStatus(id)
+			return { id, name, required, installed: !!status.installed.value, enabled: !!status.enabled.value }
+		})
+		.filter((row) => row !== null)
+}
+
+/**
+ * Whether a resolved dependency row is usable: installed AND enabled.
+ *
+ * @param {{installed: boolean, enabled: boolean}} row A row from `checkDependencies`.
+ * @return {boolean} True when the app can be used.
+ */
+export function isDependencyResolved(row) {
+	return !!row && row.installed === true && row.enabled === true
+}