@conduction/nextcloud-vue 2.129.0 → 2.130.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.129.0",
+  "version": "2.130.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -483,7 +483,7 @@
 				@description User clicked a declarative bulk action. Payload carries the action id AND the selection, because a bulk action without its selection is not a bulk action.
 			-->
 			<NcButton
-				v-for="entry in bulkActions"
+				v-for="entry in inlineBulkActions"
 				:key="entry.id"
 				variant="secondary"
 				:disabled="entry.disabled === true"
@@ -492,6 +492,27 @@
 				@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
 				{{ entry.label ? effectiveTranslate(entry.label) : entry.label }}
 			</NcButton>
+			<!-- Bulk actions declared with `menu: true` gather under More. -->
+			<NcActions
+				v-if="menuBulkActions.length > 0"
+				:menuName="t('nextcloud-vue', 'More')"
+				variant="secondary"
+				:forceMenu="true"
+				data-testid="cn-bulk-more">
+				<NcActionButton
+					v-for="entry in menuBulkActions"
+					:key="entry.id"
+					:closeAfterClick="true"
+					:disabled="entry.disabled === true"
+					:data-testid="`cn-bulk-action-${entry.id}`"
+					:lang="bulkLang(entry)"
+					@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
+					<template v-if="entry.icon" #icon>
+						<CnIcon :name="entry.icon" :size="20" />
+					</template>
+					{{ entry.label ? effectiveTranslate(entry.label) : entry.label }}
+				</NcActionButton>
+			</NcActions>
 			<!--
 				@slot selection-actions The host app's bulk-action buttons (NcButton family), rendered inside the contextual selection strip that appears while a selection is active. This strip is the primary bulk-actions surface; #mass-actions remains available for hosts that ALSO want the actions listed in the overflow menu (optional — strip-only is fine).
 				@binding {number} count Length of the current selection.
@@ -549,7 +570,7 @@
 			{{ t('nextcloud-vue', 'Delete selected') }}
 		</NcButton>
 		<NcButton
-			v-for="entry in bulkActions"
+			v-for="entry in inlineBulkActions"
 			:key="entry.id"
 			variant="secondary"
 			:disabled="entry.disabled === true || selectedIds.length === 0"
@@ -561,6 +582,27 @@
 			</template>
 			{{ entry.label ? effectiveTranslate(entry.label) : entry.label }}
 		</NcButton>
+		<NcActions
+			v-if="menuBulkActions.length > 0"
+			:menuName="t('nextcloud-vue', 'More')"
+			variant="secondary"
+			:forceMenu="true"
+			:disabled="selectedIds.length === 0"
+			data-testid="cn-bulk-band-more">
+			<NcActionButton
+				v-for="entry in menuBulkActions"
+				:key="entry.id"
+				:closeAfterClick="true"
+				:disabled="entry.disabled === true"
+				:data-testid="`cn-bulk-action-${entry.id}`"
+				:lang="bulkLang(entry)"
+				@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
+				<template v-if="entry.icon" #icon>
+					<CnIcon :name="entry.icon" :size="20" />
+				</template>
+				{{ entry.label ? effectiveTranslate(entry.label) : entry.label }}
+			</NcActionButton>
+		</NcActions>
 		<slot
 			name="selection-actions"
 			:count="selectedIds.length"
