@conduction/nextcloud-vue 2.59.0 → 2.61.0

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue2.js

@@ -0,0 +1,150 @@
+import { translate } from '@nextcloud/l10n';
+import { NcButton } from '@nextcloud/vue';
+import Check from 'vue-material-design-icons/Check.vue';
+
+let nextStepCardUid = 0;
+
+/**
+ * CnNextStepCard: what this record needs now, next to the button that does it.
+ *
+ * A short checklist for the current step and one primary action. It answers
+ * "what do I do next?" on a record whose menu would otherwise make the handler
+ * guess. Renders nothing when there is no checklist, so a step that needs no
+ * explaining shows no empty card.
+ *
+ * ```vue
+ * <CnNextStepCard
+ *   title="What now? Step 2: handling"
+ *   :items="[
+ *     { label: 'Receipt confirmed', done: true },
+ *     { label: 'Review the open documents', hint: '2 of 5 done' },
+ *     { label: 'Draft the decision' },
+ *   ]"
+ *   action-label="Continue reviewing"
+ *   after="Then: step 3, decision"
+ *   @action="onContinue" />
+ * ```
+ *
+ * CnDetailPage renders this card from its `nextStep` config, and the
+ * `next-step` detail widget type renders it inside a grid.
+ */
+var script = {
+	name: 'CnNextStepCard',
+
+	components: {
+		Check,
+		NcButton,
+	},
+
+	props: {
+		/** Heading of the card, for example "What now? Step 2: handling". */
+		title: {
+			type: String,
+			default: '',
+		},
+
+		/** Element the heading renders as. Pick the level that fits the page outline. */
+		titleTag: {
+			type: String,
+			default: 'h3',
+		},
+
+		/**
+		 * The checklist: `{ label, done?, hint? }` per item. The first item
+		 * that is not done is emphasised as the one to pick up now.
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Label of the primary button. Empty renders no button. */
+		actionLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** DOM id for the primary button, so a skip link can land on it. */
+		actionId: {
+			type: String,
+			default: '',
+		},
+
+		/** Disable the primary button, for example while its request is in flight. */
+		actionDisabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** One line under the button saying what follows, for example "Then: step 3, decision". */
+		after: {
+			type: String,
+			default: '',
+		},
+
+		/** Text state of a done item, read by screen readers. */
+		doneLabel: {
+			type: String,
+			default: () => translate('nextcloud-vue', 'Done'),
+		},
+
+		/** Text state of an open item, read by screen readers. */
+		todoLabel: {
+			type: String,
+			default: () => translate('nextcloud-vue', 'To do'),
+		},
+	},
+
+	emits: [
+		/** The primary button was pressed. */
+		'action',
+	],
+
+	data() {
+		nextStepCardUid += 1;
+		return {
+			titleId: `cn-next-step-title-${nextStepCardUid}`,
+		}
+	},
+
+	computed: {
+		/**
+		 * The items that can render: an object with a label.
+		 *
+		 * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		normalisedItems() {
+			return (Array.isArray(this.items) ? this.items : [])
+				.filter((item) => item && typeof item.label === 'string' && item.label !== '')
+				.map((item) => ({
+					label: item.label,
+					done: item.done === true,
+					hint: typeof item.hint === 'string' ? item.hint : '',
+				}))
+		},
+
+		/**
+		 * Index of the first open item, the one to pick up now.
+		 *
+		 * @return {number} The index, or -1 when everything is done.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		currentIndex() {
+			return this.normalisedItems.findIndex((item) => !item.done)
+		},
+
+		/**
+		 * Accessible name for a card without a title.
+		 *
+		 * @return {string} The label.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		fallbackLabel() {
+			return translate('nextcloud-vue', 'Next step')
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnNextStepCard.vue2.js.map

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnNextStepCard.vue2.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["t"],"mappings":";;;;AAiEA,IAAI,kBAAkB,EAAA;;AAEtB;AACC;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;;AAID,aAAe;AACd,CAAA,IAAI,EAAE,gBAAgB;;CAEtB,UAAU,EAAE;EACX,KAAK;AACL,EAAA,QAAQ;EACR;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;;AAEC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;;EAGD,WAAW,EAAE;GACZ,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,cAAc,EAAE;GACf,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;EACA,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,MAAM,CAAC;GACzC;;;EAGD,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,OAAO,CAAC;GAC1C;EACD;;AAED,CAAA,KAAK,EAAE;AACN;AACA,EAAA,QAAQ;EACR;;AAED,CAAA,IAAI,GAAG;AACN,EAAA,eAAc,IAAK,EAAA;AACnB,EAAA,OAAO;GACN,OAAO,EAAE,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AACjD,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;;;AAGD,EAAA,eAAe,GAAG;GACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,GAAI,IAAI,CAAC,KAAM,GAAE,EAAE;AAClD,KAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAG,IAAK,OAAO,IAAI,CAAC,KAAM,KAAI,QAAS,IAAG,IAAI,CAAC,KAAM,KAAI,EAAE,CAAA;AAC7E,KAAC,GAAG,CAAC,CAAC,IAAI,MAAM;AACf,KAAA,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,KAAA,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI;AACxB,KAAA,IAAI,EAAE,OAAO,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAK,GAAE,EAAE;AACrD,KAAC,CAAC,CAAA;GACH;;AAED;AACC;AACA;;;;AAID,EAAA,YAAY,GAAG;GACd,OAAO,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;GAC1D;;AAED;AACC;AACA;;;;AAID,EAAA,aAAa,GAAG;AACf,GAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,WAAW,CAAA;GACrC;EACD;AACF;;;;"}

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue3.js

@@ -0,0 +1,106 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass, renderSlot } from 'vue';
+
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = { class: "cn-next-step-card__main" };
+const _hoisted_3 = { class: "cn-next-step-card__list" };
+const _hoisted_4 = {
+  class: "cn-next-step-card__marker",
+  "aria-hidden": "true"
+};
+const _hoisted_5 = { class: "cn-next-step-card__label" };
+const _hoisted_6 = {
+  key: 0,
+  class: "cn-next-step-card__hint"
+};
+const _hoisted_7 = { class: "cn-next-step-card__state" };
+const _hoisted_8 = {
+  key: 0,
+  class: "cn-next-step-card__side"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "cn-next-step-card__after"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Check = resolveComponent("Check");
+  const _component_NcButton = resolveComponent("NcButton");
+
+  return ($options.normalisedItems.length > 0)
+    ? (openBlock(), createElementBlock("section", {
+        key: 0,
+        class: "cn-next-step-card",
+        "data-testid": "cn-next-step-card",
+        "aria-labelledby": $props.title ? $data.titleId : null,
+        "aria-label": $props.title ? null : $options.fallbackLabel
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          ($props.title)
+            ? (openBlock(), createBlock(resolveDynamicComponent($props.titleTag), {
+                key: 0,
+                id: $data.titleId,
+                class: "cn-next-step-card__title"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString($props.title), 1 /* TEXT */)
+                ]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["id"]))
+            : createCommentVNode("v-if", true),
+          createElementVNode("ul", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($options.normalisedItems, (item, index) => {
+              return (openBlock(), createElementBlock("li", {
+                key: `${index}-${item.label}`,
+                class: normalizeClass(["cn-next-step-card__item", {
+						'cn-next-step-card__item--done': item.done,
+						'cn-next-step-card__item--current': index === $options.currentIndex,
+					}]),
+                "data-testid": "cn-next-step-item"
+              }, [
+                createElementVNode("span", _hoisted_4, [
+                  (item.done)
+                    ? (openBlock(), createBlock(_component_Check, {
+                        key: 0,
+                        size: 14
+                      }))
+                    : createCommentVNode("v-if", true)
+                ]),
+                createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1 /* TEXT */),
+                (item.hint)
+                  ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.hint), 1 /* TEXT */))
+                  : createCommentVNode("v-if", true),
+                createElementVNode("span", _hoisted_7, toDisplayString(item.done ? $props.doneLabel : $props.todoLabel), 1 /* TEXT */)
+              ], 2 /* CLASS */))
+            }), 128 /* KEYED_FRAGMENT */))
+          ])
+        ]),
+        ($props.actionLabel || _ctx.$slots.action || $props.after)
+          ? (openBlock(), createElementBlock("div", _hoisted_8, [
+              renderSlot(_ctx.$slots, "action", {}, () => [
+                ($props.actionLabel)
+                  ? (openBlock(), createBlock(_component_NcButton, {
+                      key: 0,
+                      id: $props.actionId || null,
+                      variant: "primary",
+                      disabled: $props.actionDisabled,
+                      "data-testid": "cn-next-step-action",
+                      onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('action')))
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString($props.actionLabel), 1 /* TEXT */)
+                      ]),
+                      _: 1 /* STABLE */
+                    }, 8 /* PROPS */, ["id", "disabled"]))
+                  : createCommentVNode("v-if", true)
+              ]),
+              ($props.after)
+                ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString($props.after), 1 /* TEXT */))
+                : createCommentVNode("v-if", true)
+            ]))
+          : createCommentVNode("v-if", true)
+      ], 8 /* PROPS */, _hoisted_1))
+    : createCommentVNode("v-if", true)
+}
+
+export { render };
+//# sourceMappingURL=CnNextStepCard.vue3.js.map

