@conduction/nextcloud-vue 2.106.0 → 2.107.0

package/l10n/en.json

@@ -1743,7 +1743,62 @@
     "{message} until {time}": "{message} until {time}",
     "Away": "Away",
     "Busy": "Busy",
-    "No one in the team": "No one in the team"
+    "No one in the team": "No one in the team",
+    "Also replace the criteria with the current filters": "Also replace the criteria with the current filters",
+    "Manage \"{name}\"": "Manage \"{name}\"",
+    "Presentation": "Presentation",
+    "Save a copy": "Save a copy",
+    "Save the current filters to \"{name}\"": "Save the current filters to \"{name}\"",
+    "Share": "Share",
+    "Update with current filters": "Update with current filters",
+    "Share with people and groups": "Share with people and groups",
+    "Add to menu": "Add to menu",
+    "Remove from menu": "Remove from menu",
+    "Labels": "Labels",
+    "Add a view to the menu from Filters": "Add a view to the menu from Filters",
+    "Also for whoever it is shared with": "Also for whoever it is shared with",
+    "By {owner}": "By {owner}",
+    "Criteria": "Criteria",
+    "From colleagues. You can use them and save a copy.": "From colleagues. You can use them and save a copy.",
+    "It is shared with {names}; it leaves their lists too.": "It is shared with {names}; it leaves their lists too.",
+    "Keep what is saved": "Keep what is saved",
+    "Keeps the current search term, filters and sort under a name.": "Keeps the current search term, filters and sort under a name.",
+    "May update": "May update",
+    "May use": "May use",
+    "Name, search term, filters and sort": "Name, search term, filters and sort",
+    "People and groups from your Nextcloud, as when sharing a file.": "People and groups from your Nextcloud, as when sharing a file.",
+    "Person": "Person",
+    "Read only. Shipped with the app; a new version updates them.": "Read only. Shipped with the app; a new version updates them.",
+    "Replace with the current search term, filters and sort": "Replace with the current search term, filters and sort",
+    "Rights of {name}": "Rights of {name}",
+    "Share with": "Share with",
+    "Shared with": "Shared with",
+    "Stop sharing with {name}": "Stop sharing with {name}",
+    "The items themselves stay. This cannot be undone.": "The items themselves stay. This cannot be undone.",
+    "With people and groups": "With people and groups",
+    "Appears under My views in the menu on the left": "Appears under My views in the menu on the left",
+    "Could not save the view": "Could not save the view",
+    "Default views": "Default views",
+    "Delete view": "Delete view",
+    "Delete view?": "Delete view?",
+    "Edit view: {name}": "Edit view: {name}",
+    "View \"{name}\" saved": "View \"{name}\" saved",
+    "View name": "View name",
+    "Give the view another name, or replace its criteria with what the list shows now.": "Give the view another name, or replace its criteria with what the list shows now.",
+    "Leaves the menu on the left; the view stays": "Leaves the menu on the left; the view stays",
+    "May use: sees the view under Shared with me. May update: can also replace the criteria. Deleting and sharing stay with you.": "May use: sees the view under Shared with me. May update: can also replace the criteria. Deleting and sharing stay with you.",
+    "My view": "My view",
+    "Save current view": "Save current view",
+    "Share view: {name}": "Share view: {name}",
+    "The view \"{name}\" leaves your list and the menu on the left.": "The view \"{name}\" leaves your list and the menu on the left.",
+    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Whoever gets the view sees it under Shared with me. It is yours and stays yours.",
+    "Whoever you share the view with sees the change at once.": "Whoever you share the view with sees the change at once.",
+    "Reason": "Reason",
+    "Could not be read": "Could not be read",
+    "The action could not be completed.": "The action could not be completed.",
+    "Whether this is ready could not be read.": "Whether this is ready could not be read.",
+    "Showing {located} of {total} located": "Showing {located} of {total} located",
+    "The map shows the first {limit} of {total}. Narrow the filters to see the rest.": "The map shows the first {limit} of {total}. Narrow the filters to see the rest."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -1956,7 +1956,62 @@
     "{message} until {time}": "{message} tot {time}",
     "Away": "Afwezig",
     "Busy": "Bezet",