@@ -1106,8 +1148,10 @@ export default {
 		 * render side by side in one row.
 		 *
 		 * Clicking emits `bulk-action` with the id AND the current selection.
+		 * An entry with `menu: true` is listed under a More menu after the
+		 * buttons instead of as a button of its own.
 		 *
-		 * @type {Array<{ id: string, label: string, icon?: string, disabled?: boolean }>}
+		 * @type {Array<{ id: string, label: string, icon?: string, disabled?: boolean, menu?: boolean }>}
 		 */
 		bulkActions: {
 			type: Array,
@@ -1197,6 +1241,26 @@ export default {
 		 *
 		 * @return {boolean}
 		 */
+		/**
+		 * The bulk actions drawn as buttons: every one without `menu: true`.
+		 *
+		 * @spec openspec/changes/bulk-actions-more-menu/specs/bulk-actions-more-menu/spec.md#requirement-a-bulk-action-can-sit-under-more
+		 * @return {Array<object>}
+		 */
+		inlineBulkActions() {
+			return (this.bulkActions || []).filter((entry) => entry && entry.menu !== true)
+		},
+
+		/**
+		 * The bulk actions gathered under the selection's More menu (`menu: true`).
+		 *
+		 * @spec openspec/changes/bulk-actions-more-menu/specs/bulk-actions-more-menu/spec.md#requirement-a-bulk-action-can-sit-under-more
+		 * @return {Array<object>}
+		 */
+		menuBulkActions() {
+			return (this.bulkActions || []).filter((entry) => entry && entry.menu === true)
+		},
+
 		bulkBandHasActions() {
 			return this.showMassCopy || this.showMassDelete
 				|| (Array.isArray(this.bulkActions) && this.bulkActions.length > 0)

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -254,7 +254,7 @@
 			:subtitle="rendererHeader.subtitle || widgetSubtitle"
 			titleIconPosition="left"
 			:titleTone="widgetTitleTone"
-			:showActions="actionsShown || catalogAddEnabled"
+			:showActions="actionsShown || catalogAddInMenu || rendererHeader.menuActions.length > 0"
 			:showRefresh="false"
 			:showRequestFeature="false"
 			:headerLink="cardHeaderLink"
@@ -265,16 +265,41 @@
 			<!-- A renderer that reports its own header (`header` event:
 			     `{ link, note, action, actions, pill }`, e.g. record-list's "3 in
 			     totaal", a facts card's status pill). -->
-			<template v-if="hasRendererHeaderItems" #actions>
-				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			<template v-if="hasRendererHeaderItems || catalogAddInHeader" #actions>
+				<CnDetailWidgetHeaderItems v-if="hasRendererHeaderItems" :header="rendererHeader" />
+				<!-- The board look draws the catalog Add as a button in the title
+				     row; the list's footer Add is hidden there (look-board-detail.css). -->
+				<NcButton
+					v-if="catalogAddInHeader"
+					variant="secondary"
+					class="cn-detail-page__catalog-add"
+					data-testid="cn-detail-widget-catalog-add"
+					@click="invokeCatalogAdd">
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+					{{ addLabel }}
+				</NcButton>
 			</template>
-			<template v-if="catalogAddEnabled" #action-items>
-				<NcActionButton @click="invokeCatalogAdd">
+			<template v-if="catalogAddInMenu || rendererHeader.menuActions.length > 0" #action-items>
+				<NcActionButton v-if="catalogAddInMenu" @click="invokeCatalogAdd">
 					<template #icon>
 						<Plus :size="20" />
 					</template>
 					{{ addLabel }}
 				</NcActionButton>
+				<!-- `menuActions` a renderer reports: items in the card's Actions menu. -->
+				<NcActionButton
+					v-for="(action, index) in rendererHeader.menuActions"
+					:key="`menu-${index}-${action.label}`"
+					:closeAfterClick="true"
+					data-testid="cn-detail-widget-menu-action"
+					@click="action.run()">
+					<template v-if="action.icon" #icon>
+						<CnIcon :name="action.icon" :size="20" />
+					</template>
+					{{ action.label }}
+				</NcActionButton>
 			</template>
 			<component
 				:is="renderer"
@@ -394,7 +419,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton } from '@nextcloud/vue'
+import { NcActionButton, NcButton } from '@nextcloud/vue'
 import { computed } from 'vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
@@ -496,6 +521,7 @@ export default {
 		CnWidgetEmptyState,
 		CnWidgetWrapper,
 		NcActionButton,
+		NcButton,
 		CnEmptyContent,
 		Plus,
 	},
@@ -764,7 +790,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', subtitle: '', actions: [], pill: null, count: null, empty: null },
+			rendererHeader: { link: null, note: '', subtitle: '', actions: [], pill: null, count: null, empty: null, menuActions: [] },
 		}
 	},
 
@@ -1505,6 +1531,29 @@ export default {
 			return createActionState(this.content, this.object).visible
 		},
 
+		/**
+		 * Whether the catalog Add is a button in the card's title row: the board
+		 * look draws it there, right-aligned, instead of in the Actions menu and
+		 * the list's footer bar.
+		 *
+		 * @spec openspec/changes/board-object-list-add-button/specs/board-object-list-add-button/spec.md#requirement-the-board-look-draws-a-cards-add-as-a-title-row-button
+		 * @return {boolean} true when the header button renders.
+		 */
+		catalogAddInHeader() {
+			return this.catalogAddEnabled && !this.isBare && normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * Whether the catalog Add is an item of the card's Actions menu, as
+		 * ADR-062 places it in the Nextcloud look.
+		 *
+		 * @spec openspec/changes/board-object-list-add-button/specs/board-object-list-add-button/spec.md#requirement-the-board-look-draws-a-cards-add-as-a-title-row-button
+		 * @return {boolean} true when the menu item renders.
+		 */
+		catalogAddInMenu() {
+			return this.catalogAddEnabled && !this.catalogAddInHeader
+		},
+
 		/**
 		 * Whether the widget's overflow Actions menu renders: the definition's
 		 * own `showActions` when it is a boolean, else the surface's
@@ -1610,7 +1659,9 @@ export default {
 				: null
 			// `subtitle`: a muted line under the card title (a task table's "1 open, 3 done").
 			const subtitle = header && typeof header.subtitle === 'string' ? header.subtitle : ''
-			this.rendererHeader = { link, note, subtitle, actions, pill, count, empty }
+			// `menuActions`: items for the card's Actions menu instead of the title row.
+			const menuActions = (header && Array.isArray(header.menuActions) ? header.menuActions : []).filter(usable)
+			this.rendererHeader = { link, note, subtitle, actions, pill, count, empty, menuActions }
 		},
 
 		/**

package/src/components/CnEventsCard/CnEventsCard.vue

@@ -118,7 +118,11 @@ export default {
 		 * (translated through the host) and `headerActions` (`link`, `create`):
 		 * the buttons it reports for its card's title row.
 		 *
-		 * @type {{source?: object, endpoint?: string, emptyText?: string, headerActions?: Array<string>}}
+		 * `createVariant: "secondary"` and `createIcon` draw the create action
+		 * as the quiet header action with its own icon. `menuActions` (`link`,
+		 * `create`) puts those flows in the card's Actions menu instead.
+		 *
+		 * @type {{source?: object, endpoint?: string, emptyText?: string, headerActions?: Array<string>, menuActions?: Array<string>, createVariant?: string, createIcon?: string}}
 		 */
 		content: { type: Object, default: () => ({}) },
 
@@ -195,13 +199,20 @@ export default {
 			const asked = Array.isArray(this.content?.headerActions) ? this.content.headerActions : []
 			const known = {
 				link: { label: t('nextcloud-vue', 'Link an existing one'), icon: 'LinkVariant', run: () => { this.showPicker = true } },
-				create: { label: t('nextcloud-vue', 'Make an appointment'), icon: 'Plus', variant: 'primary', run: () => { this.showCreate = true } },
+				create: {
+					label: t('nextcloud-vue', 'Make an appointment'),
+					icon: typeof this.content?.createIcon === 'string' && this.content.createIcon !== '' ? this.content.createIcon : 'Plus',
+					...(this.content?.createVariant === 'secondary' ? {} : { variant: 'primary' }),
+					run: () => { this.showCreate = true },
+				},
 			}
-			const actions = this.url === '' ? [] : asked.filter((key, index) => known[key] && asked.indexOf(key) === index).map((key) => known[key])
+			const pick = (keys) => (this.url === '' ? [] : keys.filter((key, index) => known[key] && keys.indexOf(key) === index).map((key) => known[key]))
+			const actions = pick(asked)
+			const inMenu = Array.isArray(this.content?.menuActions) ? this.content.menuActions.filter((key) => !asked.includes(key)) : []
 			/**
-			 * @event header The card's title-row actions, `{ actions }`, for the host to draw.
+			 * @event header The card's title-row actions and Actions-menu items, `{ actions, menuActions }`, for the host to draw.
 			 */
-			this.$emit('header', { actions })
+			this.$emit('header', { actions, menuActions: pick(inMenu) })
 		},
 
 		/**

package/src/components/CnFilesCard/CnFilesCard.vue

@@ -14,6 +14,13 @@
 -->
 <template>
 	<CnDetailCard :title="resolvedTitle" :icon="Paperclip" :collapsible="collapsible">
+		<template v-if="$slots.actions" #actions>
+			<!--
+				@slot actions Header actions of the card, e.g. an Add button. Scope:
+				`{ refresh }`, which reads the files again after the host added one.
+			-->
+			<slot name="actions" :refresh="fetchFiles" />
+		</template>
 		<NcLoadingIcon v-if="loading" />
 		<div v-else-if="files.length === 0" class="cn-files-card__empty">
 			{{ noFilesLabel }}

package/src/components/CnIcon/semanticIcons.js

@@ -60,6 +60,7 @@ import CalculatorVariantOutlineIcon from 'vue-material-design-icons/CalculatorVa
 import CalendarAccountOutlineIcon from 'vue-material-design-icons/CalendarAccountOutline.vue'
 import CalendarClockOutlineIcon from 'vue-material-design-icons/CalendarClockOutline.vue'
 import CalendarOutlineIcon from 'vue-material-design-icons/CalendarOutline.vue'
+import CalendarPlusOutlineIcon from 'vue-material-design-icons/CalendarPlusOutline.vue'
 import CalendarRemoveOutlineIcon from 'vue-material-design-icons/CalendarRemoveOutline.vue'
 import CalendarTextOutlineIcon from 'vue-material-design-icons/CalendarTextOutline.vue'
 import CalendarWeekendOutlineIcon from 'vue-material-design-icons/CalendarWeekendOutline.vue'
@@ -425,6 +426,7 @@ export const SEMANTIC_ICON_COMPONENTS = Object.freeze({
 	CalendarAccountOutline: CalendarAccountOutlineIcon,
 	CalendarClockOutline: CalendarClockOutlineIcon,
 	CalendarOutline: CalendarOutlineIcon,
+	CalendarPlusOutline: CalendarPlusOutlineIcon,
 	CalendarRemoveOutline: CalendarRemoveOutlineIcon,
 	CalendarTextOutline: CalendarTextOutlineIcon,
 	CalendarWeekendOutline: CalendarWeekendOutlineIcon,

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -613,6 +613,8 @@
 			ref="deleteViewConfirmDialog"
 			variant="error"
 			:dialogTitle="t('nextcloud-vue', 'Delete view?')"
+			:eyebrow="deleteViewEyebrow"
+			:subtitle="deleteViewSubtitle"
 			:message="deleteViewMessage"
 			:confirmLabel="t('nextcloud-vue', 'Delete view')"
 			confirmIcon="DeleteOutline"
@@ -1436,6 +1438,7 @@ import {
 	buildValueStages,
 	columnFieldsOf,
 	columnKeyOfRow,
+	declaredStatesOf,
 	fetchReferenceObjects,
 	flattenItemRefs,
 	fullTargetOf,
@@ -5463,7 +5466,15 @@ export default {
 				return { states: this.boardStages.states }
 			}
 			const field = this.boardColumnField
-			return this.effectiveSchema?.properties?.[field] || null
+			const property = this.effectiveSchema?.properties?.[field] || null
+			const declared = declaredStatesOf(this.board, this.boardActiveColumnField, field)
+			if (declared !== null) {
+				return {
+					...(property || {}),
+					states: declared.map((state) => ({ ...state, label: this.cnTranslate(state.label) })),
+				}
+			}
+			return property
 		},
 
 		/**
@@ -7357,6 +7368,28 @@ export default {
 			return (user && user.uid) || ''
 		},
 
+		/**
+		 * The line above the delete-saved-view confirm's title: "Saved view"
+		 * in the board look, as on the view's edit and share dialogs.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/board-delete-view-confirm-header/specs/board-delete-view-confirm-header/spec.md#requirement-the-board-delete-view-confirm-names-the-saved-view
+		 */
+		deleteViewEyebrow() {
+			return this.isBoardLook ? t('nextcloud-vue', 'Saved view') : ''
+		},
+
+		/**
+		 * The line under the delete-saved-view confirm's title: the view's
+		 * name, in the board look.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/board-delete-view-confirm-header/specs/board-delete-view-confirm-header/spec.md#requirement-the-board-delete-view-confirm-names-the-saved-view
+		 */
+		deleteViewSubtitle() {
+			return this.isBoardLook && this.viewPendingDelete ? String(this.viewPendingDelete.name || '') : ''
+		},
+
 		/**
 		 * Confirmation message for the delete-saved-view dialog.
 		 *

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -40,7 +40,7 @@
 			:compact="fitRows !== null && fitRows < 3"
 			class="cn-object-list-widget__empty">
 			<template v-if="allowCreate && !waitingForContext" #action>
-				<NcButton @click="openCreate">
+				<NcButton class="cn-object-list-widget__empty-add" @click="openCreate">
 					<template #icon>
 						<Plus :size="20" />
 					</template>