@conduction/nextcloud-vue 2.60.0 → 2.62.0

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

@@ -0,0 +1,316 @@
+import { translate } from '@nextcloud/l10n';
+import { isAppInstalled } from '../../utils/appInstalled.js';
+import { resolveHref, followLinkClick } from '../../utils/linkNavigation.js';
+import { passesContextPredicates } from '../../utils/visibleIfContext.js';
+import __sfc_main from '../CnIcon/CnIcon.vue.js';
+
+let linkCardsPageUid = 0;
+
+/**
+ * CnLinkCardsPage: the `type: "links"` page. Link cards, grouped under captions.
+ *
+ * One page that opens every page a short menu leaves out. A card has a
+ * label, a one-line description, an optional icon and a target. Groups come
+ * from `categories`, in the order they are declared; a card names its group
+ * with `category`.
+ *
+ * ```json
+ * { "id": "Modules", "route": "/modules", "type": "links", "title": "Modules and more",
+ *   "config": {
+ *     "description": "Every page that is not in the daily menu.",
+ *     "categories": { "sales": "Sales", "marketing": "Marketing" },
+ *     "cards": [
+ *       { "id": "Leads", "label": "Leads", "description": "Every deal you are working on.",
+ *         "icon": "CashMultiple", "category": "sales", "route": "Leads" }
+ *     ]
+ *   } }
+ * ```
+ *
+ * Every string goes through the app's translate function. A card is hidden
+ * by the same `visibleIf` and `permission` a menu entry takes, and a group
+ * with no visible card is not drawn.
+ */
+var script = {
+	name: 'CnLinkCardsPage',
+
+	components: { CnIcon: __sfc_main },
+
+	inject: {
+		/** The app's translate function, provided by CnAppRoot. Identity outside one. */
+		cnTranslate: { default: () => (key) => key },
+		/** The effective manifest, for `visibleIf` predicates against `runtime`. */
+		cnManifest: { default: null },
+		/** The permissions the user holds. Empty means the app did not say, and allows. */
+		cnPermissions: { default: () => [] },
+	},
+
+	props: {
+		/** The whole manifest page, for a host that mounts this component itself. CnPageRenderer passes the flattened props below instead. */
+		page: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/**
+		 * The cards: `{ id, label, description?, icon?, category?, route?, params?, query?, href?, visibleIf?, permission? }`.
+		 * `route` is a route name, or a path when it starts with `/`.
+		 *
+		 * @type {Array<object>|null}
+		 */
+		cards: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * Group key to caption. Sets the order of the groups.
+		 *
+		 * @type {Record<string, string>|null}
+		 */
+		categories: {
+			type: Object,
+			default: null,
+		},
+
+		/** The heading. */
+		title: {
+			type: String,
+			default: null,
+		},
+
+		/** The lead paragraph under the heading. */
+		description: {
+			type: String,
+			default: null,
+		},
+
+		/** Text shown when no card is visible. */
+		emptyLabel: {
+			type: String,
+			default: null,
+		},
+
+		/**
+		 * Translate function. Falls back to the injected `cnTranslate`.
+		 *
+		 * @type {((key: string) => string)|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+	},
+
+	data() {
+		linkCardsPageUid += 1;
+		return {
+			uid: linkCardsPageUid,
+		}
+	},
+
+	computed: {
+		/**
+		 * The config, from the flattened props or from `page.config`. Props win.
+		 *
+		 * @return {object} The config.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		config() {
+			const fromPage = (this.page && this.page.config) || {};
+			const fromProps = {};
+			for (const key of ['cards', 'categories', 'description', 'title', 'emptyLabel']) {
+				if (this[key] !== null && this[key] !== undefined) {
+					fromProps[key] = this[key];
+				}
+			}
+			return { ...fromPage, ...fromProps }
+		},
+
+		/**
+		 * The heading, translated.
+		 *
+		 * @return {string} The title, or '' when the page declares none.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		resolvedTitle() {
+			return this.tr(this.config.title || (this.page && this.page.title) || '')
+		},
+
+		/**
+		 * The lead paragraph, translated.
+		 *
+		 * @return {string} The description.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		resolvedDescription() {
+			return this.tr(this.config.description || '')
+		},
+
+		/**
+		 * The empty-state text.
+		 *
+		 * @return {string} The text.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		resolvedEmptyLabel() {
+			return this.config.emptyLabel ? this.tr(this.config.emptyLabel) : translate('nextcloud-vue', 'Nothing to open here.')
+		},
+
+		/**
+		 * The cards a reader may see and can open, with text translated and
+		 * the link resolved. A card that is gated away, or has no target that
+		 * resolves, is left out: a card that does nothing is worse than none.
+		 *
+		 * @return {Array<object>} The cards.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link
+		 */
+		visibleCards() {
+			const declared = Array.isArray(this.config.cards) ? this.config.cards : [];
+			const runtime = this.cnManifest?.runtime ?? null;
+			return declared
+				.filter((card) => card && card.id && card.label)
+				.filter((card) => this.passesPermission(card) && this.passesVisibleIf(card, runtime))
+				.map((card) => {
+					const target = this.targetOf(card);
+					return {
+						id: String(card.id),
+						label: this.tr(card.label),
+						description: this.tr(card.description || ''),
+						descriptionId: `cn-link-card-desc-${this.uid}-${String(card.id).replace(/[^A-Za-z0-9_-]/g, '-')}`,
+						icon: card.icon || '',
+						category: card.category || '',
+						external: target.external,
+						location: target.location,
+						url: target.url,
+					}
+				})
+				.filter((card) => card.url !== '')
+		},
+
+		/**
+		 * The groups to draw: ungrouped cards first under no caption, then
+		 * one group per category in declaration order. A group without a
+		 * visible card is left out.
+		 *
+		 * @return {Array<{key: string, label: string, headingId: string, cards: Array<object>}>} The groups.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		groups() {
+			const declared = (this.config.categories && typeof this.config.categories === 'object') ? this.config.categories : {};
+			const keys = Object.keys(declared);
+			const loose = this.visibleCards.filter((card) => !keys.includes(card.category));
+			const groups = loose.length > 0 ? [{ key: '', label: '', headingId: '', cards: loose }] : [];
+			keys.forEach((key, index) => {
+				const cards = this.visibleCards.filter((card) => card.category === key);
+				if (cards.length > 0) {
+					groups.push({
+						key,
+						label: this.tr(declared[key]),
+						headingId: `cn-link-cards-group-${this.uid}-${index}`,
+						cards,
+					});
+				}
+			});
+			return groups
+		},
+	},
+
+	methods: {
+		/**
+		 * Translate a manifest string through the app's translate function.
+		 *
+		 * @param {string} value The declared string.
+		 * @return {string} The translation, or the input unchanged.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards
+		 */
+		tr(value) {
+			if (typeof value !== 'string' || value === '') {
+				return value
+			}
+			return (this.translate ?? this.cnTranslate)(value)
+		},
+
+		/**
+		 * Whether the user holds the card's `permission`. Same rule as the
+		 * menu: no permission declared, or no permissions known, allows.
+		 *
+		 * @param {object} card The card.
+		 * @return {boolean} True when the card may render.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions
+		 */
+		passesPermission(card) {
+			const held = Array.isArray(this.cnPermissions) ? this.cnPermissions : [];
+			if (!card.permission || held.length === 0) {
+				return true
+			}
+			return held.includes(card.permission)
+		},
+
+		/**
+		 * Evaluate a card's `visibleIf` the way CnAppNav evaluates a menu
+		 * entry's: `appInstalled` first, then dot-path predicates against
+		 * the manifest's `runtime`.
+		 *
+		 * @param {object} card The card.
+		 * @param {object|null} runtime `manifest.runtime`, or null.
+		 * @return {boolean} True when the card may render.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions
+		 */
+		passesVisibleIf(card, runtime) {
+			const condition = card.visibleIf;
+			if (!condition || typeof condition !== 'object') {
+				return true
+			}
+			if (condition.appInstalled && !isAppInstalled(condition.appInstalled)) {
+				return false
+			}
+			return passesContextPredicates(condition, runtime)
+		},
+
+		/**
+		 * Where a card goes. An `href` is an external URL. A `route` is a
+		 * route name, or a path when it starts with `/`, resolved by the
+		 * router so the link carries the app's base with or without
+		 * `/index.php`.
+		 *
+		 * @param {object} card The card.
+		 * @return {{external: boolean, location: object|null, url: string}} The target; `url` is '' when it cannot be resolved.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link
+		 */
+		targetOf(card) {
+			if (typeof card.route === 'string' && card.route !== '') {
+				const location = card.route.startsWith('/') ? { path: card.route } : { name: card.route };
+				if (card.params && typeof card.params === 'object') {
+					location.params = card.params;
+				}
+				if (card.query && typeof card.query === 'object') {
+					location.query = card.query;
+				}
+				return { external: false, location, url: resolveHref(location, this.$router) }
+			}
+			if (typeof card.href === 'string' && card.href !== '') {
+				return { external: true, location: null, url: card.href }
+			}
+			return { external: false, location: null, url: '' }
+		},
+
+		/**
+		 * Route a plain click on an in-app card. A modified or middle click,
+		 * and every click on an external card, is left to the browser.
+		 *
+		 * @param {object} card The resolved card.
+		 * @param {MouseEvent} event The click.
+		 * @return {void}
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link
+		 */
+		open(card, event) {
+			if (card.external || !card.location) {
+				return
+			}
+			followLinkClick(event, card.location, this.$router);
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnLinkCardsPage.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnLinkCardsPage.vue2.js","sources":["../../../../src/components/CnLinkCardsPage/CnLinkCardsPage.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-link-cards-page\" data-testid=\"cn-link-cards-page\">\n\t\t<div class=\"cn-link-cards-page__header\">\n\t\t\t<h2 v-if=\"resolvedTitle\" class=\"cn-link-cards-page__title\">\n\t\t\t\t{{ resolvedTitle }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"resolvedDescription\" class=\"cn-link-cards-page__description\">\n\t\t\t\t{{ resolvedDescription }}\n\t\t\t</p>\n\t\t</div>\n\n\t\t<p\n\t\t\tv-if=\"groups.length === 0\"\n\t\t\tclass=\"cn-link-cards-page__empty\"\n\t\t\tdata-testid=\"cn-link-cards-empty\">\n\t\t\t{{ resolvedEmptyLabel }}\n\t\t</p>\n\n\t\t<section\n\t\t\tv-for=\"group in groups\"\n\t\t\t:key=\"group.key\"\n\t\t\tclass=\"cn-link-cards-page__group\"\n\t\t\t:aria-labelledby=\"group.label ? group.headingId : null\"\n\t\t\t:aria-label=\"group.label ? null : resolvedTitle || null\"\n\t\t\tdata-testid=\"cn-link-cards-group\"\n\t\t\t:data-group=\"group.key\">\n\t\t\t<h3\n\t\t\t\tv-if=\"group.label\"\n\t\t\t\t:id=\"group.headingId\"\n\t\t\t\tclass=\"cn-link-cards-page__caption\">\n\t\t\t\t{{ group.label }}\n\t\t\t</h3>\n\t\t\t<ul class=\"cn-link-cards-page__grid\">\n\t\t\t\t<li v-for=\"card in group.cards\" :key=\"card.id\" class=\"cn-link-cards-page__cell\">\n\t\t\t\t\t<!-- A real <a href>, so the card can be middle-clicked, copied\n\t\t\t\t\t     and announced as a link. A plain click on an in-app card\n\t\t\t\t\t     is routed, which keeps the page from reloading. -->\n\t\t\t\t\t<a\n\t\t\t\t\t\tclass=\"cn-link-cards-page__card\"\n\t\t\t\t\t\tdata-testid=\"cn-link-card\"\n\t\t\t\t\t\t:data-card-id=\"card.id\"\n\t\t\t\t\t\t:href=\"card.url\"\n\t\t\t\t\t\t:target=\"card.external ? '_blank' : null\"\n\t\t\t\t\t\t:rel=\"card.external ? 'noopener noreferrer' : null\"\n\t\t\t\t\t\t:aria-describedby=\"card.description ? card.descriptionId : null\"\n\t\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t\t<CnIcon\n\t\t\t\t\t\t\tv-if=\"card.icon\"\n\t\t\t\t\t\t\t:name=\"card.icon\"\n\t\t\t\t\t\t\t:size=\"24\"\n\t\t\t\t\t\t\tclass=\"cn-link-cards-page__icon\"\n\t\t\t\t\t\t\taria-hidden=\"true\" />\n\t\t\t\t\t\t<span class=\"cn-link-cards-page__body\">\n\t\t\t\t\t\t\t<span class=\"cn-link-cards-page__label\">{{ card.label }}</span>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tv-if=\"card.description\"\n\t\t\t\t\t\t\t\t:id=\"card.descriptionId\"\n\t\t\t\t\t\t\t\tclass=\"cn-link-cards-page__card-description\">\n\t\t\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { isAppInstalled } from '../../utils/appInstalled.js'\nimport { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'\nimport { passesContextPredicates } from '../../utils/visibleIfContext.js'\nimport { CnIcon } from '../CnIcon/index.js'\n\nlet linkCardsPageUid = 0\n\n/**\n * CnLinkCardsPage: the `type: \"links\"` page. Link cards, grouped under captions.\n *\n * One page that opens every page a short menu leaves out. A card has a\n * label, a one-line description, an optional icon and a target. Groups come\n * from `categories`, in the order they are declared; a card names its group\n * with `category`.\n *\n * ```json\n * { \"id\": \"Modules\", \"route\": \"/modules\", \"type\": \"links\", \"title\": \"Modules and more\",\n *   \"config\": {\n *     \"description\": \"Every page that is not in the daily menu.\",\n *     \"categories\": { \"sales\": \"Sales\", \"marketing\": \"Marketing\" },\n *     \"cards\": [\n *       { \"id\": \"Leads\", \"label\": \"Leads\", \"description\": \"Every deal you are working on.\",\n *         \"icon\": \"CashMultiple\", \"category\": \"sales\", \"route\": \"Leads\" }\n *     ]\n *   } }\n * ```\n *\n * Every string goes through the app's translate function. A card is hidden\n * by the same `visibleIf` and `permission` a menu entry takes, and a group\n * with no visible card is not drawn.\n */\nexport default {\n\tname: 'CnLinkCardsPage',\n\n\tcomponents: { CnIcon },\n\n\tinject: {\n\t\t/** The app's translate function, provided by CnAppRoot. Identity outside one. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/** The effective manifest, for `visibleIf` predicates against `runtime`. */\n\t\tcnManifest: { default: null },\n\t\t/** The permissions the user holds. Empty means the app did not say, and allows. */\n\t\tcnPermissions: { default: () => [] },\n\t},\n\n\tprops: {\n\t\t/** The whole manifest page, for a host that mounts this component itself. CnPageRenderer passes the flattened props below instead. */\n\t\tpage: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * The cards: `{ id, label, description?, icon?, category?, route?, params?, query?, href?, visibleIf?, permission? }`.\n\t\t * `route` is a route name, or a path when it starts with `/`.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tcards: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Group key to caption. Sets the order of the groups.\n\t\t *\n\t\t * @type {Record<string, string>|null}\n\t\t */\n\t\tcategories: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The heading. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The lead paragraph under the heading. */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Text shown when no card is visible. */\n\t\temptyLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to the injected `cnTranslate`.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\tlinkCardsPageUid += 1\n\t\treturn {\n\t\t\tuid: linkCardsPageUid,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The config, from the flattened props or from `page.config`. Props win.\n\t\t *\n\t\t * @return {object} The config.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tconfig() {\n\t\t\tconst fromPage = (this.page && this.page.config) || {}\n\t\t\tconst fromProps = {}\n\t\t\tfor (const key of ['cards', 'categories', 'description', 'title', 'emptyLabel']) {\n\t\t\t\tif (this[key] !== null && this[key] !== undefined) {\n\t\t\t\t\tfromProps[key] = this[key]\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { ...fromPage, ...fromProps }\n\t\t},\n\n\t\t/**\n\t\t * The heading, translated.\n\t\t *\n\t\t * @return {string} The title, or '' when the page declares none.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedTitle() {\n\t\t\treturn this.tr(this.config.title || (this.page && this.page.title) || '')\n\t\t},\n\n\t\t/**\n\t\t * The lead paragraph, translated.\n\t\t *\n\t\t * @return {string} The description.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedDescription() {\n\t\t\treturn this.tr(this.config.description || '')\n\t\t},\n\n\t\t/**\n\t\t * The empty-state text.\n\t\t *\n\t\t * @return {string} The text.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedEmptyLabel() {\n\t\t\treturn this.config.emptyLabel ? this.tr(this.config.emptyLabel) : t('nextcloud-vue', 'Nothing to open here.')\n\t\t},\n\n\t\t/**\n\t\t * The cards a reader may see and can open, with text translated and\n\t\t * the link resolved. A card that is gated away, or has no target that\n\t\t * resolves, is left out: a card that does nothing is worse than none.\n\t\t *\n\t\t * @return {Array<object>} The cards.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\tvisibleCards() {\n\t\t\tconst declared = Array.isArray(this.config.cards) ? this.config.cards : []\n\t\t\tconst runtime = this.cnManifest?.runtime ?? null\n\t\t\treturn declared\n\t\t\t\t.filter((card) => card && card.id && card.label)\n\t\t\t\t.filter((card) => this.passesPermission(card) && this.passesVisibleIf(card, runtime))\n\t\t\t\t.map((card) => {\n\t\t\t\t\tconst target = this.targetOf(card)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: String(card.id),\n\t\t\t\t\t\tlabel: this.tr(card.label),\n\t\t\t\t\t\tdescription: this.tr(card.description || ''),\n\t\t\t\t\t\tdescriptionId: `cn-link-card-desc-${this.uid}-${String(card.id).replace(/[^A-Za-z0-9_-]/g, '-')}`,\n\t\t\t\t\t\ticon: card.icon || '',\n\t\t\t\t\t\tcategory: card.category || '',\n\t\t\t\t\t\texternal: target.external,\n\t\t\t\t\t\tlocation: target.location,\n\t\t\t\t\t\turl: target.url,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.filter((card) => card.url !== '')\n\t\t},\n\n\t\t/**\n\t\t * The groups to draw: ungrouped cards first under no caption, then\n\t\t * one group per category in declaration order. A group without a\n\t\t * visible card is left out.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, headingId: string, cards: Array<object>}>} The groups.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tgroups() {\n\t\t\tconst declared = (this.config.categories && typeof this.config.categories === 'object') ? this.config.categories : {}\n\t\t\tconst keys = Object.keys(declared)\n\t\t\tconst loose = this.visibleCards.filter((card) => !keys.includes(card.category))\n\t\t\tconst groups = loose.length > 0 ? [{ key: '', label: '', headingId: '', cards: loose }] : []\n\t\t\tkeys.forEach((key, index) => {\n\t\t\t\tconst cards = this.visibleCards.filter((card) => card.category === key)\n\t\t\t\tif (cards.length > 0) {\n\t\t\t\t\tgroups.push({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.tr(declared[key]),\n\t\t\t\t\t\theadingId: `cn-link-cards-group-${this.uid}-${index}`,\n\t\t\t\t\t\tcards,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn groups\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a manifest string through the app's translate function.\n\t\t *\n\t\t * @param {string} value The declared string.\n\t\t * @return {string} The translation, or the input unchanged.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\ttr(value) {\n\t\t\tif (typeof value !== 'string' || value === '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\treturn (this.translate ?? this.cnTranslate)(value)\n\t\t},\n\n\t\t/**\n\t\t * Whether the user holds the card's `permission`. Same rule as the\n\t\t * menu: no permission declared, or no permissions known, allows.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {boolean} True when the card may render.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions\n\t\t */\n\t\tpassesPermission(card) {\n\t\t\tconst held = Array.isArray(this.cnPermissions) ? this.cnPermissions : []\n\t\t\tif (!card.permission || held.length === 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn held.includes(card.permission)\n\t\t},\n\n\t\t/**\n\t\t * Evaluate a card's `visibleIf` the way CnAppNav evaluates a menu\n\t\t * entry's: `appInstalled` first, then dot-path predicates against\n\t\t * the manifest's `runtime`.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @param {object|null} runtime `manifest.runtime`, or null.\n\t\t * @return {boolean} True when the card may render.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions\n\t\t */\n\t\tpassesVisibleIf(card, runtime) {\n\t\t\tconst condition = card.visibleIf\n\t\t\tif (!condition || typeof condition !== 'object') {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (condition.appInstalled && !isAppInstalled(condition.appInstalled)) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn passesContextPredicates(condition, runtime)\n\t\t},\n\n\t\t/**\n\t\t * Where a card goes. An `href` is an external URL. A `route` is a\n\t\t * route name, or a path when it starts with `/`, resolved by the\n\t\t * router so the link carries the app's base with or without\n\t\t * `/index.php`.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {{external: boolean, location: object|null, url: string}} The target; `url` is '' when it cannot be resolved.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\ttargetOf(card) {\n\t\t\tif (typeof card.route === 'string' && card.route !== '') {\n\t\t\t\tconst location = card.route.startsWith('/') ? { path: card.route } : { name: card.route }\n\t\t\t\tif (card.params && typeof card.params === 'object') {\n\t\t\t\t\tlocation.params = card.params\n\t\t\t\t}\n\t\t\t\tif (card.query && typeof card.query === 'object') {\n\t\t\t\t\tlocation.query = card.query\n\t\t\t\t}\n\t\t\t\treturn { external: false, location, url: resolveHref(location, this.$router) }\n\t\t\t}\n\t\t\tif (typeof card.href === 'string' && card.href !== '') {\n\t\t\t\treturn { external: true, location: null, url: card.href }\n\t\t\t}\n\t\t\treturn { external: false, location: null, url: '' }\n\t\t},\n\n\t\t/**\n\t\t * Route a plain click on an in-app card. A modified or middle click,\n\t\t * and every click on an external card, is left to the browser.\n\t\t *\n\t\t * @param {object} card The resolved card.\n\t\t * @param {MouseEvent} event The click.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\topen(card, event) {\n\t\t\tif (card.external || !card.location) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tfollowLinkClick(event, card.location, this.$router)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-link-cards-page {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(6 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline));\n}\n\n/* Clear the Nextcloud navigation toggle button (44px wide, absolutely\n   positioned at the left edge of .app-content) plus 12px breathing room, as\n   CnPageHeader does. Only the header shifts; the cards keep the full width. */\n.cn-link-cards-page__header {\n\tpadding-inline-start: 56px;\n}\n\n.cn-link-cards-page__title {\n\tmargin: 0 0 var(--default-grid-baseline);\n}\n\n.cn-link-cards-page__description,\n.cn-link-cards-page__empty {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin: 0;\n\tmax-width: 70ch;\n}\n\n.cn-link-cards-page__group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(3 * var(--default-grid-baseline));\n}\n\n.cn-link-cards-page__caption {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.85em;\n\tfont-weight: 600;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-link-cards-page__grid {\n\tdisplay: grid;\n\tgap: calc(3 * var(--default-grid-baseline));\n\tgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-link-cards-page__cell {\n\tdisplay: flex;\n}\n\n.cn-link-cards-page__card {\n\talign-items: flex-start;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border-dark);\n\tborder-radius: var(--border-radius-large);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\tflex: 1;\n\tgap: calc(3 * var(--default-grid-baseline));\n\tmin-width: 0;\n\tpadding: calc(4 * var(--default-grid-baseline));\n\ttransition: background-color var(--animation-quick, 100ms) ease, border-color var(--animation-quick, 100ms) ease, box-shadow var(--animation-quick, 100ms) ease;\n}\n\n/* A card is a link, and it must not look like a line of prose. A theme may\n   underline every link with `!important` (thematiq: `a { text-decoration:\n   underline !important }`, specificity 0,0,1). Among `!important` rules the\n   higher specificity wins, so this class rule has to carry it too; without it\n   the label and the description both rendered underlined on a live Nextcloud. */\n.cn-link-cards-page__card,\n.cn-link-cards-page__card:hover,\n.cn-link-cards-page__card:focus,\n.cn-link-cards-page__card:active {\n\ttext-decoration: none !important;\n}\n\n/* Hover moves the whole card: border, background and a soft lift. */\n.cn-link-cards-page__card:hover {\n\tbackground: var(--color-background-hover);\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 6px var(--color-box-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.cn-link-cards-page__card {\n\t\ttransition: none;\n\t}\n}\n\n.cn-link-cards-page__card:focus-visible {\n\tborder-color: var(--color-primary-element);\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n.cn-link-cards-page__icon {\n\tcolor: var(--color-primary-element);\n\tflex: none;\n}\n\n.cn-link-cards-page__body {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline);\n\tmin-width: 0;\n}\n\n/* The label is the card's title. Its colour is set here, on the span, because\n   a theme may force its link colour on the `a` itself; an inherited link\n   colour made the title read as a hyperlink. */\n.cn-link-cards-page__label {\n\tcolor: var(--color-main-text);\n\tfont-size: 1.05em;\n\tfont-weight: 700;\n\tline-height: 1.3;\n\toverflow-wrap: anywhere;\n}\n\n.cn-link-cards-page__card-description {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n\tline-height: 1.4;\n}\n</style>\n"],"names":["CnIcon","t"],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-link-cards-page",
+  "data-testid": "cn-link-cards-page"
+};
+const _hoisted_2 = { class: "cn-link-cards-page__header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "cn-link-cards-page__title"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "cn-link-cards-page__description"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "cn-link-cards-page__empty",
+  "data-testid": "cn-link-cards-empty"
+};
+const _hoisted_6 = ["aria-labelledby", "aria-label", "data-group"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = { class: "cn-link-cards-page__grid" };
+const _hoisted_9 = ["data-card-id", "href", "target", "rel", "aria-describedby", "onClick"];
+const _hoisted_10 = { class: "cn-link-cards-page__body" };
+const _hoisted_11 = { class: "cn-link-cards-page__label" };
+const _hoisted_12 = ["id"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnIcon = resolveComponent("CnIcon");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      ($options.resolvedTitle)
+        ? (openBlock(), createElementBlock("h2", _hoisted_3, toDisplayString($options.resolvedTitle), 1 /* TEXT */))
+        : createCommentVNode("v-if", true),
+      ($options.resolvedDescription)
+        ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.resolvedDescription), 1 /* TEXT */))
+        : createCommentVNode("v-if", true)
+    ]),
+    ($options.groups.length === 0)
+      ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($options.resolvedEmptyLabel), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.groups, (group) => {
+      return (openBlock(), createElementBlock("section", {
+        key: group.key,
+        class: "cn-link-cards-page__group",
+        "aria-labelledby": group.label ? group.headingId : null,
+        "aria-label": group.label ? null : $options.resolvedTitle || null,
+        "data-testid": "cn-link-cards-group",
+        "data-group": group.key
+      }, [
+        (group.label)
+          ? (openBlock(), createElementBlock("h3", {
+              key: 0,
+              id: group.headingId,
+              class: "cn-link-cards-page__caption"
+            }, toDisplayString(group.label), 9 /* TEXT, PROPS */, _hoisted_7))
+          : createCommentVNode("v-if", true),
+        createElementVNode("ul", _hoisted_8, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(group.cards, (card) => {
+            return (openBlock(), createElementBlock("li", {
+              key: card.id,
+              class: "cn-link-cards-page__cell"
+            }, [
+              createElementVNode("a", {
+                class: "cn-link-cards-page__card",
+                "data-testid": "cn-link-card",
+                "data-card-id": card.id,
+                href: card.url,
+                target: card.external ? '_blank' : null,
+                rel: card.external ? 'noopener noreferrer' : null,
+                "aria-describedby": card.description ? card.descriptionId : null,
+                onClick: $event => ($options.open(card, $event))
+              }, [
+                (card.icon)
+                  ? (openBlock(), createBlock(_component_CnIcon, {
+                      key: 0,
+                      name: card.icon,
+                      size: 24,
+                      class: "cn-link-cards-page__icon",
+                      "aria-hidden": "true"
+                    }, null, 8 /* PROPS */, ["name"]))
+                  : createCommentVNode("v-if", true),
+                createElementVNode("span", _hoisted_10, [
+                  createElementVNode("span", _hoisted_11, toDisplayString(card.label), 1 /* TEXT */),
+                  (card.description)
+                    ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        id: card.descriptionId,
+                        class: "cn-link-cards-page__card-description"
+                      }, toDisplayString(card.description), 9 /* TEXT, PROPS */, _hoisted_12))
+                    : createCommentVNode("v-if", true)
+                ])
+              ], 8 /* PROPS */, _hoisted_9)
+            ]))
+          }), 128 /* KEYED_FRAGMENT */))
+        ])
+      ], 8 /* PROPS */, _hoisted_6))
+    }), 128 /* KEYED_FRAGMENT */))
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnLinkCardsPage.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnLinkCardsPage.vue3.js","sources":["../../../../src/components/CnLinkCardsPage/CnLinkCardsPage.vue?vue&type=template&id=2f9a546b&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-link-cards-page\" data-testid=\"cn-link-cards-page\">\n\t\t<div class=\"cn-link-cards-page__header\">\n\t\t\t<h2 v-if=\"resolvedTitle\" class=\"cn-link-cards-page__title\">\n\t\t\t\t{{ resolvedTitle }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"resolvedDescription\" class=\"cn-link-cards-page__description\">\n\t\t\t\t{{ resolvedDescription }}\n\t\t\t</p>\n\t\t</div>\n\n\t\t<p\n\t\t\tv-if=\"groups.length === 0\"\n\t\t\tclass=\"cn-link-cards-page__empty\"\n\t\t\tdata-testid=\"cn-link-cards-empty\">\n\t\t\t{{ resolvedEmptyLabel }}\n\t\t</p>\n\n\t\t<section\n\t\t\tv-for=\"group in groups\"\n\t\t\t:key=\"group.key\"\n\t\t\tclass=\"cn-link-cards-page__group\"\n\t\t\t:aria-labelledby=\"group.label ? group.headingId : null\"\n\t\t\t:aria-label=\"group.label ? null : resolvedTitle || null\"\n\t\t\tdata-testid=\"cn-link-cards-group\"\n\t\t\t:data-group=\"group.key\">\n\t\t\t<h3\n\t\t\t\tv-if=\"group.label\"\n\t\t\t\t:id=\"group.headingId\"\n\t\t\t\tclass=\"cn-link-cards-page__caption\">\n\t\t\t\t{{ group.label }}\n\t\t\t</h3>\n\t\t\t<ul class=\"cn-link-cards-page__grid\">\n\t\t\t\t<li v-for=\"card in group.cards\" :key=\"card.id\" class=\"cn-link-cards-page__cell\">\n\t\t\t\t\t<!-- A real <a href>, so the card can be middle-clicked, copied\n\t\t\t\t\t     and announced as a link. A plain click on an in-app card\n\t\t\t\t\t     is routed, which keeps the page from reloading. -->\n\t\t\t\t\t<a\n\t\t\t\t\t\tclass=\"cn-link-cards-page__card\"\n\t\t\t\t\t\tdata-testid=\"cn-link-card\"\n\t\t\t\t\t\t:data-card-id=\"card.id\"\n\t\t\t\t\t\t:href=\"card.url\"\n\t\t\t\t\t\t:target=\"card.external ? '_blank' : null\"\n\t\t\t\t\t\t:rel=\"card.external ? 'noopener noreferrer' : null\"\n\t\t\t\t\t\t:aria-describedby=\"card.description ? card.descriptionId : null\"\n\t\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t\t<CnIcon\n\t\t\t\t\t\t\tv-if=\"card.icon\"\n\t\t\t\t\t\t\t:name=\"card.icon\"\n\t\t\t\t\t\t\t:size=\"24\"\n\t\t\t\t\t\t\tclass=\"cn-link-cards-page__icon\"\n\t\t\t\t\t\t\taria-hidden=\"true\" />\n\t\t\t\t\t\t<span class=\"cn-link-cards-page__body\">\n\t\t\t\t\t\t\t<span class=\"cn-link-cards-page__label\">{{ card.label }}</span>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tv-if=\"card.description\"\n\t\t\t\t\t\t\t\t:id=\"card.descriptionId\"\n\t\t\t\t\t\t\t\tclass=\"cn-link-cards-page__card-description\">\n\t\t\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { isAppInstalled } from '../../utils/appInstalled.js'\nimport { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'\nimport { passesContextPredicates } from '../../utils/visibleIfContext.js'\nimport { CnIcon } from '../CnIcon/index.js'\n\nlet linkCardsPageUid = 0\n\n/**\n * CnLinkCardsPage: the `type: \"links\"` page. Link cards, grouped under captions.\n *\n * One page that opens every page a short menu leaves out. A card has a\n * label, a one-line description, an optional icon and a target. Groups come\n * from `categories`, in the order they are declared; a card names its group\n * with `category`.\n *\n * ```json\n * { \"id\": \"Modules\", \"route\": \"/modules\", \"type\": \"links\", \"title\": \"Modules and more\",\n *   \"config\": {\n *     \"description\": \"Every page that is not in the daily menu.\",\n *     \"categories\": { \"sales\": \"Sales\", \"marketing\": \"Marketing\" },\n *     \"cards\": [\n *       { \"id\": \"Leads\", \"label\": \"Leads\", \"description\": \"Every deal you are working on.\",\n *         \"icon\": \"CashMultiple\", \"category\": \"sales\", \"route\": \"Leads\" }\n *     ]\n *   } }\n * ```\n *\n * Every string goes through the app's translate function. A card is hidden\n * by the same `visibleIf` and `permission` a menu entry takes, and a group\n * with no visible card is not drawn.\n */\nexport default {\n\tname: 'CnLinkCardsPage',\n\n\tcomponents: { CnIcon },\n\n\tinject: {\n\t\t/** The app's translate function, provided by CnAppRoot. Identity outside one. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/** The effective manifest, for `visibleIf` predicates against `runtime`. */\n\t\tcnManifest: { default: null },\n\t\t/** The permissions the user holds. Empty means the app did not say, and allows. */\n\t\tcnPermissions: { default: () => [] },\n\t},\n\n\tprops: {\n\t\t/** The whole manifest page, for a host that mounts this component itself. CnPageRenderer passes the flattened props below instead. */\n\t\tpage: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * The cards: `{ id, label, description?, icon?, category?, route?, params?, query?, href?, visibleIf?, permission? }`.\n\t\t * `route` is a route name, or a path when it starts with `/`.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tcards: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Group key to caption. Sets the order of the groups.\n\t\t *\n\t\t * @type {Record<string, string>|null}\n\t\t */\n\t\tcategories: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The heading. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The lead paragraph under the heading. */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Text shown when no card is visible. */\n\t\temptyLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to the injected `cnTranslate`.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\tlinkCardsPageUid += 1\n\t\treturn {\n\t\t\tuid: linkCardsPageUid,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The config, from the flattened props or from `page.config`. Props win.\n\t\t *\n\t\t * @return {object} The config.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tconfig() {\n\t\t\tconst fromPage = (this.page && this.page.config) || {}\n\t\t\tconst fromProps = {}\n\t\t\tfor (const key of ['cards', 'categories', 'description', 'title', 'emptyLabel']) {\n\t\t\t\tif (this[key] !== null && this[key] !== undefined) {\n\t\t\t\t\tfromProps[key] = this[key]\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { ...fromPage, ...fromProps }\n\t\t},\n\n\t\t/**\n\t\t * The heading, translated.\n\t\t *\n\t\t * @return {string} The title, or '' when the page declares none.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedTitle() {\n\t\t\treturn this.tr(this.config.title || (this.page && this.page.title) || '')\n\t\t},\n\n\t\t/**\n\t\t * The lead paragraph, translated.\n\t\t *\n\t\t * @return {string} The description.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedDescription() {\n\t\t\treturn this.tr(this.config.description || '')\n\t\t},\n\n\t\t/**\n\t\t * The empty-state text.\n\t\t *\n\t\t * @return {string} The text.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tresolvedEmptyLabel() {\n\t\t\treturn this.config.emptyLabel ? this.tr(this.config.emptyLabel) : t('nextcloud-vue', 'Nothing to open here.')\n\t\t},\n\n\t\t/**\n\t\t * The cards a reader may see and can open, with text translated and\n\t\t * the link resolved. A card that is gated away, or has no target that\n\t\t * resolves, is left out: a card that does nothing is worse than none.\n\t\t *\n\t\t * @return {Array<object>} The cards.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\tvisibleCards() {\n\t\t\tconst declared = Array.isArray(this.config.cards) ? this.config.cards : []\n\t\t\tconst runtime = this.cnManifest?.runtime ?? null\n\t\t\treturn declared\n\t\t\t\t.filter((card) => card && card.id && card.label)\n\t\t\t\t.filter((card) => this.passesPermission(card) && this.passesVisibleIf(card, runtime))\n\t\t\t\t.map((card) => {\n\t\t\t\t\tconst target = this.targetOf(card)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: String(card.id),\n\t\t\t\t\t\tlabel: this.tr(card.label),\n\t\t\t\t\t\tdescription: this.tr(card.description || ''),\n\t\t\t\t\t\tdescriptionId: `cn-link-card-desc-${this.uid}-${String(card.id).replace(/[^A-Za-z0-9_-]/g, '-')}`,\n\t\t\t\t\t\ticon: card.icon || '',\n\t\t\t\t\t\tcategory: card.category || '',\n\t\t\t\t\t\texternal: target.external,\n\t\t\t\t\t\tlocation: target.location,\n\t\t\t\t\t\turl: target.url,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.filter((card) => card.url !== '')\n\t\t},\n\n\t\t/**\n\t\t * The groups to draw: ungrouped cards first under no caption, then\n\t\t * one group per category in declaration order. A group without a\n\t\t * visible card is left out.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, headingId: string, cards: Array<object>}>} The groups.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\tgroups() {\n\t\t\tconst declared = (this.config.categories && typeof this.config.categories === 'object') ? this.config.categories : {}\n\t\t\tconst keys = Object.keys(declared)\n\t\t\tconst loose = this.visibleCards.filter((card) => !keys.includes(card.category))\n\t\t\tconst groups = loose.length > 0 ? [{ key: '', label: '', headingId: '', cards: loose }] : []\n\t\t\tkeys.forEach((key, index) => {\n\t\t\t\tconst cards = this.visibleCards.filter((card) => card.category === key)\n\t\t\t\tif (cards.length > 0) {\n\t\t\t\t\tgroups.push({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.tr(declared[key]),\n\t\t\t\t\t\theadingId: `cn-link-cards-group-${this.uid}-${index}`,\n\t\t\t\t\t\tcards,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn groups\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a manifest string through the app's translate function.\n\t\t *\n\t\t * @param {string} value The declared string.\n\t\t * @return {string} The translation, or the input unchanged.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-links-page-renders-grouped-link-cards\n\t\t */\n\t\ttr(value) {\n\t\t\tif (typeof value !== 'string' || value === '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\treturn (this.translate ?? this.cnTranslate)(value)\n\t\t},\n\n\t\t/**\n\t\t * Whether the user holds the card's `permission`. Same rule as the\n\t\t * menu: no permission declared, or no permissions known, allows.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {boolean} True when the card may render.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions\n\t\t */\n\t\tpassesPermission(card) {\n\t\t\tconst held = Array.isArray(this.cnPermissions) ? this.cnPermissions : []\n\t\t\tif (!card.permission || held.length === 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn held.includes(card.permission)\n\t\t},\n\n\t\t/**\n\t\t * Evaluate a card's `visibleIf` the way CnAppNav evaluates a menu\n\t\t * entry's: `appInstalled` first, then dot-path predicates against\n\t\t * the manifest's `runtime`.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @param {object|null} runtime `manifest.runtime`, or null.\n\t\t * @return {boolean} True when the card may render.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-cards-honour-menu-visibility-conditions\n\t\t */\n\t\tpassesVisibleIf(card, runtime) {\n\t\t\tconst condition = card.visibleIf\n\t\t\tif (!condition || typeof condition !== 'object') {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (condition.appInstalled && !isAppInstalled(condition.appInstalled)) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn passesContextPredicates(condition, runtime)\n\t\t},\n\n\t\t/**\n\t\t * Where a card goes. An `href` is an external URL. A `route` is a\n\t\t * route name, or a path when it starts with `/`, resolved by the\n\t\t * router so the link carries the app's base with or without\n\t\t * `/index.php`.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {{external: boolean, location: object|null, url: string}} The target; `url` is '' when it cannot be resolved.\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\ttargetOf(card) {\n\t\t\tif (typeof card.route === 'string' && card.route !== '') {\n\t\t\t\tconst location = card.route.startsWith('/') ? { path: card.route } : { name: card.route }\n\t\t\t\tif (card.params && typeof card.params === 'object') {\n\t\t\t\t\tlocation.params = card.params\n\t\t\t\t}\n\t\t\t\tif (card.query && typeof card.query === 'object') {\n\t\t\t\t\tlocation.query = card.query\n\t\t\t\t}\n\t\t\t\treturn { external: false, location, url: resolveHref(location, this.$router) }\n\t\t\t}\n\t\t\tif (typeof card.href === 'string' && card.href !== '') {\n\t\t\t\treturn { external: true, location: null, url: card.href }\n\t\t\t}\n\t\t\treturn { external: false, location: null, url: '' }\n\t\t},\n\n\t\t/**\n\t\t * Route a plain click on an in-app card. A modified or middle click,\n\t\t * and every click on an external card, is left to the browser.\n\t\t *\n\t\t * @param {object} card The resolved card.\n\t\t * @param {MouseEvent} event The click.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-a-card-is-a-real-link\n\t\t */\n\t\topen(card, event) {\n\t\t\tif (card.external || !card.location) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tfollowLinkClick(event, card.location, this.$router)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-link-cards-page {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(6 * var(--default-grid-baseline));\n\tpadding: calc(5 * var(--default-grid-baseline));\n}\n\n/* Clear the Nextcloud navigation toggle button (44px wide, absolutely\n   positioned at the left edge of .app-content) plus 12px breathing room, as\n   CnPageHeader does. Only the header shifts; the cards keep the full width. */\n.cn-link-cards-page__header {\n\tpadding-inline-start: 56px;\n}\n\n.cn-link-cards-page__title {\n\tmargin: 0 0 var(--default-grid-baseline);\n}\n\n.cn-link-cards-page__description,\n.cn-link-cards-page__empty {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin: 0;\n\tmax-width: 70ch;\n}\n\n.cn-link-cards-page__group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(3 * var(--default-grid-baseline));\n}\n\n.cn-link-cards-page__caption {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.85em;\n\tfont-weight: 600;\n\tletter-spacing: 0.06em;\n\tmargin: 0;\n\ttext-transform: uppercase;\n}\n\n.cn-link-cards-page__grid {\n\tdisplay: grid;\n\tgap: calc(3 * var(--default-grid-baseline));\n\tgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-link-cards-page__cell {\n\tdisplay: flex;\n}\n\n.cn-link-cards-page__card {\n\talign-items: flex-start;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border-dark);\n\tborder-radius: var(--border-radius-large);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\tflex: 1;\n\tgap: calc(3 * var(--default-grid-baseline));\n\tmin-width: 0;\n\tpadding: calc(4 * var(--default-grid-baseline));\n\ttransition: background-color var(--animation-quick, 100ms) ease, border-color var(--animation-quick, 100ms) ease, box-shadow var(--animation-quick, 100ms) ease;\n}\n\n/* A card is a link, and it must not look like a line of prose. A theme may\n   underline every link with `!important` (thematiq: `a { text-decoration:\n   underline !important }`, specificity 0,0,1). Among `!important` rules the\n   higher specificity wins, so this class rule has to carry it too; without it\n   the label and the description both rendered underlined on a live Nextcloud. */\n.cn-link-cards-page__card,\n.cn-link-cards-page__card:hover,\n.cn-link-cards-page__card:focus,\n.cn-link-cards-page__card:active {\n\ttext-decoration: none !important;\n}\n\n/* Hover moves the whole card: border, background and a soft lift. */\n.cn-link-cards-page__card:hover {\n\tbackground: var(--color-background-hover);\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 6px var(--color-box-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.cn-link-cards-page__card {\n\t\ttransition: none;\n\t}\n}\n\n.cn-link-cards-page__card:focus-visible {\n\tborder-color: var(--color-primary-element);\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n.cn-link-cards-page__icon {\n\tcolor: var(--color-primary-element);\n\tflex: none;\n}\n\n.cn-link-cards-page__body {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline);\n\tmin-width: 0;\n}\n\n/* The label is the card's title. Its colour is set here, on the span, because\n   a theme may force its link colour on the `a` itself; an inherited link\n   colour made the title read as a hyperlink. */\n.cn-link-cards-page__label {\n\tcolor: var(--color-main-text);\n\tfont-size: 1.05em;\n\tfont-weight: 700;\n\tline-height: 1.3;\n\toverflow-wrap: anywhere;\n}\n\n.cn-link-cards-page__card-description {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n\tline-height: 1.4;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_toDisplayString","_renderList","_createElementVNode","_createBlock"],"mappings":"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"}