package/dist/esm/components/CnNextStepCard/CnNextStepCard.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnNextStepCard.vue3.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepCard.vue?vue&type=template&id=3a9ce962&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<section\n\t\tv-if=\"normalisedItems.length > 0\"\n\t\tclass=\"cn-next-step-card\"\n\t\tdata-testid=\"cn-next-step-card\"\n\t\t:aria-labelledby=\"title ? titleId : null\"\n\t\t:aria-label=\"title ? null : fallbackLabel\">\n\t\t<div class=\"cn-next-step-card__main\">\n\t\t\t<component\n\t\t\t\t:is=\"titleTag\"\n\t\t\t\tv-if=\"title\"\n\t\t\t\t:id=\"titleId\"\n\t\t\t\tclass=\"cn-next-step-card__title\">\n\t\t\t\t{{ title }}\n\t\t\t</component>\n\t\t\t<ul class=\"cn-next-step-card__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"(item, index) in normalisedItems\"\n\t\t\t\t\t:key=\"`${index}-${item.label}`\"\n\t\t\t\t\tclass=\"cn-next-step-card__item\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-next-step-card__item--done': item.done,\n\t\t\t\t\t\t'cn-next-step-card__item--current': index === currentIndex,\n\t\t\t\t\t}\"\n\t\t\t\t\tdata-testid=\"cn-next-step-item\">\n\t\t\t\t\t<span class=\"cn-next-step-card__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<Check v-if=\"item.done\" :size=\"14\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-next-step-card__label\">{{ item.label }}</span>\n\t\t\t\t\t<span v-if=\"item.hint\" class=\"cn-next-step-card__hint\">{{ item.hint }}</span>\n\t\t\t\t\t<!-- The state in words. The marker is a shape and a colour, and\n\t\t\t\t\t     neither reaches a screen reader or a reader who cannot tell\n\t\t\t\t\t     the two colours apart. -->\n\t\t\t\t\t<span class=\"cn-next-step-card__state\">{{ item.done ? doneLabel : todoLabel }}</span>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div v-if=\"actionLabel || $slots.action || after\" class=\"cn-next-step-card__side\">\n\t\t\t<!-- @slot action Replace the primary button, for a host that renders its own control. -->\n\t\t\t<slot name=\"action\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"actionLabel\"\n\t\t\t\t\t:id=\"actionId || null\"\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t:disabled=\"actionDisabled\"\n\t\t\t\t\tdata-testid=\"cn-next-step-action\"\n\t\t\t\t\t@click=\"$emit('action')\">\n\t\t\t\t\t{{ actionLabel }}\n\t\t\t\t</NcButton>\n\t\t\t</slot>\n\t\t\t<span v-if=\"after\" class=\"cn-next-step-card__after\">{{ after }}</span>\n\t\t</div>\n\t</section>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nlet nextStepCardUid = 0\n\n/**\n * CnNextStepCard: what this record needs now, next to the button that does it.\n *\n * A short checklist for the current step and one primary action. It answers\n * \"what do I do next?\" on a record whose menu would otherwise make the handler\n * guess. Renders nothing when there is no checklist, so a step that needs no\n * explaining shows no empty card.\n *\n * ```vue\n * <CnNextStepCard\n *   title=\"What now? Step 2: handling\"\n *   :items=\"[\n *     { label: 'Receipt confirmed', done: true },\n *     { label: 'Review the open documents', hint: '2 of 5 done' },\n *     { label: 'Draft the decision' },\n *   ]\"\n *   action-label=\"Continue reviewing\"\n *   after=\"Then: step 3, decision\"\n *   @action=\"onContinue\" />\n * ```\n *\n * CnDetailPage renders this card from its `nextStep` config, and the\n * `next-step` detail widget type renders it inside a grid.\n */\nexport default {\n\tname: 'CnNextStepCard',\n\n\tcomponents: {\n\t\tCheck,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/** Heading of the card, for example \"What now? Step 2: handling\". */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Element the heading renders as. Pick the level that fits the page outline. */\n\t\ttitleTag: {\n\t\t\ttype: String,\n\t\t\tdefault: 'h3',\n\t\t},\n\n\t\t/**\n\t\t * The checklist: `{ label, done?, hint? }` per item. The first item\n\t\t * that is not done is emphasised as the one to pick up now.\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Label of the primary button. Empty renders no button. */\n\t\tactionLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** DOM id for the primary button, so a skip link can land on it. */\n\t\tactionId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Disable the primary button, for example while its request is in flight. */\n\t\tactionDisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** One line under the button saying what follows, for example \"Then: step 3, decision\". */\n\t\tafter: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Text state of a done item, read by screen readers. */\n\t\tdoneLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Done'),\n\t\t},\n\n\t\t/** Text state of an open item, read by screen readers. */\n\t\ttodoLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'To do'),\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The primary button was pressed. */\n\t\t'action',\n\t],\n\n\tdata() {\n\t\tnextStepCardUid += 1\n\t\treturn {\n\t\t\ttitleId: `cn-next-step-title-${nextStepCardUid}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The items that can render: an object with a label.\n\t\t *\n\t\t * @return {Array<{label: string, done: boolean, hint: string}>} The checklist.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tnormalisedItems() {\n\t\t\treturn (Array.isArray(this.items) ? this.items : [])\n\t\t\t\t.filter((item) => item && typeof item.label === 'string' && item.label !== '')\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tlabel: item.label,\n\t\t\t\t\tdone: item.done === true,\n\t\t\t\t\thint: typeof item.hint === 'string' ? item.hint : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Index of the first open item, the one to pick up now.\n\t\t *\n\t\t * @return {number} The index, or -1 when everything is done.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tcurrentIndex() {\n\t\t\treturn this.normalisedItems.findIndex((item) => !item.done)\n\t\t},\n\n\t\t/**\n\t\t * Accessible name for a card without a title.\n\t\t *\n\t\t * @return {string} The label.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tfallbackLabel() {\n\t\t\treturn t('nextcloud-vue', 'Next step')\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-next-step-card {\n\talign-items: center;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\t/* The edge says \"this is the thing to act on\". An inset shadow, so it\n\t   follows the card's rounded corners instead of squaring them off. */\n\tbox-shadow: inset 4px 0 0 var(--color-primary-element);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));\n\tpadding-inline-start: calc(7 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__main {\n\tdisplay: flex;\n\tflex: 1 1 420px;\n\tflex-direction: column;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n\tmin-width: 0;\n}\n\n.cn-next-step-card__title {\n\tcolor: var(--color-main-text);\n\tfont-size: 0.85em;\n\tfont-weight: 700;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-next-step-card__list {\n\tdisplay: grid;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-next-step-card__item {\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: calc(2.5 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__item--current {\n\tcolor: var(--color-main-text);\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__label {\n\tfont-weight: 700;\n}\n\n.cn-next-step-card__marker {\n\talign-items: center;\n\tborder: 2px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tflex: none;\n\theight: 20px;\n\tjustify-content: center;\n\twidth: 20px;\n}\n\n.cn-next-step-card__item--current .cn-next-step-card__marker {\n\tborder-color: var(--color-primary-element);\n}\n\n.cn-next-step-card__item--done .cn-next-step-card__marker {\n\tbackground: var(--color-primary-element);\n\tborder-color: var(--color-primary-element);\n\tcolor: var(--color-primary-element-text);\n}\n\n.cn-next-step-card__hint {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-weight: 400;\n}\n\n/* Read, not seen. */\n.cn-next-step-card__state {\n\tborder: 0;\n\tclip-path: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n.cn-next-step-card__side {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.cn-next-step-card__after {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent","_Fragment","_renderList","_toDisplayString"],"mappings":"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"}

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue.js

