@conduction/nextcloud-vue 2.82.0 → 2.83.0

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

@@ -1,6 +1,6 @@
 import { getCurrentUser } from '@nextcloud/auth';
 import { translate } from '@nextcloud/l10n';
-import { NcLoadingIcon, NcActions, NcActionLink, NcActionButton, NcActionCaption, NcActionCheckbox, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue';
+import { NcLoadingIcon, NcActions, NcActionLink, NcActionButton, NcActionCaption, NcActionSeparator, NcActionCheckbox, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue';
 import { ref, getCurrentInstance, markRaw, inject } from 'vue';
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue';
 import Close from 'vue-material-design-icons/Close.vue';
@@ -10,6 +10,8 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue';
 import Export from 'vue-material-design-icons/Export.vue';
 import Eye from 'vue-material-design-icons/Eye.vue';
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue';
+import ImportIcon from 'vue-material-design-icons/Import.vue';
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue';
 import Tune from 'vue-material-design-icons/Tune.vue';
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue';
 import __sfc_main$w from '../../dialogs/CnConfirmDialog.vue.js';
@@ -24,13 +26,13 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js';
 import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js';
 import { METADATA_COLUMNS } from '../../constants/metadata.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
-import { routeHref } from '../../utils/actionLink.js';
+import { routeHref, followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js';
 import { resolveRegisteredHandler, buildOnSuccessRoute } from '../../utils/actionsDispatcher.js';
 import { reportBindingProblems } from '../../utils/diagnostics.js';
 import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js';
 import { buildExportUrl } from '../../utils/indexExportHelpers.js';
 import { lensUnavailableText } from '../../utils/lensAvailability.js';
-import { openRowTarget } from '../../utils/linkNavigation.js';
+import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js';
 import { resolveClaimedTeams, splitViewsIntoTabs, viewAsTab, resolveClaimTokens, viewIdOf } from '../../utils/listLenses.js';
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js';
 import { multiKeySort } from '../../utils/multiKeySort.js';
@@ -327,6 +329,7 @@ var script = {
 		NcActionLink,
 		NcActionButton,
 		NcActionCaption,
+		NcActionSeparator,
 		NcActionCheckbox,
 		NcButton,
 		AlertCircleOutline,
@@ -606,9 +609,11 @@ var script = {
 		 * actions, or what its `items` name (`header-actions`, a header action
 		 * id, `import`, `export`, `refresh`, `copy-selected`, `delete-selected`,
 		 * `documentation`), so the entries the bar's menu loses have a place.
+		 * `items` can group them: `{ heading }` draws a group heading (an i18n
+		 * key) and `separator` a rule, each only when an entry follows.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
-		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: string[]}>}
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: Array<(string|{heading: string})>}>}
 		 */
 		headerButtons: {
 			type: Array,
@@ -4535,7 +4540,10 @@ var script = {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
-						items: Array.isArray(button.items) ? button.items.filter((item) => typeof item === 'string' && item !== '') : null,
+						items: Array.isArray(button.items)
+							? button.items.filter((item) => (typeof item === 'string' && item !== '')
+								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
+							: null,
 					}
 				})
 				.filter((button) => button.label !== '')
@@ -5830,11 +5838,14 @@ var script = {
 		 * `import`, `export`, `refresh`, `copy-selected`, `delete-selected`
 		 * (disabled until a row is selected) and `documentation` (a link to
 		 * `documentationUrl`, left out when the page has none). An unknown name
-		 * is left out.
+		 * is left out. `{ heading }` and `separator` group the entries: an
+		 * entry of `kind` `heading` or `separator`, drawn only when an entry
+		 * follows it.
 		 *
 		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
-		 * @param {{items?: string[]|null, format?: string}} button The resolved header button.
-		 * @return {Array<{key: string, label: string, icon: string, href?: string, disabled?: boolean, title?: string, run?: Function}>}
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {{items?: Array<(string|{heading: string})>|null, format?: string}} button The resolved header button.
+		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: Function}>}
 		 */
 		headerMenuEntries(button) {
 			const fromAction = (entry) => ({
@@ -5842,14 +5853,18 @@ var script = {
 				label: entry.label ? this.cnTranslate(entry.label) : '',
 				icon: entry.icon && typeof entry.icon === 'string' && !entry.icon.startsWith('icon-') ? entry.icon : '',
 				href: typeof entry.href === 'string' && entry.href !== '' ? entry.href : '',
+				// A `handler: "navigate"` entry whose route resolves carries `to`
+				// (resolveHeaderHandler drops its handler): the menu draws it as
+				// an in-app link, as the actions bar does, so it navigates.
+				link: !entry.href && entry.to && !entry.disabled ? resolveItemActionLink({ to: entry.to }, null, this.$router) : null,
 				disabled: Boolean(entry.disabled),
 				run: () => this.onHeaderAction({ action: entry.id, id: entry.id }),
 			});
 			const names = button && Array.isArray(button.items) ? button.items : ['header-actions'];
 			const noSelection = this.internalSelectedIds.length < 1;
 			const builtIns = {
-				import: () => ({ key: 'import', label: translate('nextcloud-vue', 'Import'), icon: 'Import', run: () => { this.showImportDialog = true; } }),
-				export: () => ({ key: 'export', label: translate('nextcloud-vue', 'Export'), icon: 'Export', run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
+				import: () => ({ key: 'import', label: translate('nextcloud-vue', 'Import'), icon: 'Import', iconComponent: ImportIcon, run: () => { this.showImportDialog = true; } }),
+				export: () => ({ key: 'export', label: translate('nextcloud-vue', 'Export'), icon: 'Export', iconComponent: Export, run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
 				refresh: () => ({ key: 'refresh', label: translate('nextcloud-vue', 'Refresh'), icon: 'Refresh', run: () => this.onRefreshEvent() }),
 				'copy-selected': () => ({
 					key: 'copy-selected',
@@ -5864,6 +5879,7 @@ var script = {
 					key: 'delete-selected',
 					label: translate('nextcloud-vue', 'Delete selected'),
 					icon: 'TrashCanOutline',
+					iconComponent: TrashCanOutline,
 					disabled: noSelection,
 					title: noSelection ? translate('nextcloud-vue', 'Select 1 or more items to delete') : '',
 					run: () => { this.showMassDeleteDialog = true; },
@@ -5881,8 +5897,17 @@ var script = {
 					entries.push(entry);
 				}
 			};
+			// A group heading (`{ heading }`) or a `separator` is kept as a mark
+			// and only drawn when an entry follows it (see groupMenuEntries).
+			let mark = 0;
 			for (const name of names) {
-				if (name === 'header-actions') {
+				if (name && typeof name === 'object') {
+					mark += 1;
+					entries.push({ key: `__heading-${mark}`, kind: 'heading', label: this.cnTranslate(name.heading) });
+				} else if (name === 'separator') {
+					mark += 1;
+					entries.push({ key: `__separator-${mark}`, kind: 'separator', label: '' });
+				} else if (name === 'header-actions') {
 					this.mergedHeaderActions.forEach((entry) => push(fromAction(entry)));
 				} else if (Object.hasOwn(builtIns, name)) {
 					push(builtIns[name]());
@@ -5893,7 +5918,66 @@ var script = {
 					}
 				}
 			}
-			return entries
+			return this.groupMenuEntries(entries)
+		},
+
+		/**
+		 * Tidy the marks of the header's Actions menu: a heading or separator
+		 * with no entry after it (before the next mark or the end) is dropped,
+		 * a separator never opens the menu, two separators in a row are one,
+		 * and a heading followed by a separator before any entry is dropped. So a group whose entries are all left out (no documentation
+		 * URL, an unknown id) leaves no empty heading or double rule behind,
+		 * and a menu of marks only has no entries and is not drawn.
+		 *
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {Array<{key: string, kind?: string}>} entries The entries with their marks, in order.
+		 * @return {Array<{key: string, kind?: string}>} The entries to draw.
+		 */
+		groupMenuEntries(entries) {
+			const out = [];
+			let separator = null;
+			let heading = null;
+			for (const entry of entries) {
+				if (entry.kind === 'separator') {
+					// A rule ends the group before it: a heading not yet followed
+					// by an entry is dropped with it.
+					separator = entry;
+					heading = null;
+					continue
+				}
+				if (entry.kind === 'heading') {
+					heading = entry;
+					continue
+				}
+				if (separator && out.length > 0) {
+					out.push(separator);
+				}
+				if (heading) {
+					out.push(heading);
+				}
+				separator = null;
+				heading = null;
+				out.push(entry);
+			}
+			return out
+		},
+
+		/**
+		 * An in-app link of the header's Actions menu was clicked: a plain click
+		 * goes through the router (a modified click is left to the browser),
+		 * and the entry is reported as a header action, as the actions bar does.
+		 *
+		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
+		 * @param {{key: string, link: object}} entry The menu entry.
+		 * @param {MouseEvent} event The click.
+		 * @return {void}
+		 */
+		onHeaderMenuLinkClick(entry, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
+			followItemActionLink(event, entry.link, this.$router);
+			this.$emit('header-action', { action: entry.key, id: entry.key });
 		},
 
 		/**