package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue2.js

@@ -1,10 +1,12 @@
 import { getCurrentUser } from '@nextcloud/auth';
 import axios__default from '@nextcloud/axios';
+import { getCapabilities } from '@nextcloud/capabilities';
 import { translate } from '@nextcloud/l10n';
 import { generateUrl, generateRemoteUrl } from '@nextcloud/router';
 import { NcActionButton, NcActionLink, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcDateTime, NcEmptyContent, NcListItem, NcLoadingIcon } from '@nextcloud/vue';
 import Delete from 'vue-material-design-icons/Delete.vue';
 import Download from 'vue-material-design-icons/Download.vue';
+import FileDocumentEditOutline from 'vue-material-design-icons/FileDocumentEditOutline.vue';
 import FileOutline from 'vue-material-design-icons/FileOutline.vue';
 import FolderOutline from 'vue-material-design-icons/FolderOutline.vue';
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue';
@@ -17,6 +19,23 @@ import { safeHref } from '../../utils/safeHref.js';
 import { resolveObjectFolder } from '../CnFilesBrowser/filesBrowser.js';
 import { prefixUrl, buildHeaders } from '../../utils/headers.js';
 
+/**
+ * The mime types Nextcloud Office opens by default for the current person.
+ *
+ * richdocuments publishes its capabilities only to a person it lets use
+ * Office, so an empty list means no Office here, or none for them.
+ *
+ * @return {Array<string>} The mime types, or an empty list.
+ */
+function readOfficeMimetypes() {
+	try {
+		const mimetypes = getCapabilities()?.richdocuments?.mimetypes;
+		return Array.isArray(mimetypes) ? mimetypes.filter((mime) => typeof mime === 'string') : []
+	} catch {
+		return []
+	}
+}
+
 var script = {
 	name: 'CnFilesTab',
 
@@ -33,6 +52,7 @@ var script = {
 		NcLoadingIcon,
 		Delete,
 		Download,
+		FileDocumentEditOutline,
 		FileOutline,
 		FolderOutline,
 		InformationOutline,
@@ -57,6 +77,13 @@ var script = {
 		noFilesLabel: { type: String, default: () => translate('nextcloud-vue', 'No files attached') },
 		/** Label for the open/view file action */
 		openLabel: { type: String, default: () => translate('nextcloud-vue', 'Open') },
+		/**
+		 * Label of the action that opens a document in Nextcloud Office through
+		 * OpenRegister's Office page. Shown only when Office is there for this
+		 * person and opens the file's type; the page opens it for editing or
+		 * read-only by the object's own rule.
+		 */
+		openInOfficeLabel: { type: String, default: () => translate('nextcloud-vue', 'Open in Office') },
 		/** Label for the delete action */
 		deleteLabel: { type: String, default: () => translate('nextcloud-vue', 'Delete') },
 		/** What the files browser's root crumb reads; null shows the folder's own name, as the Files app does. */
@@ -142,6 +169,8 @@ var script = {
 			 * @type {HTMLInputElement|null}
 			 */
 			fileInputEl: null,
+			/** The mime types Nextcloud Office opens for this person; empty without Office. */
+			officeMimetypes: readOfficeMimetypes(),
 		}
 	},
 
@@ -498,6 +527,30 @@ var script = {
 			return `${this.apiBase}/files/${encodeURIComponent(String(file.id))}/download`
 		},
 
+		/**
+		 * Whether Nextcloud Office opens this file for this person.
+		 *
+		 * @param {object} file The file row.
+		 * @return {boolean} true when the Office action applies.
+		 */
+		officeOpens(file) {
+			const mime = file.type || file.mimetype || file.mimeType || '';
+			return Boolean(file.id) && mime !== '' && this.officeMimetypes.includes(mime)
+		},
+
+		/**
+		 * OpenRegister's Office page for a file of this object, which checks the
+		 * object rule and opens the document editable or read-only.
+		 *
+		 * @param {object} file The file row.
+		 * @return {string} The url.
+		 */
+		officeUrlFor(file) {
+			const appBase = /\/api\/?$/.test(this.apiBase) ? this.apiBase.replace(/\/api\/?$/, '') : '/apps/openregister';
+			const segments = [this.register, this.schema, this.objectId, String(file.id)].map((part) => encodeURIComponent(String(part)));
+			return prefixUrl(`${appBase}/office/${segments.join('/')}`)
+		},
+
 		/**
 		 * The Files app's permalink for a file: opens the Files app at the
 		 * file's folder with the file selected.