@@ -0,0 +1,9 @@
+import script from './CnNextStepWidget.vue2.js';
+import { render } from './CnNextStepWidget.vue3.js';
+
+script.render = render;
+script.__file = "src/components/CnNextStepCard/CnNextStepWidget.vue";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnNextStepWidget.vue.js.map

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnNextStepWidget.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue2.js

@@ -0,0 +1,47 @@
+import __sfc_main from './CnNextStepCard.vue.js';
+import { resolveNextStep } from '../../utils/detailActionModel.js';
+
+/**
+ * CnNextStepWidget: the `next-step` detail widget type.
+ *
+ * Renders CnNextStepCard for the bound record's stage from
+ * `content: { field?, stages: { <stage>: { title?, checklist, after? } } }`.
+ * The checklist only: the page's own primary button stays where the page
+ * puts it. Resolved by its registry key, not exported.
+ */
+var script = {
+	name: 'CnNextStepWidget',
+
+	components: {
+		CnNextStepCard: __sfc_main,
+	},
+
+	props: {
+		/** The widget's content: `{ field?, title?, stages }`. */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The bound record. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	computed: {
+		/**
+		 * The card for the record's stage.
+		 *
+		 * @return {object|null} The resolved card, or null when the stage declares none.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		step() {
+			return resolveNextStep(this.content, this.objectData)
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnNextStepWidget.vue2.js.map

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnNextStepWidget.vue2.js","sources":["../../../../src/components/CnNextStepCard/CnNextStepWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<CnNextStepCard\n\t\tv-if=\"step\"\n\t\t:title=\"step.title\"\n\t\t:items=\"step.items\"\n\t\t:after=\"step.after\" />\n</template>\n\n<script>\nimport CnNextStepCard from './CnNextStepCard.vue'\nimport { resolveNextStep } from '../../utils/detailActionModel.js'\n\n/**\n * CnNextStepWidget: the `next-step` detail widget type.\n *\n * Renders CnNextStepCard for the bound record's stage from\n * `content: { field?, stages: { <stage>: { title?, checklist, after? } } }`.\n * The checklist only: the page's own primary button stays where the page\n * puts it. Resolved by its registry key, not exported.\n */\nexport default {\n\tname: 'CnNextStepWidget',\n\n\tcomponents: {\n\t\tCnNextStepCard,\n\t},\n\n\tprops: {\n\t\t/** The widget's content: `{ field?, title?, stages }`. */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** The bound record. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The card for the record's stage.\n\t\t *\n\t\t * @return {object|null} The resolved card, or null when the stage declares none.\n\t\t * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card\n\t\t */\n\t\tstep() {\n\t\t\treturn resolveNextStep(this.content, this.objectData)\n\t\t},\n\t},\n}\n</script>\n"],"names":["CnNextStepCard"],"mappings":";;;AAiBA;;AAEC;;AAEA;;AAEA;;AAED,aAAe;CACd,IAAI,EAAE,kBAAkB;;CAExB,UAAU,EAAE;AACX,kBAAAA,UAAc;EACd;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;;AAED;EACA,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;EACD;;AAED,CAAA,QAAQ,EAAE;AACT;;AAEC;AACA;;;AAGD,EAAA,IAAI,GAAG;GACN,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAA;GACpD;EACD;AACF;;;;"}

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue3.js

@@ -0,0 +1,17 @@
+import { resolveComponent, openBlock, createBlock, createCommentVNode } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnNextStepCard = resolveComponent("CnNextStepCard");
+
+  return ($options.step)
+    ? (openBlock(), createBlock(_component_CnNextStepCard, {
+        key: 0,
+        title: $options.step.title,
+        items: $options.step.items,
+        after: $options.step.after
+      }, null, 8 /* PROPS */, ["title", "items", "after"]))
+    : createCommentVNode("v-if", true)
+}
+
+export { render };
+//# sourceMappingURL=CnNextStepWidget.vue3.js.map

package/dist/esm/components/CnNextStepCard/CnNextStepWidget.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnNextStepWidget.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/esm/components/CnObjectDataWidget/CnObjectDataWidget.vue2.js

@@ -87,6 +87,13 @@ var script = {
 		 * identity when used standalone (no CnAppRoot ancestor).
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * Formatter registry, provided by CnAppRoot (`cnFormatters`: the
+		 * library's built-ins plus the app's `formatters`). A field override
+		 * `{ formatter: '<id>' }` renders the value through the same function a
+		 * table column with that `formatter` uses. Empty when used standalone.
+		 */
+		cnFormatters: { default: () => ({}) },
 		/**
 		 * The host surface's panel-action channel, when this widget is rendered
 		 * in a tab panel. Null everywhere else, which is every other surface.
@@ -272,6 +279,11 @@ var script = {
 		 * - `editable` (boolean) — Override editability (default: based on schema readOnly)
 		 * - `label` (string) — Override the display label
 		 * - `widget` (string) — Override the widget type for editing
+		 * - `formatter` (string) — Display the value through the formatter
+		 *   registered under this id on CnAppRoot (`cnFormatters`), called as
+		 *   `(value, object, property)` like a table cell's formatter. An id
+		 *   nobody registered, or a formatter that throws, keeps the default
+		 *   rendering. Editing still writes the stored value.
 		 *
 		 * Accepts an Array too: an empty overrides map (`{}`) round-trips through
 		 * PHP/JSON as an empty Array (`[]`), so a persisted manifest can deliver
@@ -548,12 +560,46 @@ var script = {
 			}
 		},
 
+		/**
+		 * Display values of the fields whose override names a registered
+		 * formatter, keyed by field key. A field is left out when its formatter
+		 * id is not registered or the formatter throws, so it falls back to the
+		 * default rendering.
+		 *
+		 * @return {Record<string, string>}
+		 */
+		formatterDisplayValues() {
+			const values = {};
+			for (const field of this.resolvedFields) {
+				const fn = field.formatter && this.cnFormatters && this.cnFormatters[field.formatter];
+				if (typeof fn !== 'function') {
+					continue
+				}
+				const raw = field.key in this.dirtyFields
+					? this.dirtyFields[field.key]
+					: (this.objectData || {})[field.key];
+				const prop = (this.schema.properties && this.schema.properties[field.key]) || {};
+				try {
+					const formatted = fn(raw, this.objectData || {}, prop);
+					values[field.key] = (formatted === null || formatted === undefined || formatted === '') ? '—' : String(formatted);
+				} catch (e) {
+					// eslint-disable-next-line no-console
+					console.warn(`[CnObjectDataWidget] formatter "${field.formatter}" threw; falling back`, e);
+				}
+			}
+			return values
+		},
+
 		/**
 		 * Formatted display values for each field.
 		 */
 		displayValues() {
 			const values = {};
 			for (const field of this.resolvedFields) {
+				if (field.key in this.formatterDisplayValues) {
+					values[field.key] = this.formatterDisplayValues[field.key];
+					continue
+				}
 				// Show pending edit value if dirty
 				const raw = field.key in this.dirtyFields
 					? this.dirtyFields[field.key]
@@ -822,6 +868,9 @@ var script = {
 		 * @return {'object-array'|'scalar-array'|'object'|'scalar'} The value kind.
 		 */
 		fieldValueKind(field) {
+			if (field.key in this.formatterDisplayValues) {
+				return 'scalar'
+			}
 			const prop = ((this.schema && this.schema.properties) || {})[field.key];
 			if (this.isRelationField(prop)) {
 				return 'scalar'