@conduction/nextcloud-vue 2.61.0 → 2.63.0

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

@@ -0,0 +1,102 @@
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, createBlock, withCtx, createTextVNode, renderList, normalizeClass } from 'vue';
+
+const _hoisted_1 = ["aria-busy"];
+const _hoisted_2 = {
+  key: 0,
+  class: "cn-timeline-widget__title"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-timeline-widget__loading"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "cn-timeline-widget__empty",
+  "data-testid": "cn-timeline-widget-empty"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "cn-timeline-widget__list"
+};
+const _hoisted_6 = ["data-source"];
+const _hoisted_7 = { class: "cn-timeline-widget__body" };
+const _hoisted_8 = ["datetime"];
+const _hoisted_9 = {
+  key: 0,
+  class: "cn-timeline-widget__badge"
+};
+const _hoisted_10 = { class: "cn-timeline-widget__label" };
+const _hoisted_11 = {
+  key: 1,
+  class: "cn-timeline-widget__detail"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  const _component_NcNoteCard = resolveComponent("NcNoteCard");
+
+  return (openBlock(), createElementBlock("section", {
+    class: "cn-timeline-widget",
+    "data-testid": "cn-timeline-widget",
+    "aria-busy": $data.loading ? 'true' : 'false'
+  }, [
+    ($options.resolvedTitle)
+      ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString($options.resolvedTitle), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    ($data.loading && $options.events.length === 0)
+      ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(_component_NcLoadingIcon, {
+            size: 24,
+            "aria-hidden": "true"
+          }),
+          createElementVNode("span", null, toDisplayString($options.loadingLabel), 1 /* TEXT */)
+        ]))
+      : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          ($data.failedSources.length > 0)
+            ? (openBlock(), createBlock(_component_NcNoteCard, {
+                key: 0,
+                type: "warning",
+                "data-testid": "cn-timeline-widget-error"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString($options.failedText), 1 /* TEXT */)
+                ]),
+                _: 1 /* STABLE */
+              }))
+            : createCommentVNode("v-if", true),
+          ($options.events.length === 0)
+            ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.emptyLabel), 1 /* TEXT */))
+            : (openBlock(), createElementBlock("ol", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.events, (event) => {
+                  return (openBlock(), createElementBlock("li", {
+                    key: event.id,
+                    class: normalizeClass(["cn-timeline-widget__event", { 'cn-timeline-widget__event--upcoming': event.upcoming }]),
+                    "data-source": event.source,
+                    "data-testid": "cn-timeline-widget-event"
+                  }, [
+                    _cache[0] || (_cache[0] = createElementVNode("span", {
+                      class: "cn-timeline-widget__dot",
+                      "aria-hidden": "true"
+                    }, null, -1 /* CACHED */)),
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("time", {
+                        class: "cn-timeline-widget__when",
+                        datetime: event.at.toISOString()
+                      }, toDisplayString($options.formatMoment(event)), 9 /* TEXT, PROPS */, _hoisted_8),
+                      (event.upcoming)
+                        ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString($options.upcomingLabel), 1 /* TEXT */))
+                        : createCommentVNode("v-if", true),
+                      createElementVNode("p", _hoisted_10, toDisplayString($options.translate(event.label)), 1 /* TEXT */),
+                      (event.detail)
+                        ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(event.detail), 1 /* TEXT */))
+                        : createCommentVNode("v-if", true)
+                    ])
+                  ], 10 /* CLASS, PROPS */, _hoisted_6))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]))
+        ], 64 /* STABLE_FRAGMENT */))
+  ], 8 /* PROPS */, _hoisted_1))
+}
+
+export { render };
+//# sourceMappingURL=CnTimelineWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnTimelineWidget.vue3.js","sources":["../../../../src/components/CnTimelineWidget/CnTimelineWidget.vue?vue&type=template&id=621fcccf&lang.js"],"sourcesContent":["<!-- SPDX-License-Identifier: EUPL-1.2 -->\n<!-- SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl> -->\n<template>\n\t<section class=\"cn-timeline-widget\" data-testid=\"cn-timeline-widget\" :aria-busy=\"loading ? 'true' : 'false'\">\n\t\t<h3 v-if=\"resolvedTitle\" class=\"cn-timeline-widget__title\">\n\t\t\t{{ resolvedTitle }}\n\t\t</h3>\n\n\t\t<div v-if=\"loading && events.length === 0\" class=\"cn-timeline-widget__loading\">\n\t\t\t<NcLoadingIcon :size=\"24\" aria-hidden=\"true\" />\n\t\t\t<span>{{ loadingLabel }}</span>\n\t\t</div>\n\n\t\t<template v-else>\n\t\t\t<!-- A failed read is not an empty history: say which part is missing. -->\n\t\t\t<NcNoteCard v-if=\"failedSources.length > 0\" type=\"warning\" data-testid=\"cn-timeline-widget-error\">\n\t\t\t\t{{ failedText }}\n\t\t\t</NcNoteCard>\n\n\t\t\t<p v-if=\"events.length === 0\" class=\"cn-timeline-widget__empty\" data-testid=\"cn-timeline-widget-empty\">\n\t\t\t\t{{ emptyLabel }}\n\t\t\t</p>\n\n\t\t\t<ol v-else class=\"cn-timeline-widget__list\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"event in events\"\n\t\t\t\t\t:key=\"event.id\"\n\t\t\t\t\tclass=\"cn-timeline-widget__event\"\n\t\t\t\t\t:class=\"{ 'cn-timeline-widget__event--upcoming': event.upcoming }\"\n\t\t\t\t\t:data-source=\"event.source\"\n\t\t\t\t\tdata-testid=\"cn-timeline-widget-event\">\n\t\t\t\t\t<span class=\"cn-timeline-widget__dot\" aria-hidden=\"true\" />\n\t\t\t\t\t<div class=\"cn-timeline-widget__body\">\n\t\t\t\t\t\t<time class=\"cn-timeline-widget__when\" :datetime=\"event.at.toISOString()\">\n\t\t\t\t\t\t\t{{ formatMoment(event) }}\n\t\t\t\t\t\t</time>\n\t\t\t\t\t\t<span v-if=\"event.upcoming\" class=\"cn-timeline-widget__badge\">\n\t\t\t\t\t\t\t{{ upcomingLabel }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p class=\"cn-timeline-widget__label\">\n\t\t\t\t\t\t\t{{ translate(event.label) }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p v-if=\"event.detail\" class=\"cn-timeline-widget__detail\">\n\t\t\t\t\t\t\t{{ event.detail }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ol>\n\t\t</template>\n\t</section>\n</template>\n\n<script>\nimport { getLanguage, translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'\nimport { auditEvents, fieldEvents, relatedEvents, sortEvents, timelineEntryEvents } from '../../utils/timelineEvents.js'\n\n/**\n * CnTimelineWidget — an object's dated events in time order (`timeline`\n * widget type for detail pages).\n *\n * Generalises dossiq's case timeline. It merges up to four sources, all\n * optional, into one list:\n *\n * - `fields`: the object's own date properties, `[{ field, label }]`. A\n *   dotted path reaches metadata, such as `@self.created`.\n * - `related`: related objects, `[{ register?, schema, field, dateField?,\n *   label, titleField? }]`. Rows of `schema` whose `field` holds this object's\n *   id become events at their `dateField` (default `@self.created`).\n * - `auditTrail: true`: the object's audit trail, one event per change.\n * - `timeline: true`: OpenRegister's timeline of notes, calls and messages.\n *\n * Oldest first by default (`order: 'desc'` flips it). A moment after now is\n * marked upcoming, in words as well as style.\n *\n * ```json\n * { \"type\": \"timeline\", \"content\": {\n *   \"title\": \"Timeline\",\n *   \"fields\": [\n *     { \"field\": \"@self.created\", \"label\": \"Booking created\" },\n *     { \"field\": \"depositClearedAt\", \"label\": \"Deposit cleared\" },\n *     { \"field\": \"confirmationSentAt\", \"label\": \"Confirmation mail sent\" },\n *     { \"field\": \"startsAt\", \"label\": \"Starts\" },\n *     { \"field\": \"endsAt\", \"label\": \"Ends\" }\n *   ] } }\n * ```\n *\n * The object comes from the detail page's context, like `audit-trail`:\n * explicit props win, then the injects, then `content`.\n *\n * @spec openspec/changes/timeline-widget/specs/timeline-widget/spec.md#requirement-a-timeline-widget-shows-an-objects-dated-events-in-order\n */\nexport default {\n\tname: 'CnTimelineWidget',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t\tNcNoteCard,\n\t},\n\n\tinject: {\n\t\t/** Detail-page object context from CnDetailPage (a ref or a raw bag). */\n\t\tcnObjectContext: { default: null },\n\t\t/** Detail object context holder from CnPageRenderer (`{ value: { objectData, ... } }`). */\n\t\tcnDetailObjectContext: { default: null },\n\t\t/** Consumer translation function; labels are authored in English. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/** Register slug; object context spread as props by CnWidgetGrid. */\n\t\tregister: { type: String, default: '' },\n\t\t/**\n\t\t * Schema slug, or the schema object the detail context supplies.\n\t\t *\n\t\t * @type {string|object}\n\t\t */\n\t\tschema: { type: [String, Object], default: '' },\n\t\t/** The object's id. */\n\t\tobjectId: { type: String, default: '' },\n\t\t/** The object itself, when the host already has it. */\n\t\tobject: { type: Object, default: null },\n\t\t/** Card title override. */\n\t\ttitle: { type: String, default: '' },\n\t\t/** Stored widget content: `{ title, fields, related, auditTrail, timeline, order }`. */\n\t\tcontent: { type: Object, default: () => ({}) },\n\t\t/** OpenRegister API base. */\n\t\tapiBase: { type: String, default: '/apps/openregister/api' },\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\trelatedRows: {},\n\t\t\tauditEntries: [],\n\t\t\ttimelineEntries: [],\n\t\t\tfailedSources: [],\n\t\t\tfetchedObject: null,\n\t\t\tloadSeq: 0,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tctx() {\n\t\t\tconst raw = this.cnObjectContext\n\t\t\tconst inj = raw && (raw.value !== undefined ? raw.value : raw)\n\t\t\tconst holder = this.cnDetailObjectContext && this.cnDetailObjectContext.value\n\t\t\treturn inj || holder || {}\n\t\t},\n\n\t\tresolvedObjectId() {\n\t\t\treturn this.objectId || this.ctx.objectId || this.content.objectId || ''\n\t\t},\n\n\t\tresolvedRegister() {\n\t\t\treturn this.register || this.ctx.register || this.content.register || ''\n\t\t},\n\n\t\tresolvedSchema() {\n\t\t\tconst s = this.schema || this.ctx.schema || this.content.schema || ''\n\t\t\treturn typeof s === 'string' ? s : (s && (s.slug || s.name || s.id)) || ''\n\t\t},\n\n\t\t/**\n\t\t * The object: explicit prop, then the page context, then a fetch of\n\t\t * our own when only the id is known.\n\t\t *\n\t\t * @return {object|null}\n\t\t */\n\t\tresolvedObject() {\n\t\t\treturn this.object || this.ctx.object || this.ctx.objectData || this.fetchedObject || null\n\t\t},\n\n\t\tresolvedTitle() {\n\t\t\tconst raw = this.title || this.content.title || ''\n\t\t\treturn raw ? this.translate(raw) : ''\n\t\t},\n\n\t\tfieldsConfig() {\n\t\t\treturn Array.isArray(this.content.fields) ? this.content.fields : []\n\t\t},\n\n\t\trelatedConfig() {\n\t\t\treturn Array.isArray(this.content.related) ? this.content.related.filter((r) => r && r.schema && r.field) : []\n\t\t},\n\n\t\t/**\n\t\t * Every event from every source, in time order.\n\t\t *\n\t\t * @return {Array<object>}\n\t\t */\n\t\tevents() {\n\t\t\tconst now = new Date()\n\t\t\tconst all = [\n\t\t\t\t...fieldEvents(this.resolvedObject || {}, this.fieldsConfig, now),\n\t\t\t\t...this.relatedConfig.flatMap((cfg, i) => relatedEvents(this.relatedRows[i] || [], cfg, now)),\n\t\t\t\t...auditEvents(this.auditEntries, this.describeAudit, now),\n\t\t\t\t...timelineEntryEvents(this.timelineEntries, t('nextcloud-vue', 'Note'), now),\n\t\t\t]\n\t\t\treturn sortEvents(all, this.content.order === 'desc' ? 'desc' : 'asc')\n\t\t},\n\n\t\t/**\n\t\t * A signature of what to fetch, so a change refetches once.\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tloadKey() {\n\t\t\treturn JSON.stringify({\n\t\t\t\tid: this.resolvedObjectId,\n\t\t\t\tregister: this.resolvedRegister,\n\t\t\t\tschema: this.resolvedSchema,\n\t\t\t\trelated: this.relatedConfig,\n\t\t\t\taudit: this.content.auditTrail === true,\n\t\t\t\ttimeline: this.content.timeline === true,\n\t\t\t\tneedObject: this.fieldsConfig.length > 0 && !(this.object || this.ctx.object || this.ctx.objectData),\n\t\t\t})\n\t\t},\n\n\t\tfailedText() {\n\t\t\treturn t('nextcloud-vue', 'Part of the timeline could not load: {parts}.', {\n\t\t\t\tparts: this.failedSources.map((s) => this.sourceName(s)).join(', '),\n\t\t\t})\n\t\t},\n\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading…')\n\t\t},\n\n\t\temptyLabel() {\n\t\t\treturn t('nextcloud-vue', 'Nothing has happened yet.')\n\t\t},\n\n\t\tupcomingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Upcoming')\n\t\t},\n\t},\n\n\twatch: {\n\t\tloadKey: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.load()\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\ttranslate(text) {\n\t\t\treturn text ? this.cnTranslate(text) : ''\n\t\t},\n\n\t\tsourceName(source) {\n\t\t\tif (source === 'audit') {\n\t\t\t\treturn t('nextcloud-vue', 'changes')\n\t\t\t}\n\t\t\tif (source === 'timeline') {\n\t\t\t\treturn t('nextcloud-vue', 'notes and messages')\n\t\t\t}\n\t\t\tif (source === 'object') {\n\t\t\t\treturn t('nextcloud-vue', 'dates')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'related items')\n\t\t},\n\n\t\t/**\n\t\t * The label of an audit event, from its action and who did it.\n\t\t *\n\t\t * @param {string} action The audit action (create, update, delete).\n\t\t * @param {string} actor Who did it.\n\t\t * @return {string}\n\t\t */\n\t\tdescribeAudit(action, actor) {\n\t\t\tconst known = {\n\t\t\t\tcreate: t('nextcloud-vue', 'Created'),\n\t\t\t\tupdate: t('nextcloud-vue', 'Updated'),\n\t\t\t\tdelete: t('nextcloud-vue', 'Deleted'),\n\t\t\t}\n\t\t\tconst what = known[action] || action || t('nextcloud-vue', 'Changed')\n\t\t\treturn actor ? t('nextcloud-vue', '{action} by {actor}', { action: what, actor }) : what\n\t\t},\n\n\t\t/**\n\t\t * Show a moment in the reader's language: a date for a calendar day,\n\t\t * date and time otherwise.\n\t\t *\n\t\t * @param {object} event The event.\n\t\t * @return {string}\n\t\t */\n\t\tformatMoment(event) {\n\t\t\tconst locale = (typeof getLanguage === 'function' && getLanguage()) || undefined\n\t\t\tconst options = event.dateOnly\n\t\t\t\t? { dateStyle: 'medium' }\n\t\t\t\t: { dateStyle: 'medium', timeStyle: 'short' }\n\t\t\ttry {\n\t\t\t\treturn new Intl.DateTimeFormat(locale, options).format(event.at)\n\t\t\t} catch {\n\t\t\t\treturn event.at.toLocaleString()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Fetch every configured source. Each one fails on its own, so one\n\t\t * unreachable source never hides the others.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/timeline-widget/specs/timeline-widget/spec.md#requirement-a-timeline-widget-shows-an-objects-dated-events-in-order\n\t\t */\n\t\tasync load() {\n\t\t\tconst id = this.resolvedObjectId\n\t\t\tconst register = this.resolvedRegister\n\t\t\tconst schema = this.resolvedSchema\n\t\t\tconst seq = ++this.loadSeq\n\t\t\tif (!id || !register || !schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst [{ default: axios }, { generateUrl }] = await Promise.all([\n\t\t\t\timport('@nextcloud/axios'),\n\t\t\t\timport('@nextcloud/router'),\n\t\t\t])\n\t\t\tconst base = `${this.apiBase}/objects/${register}/${schema}/${id}`\n\t\t\tconst failed = []\n\t\t\tconst jobs = []\n\n\t\t\tif (this.fieldsConfig.length > 0 && !(this.object || this.ctx.object || this.ctx.objectData)) {\n\t\t\t\tjobs.push(axios.get(generateUrl(base))\n\t\t\t\t\t.then((r) => {\n\t\t\t\t\t\tthis.fetchedObject = (r && r.data) || null\n\t\t\t\t\t})\n\t\t\t\t\t.catch(() => failed.push('object')))\n\t\t\t}\n\n\t\t\tconst rows = {}\n\t\t\tthis.relatedConfig.forEach((cfg, i) => {\n\t\t\t\tconst url = generateUrl(`${this.apiBase}/objects/${cfg.register || register}/${cfg.schema}`)\n\t\t\t\tjobs.push(axios.get(url, { params: { [cfg.field]: id, _limit: cfg.limit || 50 } })\n\t\t\t\t\t.then((r) => {\n\t\t\t\t\t\tconst data = r && r.data\n\t\t\t\t\t\trows[i] = (data && (data.results || data)) || []\n\t\t\t\t\t})\n\t\t\t\t\t.catch(() => {\n\t\t\t\t\t\trows[i] = []\n\t\t\t\t\t\tif (!failed.includes('related')) {\n\t\t\t\t\t\t\tfailed.push('related')\n\t\t\t\t\t\t}\n\t\t\t\t\t}))\n\t\t\t})\n\n\t\t\tif (this.content.auditTrail === true) {\n\t\t\t\tjobs.push(axios.get(generateUrl(`${base}/audit-trail`), { params: { limit: this.content.auditLimit || 50 } })\n\t\t\t\t\t.then((r) => {\n\t\t\t\t\t\tconst data = r && r.data\n\t\t\t\t\t\tthis.auditEntries = (data && (data.results || data)) || []\n\t\t\t\t\t})\n\t\t\t\t\t.catch(() => {\n\t\t\t\t\t\tthis.auditEntries = []\n\t\t\t\t\t\tfailed.push('audit')\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\tif (this.content.timeline === true) {\n\t\t\t\tjobs.push(axios.get(generateUrl(`${base}/timeline`))\n\t\t\t\t\t.then((r) => {\n\t\t\t\t\t\tconst data = r && r.data\n\t\t\t\t\t\tthis.timelineEntries = (data && (data.results || data)) || []\n\t\t\t\t\t})\n\t\t\t\t\t.catch(() => {\n\t\t\t\t\t\tthis.timelineEntries = []\n\t\t\t\t\t\tfailed.push('timeline')\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\tif (jobs.length === 0) {\n\t\t\t\tthis.failedSources = []\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.loading = true\n\t\t\tawait Promise.all(jobs)\n\t\t\tif (seq !== this.loadSeq) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.relatedRows = rows\n\t\t\tthis.failedSources = failed\n\t\t\tthis.loading = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-timeline-widget {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n}\n\n.cn-timeline-widget__title {\n\tmargin: 0;\n\tfont-size: var(--font-size-large, 1.1em);\n}\n\n.cn-timeline-widget__loading {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-timeline-widget__empty {\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-timeline-widget__list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-timeline-widget__event {\n\tposition: relative;\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding-block-end: 12px;\n}\n\n/* The line between dots: drawn from each dot down to the next event. */\n.cn-timeline-widget__event:not(:last-child)::before {\n\tcontent: '';\n\tposition: absolute;\n\tinset-block: 14px 0;\n\tinset-inline-start: 5px;\n\tborder-inline-start: 2px solid var(--color-border-dark);\n}\n\n.cn-timeline-widget__dot {\n\tflex: 0 0 auto;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-block-start: 4px;\n\tborder-radius: 50%;\n\tbackground-color: var(--color-primary-element);\n}\n\n/* Upcoming: a hollow dot, plus the word \"Upcoming\" beside the date. */\n.cn-timeline-widget__event--upcoming .cn-timeline-widget__dot {\n\tbox-sizing: border-box;\n\tborder: 2px solid var(--color-primary-element);\n\tbackground-color: var(--color-main-background);\n}\n\n.cn-timeline-widget__body {\n\tmin-width: 0;\n}\n\n.cn-timeline-widget__when {\n\tfont-size: var(--font-size-small, 13px);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-timeline-widget__badge {\n\tmargin-inline-start: 8px;\n\tfont-size: var(--font-size-small, 13px);\n\tfont-weight: bold;\n\tcolor: var(--color-main-text);\n}\n\n.cn-timeline-widget__label {\n\tmargin: 0;\n\tfont-weight: bold;\n}\n\n.cn-timeline-widget__detail {\n\tmargin: 0;\n\toverflow-wrap: anywhere;\n}\n</style>\n"],"names":["_createElementBlock","_toDisplayString","_createVNode","_createBlock","_openBlock","_Fragment","_renderList","_normalizeClass","_createElementVNode"],"mappings":";;;;;AAMM,EAAA,KAAA,EAAA,2BAAA;;;;AAI2B,EAAA,KAAA,EAAA,6BAAA;;;;AAW3B,EAAA,KAAA,EAAA,2BAAA;AAAA,EAAA,aAAA,EAAA,0BAAA;;;;AAIQ,EAAA,KAAK,EAAE,0BAAM;;;AASjB,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,0BAAe,GAAA;;;;AAInB,EAAA,KAAA,EAAA,2BAAA;;AAGH,MAAA,WAAA,GAAA,EAAA,KAAA,EAAA,2BAAA,GAAA;;;AAGA,EAAA,KAAA,EAAA,4BAAA;;;;;;;uBAvCNA;AAAO,IAAA,KAAK,EAAC,oBAAK;AAAA,IAAA,aAAA,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,KAAA,CAAA,OAAA,GAAA,MAAA,GAAA,OAAA;;KACf,QAAA,CAAA,aAAA;sBAAJA,kBAEK,CAAA,IAAA,EAFL,UAEK,EAAAC,eAAA;;KAEM,KAAO,CAAA,OAAA,IAAK,QAAK,CAAA,MAAA,CAAC,MAAE,KAAA,CAAA;yCAGzB,iBAAA,EAAA;UAFLC,WAAI,CAAA,wBAAA,EAAA;AAAA,YAAA,IAAA,EAAA,EAAA;AAAA,YAAA,aAAA,EAAA,MAAA;;;;sBAIJF;AAEY,UAAA,CAAA,KAAA,CAAA,aAAA,CAAA,MAAA,GAAA,CAAA;4BAAZG,WAEa,CAAA,qBAAA,EAAA;;AAFD,gBAAA,IAAA,EAAA,SAAA;AAAA,gBAAA,aAAA,EAAA,0BAAA;;;;;;;;AAIT,UAAA,CAAA,QAAA,CAAA,MAAA,CAAA,MAAA,KAAA,CAAA;4BAAHH,kBAEI,CAAA,GAAA,EAFJ,UAEI,EAAAC,eAAA;AAEF,eAAAG,SAAA,EAAA,EAAAJ,kBAAA,CAwBG,MAxBH,UAwBG,EAAA;kCAvBHA,kBAsBI,CAAAK,QAAA,EAAA,IAAA,EAAAC,UAAA,CArBY,QAAM,CAAA,MAAA,EAAA,CAAf,KAAK,KAAA;uCADZN,kBAsBI,CAAA,IAAA,EAAA;oBApBH,GAAG,EAAE,KAAK,CAAC,EAAE;AACd,oBAAA,KAAK,EAACO,cAAA,CAAA,CAAA,2BAAoB,EACY,EAAA,qCAAA,EAAA,KAAA,CAAA,QAAA,EAAA,CAAA,CAAA;oBACrC,aAAW,EAAE,KAAK,CAAC,MAAM;AAC1B,oBAAA,aAAW,EAAC,0BAAyB;;8CACpCC,kBAA0D,CAAA,MAAA,EAAA;AAAtD,sBAAA,KAAM,EAAC,yBAAyB;AAAC,sBAAA,aAAW,EAAC,MAAM;;uCActD,iBAAA,EAAA;sBAZDA,kBAEO,CAAA,MAAA,EAAA;AAFD,wBAAA,KAAA,EAAA,0BAAA;AAAA,wBAAA,QAAA,EAAA,KAAA,CAAA,EAAA,CAAA,WAAA,EAAA;AACF,uBAAA,EAAAP,eAAA,CAAA,QAAA,CAAA,YAAY,CAAC,KAAK,CAAA,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;AAEhB,sBAAA,CAAA,KAAA,CAAA,QAAA;wCAAND,kBAEO,CAAA,MAAA,EAFP,UAEO,EAAAC,eAAA,CADH,QAAa,CAAA,aAAA,CAAA,EAAA,CAAA,YAAA;;AAEjB,sBAAAO,kBAAA,CAEI,KAFJ,WAEI,EAAAP,eAAA,CADA,kBAAS,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA,EAAA,CAAA,YAAA;AAEtB,sBAAA,CAAA,KAAA,CAAA,MAAA;AAAH,2BAAAG,SAAA,EAAA,EAAAJ,kBAAA,CAEE,GAFF,EAAA,WAEE,EADEC,eAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;;;"}

