@conduction/nextcloud-vue 2.56.0-beta.31 → 2.56.0-beta.32

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -379,7 +379,7 @@
 					:showDocumentation="showDocumentation && menuShowsHelpLinks"
 					:actionsMenuLabel="boardMenuLabel"
 					:variant="isBoard ? 'secondary' : undefined"
-					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread"
+					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread || showOpenSidebar"
 					:documentationUrl="documentationUrl"
 					:docsAnchor="resolvedPageId"
 					:documentationLabel="documentationLabel || undefined"
@@ -390,7 +390,7 @@
 					testidBase="cn-detail-page"
 					@refresh="onHeaderRefresh"
 					@requestFeature="onHeaderRequestFeature">
-					<template v-if="headerMenuGroups.length || showMarkUnread" #primary-items>
+					<template v-if="headerMenuGroups.length || showMarkUnread || showOpenSidebar" #primary-items>
 						<!-- One block per group. A page that groups nothing has
 						     a single captionless group, and renders exactly the
 						     flat list it always did. -->
@@ -449,6 +449,20 @@
 							</template>
 							{{ markUnreadLabel }}
 						</NcActionButton>
+						<!-- Board look: the sidebar's own open toggle is hidden (it sat
+						     over the header's last button, where the board draws none), so
+						     the menu opens it. -->
+						<NcActionButton
+							v-if="showOpenSidebar"
+							key="open-sidebar"
+							data-testid="cn-detail-page-open-sidebar"
+							:closeAfterClick="true"
+							@click="openSidebar">
+							<template #icon>
+								<DockRight :size="20" />
+							</template>
+							{{ openSidebarLabel }}
+						</NcActionButton>
 						<!-- Divides the page's own actions from the help links
 						     below. With the help links switched off there is
 						     nothing below to divide from. -->
@@ -1191,6 +1205,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
+import DockRight from 'vue-material-design-icons/DockRight.vue'
 import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import FileQuestionOutline from 'vue-material-design-icons/FileQuestionOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