-    "No one in the team": "Niemand in het team"
+    "No one in the team": "Niemand in het team",
+    "Also replace the criteria with the current filters": "Vervang ook de criteria door de huidige filters",
+    "Manage \"{name}\"": "Beheer {name}",
+    "Presentation": "Presentatie",
+    "Save a copy": "Kopie opslaan",
+    "Save the current filters to \"{name}\"": "Huidige filters opslaan in \"{name}\"",
+    "Share": "Delen",
+    "Update with current filters": "Bijwerken met huidige filters",
+    "Share with people and groups": "Delen met personen en groepen",
+    "Add to menu": "Toevoegen aan menu",
+    "Remove from menu": "Uit menu halen",
+    "Labels": "Labels",
+    "Add a view to the menu from Filters": "Zet een weergave in het menu via Filters",
+    "Also for whoever it is shared with": "Ook bij wie het is gedeeld",
+    "By {owner}": "Door {owner}",
+    "Criteria": "Criteria",
+    "From colleagues. You can use them and save a copy.": "Van collega's. U kunt ze gebruiken en een kopie opslaan.",
+    "It is shared with {names}; it leaves their lists too.": "Het is gedeeld met {names}. Ook bij hen verdwijnt het.",
+    "Keep what is saved": "Behouden wat opgeslagen is",
+    "Keeps the current search term, filters and sort under a name.": "Bewaart de zoekterm, de filters en de sortering van nu onder een naam.",
+    "May update": "Mag bijwerken",
+    "May use": "Mag gebruiken",
+    "Name, search term, filters and sort": "Naam, zoekterm, filters en sortering",
+    "People and groups from your Nextcloud, as when sharing a file.": "Personen en groepen uit uw Nextcloud, zoals bij het delen van een bestand.",
+    "Person": "Persoon",
+    "Read only. Shipped with the app; a new version updates them.": "Alleen lezen. Geleverd door de app; een nieuwe versie werkt ze bij.",
+    "Replace with the current search term, filters and sort": "Vervangen door de huidige zoekterm, filters en sortering",
+    "Rights of {name}": "Rechten van {name}",
+    "Share with": "Delen met",
+    "Shared with": "Gedeeld met",
+    "Stop sharing with {name}": "Niet meer delen met {name}",
+    "The items themselves stay. This cannot be undone.": "Wat erin staat, blijft bestaan. Dit kunt u niet ongedaan maken.",
+    "With people and groups": "Met personen en groepen",
+    "Appears under My views in the menu on the left": "Komt onder Mijn weergaven in het menu links",
+    "Could not save the view": "De weergave kon niet worden opgeslagen",
+    "Default views": "Standaardweergaven",
+    "Delete view": "Weergave verwijderen",
+    "Delete view?": "Weergave verwijderen?",
+    "Edit view: {name}": "Weergave bewerken: {name}",
+    "View \"{name}\" saved": "Weergave \"{name}\" opgeslagen",
+    "View name": "Naam van de weergave",
+    "Give the view another name, or replace its criteria with what the list shows now.": "Geef de weergave een andere naam, of vervang de criteria door wat nu in de lijst staat.",
+    "Leaves the menu on the left; the view stays": "Verdwijnt uit het menu links, de weergave blijft bestaan",
+    "May use: sees the view under Shared with me. May update: can also replace the criteria. Deleting and sharing stay with you.": "Mag gebruiken: ziet de weergave onder Gedeeld met mij. Mag bijwerken: kan ook de criteria vervangen. Verwijderen en delen blijven bij u.",
+    "My view": "Mijn weergave",
+    "Save current view": "Huidige weergave opslaan",
+    "Share view: {name}": "Weergave delen: {name}",
+    "The view \"{name}\" leaves your list and the menu on the left.": "De weergave \"{name}\" verdwijnt uit uw lijst en uit het menu links.",
+    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Wie de weergave krijgt, ziet die onder Gedeeld met mij. Die is van u en blijft dat.",
+    "Whoever you share the view with sees the change at once.": "Iedereen met wie u de weergave deelt, ziet de wijziging meteen.",
+    "Reason": "Reden",
+    "Could not be read": "Kon niet worden gelezen",
+    "The action could not be completed.": "De actie kon niet worden uitgevoerd.",
+    "Whether this is ready could not be read.": "Of dit klaar is, kon niet worden gelezen.",
+    "Showing {located} of {total} located": "{located} van {total} met een locatie getoond",
+    "The map shows the first {limit} of {total}. Narrow the filters to see the rest.": "De kaart toont de eerste {limit} van {total}. Verfijn de filters om de rest te zien."
   },
   "plurals": {
     "{count} member": [

package/package.json

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

@@ -0,0 +1,545 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<CnDialog
+		:name="text(config.title) || t('nextcloud-vue', 'Confirm')"
+		:eyebrow="text(config.eyebrow)"
+		:subtitle="text(config.subtitle)"
+		width="form"
+		:noClose="busy"
+		data-testid="cn-action-dialog"
+		@closing="close">
+		<div v-if="!done" class="cn-action-dialog">
+			<!-- The record the action is about: its title, a meta line, a badge. -->
+			<div v-if="summary" class="cn-action-dialog__summary" data-testid="cn-action-dialog-summary">
+				<CnIcon :name="config.summary.icon || 'FolderOutline'" :size="20" class="cn-action-dialog__summary-icon" />
+				<span class="cn-action-dialog__summary-text">
+					<strong>{{ summary.title }}</strong>
+					<span v-if="summary.meta" class="cn-action-dialog__muted">{{ summary.meta }}</span>
+				</span>
+				<span v-if="summary.badge" class="cn-action-dialog__badge">{{ summary.badge }}</span>
+			</div>
+
+			<!-- Facts about the record, in titled groups ("Retention under the case type"). -->
+			<section v-for="(section, index) in factSections"
+				:key="`facts-${index}`"
+				class="cn-action-dialog__section"
+				data-testid="cn-action-dialog-facts">
+				<h3 v-if="section.title" class="cn-action-dialog__title">
+					{{ section.title }}
+				</h3>
+				<dl class="cn-action-dialog__facts">
+					<div v-for="fact in section.facts" :key="fact.label">
+						<dt>{{ fact.label }}</dt>
+						<dd>{{ fact.value }}</dd>
+					</div>
+				</dl>
+			</section>
+
+			<!-- The checklist, read from an endpoint: each item met, not met or
+			     unknown. Items named in `required` decide whether the action may
+			     run; the others inform. -->
+			<section v-if="config.checklist" class="cn-action-dialog__section" data-testid="cn-action-dialog-checklist">
+				<h3 v-if="config.checklist.title" class="cn-action-dialog__title">
+					{{ text(config.checklist.title) }}
+				</h3>
+				<p v-if="checklistError" class="cn-action-dialog__muted" role="status">
+					{{ checklistError }}
+				</p>
+				<ul class="cn-action-dialog__checks">
+					<li v-for="item in checklist"
+						:key="item.id"
+						class="cn-action-dialog__check"
+						:data-testid="`cn-action-dialog-check-${item.id}`"
+						:data-met="String(item.met)">
+						<CheckCircle v-if="item.met === true" :size="20" class="cn-action-dialog__check-icon cn-action-dialog__check-icon--met" />
+						<HelpCircleOutline v-else-if="item.met === null" :size="20" class="cn-action-dialog__check-icon" />
+						<CircleOutline v-else :size="20" class="cn-action-dialog__check-icon" />
+						<strong class="cn-action-dialog__check-label">{{ item.label }}</strong>
+						<span v-if="item.detail" class="cn-action-dialog__muted">{{ item.detail }}</span>
+					</li>
+				</ul>
+			</section>
+
+			<div v-if="config.reason" class="cn-action-dialog__field">
+				<NcTextArea
+					:id="reasonId"
+					v-model="reason"
+					:label="reasonLabel"
+					:labelOutside="false"
+					resize="vertical"
+					data-testid="cn-action-dialog-reason" />
+				<span v-if="config.reason.hint" class="cn-action-dialog__muted">{{ text(config.reason.hint) }}</span>
+			</div>
+
+			<NcNoteCard v-if="config.note"
+				:type="noteType"
+				:heading="text(config.note.title)"
+				data-testid="cn-action-dialog-note">
+				{{ text(config.note.text) }}
+			</NcNoteCard>
+
+			<p v-if="refusal"
+				class="cn-action-dialog__error"
+				role="alert"
+				data-testid="cn-action-dialog-refusal">
+				{{ refusal }}
+			</p>
+		</div>
+
+		<p v-else role="status" data-testid="cn-action-dialog-done">
+			{{ text(config.doneText) || t('nextcloud-vue', 'Done') }}
+		</p>
+
+		<template #actions>
+			<NcButton :disabled="busy" data-testid="cn-action-dialog-cancel" @click="close">
+				{{ done ? t('nextcloud-vue', 'Close') : t('nextcloud-vue', 'Cancel') }}
+			</NcButton>
+			<NcButton v-if="!done"
+				variant="primary"
+				:disabled="!canConfirm"
+				data-testid="cn-action-dialog-confirm"
+				@click="confirm">
+				<template v-if="confirmConfig.icon" #icon>
+					<CnIcon :name="confirmConfig.icon" :size="20" />
+				</template>
+				{{ text(confirmConfig.label) || t('nextcloud-vue', 'Confirm') }}
+			</NcButton>
+		</template>
+	</CnDialog>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { emit } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { NcButton, NcNoteCard, NcTextArea } from '@nextcloud/vue'
+import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
+import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
+import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { fillTemplate } from '../../utils/fillTemplate.js'
+import { readPath } from '../../utils/readPath.js'
+import { CnDialog } from '../CnDialog/index.js'
+import { CnIcon } from '../CnIcon/index.js'
+
+/** The page refresh channel the built-in widgets listen on. */
+const PAGE_REFRESH = 'cn:page:refresh'
+
+/** Gives each dialog's reason field its own id. */
+let reasonSeq = 0
+
+/**
+ * CnActionDialog — the generic "summary, checklist, reason, confirm" dialog
+ * for an act on a record, configured from the manifest (an `open-modal`
+ * action's props), so an app does not hand-build each one. dossiq's archive
+ * dialog (board DqArchiveren) is the first: the case, what its case type
+ * keeps, a readiness checklist read from an endpoint, a reason, a read-only
+ * note and Archive it.
+ *
+ * `config`:
+ * - `title`, `eyebrow`, `subtitle`, `doneText`: texts, through the host translate.
+ * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
+ *   the record (`source` an endpointSource to read it from, else `object`).
+ * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template.
+ * - `checklist`: `{ title?, source, itemsPath?, labels?, required? }`: items
+ *   `{ id, met, label?, detail? }` read from `source`; `labels[id]` gives an
+ *   item's `{ label, detail?, unmetDetail? }`; the ids in `required` must be
+ *   met before the action can run. `met: null` reads as unknown.
+ * - `permission`: `{ source, allowedPath, reasonPath? }`: the action runs only
+ *   while `allowedPath` reads true; `reasonPath` says why not.
+ * - `reason`: `{ label?, hint?, required?, field? }`: a text area; required by
+ *   default; sent as `field` (default `reason`).
+ * - `note`: `{ variant?, title?, text }`: a read-only note.
+ * - `confirm`: `{ label, icon?, request?: { method?, url, body? }, action? }`.
+ *   `request` posts itself (`body` templates filled with the record and
+ *   `{reason}`); `action` dispatches a manifest action through the page.
+ *
+ * Tokens (`@objectId`, `@object.<field>`) resolve in every url.
+ */
+export default {
+	name: 'CnActionDialog',
+
+	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcTextArea },
+
+	inject: {
+		/** The host app's translate (CnAppRoot `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
+		/** The page's pre-bound action dispatcher (CnPageRenderer), for `confirm.action`. */
+		cnDispatchAction: { default: null },
+	},
+
+	props: {
+		/**
+		 * The dialog's configuration (see the component docs).
+		 *
+		 * @type {object}
+		 */
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The record's id, for the `@objectId` token. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/**
+		 * The record, when the host has it: the summary and facts read it.
+		 *
+		 * @type {object|null}
+		 */
+		object: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	emits: ['close', 'done'],
+
+	data() {
+		return {
+			record: this.object,
+			items: [],
+			checklistError: '',
+			allowed: true,
+			reason: '',
+			busy: false,
+			refusal: '',
+			done: false,
+			reasonId: `cn-action-dialog-reason-${++reasonSeq}`,
+		}
+	},
+
+	computed: {
+		/** @return {object} The token context. */
+		tokenCtx() {
+			return { objectId: this.objectId, object: this.record || {} }
+		},
+
+		/** @return {object} The confirm config. */
+		confirmConfig() {
+			return this.config.confirm && typeof this.config.confirm === 'object' ? this.config.confirm : {}
+		},
+
+		/**
+		 * The summary row, or null without one or before the record is known.
+		 *
+		 * @spec openspec/changes/action-dialog/specs/action-dialog/spec.md#requirement-a-manifest-configures-an-action-dialog
+		 * @return {{title: string, meta: string, badge: string}|null}
+		 */
+		summary() {
+			const def = this.config.summary
+			if (!def || !this.record) {
+				return null
+			}
+			const title = this.fill(def.title)
+			return title ? { title, meta: this.fill(def.meta), badge: this.fill(def.badge) } : null
+		},
+
+		/** @return {Array<{title: string, facts: Array<{label: string, value: string}>}>} The fact groups. */
+		factSections() {
+			if (!Array.isArray(this.config.facts) || !this.record) {
+				return []
+			}
+			const empty = t('nextcloud-vue', 'Not set')
+			return this.config.facts.map((section) => ({
+				title: this.text(section.title),
+				facts: (Array.isArray(section.items) ? section.items : []).map((fact) => ({ label: this.text(fact.label), value: this.fill(fact.value) || empty })),
+			}))
+		},
+
+		/**
+		 * The checklist rows: label and detail from `labels` by id, else the item's own.
+		 *
+		 * @spec openspec/changes/action-dialog/specs/action-dialog/spec.md#requirement-a-manifest-configures-an-action-dialog
+		 * @return {Array<{id: string, met: (boolean|null), label: string, detail: string}>}
+		 */
+		checklist() {
+			const labels = (this.config.checklist && this.config.checklist.labels) || {}
+			return this.items.map((item) => {
+				const met = item.met === null || item.met === undefined ? null : item.met === true
+				const own = labels[item.id] || {}
+				const detail = met === false && own.unmetDetail ? own.unmetDetail : (own.detail || item.detail || '')
+				return {
+					id: String(item.id),
+					met,
+					label: this.fill(own.label || item.label || String(item.id), item),
+					detail: met === null && !item.detail ? t('nextcloud-vue', 'Could not be read') : this.fill(detail, item),
+				}
+			})
+		},
+
+		/** @return {boolean} Whether every required item is met. */
+		requiredMet() {
+			const required = (this.config.checklist && Array.isArray(this.config.checklist.required)) ? this.config.checklist.required.map(String) : []
+			return required.every((id) => this.items.some((item) => String(item.id) === id && item.met === true))
+		},
+
+		/** @return {boolean} Whether a reason is asked and needed. */
+		reasonNeeded() {
+			return Boolean(this.config.reason) && this.config.reason.required !== false
+		},
+
+		/** @return {string} The reason field's label. */
+		reasonLabel() {
+			return this.text(this.config.reason && this.config.reason.label) || t('nextcloud-vue', 'Reason')
+		},
+
+		/** @return {string} The note's NcNoteCard type. */
+		noteType() {
+			const variant = this.config.note && this.config.note.variant
+			return ['info', 'warning', 'error', 'success'].includes(variant) ? variant : 'info'
+		},
+
+		/**
+		 * Whether the action may run: allowed, required items met, a reason
+		 * when one is needed, and nothing in flight.
+		 *
+		 * @spec openspec/changes/action-dialog/specs/action-dialog/spec.md#requirement-a-manifest-configures-an-action-dialog
+		 * @return {boolean}
+		 */
+		canConfirm() {
+			return !this.busy && this.allowed && this.requiredMet && (!this.reasonNeeded || this.reason.trim() !== '')
+		},
+	},
+
+	async mounted() {
+		await Promise.all([this.loadRecord(), this.loadChecklist(), this.loadPermission()])
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * A config text through the host translate, '' for anything else.
+		 *
+		 * @param {unknown} value The text.
+		 * @return {string}
+		 */
+		text(value) {
+			return typeof value === 'string' && value !== '' ? this.cnTranslate(value) : ''
+		},
+
+		/**
+		 * A template filled from a row (the record by default), translated first.
+		 *
+		 * @param {unknown} template The template.
+		 * @param {object} [row] The row.
+		 * @return {string}
+		 */
+		fill(template, row) {
+			if (typeof template !== 'string' || template === '') {
+				return ''
+			}
+			return fillTemplate(this.cnTranslate(template), row || this.record || {}).trim()
+		},
+
+		/**
+		 * Read an endpoint, fresh.
+		 *
+		 * @param {object} source An endpointSource block.
+		 * @return {Promise<unknown>}
+		 */
+		read(source) {
+			return fetchEndpointSource(source, this.tokenCtx, { fresh: true })
+		},
+
+		/** @return {Promise<void>} */
+		async loadRecord() {
+			const source = this.config.summary && this.config.summary.source
+			if (!source || !source.url) {
+				return
+			}
+			try {
+				const data = await this.read(source)
+				this.record = data && typeof data === 'object' ? data : this.record
+			} catch {
+				// The summary stays empty; the checklist and the action still work.
+			}
+		},
+
+		/** @return {Promise<void>} */
+		async loadChecklist() {
+			const def = this.config.checklist
+			if (!def || !def.source || !def.source.url) {
+				return
+			}
+			try {
+				const data = await this.read(def.source)
+				const list = def.itemsPath ? readPath(data, def.itemsPath) : data
+				this.items = Array.isArray(list) ? list.filter((item) => item && item.id !== undefined) : []
+			} catch {
+				this.items = []
+				this.checklistError = t('nextcloud-vue', 'Whether this is ready could not be read.')
+			}
+		},
+
+		/** @return {Promise<void>} */
+		async loadPermission() {
+			const def = this.config.permission
+			if (!def || !def.source || !def.source.url) {
+				return
+			}
+			try {
+				const data = await this.read(def.source)
+				this.allowed = readPath(data, def.allowedPath || 'allowed') === true
+				this.refusal = this.allowed || !def.reasonPath ? '' : String(readPath(data, def.reasonPath) || '')
+			} catch {
+				this.allowed = false
+			}
+		},
+
+		/**
+		 * Run the action once: post `confirm.request`, or dispatch
+		 * `confirm.action`, then show the done text and refresh the page.
+		 *
+		 * @spec openspec/changes/action-dialog/specs/action-dialog/spec.md#requirement-a-manifest-configures-an-action-dialog
+		 * @return {Promise<void>}
+		 */
+		async confirm() {
+			if (!this.canConfirm) {
+				return
+			}
+			this.busy = true
+			this.refusal = ''
+			const reason = this.reason.trim()
+			try {
+				const request = this.confirmConfig.request
+				if (request && request.url) {
+					const url = interpolateUrlTokens(request.url, this.tokenCtx)
+					const body = {}
+					for (const [key, value] of Object.entries(request.body || {})) {
+						body[key] = typeof value === 'string' ? fillTemplate(value, { ...(this.record || {}), reason }) : value
+					}
+					if (this.config.reason) {
+						body[this.config.reason.field || 'reason'] = reason
+					}
+					const method = String(request.method || 'POST').toLowerCase()
+					await axios[['post', 'put', 'patch', 'delete'].includes(method) ? method : 'post'](/^https?:\/\//i.test(url) ? url : generateUrl(url), body)
+				} else if (this.confirmConfig.action && typeof this.cnDispatchAction === 'function') {
+					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { reason }] })
+				}
+				this.done = true
+				emit(PAGE_REFRESH, {})
+				/** @event done The action ran. Payload: `{ reason }`. */
+				this.$emit('done', { reason })
+			} catch (failure) {
+				const data = failure && failure.response && failure.response.data
+				this.refusal = String((data && (data.message || data.error)) || t('nextcloud-vue', 'The action could not be completed.'))
+			} finally {
+				this.busy = false
+			}
+		},
+
+		/** Close the dialog, unless the action is running. */
+		close() {
+			if (this.busy) {
+				return
+			}
+			/** @event close The dialog was closed. */
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-action-dialog {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.cn-action-dialog__summary {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+}
+
+.cn-action-dialog__summary-text {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-action-dialog__badge {
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: var(--color-background-dark);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-action-dialog__title {
+	margin: 0 0 8px;
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-action-dialog__facts {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	gap: 8px 16px;
+	margin: 0;
+}
+
+.cn-action-dialog__facts dt {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-action-dialog__facts dd {
+	margin: 0;
+}
+
+.cn-action-dialog__checks {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-action-dialog__check {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-action-dialog__check-icon {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-action-dialog__check-icon--met {
+	color: var(--color-success-text, var(--color-success));
+}
+
+.cn-action-dialog__muted {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-action-dialog__field {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-action-dialog__error {
+	margin: 0;
+	color: var(--color-error-text, var(--color-error));
+}
+</style>