@conduction/nextcloud-vue 2.90.0 → 2.92.0

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -187,7 +187,7 @@ import { resolveTabCount } from '../../utils/detailActionModel.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
-import { evaluateVisibleWhen, evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
+import { evaluateVisibleWhen, evaluateVisibleWhenLocal, evaluateWorkspaceCondition, isLocallyDecidableVisibleWhen, isWorkspaceCondition } from '../../utils/visibleWhen.js'
 import { widgetTitleOf } from '../../utils/widgetDispatch.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
 
@@ -331,6 +331,13 @@ export default {
 		 * `visibleWhen` reads them as `@context.<name>`. Null on any other page.
 		 */
 		cnDetailVisibilityRows: { default: null },
+		/**
+		 * The page's workspace bag (CnDashboardPage provides it), which a
+		 * page control such as a chips filter writes. A widget in a stack is
+		 * left out while its workspace `visibleWhen` does not hold. Null off a
+		 * dashboard.
+		 */
+		cnWorkspaceContext: { default: null },
 		/**
 		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
 		 * label written in the manifest reads in the user's language.
@@ -588,7 +595,8 @@ export default {
 				// widget is skipped. The first that resolves is the panel's.
 				const ids = this.tabWidgetIds(tab)
 				const widgets = ids.length > 1
-					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null)
+							.filter((w) => w && !this.hiddenByWorkspace(w))
 					: []
 				const widget = ids.length > 1
 					? (widgets[0] || null)
@@ -837,6 +845,29 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a page control hides a widget of a stack right now: its
+		 * `visibleWhen` (on the widget, its content or its props) is a
+		 * workspace condition that does not hold. Off a dashboard there is no
+		 * workspace, and nothing is hidden. Other conditions are not looked at
+		 * here.
+		 *
+		 * @param {object} widget The widget definition.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/tabs-stack-follows-page-controls/specs/tabs-widget/spec.md#requirement-a-widget-in-a-tab-stack-follows-the-page-controls
+		 */
+		hiddenByWorkspace(widget) {
+			const cond = widget.visibleWhen || widget.content?.visibleWhen || widget.props?.visibleWhen || null
+			if (!isWorkspaceCondition(cond)) {
+				return false
+			}
+			const bag = this.cnWorkspaceContext
+			if (!bag || typeof bag !== 'object') {
+				return false
+			}
+			return !evaluateWorkspaceCondition(cond, 'value' in bag ? bag.value : bag)
+		},
+
 		/**
 		 * The grid a stack lays its widgets out in, as one column span (of 12)
 		 * per widget in order, or null for the plain vertical stack. A tab says

package/src/components/CnTextWidget/CnTextWidget.vue

@@ -60,6 +60,17 @@
 			:style="contentStyle">
 			{{ placeholderText }}
 		</span>
+		<a
+			v-if="link"
+			class="cn-text-widget__link"
+			data-testid="cn-text-widget-link"
+			:href="link.url"
+			:target="link.external ? '_blank' : null"
+			:rel="link.external ? 'noopener noreferrer' : null"
+			@click="openLink">
+			{{ link.label }}
+			<ChevronRight :size="16" />
+		</a>
 	</div>
 </template>
 
@@ -67,6 +78,8 @@
 import { translate as t } from '@nextcloud/l10n'
 import DOMPurify from 'dompurify'
 import { Marked } from 'marked'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { isPlaceholderCell } from '../../utils/textTable.js'
 
 // Per-module `Marked` instance so configuration is scoped here and does NOT
@@ -120,13 +133,23 @@ function ensureDomPurifyHook() {
 export default {
 	name: 'CnTextWidget',
 
+	components: { ChevronRight },
+
+	inject: {
+		/** The app's translate function, provided by CnAppRoot. Identity outside one. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Persisted widget content blob: `{text, fontSize, color,
-		 * backgroundColor, textAlign, contentMode, tableMode, tableData}`.
+		 * backgroundColor, textAlign, contentMode, tableMode, tableData, link}`.
 		 * All keys are optional; missing keys collapse to documented defaults.
+		 * `text` and `link.label` go through the app's translate function.
+		 * `link` is `{label, route}` (a page id, or a path starting with `/`) or
+		 * `{label, href}` (an external URL), drawn under the text.
 		 *
-		 * @type {{text: string, fontSize: string, color: string, backgroundColor: string, textAlign: string, contentMode: string, tableMode: boolean, tableData: object}}
+		 * @type {{text: string, fontSize: string, color: string, backgroundColor: string, textAlign: string, contentMode: string, tableMode: boolean, tableData: object, link: {label: string, route: string, href: string}}}
 		 */
 		content: {
 			type: Object,
@@ -135,9 +158,34 @@ export default {
 	},
 
 	computed: {
-		/** The author text, or '' when absent / non-string. */
+		/** The author text through the app's translate function, or '' when absent / non-string. */
 		text() {
-			return typeof this.content?.text === 'string' ? this.content.text : ''
+			return typeof this.content?.text === 'string' ? this.tr(this.content.text) : ''
+		},
+
+		/**
+		 * The link under the text, from `content.link`: `{ label, route }`
+		 * (a page id, or a router path when it starts with `/`) or
+		 * `{ label, href }` (an external URL, opened in a new tab). The label
+		 * goes through the app's translate function. Null without a label or
+		 * a target.
+		 *
+		 * @return {{label: string, url: string, location: (object|null), external: boolean}|null} The link.
+		 */
+		link() {
+			const link = this.content?.link
+			if (!link || typeof link !== 'object' || typeof link.label !== 'string' || link.label === '') {
+				return null
+			}
+			if (typeof link.route === 'string' && link.route !== '') {
+				const location = link.route.startsWith('/') ? { path: link.route } : { name: link.route }
+				const url = resolveHref(location, this.$router)
+				return url ? { label: this.tr(link.label), url, location, external: false } : null
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return { label: this.tr(link.label), url: link.href, location: null, external: true }
+			}
+			return null
 		},
 
 		/** Whether the text has any non-whitespace content. */
@@ -253,6 +301,7 @@ export default {
 				'justify-content': 'center',
 				overflow: 'auto',
 				'background-color': this.backgroundColor,
+				...(this.link ? { 'flex-direction': 'column', gap: '8px', 'align-items': 'flex-start' } : {}),
 			}
 		},
 
@@ -287,6 +336,27 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the app's translate function.
+		 *
+		 * @param {string} text The string.
+		 * @return {string} The translated string.
+		 */
+		tr(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * Route a plain click on an in-app link, so the page does not reload.
+		 *
+		 * @param {MouseEvent} event The click.
+		 */
+		openLink(event) {
+			if (this.link && !this.link.external) {
+				followLinkClick(event, this.link.location, this.$router)
+			}
+		},
+
 		/**
 		 * Run cell text through DOMPurify so the table-mode render path has
 		 * the same XSS-stripping guarantees as the text-mode path.
@@ -518,4 +588,19 @@ export default {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
+
+.cn-text-widget__link {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: none;
+}
+
+.cn-text-widget__link:hover,
+.cn-text-widget__link:focus-visible {
+	text-decoration: underline;
+}
 </style>

package/src/components/index.js

@@ -43,6 +43,8 @@ export { CnDeleteDialog } from './CnDeleteDialog/index.js'
 export { CnCopyDialog } from './CnCopyDialog/index.js'
 export { CnFieldHelper } from './CnFieldHelper/index.js'
 export { CnFormDialog } from './CnFormDialog/index.js'
+export { CnDialog } from './CnDialog/index.js'
+export { CnDialogHeader } from './CnDialogHeader/index.js'
 export { CnFormBuilder } from './CnFormBuilder/index.js'
 export { CnAdvancedFormDialog, CnMetadataTab, CnPropertiesTab, CnPropertyValueCell } from './CnAdvancedFormDialog/index.js'
 export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'

package/src/index.js

@@ -99,6 +99,8 @@ export {
 	CnDetailGrid,
 	CnDetailPage,
 	CnDetailWidgetHost,
+	CnDialog,
+	CnDialogHeader,
 	CnDividerWidget,
 	CnDividerWidgetForm,
 	CnDocumentReviewList,

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.102.0",
+	"version": "2.108.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1651,6 +1651,59 @@
 				}
 			}
 		},
+		"linkModule": {
+			"type": "object",
+			"required": ["id", "label"],
+			"additionalProperties": false,
+			"description": "One module on a type='links' page. The app decides whether it is in the menu (`enabled`, or `enabledIf` against runtime). Every card opens; a module that is off links to the admin settings (`settings`).",
+			"properties": {
+				"id": { "type": "string", "minLength": 1, "description": "Unique within the page's modules." },
+				"label": { "type": "string", "minLength": 1, "description": "i18n key / the module's title." },
+				"description": { "type": "string", "description": "i18n key / one or two lines under the title." },
+				"icon": { "type": "string", "description": "MDI icon name." },
+				"enabled": { "type": "boolean", "description": "Whether the module is in the menu. Wins over enabledIf." },
+				"enabledIf": { "$ref": "#/$defs/visibleIfCondition", "description": "Condition, evaluated like visibleIf, that says the module is in the menu." },
+				"route": { "type": "string", "minLength": 1, "description": "Where Open goes: a route name or a path starting with '/'. Defaults to the first page." },
+				"params": { "type": "object", "additionalProperties": { "type": ["string", "number"] } },
+				"query": { "type": "object", "additionalProperties": { "type": ["string", "number", "boolean"] } },
+				"pages": {
+					"type": "array",
+					"description": "The module's pages, drawn as links and named in the 'N pages' line.",
+					"items": {
+						"type": "object",
+						"required": ["label"],
+						"additionalProperties": false,
+						"anyOf": [{ "required": ["route"] }, { "required": ["href"] }],
+						"properties": {
+							"label": { "type": "string", "minLength": 1 },
+							"route": { "type": "string", "minLength": 1 },
+							"params": { "type": "object", "additionalProperties": { "type": ["string", "number"] } },
+							"query": { "type": "object", "additionalProperties": { "type": ["string", "number", "boolean"] } },
+							"href": { "type": "string", "minLength": 1 },
+							"highlight": { "type": "boolean", "description": "Named in the line of a module with more than four pages ('15 pages, including ...')." }
+						}
+					}
+				},
+				"settings": {
+					"type": "object",
+					"additionalProperties": false,
+					"anyOf": [{ "required": ["route"] }, { "required": ["href"] }],
+					"description": "Where an admin puts a module that is off in the menu (the admin settings), shown on its card as '<prefix> <label>'.",
+					"properties": {
+						"label": { "type": "string", "description": "i18n key / link text. Defaults to 'Admin settings'." },
+						"prefix": { "type": "string", "description": "i18n key / text before the link. Defaults to 'Put it in the menu:'." },
+						"route": { "type": "string", "minLength": 1 },
+						"params": { "type": "object", "additionalProperties": { "type": ["string", "number"] } },
+						"query": { "type": "object", "additionalProperties": { "type": ["string", "number", "boolean"] } },
+						"href": { "type": "string", "minLength": 1 },
+						"permission": { "type": "string" },
+						"visibleIf": { "$ref": "#/$defs/visibleIfCondition" }
+					}
+				},
+				"permission": { "type": "string", "description": "Permission the user must hold for the module to render." },
+				"visibleIf": { "$ref": "#/$defs/visibleIfCondition", "description": "Display condition, evaluated the way a menu entry's is." }
+			}
+		},
 		"linkCard": {
 			"type": "object",
 			"required": ["id", "label"],
@@ -4751,7 +4804,11 @@
 									"description": { "type": "string" },
 									"emptyLabel": { "type": "string" },
 									"categories": { "type": "object", "additionalProperties": { "type": "string", "minLength": 1 } },
-									"cards": { "type": "array", "minItems": 1, "items": { "$ref": "#/$defs/linkCard" } }
+									"cards": { "type": "array", "minItems": 1, "items": { "$ref": "#/$defs/linkCard" } },
+									"modules": { "type": "array", "items": { "$ref": "#/$defs/linkModule" }, "description": "Module cards drawn above the link cards (board PqModules): per module an icon, title, in-the-menu/off badge, description, its pages, an Open button and, when off, a link to the admin settings." },
+									"modulesTitle": { "type": "string", "description": "i18n key / heading of the modules section. Defaults to 'Modules'." },
+									"footnote": { "type": "string", "description": "i18n key / a note under the module cards." },
+									"groupStyle": { "type": "string", "enum": ["cards", "list"], "default": "cards", "description": "cards: a grid of link cards per group. list: one card per group with a row per link (icon, label, description, chevron or external-link icon)." }
 								}
 							}
 						},

package/src/utils/boardDate.js

@@ -88,6 +88,40 @@ export function formatBoardDate(value, now = new Date(), locale = boardDateLocal
 	}
 }
 
+/**
+ * A date with its short weekday, the way an agenda writes it: "wo 7 okt", or
+ * "wo 14 feb 2024" outside the current year. With `today` set, today's date
+ * reads "Vandaag, wo 7 okt".
+ *
+ * @param {unknown} value A Date, a timestamp or an ISO string.
+ * @param {Date} [now] The reference moment (defaults to the current time).
+ * @param {object} [options] Options.
+ * @param {boolean} [options.today] Put "Today, " before today's date.
+ * @param {string} [options.locale] BCP 47 tag (defaults to `boardDateLocale()`).
+ * @return {string} The date, or '' when the value is not a date.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+ */
+export function formatBoardWeekday(value, now = new Date(), options = {}) {
+	const date = parseDateValue(value)
+	if (date === null) {
+		return ''
+	}
+	const parts = { weekday: 'short', day: 'numeric', month: 'short' }
+	if (date.getFullYear() !== now.getFullYear()) {
+		parts.year = 'numeric'
+	}
+	let text
+	try {
+		text = new Intl.DateTimeFormat(options.locale || boardDateLocale(), parts).format(date)
+	} catch {
+		text = new Intl.DateTimeFormat(undefined, parts).format(date)
+	}
+	if (options.today === true && ageInDays(date, now) === 0) {
+		return t('nextcloud-vue', 'Today, {date}', { date: text })
+	}
+	return text
+}
+
 /**
  * Whole calendar days from the date until `now` (0 today, 1 yesterday), or
  * null when the value is not a date. A future date gives a negative number.

package/src/utils/fillTemplate.js

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2026 Conduction B.V.
 // SPDX-License-Identifier: EUPL-1.2
 
-import { boardDateLocale, formatBoardDate, formatRelativeDate } from './boardDate.js'
+import { boardDateLocale, formatBoardDate, formatBoardWeekday, formatRelativeDate, formatTimeOfDay } from './boardDate.js'
 import { parseDateValue } from './dateVariant.js'
 import { formatMoney } from './formatMetric.js'
 import { readPath } from './readPath.js'
@@ -36,7 +36,7 @@ export function formatBoardDateTime(value, now = new Date()) {
  * Format one token value.
  *
  * @param {unknown} value The raw value.
- * @param {string} format `date`, `datetime`, `relative`, `relativetime`, `days` or '' (as is).
+ * @param {string} format `date`, `datetime`, `weekday`, `time`, `relative`, `relativetime`, `days` or '' (as is).
  * @param {Date} now The reference moment.
  * @param {string} [arg] The format's argument (`currency:EUR`, or a row path holding the code).
  * @param {object|null} [object] The row, for a currency read from a field.
@@ -53,6 +53,13 @@ function formatValue(value, format, now, arg = '', object = null, config = null)
 	if (format === 'datetime') {
 		return formatBoardDateTime(value, now)
 	}
+	if (format === 'weekday') {
+		return formatBoardWeekday(value, now, { today: arg === 'today' })
+	}
+	if (format === 'time') {
+		const date = parseDateValue(value)
+		return date === null ? '' : formatTimeOfDay(date)
+	}
 	if (format === 'currency') {
 		// `{amount|currency:EUR}` names the code, `{amount|currency:price.code}`
 		// reads it from the row, `{amount|currency}` is the app's reporting
@@ -79,7 +86,9 @@ function formatValue(value, format, now, arg = '', object = null, config = null)
  * `"Termijn {deadline|date}"` from an object.
  *
  * Every `{path}` token is a dot path into the object; `{path|date}` and
- * `{path|datetime}` format it as the boards write dates, `{path|currency}`,
+ * `{path|datetime}` format it as the boards write dates, `{path|weekday}` adds
+ * the short weekday ("wo 7 okt"; `{path|weekday:today}` reads "Vandaag, wo 7 okt"
+ * for today), `{path|time}` is the time of day ("08:45"), `{path|currency}`,
  * `{path|currency:EUR}` and `{path|currency:field}` write an amount in a
  * currency (a code, or the row field that holds it; without either, or when
  * the row field is empty, the app's reporting currency), `{path|relative}` and