@@ -1440,6 +1455,7 @@ export default {
 		CnSummaryAggregates,
 		CnDetailHeaderChips,
 		CnFollowToggle,
+		DockRight,
 		EyeOffOutline,
 		CnRelatedCollections,
 		CnBodySections,
@@ -3909,6 +3925,22 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * Whether the header menu offers "Open sidebar": the board look, where the
+		 * sidebar's own toggle is hidden, on a page whose sidebar is active and
+		 * closed.
+		 *
+		 * @return {boolean}
+		 */
+		showOpenSidebar() {
+			return this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
+		},
+
+		/** @return {string} Label of the Open sidebar entry. */
+		openSidebarLabel() {
+			return t('nextcloud-vue', 'Open sidebar')
+		},
+
 		/** @return {string} Label of the Mark as unread entry. */
 		markUnreadLabel() {
 			return t('nextcloud-vue', 'Mark as unread')
@@ -4619,6 +4651,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Open the object sidebar through the shared channel.
+		 *
+		 * @return {void}
+		 */
+		openSidebar() {
+			if (this.objectSidebarState) {
+				this.objectSidebarState.open = true
+			}
+		},
+
 		/**
 		 * Start or finish arranging the chosen view. Finishing stores the
 		 * arrangement of every view the user moved, once.

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -169,7 +169,13 @@ function sharedRefLabels() {
 	return refLabels
 }
 
-/** Key of a resolved reference in the widget's `labels` data. */
+/**
+ * Key of a resolved reference in the widget's `labels` data.
+ *
+ * @param {{register: string, schema: string, labelField?: string}} resolve The entry's `resolve` config.
+ * @param {string} id The referenced object's id.
+ * @return {string} The key.
+ */
 function refKey(resolve, id) {
 	return `${resolve.register}/${resolve.schema}/${resolve.labelField || ''}/${id}`
 }
@@ -1012,12 +1018,21 @@ export default {
 	display: contents;
 }
 
-.cn-facts-widget__label {
+/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding), which
+   pushed the label to the right of its column and added 12px around both. The
+   class is doubled so these resets outrank that rule, and a dossiq-style
+   `:deep()` override in an app is not needed. */
+.cn-facts-widget__label.cn-facts-widget__label {
+	margin: 0;
+	padding: 0;
+	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
 
-.cn-facts-widget__value {
+.cn-facts-widget__value.cn-facts-widget__value {
 	margin: 0;
+	padding: 0;
+	text-align: start;
 	font-weight: 500;
 	min-width: 0;
 	overflow-wrap: anywhere;

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -5,9 +5,123 @@
 
 <template>
 	<div class="cn-field-list-widget" data-testid="cn-field-list-widget">
+		<div v-if="canAdd && addTrigger && addPlacement === 'header'" class="cn-field-list-widget__toolbar">
+			<NcButton
+				variant="secondary"
+				:disabled="busy !== ''"
+				data-testid="cn-field-list-open-add"
+				@click="adding = !adding">
+				+ {{ addLabel }}
+			</NcButton>
+		</div>
+		<form
+			v-if="canAdd && addTrigger && addPlacement === 'header' && adding"
+			class="cn-field-list-widget__add"
+			data-testid="cn-field-list-add"
+			@submit.prevent="add">
+			<div
+				v-for="field in addFields"
+				:key="field.key"
+				class="cn-field-list-widget__field"
+				:data-testid="`cn-field-list-input-${field.key}`">
+				<NcSelect
+					v-if="field.type === 'select'"
+					v-model="draft[field.key]"
+					:inputLabel="field.label"
+					:options="field.options"
+					:reduce="(option) => option.value"
+					:clearable="false"
+					label="label" />
+				<NcTextField
+					v-else
+					v-model="draft[field.key]"
+					:label="field.label"
+					:error="Boolean(errors[field.key])"
+					:helperText="errors[field.key] || ''" />
+			</div>
+			<NcButton type="submit"
+				variant="primary"
+				:disabled="busy !== ''"
+				data-testid="cn-field-list-submit">
+				{{ addLabel }}
+			</NcButton>
+		</form>
 		<p v-if="rows.length === 0" class="cn-field-list-widget__empty" data-testid="cn-field-list-empty">
 			{{ emptyLabel }}
 		</p>
+		<div v-else-if="isTable" class="cn-field-list-widget__table-wrap">
+			<table class="cn-field-list-widget__table" data-testid="cn-field-list-table">
+				<thead>
+					<tr>
+						<th
+							v-for="column in tableColumns"
+							:key="column.key"
+							scope="col"
+							class="cn-field-list-widget__th">
+							{{ column.header }}
+						</th>
+						<th v-if="hasMenu" scope="col" class="cn-field-list-widget__th cn-field-list-widget__th--menu">
+							<span class="cn-field-list-widget__sr">{{ tr('Actions') }}</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="row in rows"
+						:key="row.key"
+						class="cn-field-list-widget__tr"
+						:data-testid="`cn-field-list-row-${row.key}`">
+						<td
+							v-for="(column, index) in tableColumns"
+							:key="column.key"
+							class="cn-field-list-widget__td">
+							<CnStatusBadge
+								v-if="column.pill && row.cells[index].pill"
+								:label="row.cells[index].pill.label"
+								:variant="row.cells[index].pill.variant"
+								size="small" />
+							<strong v-else-if="column.strong">{{ row.cells[index].text }}</strong>
+							<template v-else>
+								{{ row.cells[index].text }}
+							</template>
+						</td>
+						<td v-if="hasMenu" class="cn-field-list-widget__td cn-field-list-widget__td--menu">
+							<NcActions
+								v-if="menuItems(row).length > 0"
+								:forceMenu="true"
+								:disabled="busy !== ''"
+								:ariaLabel="`${tr('More actions')}: ${row.title}`"
+								:data-testid="`cn-field-list-menu-${row.key}`">
+								<NcActionButton
+									v-for="item in menuItems(row)"
+									:key="item.id"
+									:data-testid="`cn-field-list-menu-${item.id}-${row.key}`"
+									@click="item.run">
+									{{ item.label }}
+								</NcActionButton>
+							</NcActions>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<div
+				v-for="row in bandRows"
+				:key="row.key"
+				class="cn-field-list-widget__band"
+				role="note"
+				:data-testid="`cn-field-list-band-${row.key}`">
+				<span class="cn-field-list-widget__band-text">{{ row.detail }}</span>
+				<NcButton
+					v-for="action in row.bandActions"
+					:key="action.id"
+					variant="secondary"
+					:disabled="busy !== ''"
+					:data-testid="`cn-field-list-band-action-${action.id}-${row.key}`"
+					@click="runAction(action, row)">
+					{{ action.label }}
+				</NcButton>
+			</div>
+		</div>
 		<ul v-else class="cn-field-list-widget__rows">
 			<li
 				v-for="row in rows"
@@ -55,8 +169,17 @@
 			{{ hint }}
 		</p>
 
+		<div v-if="canAdd && addTrigger && addPlacement !== 'header' && !adding" class="cn-field-list-widget__toolbar">
+			<NcButton
+				variant="secondary"
+				:disabled="busy !== ''"
+				data-testid="cn-field-list-open-add"
+				@click="adding = true">
+				+ {{ addLabel }}
+			</NcButton>
+		</div>
 		<form
-			v-if="canAdd"
+			v-if="canAdd && !(addTrigger && addPlacement === 'header') && (!addTrigger || adding)"
 			class="cn-field-list-widget__add"
 			data-testid="cn-field-list-add"
 			@submit.prevent="add">
@@ -95,7 +218,7 @@
 </template>
 
 <script>
-import { NcButton, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
@@ -125,7 +248,7 @@ import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
 export default {
 	name: 'CnFieldListWidget',
 
-	components: { CnStatusBadge, NcButton, NcNoteCard, NcSelect, NcTextField },
+	components: { CnStatusBadge, NcActionButton, NcActions, NcButton, NcNoteCard, NcSelect, NcTextField },
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
@@ -140,8 +263,10 @@ export default {
 		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when? } }`.
 		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
 		 * - `remove` — `{ label? }`; omitted = no remove.
-		 * - `rowActions` — `[{ id, label, when?, request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
+		 * - `rowActions` — `[{ id, label, when?, placement?: 'band', request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
 		 * - `rowSource` — `{ url, path?, key }`: live per-row state merged by key.
+		 * - `variant: 'table'` + `columns` — `[{ header, path, map?, format?, strong?, pill?, variantMap? }]`: rows as a table; a per-row "..." menu holds the row actions and remove; `detail` lines become a warning band under the table, with the row actions that have `placement: 'band'`.
+		 * - `add.trigger: 'button'`, `add.placement: 'header' | 'footer'` — the add form opens from a button.
 		 * - `readOnly`, `hint`, `emptyText`.
 		 *
 		 * @type {object}
@@ -185,6 +310,8 @@ export default {
 			/** Live per-row state from `rowSource`, by key. */
 			live: {},
 			draft: {},
+			/** Whether the add form is open (only with `add.trigger: 'button'`). */
+			adding: false,
 			errors: {},
 			busy: '',
 			notice: '',
@@ -232,6 +359,7 @@ export default {
 					aside: spec.aside ? this.asideOf(entry, spec.aside) : '',
 					detail: spec.detail && this.matches(entry, spec.detail.when) ? this.fill(spec.detail.template, entry) : '',
 					actions: this.actionsFor(entry),
+					cells: this.isTable ? this.cellsOf(entry) : [],
 				}
 			})
 		},
@@ -269,6 +397,44 @@ export default {
 				}))
 		},
 
+		/** Whether the rows are drawn as a table (`variant: 'table'`). */
+		isTable() {
+			return this.content.variant === 'table' && this.tableColumns.length > 0
+		},
+
+		/**
+		 * The table columns, headers translated.
+		 *
+		 * @return {Array<object>}
+		 */
+		tableColumns() {
+			return (Array.isArray(this.content.columns) ? this.content.columns : [])
+				.filter((column) => column && column.path)
+				.map((column, index) => ({ ...column, key: `${column.path}-${index}`, header: this.tr(column.header || '') }))
+		},
+
+		/** Whether each row has a "more actions" menu (row actions not placed in the band, and remove). */
+		hasMenu() {
+			return this.isTable && !this.readOnly && (this.canRemove || this.rows.some((row) => this.menuItems(row).length > 0))
+		},
+
+		/** Rows with a detail line: in the table variant it is a warning band under the table. */
+		bandRows() {
+			return this.rows
+				.filter((row) => row.detail !== '')
+				.map((row) => ({ ...row, bandActions: row.actions.filter((action) => action.placement === 'band') }))
+		},
+
+		/** Whether the add form opens from a button (`add.trigger: 'button'`). */
+		addTrigger() {
+			return Boolean(this.content.add && this.content.add.trigger === 'button')
+		},
+
+		/** Where the add button sits: `header` (above the rows) or `footer` (default). */
+		addPlacement() {
+			return this.content.add && this.content.add.placement === 'header' ? 'header' : 'footer'
+		},
+
 		addLabel() {
 			return this.tr((this.content.add && this.content.add.label) || 'Add')
 		},
@@ -315,6 +481,36 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * The cells of one table row, one per column.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {Array<{text: string, pill: object|null}>}
+		 */
+		cellsOf(entry) {
+			return this.tableColumns.map((column) => ({
+				text: this.text(entry, column),
+				pill: column.pill ? this.pillOf(entry, column) : null,
+			}))
+		},
+
+		/**
+		 * The items of a row's menu in the table variant: the row actions not
+		 * placed in the band, then remove.
+		 *
+		 * @param {object} row The row.
+		 * @return {Array<{id: string, label: string, run: Function}>}
+		 */
+		menuItems(row) {
+			const items = row.actions
+				.filter((action) => action.placement !== 'band')
+				.map((action) => ({ id: action.id, label: action.label, run: () => this.runAction(action, row) }))
+			if (this.canRemove) {
+				items.push({ id: 'remove', label: this.removeLabel, run: () => this.remove(row) })
+			}
+			return items
+		},
+
 		/**
 		 * The identity of an entry.
 		 *
@@ -599,6 +795,7 @@ export default {
 			}, '*')
 			if (saved) {
 				this.resetDraft()
+				this.adding = false
 				this.loadLive()
 			}
 		},
@@ -744,4 +941,68 @@ export default {
 .cn-field-list-widget__add > button {
 	flex: 0 0 auto;
 }
+
+.cn-field-list-widget__toolbar {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.cn-field-list-widget__table-wrap {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	overflow-x: auto;
+}
+
+.cn-field-list-widget__table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.cn-field-list-widget__th {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+
+.cn-field-list-widget__th--menu,
+.cn-field-list-widget__td--menu {
+	width: 1%;
+	text-align: end;
+}
+
+.cn-field-list-widget__tr {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+
+.cn-field-list-widget__td {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+
+.cn-field-list-widget__sr {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+
+.cn-field-list-widget__band {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 12px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-warning);
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--color-warning) 14%, var(--color-main-background));
+	font-size: 14px;
+}
 </style>

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1483,7 +1483,6 @@ export default {
 			default: true,
 		},
 
-		// eslint-disable-next-line vue/no-unused-properties
 		/**
 		 * Draw this page in the `board` look (or `nextcloud`) whatever the app
 		 * does. Empty follows the `cnLook` CnAppRoot provides. Manifest key

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,8 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:fitWidth="fitWidthActive"
+						:fixedLayout="fixedLayoutActive"
 						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
@@ -173,6 +175,8 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:fitWidth="fitWidthActive"
+					:fixedLayout="fixedLayoutActive"
 					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
@@ -448,6 +452,15 @@ export default {
 			page: 1,
 			/** Rows that fit the host cell; null = unconstrained (dashboards). */
 			fitRows: null,
+			/**
+			 * How far the table has been squeezed to the widget's width, so the
+			 * card never scrolls sideways: 0 = its own auto layout, 1 = one column
+			 * takes what is left and is cut with an ellipsis while the rest keep
+			 * their content on one line, 2 = a fixed layout, every column an equal
+			 * share with its text wrapped. Each step is taken only while the table
+			 * still scrolls sideways. `content.fitWidth` forces stage 1 on or off.
+			 */
+			fitStage: 0,
 			/** Whether the create dialog is open. */
 			showCreate: false,
 			/**
@@ -480,6 +493,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the table fits the widget's width (stage 1): `content.fitWidth`
+		 * when it says, else once the columns were measured not to fit.
+		 *
+		 * @return {boolean}
+		 */
+		fitWidthActive() {
+			const forced = this.content?.fitWidth
+			return typeof forced === 'boolean' ? forced : this.fitStage === 1
+		},
+
+		/**
+		 * Whether the table takes a fixed layout, the last resort when even the
+		 * fitted table is wider than the widget (not with `content.fitWidth` set).
+		 *
+		 * @return {boolean}
+		 */
+		fixedLayoutActive() {
+			return typeof this.content?.fitWidth !== 'boolean' && this.fitStage >= 2
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or null
 		 * on surfaces (dashboards) that don't provide one.
@@ -619,7 +653,7 @@ export default {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}
@@ -1165,6 +1199,12 @@ export default {
 	mounted() {
 		this.fetchRows()
 		this.loadHeadingsIfNeeded()
+		// A table wider than the widget fits its columns to the width instead of
+		// scrolling sideways (no inner scrollbars).
+		if (typeof ResizeObserver !== 'undefined') {
+			this._widthObserver = new ResizeObserver(() => this.measureWidthFit())
+			this._widthObserver.observe(this.$el)
+		}
 		// Re-read on a page-level refresh. This list fetches its own rows from
 		// OpenRegister and subscribed to nothing, so after a write elsewhere on
 		// the page it went on rendering the result set it fetched on mount —
@@ -1203,6 +1243,9 @@ export default {
 		if (this._fitObserver) {
 			this._fitObserver.disconnect()
 		}
+		if (this._widthObserver) {
+			this._widthObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -1277,7 +1320,10 @@ export default {
 				const res = await axios.get(url, { params })
 				this.rows = (res && res.data && res.data.results) || []
 				this.total = (res && res.data && typeof res.data.total === 'number') ? res.data.total : this.rows.length
-				this.$nextTick(() => this.measureFit())
+				this.$nextTick(() => {
+					this.measureFit()
+					this.measureWidthFit()
+				})
 			} catch (e) {
 				// Keep the raw message OUT of the template — log it for
 				// debugging, surface only the quiet `loadErrorLabel` line.
@@ -1291,6 +1337,27 @@ export default {
 			}
 		},
 
+		/**
+		 * Squeeze the table to the widget's width while it scrolls sideways: its
+		 * `.cn-data-table__scroll` wrapper is wider than it is visible. First the
+		 * fit (stage 1), then, if that is still too wide, a fixed layout
+		 * (stage 2). It never goes back (a squeezed table does not overflow, so
+		 * there is nothing to measure to relax it). No-op when `content.fitWidth`
+		 * is set.
+		 *
+		 * @return {void}
+		 */
+		measureWidthFit() {
+			if (this.fitStage >= 2 || typeof this.content?.fitWidth === 'boolean') {
+				return
+			}
+			const scroller = this.$el && this.$el.querySelector ? this.$el.querySelector('.cn-data-table__scroll') : null
+			if (scroller && scroller.scrollWidth > scroller.clientWidth + 1) {
+				this.fitStage += 1
+				this.$nextTick(() => this.measureWidthFit())
+			}
+		},
+
 		/**
 		 * Fit the visible row count to the host grid cell (ADR-062 — the cell
 		 * is the budget). Measures the cell's remaining height below the table