package/dist/esm/components/CnTimelineWidget/dashboardRegistration.js

@@ -0,0 +1,34 @@
+import __sfc_main from './CnTimelineWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Registers the `timeline` widget type (CnTimelineWidget) in the shared
+ * dashboardWidgetRegistry. Like `audit-trail` it is a DETAIL-PAGE surface:
+ * the object comes from the page's object context. It has no config form
+ * yet, so it is placed from the manifest and never offered in the
+ * Add-widget picker.
+ *
+ * @spec openspec/changes/timeline-widget/specs/timeline-widget/spec.md#requirement-a-timeline-widget-shows-an-objects-dated-events-in-order
+ */
+
+
+registerDashboardWidget('timeline', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		title: '',
+		fields: [],
+		related: [],
+		auditTrail: false,
+		timeline: false,
+		order: 'asc',
+	},
+	displayName: 'Timeline',
+	icon: 'TimelineClockOutline',
+	surfaces: ['detail-page'],
+	ownsTitle: true,
+});
+//# sourceMappingURL=dashboardRegistration.js.map

package/dist/esm/components/CnTimelineWidget/dashboardRegistration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardRegistration.js","sources":["../../../../src/components/CnTimelineWidget/dashboardRegistration.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * Registers the `timeline` widget type (CnTimelineWidget) in the shared\n * dashboardWidgetRegistry. Like `audit-trail` it is a DETAIL-PAGE surface:\n * the object comes from the page's object context. It has no config form\n * yet, so it is placed from the manifest and never offered in the\n * Add-widget picker.\n *\n * @spec openspec/changes/timeline-widget/specs/timeline-widget/spec.md#requirement-a-timeline-widget-shows-an-objects-dated-events-in-order\n */\n\nimport CnTimelineWidget from './CnTimelineWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('timeline', {\n\trenderer: CnTimelineWidget,\n\tform: null,\n\tdefaultContent: {\n\t\ttitle: '',\n\t\tfields: [],\n\t\trelated: [],\n\t\tauditTrail: false,\n\t\ttimeline: false,\n\t\torder: 'asc',\n\t},\n\tdisplayName: 'Timeline',\n\ticon: 'TimelineClockOutline',\n\tsurfaces: ['detail-page'],\n\townsTitle: true,\n})\n"],"names":["CnTimelineWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,UAAU,EAAE;AACpC,CAAC,QAAQ,EAAEA,UAAgB;AAC3B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,KAAK,EAAE,EAAE;AACX,EAAE,MAAM,EAAE,EAAE;AACZ,EAAE,OAAO,EAAE,EAAE;AACb,EAAE,UAAU,EAAE,KAAK;AACnB,EAAE,QAAQ,EAAE,KAAK;AACjB,EAAE,KAAK,EAAE,KAAK;AACd,EAAE;AACF,CAAC,WAAW,EAAE,UAAU;AACxB,CAAC,IAAI,EAAE,sBAAsB;AAC7B,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC,SAAS,EAAE,IAAI;AAChB,CAAC"}

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

@@ -61,7 +61,7 @@ var script = {
 		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, {
@@ -78,6 +78,10 @@ var script = {
 			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,
 		}
 	},
 
@@ -106,6 +110,18 @@ var script = {
 			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'
 		},
@@ -199,6 +215,9 @@ var script = {
 		},
 
 		cardStyle() {
+			if (this.quiet) {
+				return {}
+			}
 			if (this.isCentered || !this.rect) {
 				return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
 			}
@@ -217,6 +236,18 @@ var script = {
 				 * @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());
 			}
 		},
@@ -255,6 +286,9 @@ var script = {
 		// 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() {
@@ -264,12 +298,27 @@ var script = {
 		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) {
@@ -282,6 +331,10 @@ var script = {
 		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();
 		}
@@ -289,6 +342,51 @@ var script = {
 	},
 
 	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.
 		 *
@@ -476,6 +574,23 @@ var script = {
 				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.
@@ -740,6 +855,10 @@ var script = {
 		 * @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') {
@@ -936,16 +1055,20 @@ var script = {
 		},
 
 		/**
-		 * 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');
 		},
 	},
 };