@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -4,7 +4,8 @@
 		:description="description"
 		:docUrl="docUrl"
 		:loading="loading"
-		loadingMessage="Loading version information...">
+		:wide="isBoard && wide"
+		:loadingMessage="t('nextcloud-vue', 'Loading version information…')">
 		<!-- Actions slot (top right). Under the board look the same buttons sit
 		     in the footer row of the card instead. -->
 		<template v-if="!isBoard" #actions>
@@ -34,19 +35,19 @@
 				<div class="cn-version-info__details">
 					<!-- Application Name -->
 					<div class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.appName }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.appName }}:</span>
 						<span class="cn-version-info__value">{{ appName }}</span>
 					</div>
 
 					<!-- Version -->
 					<div class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.version }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.version }}:</span>
 						<span class="cn-version-info__value">{{ appVersion }}</span>
 					</div>
 
 					<!-- Configured Version (if provided) -->
 					<div v-if="configuredVersion" class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.configuredVersion }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}:</span>
 						<span class="cn-version-info__value">{{ configuredVersion }}</span>
 					</div>
 
@@ -157,6 +158,18 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Under the board look the card spans the whole settings grid, as the
+		 * boards draw the version card. Set to `false` to keep it one card in
+		 * the grid. Without the board look it has no effect.
+		 *
+		 * @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid
+		 */
+		wide: {
+			type: Boolean,
+			default: true,
+		},
+
 		/** Section title */
 		title: {
 			type: String,
@@ -232,14 +245,13 @@ export default {
 			default: false,
 		},
 
-		/** Custom labels for the standard fields */
+		/**
+		 * Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.
+		 * A label left out keeps the translated default.
+		 */
 		labels: {
 			type: Object,
-			default: () => ({
-				appName: 'Application Name',
-				version: 'Version',
-				configuredVersion: 'Configured Version',
-			}),
+			default: () => ({}),
 		},
 	},
 
@@ -251,6 +263,21 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The field labels: the app's, else the library's in the reader's language.
+		 *
+		 * @return {{appName: string, version: string, configuredVersion: string}}
+		 * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language
+		 */
+		fieldLabels() {
+			return {
+				appName: t('nextcloud-vue', 'Application name'),
+				version: t('nextcloud-vue', 'Version'),
+				configuredVersion: t('nextcloud-vue', 'Configured version'),
+				...(this.labels || {}),
+			}
+		},
+
 		/** @return {string} Button type based on update status */
 		updateButtonType() {
 			if (this.isUpToDate) {
@@ -267,16 +294,18 @@ export default {
 		/** @return {string} Update button label text */
 		updateButtonText() {
 			if (this.updating) {
-				return 'Updating...'
+				return t('nextcloud-vue', 'Updating…')
 			}
 			if (this.isUpToDate) {
-				return 'Up to date'
+				return t('nextcloud-vue', 'Up to date')
 			}
-			return 'Update'
+			return t('nextcloud-vue', 'Update')
 		},
 	},
 
 	methods: {
+		t,
+
 		handleUpdateClick() {
 			if (!this.updateButtonDisabled) {
 				this.$emit('update')

package/src/components/CnWidgetCardGrid/CnWidgetCardGrid.vue

@@ -14,10 +14,11 @@
 		:title="title"
 		:widgetId="widgetId"
 		:documentationUrl="documentationUrl"
+		:refreshing="epLoading"
 		flush>
 		<div class="cn-widget-card-grid">
 			<CnObjectCard
-				v-for="(item, index) in objects"
+				v-for="(item, index) in cards"
 				:key="item.id || index"
 				:object="item" />
 		</div>
@@ -26,7 +27,10 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { inject, ref } from 'vue'
 import CnObjectCard from '../CnObjectCard/CnObjectCard.vue'
+import { useEndpointSource } from '../../composables/useEndpointSource.js'
+import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
 
 /**
@@ -35,7 +39,9 @@ import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
  * Renders the card grid on the shared CnWidgetWrapper chrome, which supplies
  * the widget title and the standard overflow Actions menu (Refresh /
  * Documentation / Request a feature). Each entry in `objects` is rendered as a
- * CnObjectCard.
+ * CnObjectCard. Without `objects`, an `endpointSource` (`{ url, method?,
+ * params?, responsePath? }`, as on the object table) supplies them: the
+ * payload after `responsePath` is the array of objects.
  */
 export default {
 	name: 'CnWidgetCardGrid',
@@ -75,6 +81,53 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+
+		/**
+		 * Read the objects from an app endpoint: `{ url, method?, params?,
+		 * responsePath? }`, with the token grammar of widget filters. Ignored
+		 * while `objects` holds any.
+		 *
+		 * @type {object|null}
+		 */
+		endpointSource: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	setup(props) {
+		const objectCtxRaw = inject('cnObjectContext', null)
+		const detailCtxRaw = inject('cnDetailObjectContext', null)
+		const workspaceRaw = inject('cnWorkspaceContext', ref(null))
+		const appConfigRaw = inject('cnAppConfig', ref({}))
+		const unwrap = (v) => ((v && typeof v === 'object' && 'value' in v) ? v.value : v)
+		const { data, loading } = useEndpointSource(
+			() => ((props.objects && props.objects.length > 0) ? null : props.endpointSource),
+			{
+				ctx: () => ({
+					...(resolveObjectTokenContext(objectCtxRaw, detailCtxRaw) || {}),
+					workspace: unwrap(workspaceRaw) || {},
+					config: unwrap(appConfigRaw) || {},
+				}),
+				widgetId: () => props.widgetId,
+			},
+		)
+		return { epData: data, epLoading: loading }
+	},
+
+	computed: {
+		/**
+		 * The objects drawn: `objects` when given, else the endpoint's array.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		cards() {
+			if (this.objects && this.objects.length > 0) {
+				return this.objects
+			}
+			return Array.isArray(this.epData) ? this.epData : []
+		},
 	},
 }
 </script>

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -88,6 +88,7 @@ import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatch
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { fieldsFromSchema } from '../../utils/schema.js'
 import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnRowActions } from '../CnRowActions/index.js'
@@ -231,6 +232,12 @@ export default {
 		 * the object form (`{ key, label, sortable, width, cellClass,
 		 * formatter, widget, format, aggregate }`) both pass straight through.
 		 *
+		 * A column that holds a reference shows the referenced object's label
+		 * with `labelField` (the property to show) and/or `resolve`
+		 * (`{ register, schema, labelField? }`, where the reference points).
+		 * Without `resolve` the target is read off the source schema's `$ref`
+		 * for that property. Such a column renders as an `fkResolve` cell.
+		 *
 		 * @type {Array<object|string>}
 		 */
 		columns: {
@@ -469,6 +476,8 @@ export default {
 			confirmAction: null,
 			/** @type {object|null} The row the pending confirm-gated action targets. */
 			confirmRow: null,
+			/** Where each label column's references point, read off the source schema, by column key. */
+			refTargets: {},
 		}
 	},
 
@@ -638,6 +647,57 @@ export default {
 			return params
 		},
 
+		/**
+		 * Columns that ask for the label of the object they reference
+		 * (`labelField` or `resolve`) and draw no cell widget of their own.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		refLabelColumns() {
+			return (this.columns || []).filter((col) => col && typeof col === 'object' && !col.widget
+				&& ((typeof col.labelField === 'string' && col.labelField !== '') || (col.resolve && typeof col.resolve === 'object')))
+		},
+
+		/**
+		 * The columns handed to CnDataTable: a label column whose target is
+		 * known renders as an `fkResolve` cell; every other column as given.
+		 *
+		 * @return {Array<object|string>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		renderedColumns() {
+			if (this.refLabelColumns.length === 0) {
+				return this.columns
+			}
+			return this.columns.map((col) => {
+				if (!this.refLabelColumns.includes(col)) {
+					return col
+				}
+				const target = this.refTargetOf(col)
+				if (!target) {
+					return col
+				}
+				const labelField = (col.resolve && typeof col.resolve.labelField === 'string' && col.resolve.labelField) || col.labelField || 'name'
+				return { ...col, widget: 'fkResolve', widgetProps: { ...(col.widgetProps || {}), register: target.register, schema: target.schema, labelField } }
+			})
+		},
+
+		/**
+		 * The label columns whose target has to be read off the source schema.
+		 *
+		 * @return {string[]} Their keys.
+		 */
+		schemaRefKeys() {
+			return this.refLabelColumns.filter((col) => !this.explicitTarget(col)).map((col) => col.key)
+		},
+
+		/** @return {string} The label columns to look up and the source schema, to read again when either changes. */
+		refTargetsKey() {
+			const src = this.source || {}
+			return `${src.register || ''}/${src.schema || ''}:${this.schemaRefKeys.join('|')}`
+		},
+
 		/**
 		 * `$props` minus the chrome props (`title`, `documentationUrl`,
 		 * `widgetId`, `hideWrapper`) and the widget-only props (`source`,
@@ -669,6 +729,9 @@ export default {
 			if (this.compiledRowClass) {
 				inner.rowClass = this.compiledRowClass
 			}
+			if (this.refLabelColumns.length > 0) {
+				inner.columns = this.renderedColumns
+			}
 			if (this.selfFetchActive) {
 				inner.register = this.source.register
 				inner.schemaId = this.source.schema
@@ -804,6 +867,16 @@ export default {
 		},
 	},
 
+	watch: {
+		refTargetsKey() {
+			this.loadRefTargets()
+		},
+	},
+
+	mounted() {
+		this.loadRefTargets()
+	},
+
 	methods: {
 		/**
 		 * Entry point for every declarative action trigger (row menu or
@@ -914,6 +987,68 @@ export default {
 			}
 		},
 
+		/**
+		 * Where a label column's references point when the column says so
+		 * itself (`resolve.register` and `resolve.schema`).
+		 *
+		 * @param {object} col The column.
+		 * @return {{register: string, schema: string}|null}
+		 */
+		explicitTarget(col) {
+			const r = col && col.resolve
+			if (r && typeof r === 'object' && typeof r.register === 'string' && r.register !== '' && typeof r.schema === 'string' && r.schema !== '') {
+				return { register: r.register, schema: r.schema }
+			}
+			return null
+		},
+
+		/**
+		 * Where a label column's references point: the column's `resolve`, else
+		 * the source schema's `$ref` for the property, else null (the column
+		 * then shows the raw value).
+		 *
+		 * @param {object} col The column.
+		 * @return {{register: string, schema: string}|null}
+		 */
+		refTargetOf(col) {
+			return this.explicitTarget(col) || this.refTargets[col.key] || null
+		},
+
+		/**
+		 * Read the source schema once and note, for each label column without a
+		 * `resolve`, the register and schema its property's `$ref` names. A
+		 * failed or missing schema leaves those columns showing raw values.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		async loadRefTargets() {
+			const keys = this.schemaRefKeys
+			const src = this.source
+			if (keys.length === 0 || !src || typeof src.register !== 'string' || src.register === '' || src.register.startsWith('@') || typeof src.schema !== 'string' || src.schema === '') {
+				return
+			}
+			const store = this.getObjectStore()
+			if (!store || typeof store.fetchSchema !== 'function') {
+				return
+			}
+			const type = resolveObjectOpType(store, { register: src.register, schema: src.schema }, { exactSchema: true })
+			const schema = await store.fetchSchema(type).catch(() => null)
+			if (!schema || typeof schema !== 'object') {
+				return
+			}
+			const fields = fieldsFromSchema(schema, { includeReadOnly: true })
+			const found = {}
+			for (const key of keys) {
+				const field = fields.find((f) => f.key === key)
+				const ref = field && field.reference
+				if (ref && ref.schema !== undefined && ref.schema !== null) {
+					found[key] = { register: ref.register || src.register, schema: String(ref.schema) }
+				}
+			}
+			this.refTargets = { ...this.refTargets, ...found }
+		},
+
 		/**
 		 * The shared object store instance, or null when no Pinia is active
 		 * (`dispatchAction` then warns and no-ops).

package/src/components/CnWidgetWrapper/CnWidgetWrapper.md

@@ -12,6 +12,16 @@ Basic — widget card with title and content:
 </div>
 ```
 
+With an `eyebrow`, a short muted line above the title:
+
+```vue
+<div style="width: 320px; height: 160px; position: relative; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden;">
+  <CnWidgetWrapper title="Forecast 13 weeks" eyebrow="Balance per week" :show-title="true">
+    <p style="margin: 0; padding: 0 16px;">Week 41</p>
+  </CnWidgetWrapper>
+</div>
+```
+
 With footer buttons:
 
 ```vue

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -52,7 +52,15 @@
 					v-else-if="iconClass"
 					:class="iconClass"
 					class="cn-widget-wrapper__icon" />
-				<h3 :id="titleId" class="cn-widget-wrapper__title">
+				<!-- An eyebrow (`eyebrow`) is a muted line above the title:
+				     "Saldo per week" above "Prognose 13 weken". -->
+				<div v-if="resolvedEyebrow" class="cn-widget-wrapper__title-stack">
+					<span class="cn-widget-wrapper__eyebrow" data-testid="cn-widget-wrapper-eyebrow">{{ resolvedEyebrow }}</span>
+					<h3 :id="titleId" class="cn-widget-wrapper__title">
+						{{ resolvedTitle }}
+					</h3>
+				</div>
+				<h3 v-else :id="titleId" class="cn-widget-wrapper__title">
 					{{ resolvedTitle }}
 				</h3>
 				<!-- @slot title-meta Rendered inside the header's left group,
@@ -234,6 +242,15 @@ export default {
 			default: () => t('nextcloud-vue', 'Widget'),
 		},
 
+		/**
+		 * A short muted line above the title ("Saldo per week" above
+		 * "Prognose 13 weken"), through the host translate. Empty draws none.
+		 */
+		eyebrow: {
+			type: String,
+			default: '',
+		},
+
 		/** Whether to show the header with title */
 		showTitle: {
 			type: Boolean,
@@ -717,6 +734,16 @@ export default {
 			return label ? this.effectiveTranslate(label) : ''
 		},
 
+		/**
+		 * The eyebrow through the host translate, or ''.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/widget-title-eyebrow/specs/dashboard-page/spec.md#requirement-a-widget-card-can-carry-a-line-above-its-title
+		 */
+		resolvedEyebrow() {
+			return this.eyebrow ? this.effectiveTranslate(this.eyebrow) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -1152,6 +1179,22 @@ export default {
 	color: var(--cn-widget-icon-color, var(--color-primary-element));
 }
 
+.cn-widget-wrapper__title-stack {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-widget-wrapper__eyebrow {
+	font-size: 13px;
+	line-height: 1.3;
+	color: var(--color-text-maxcontrast);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .cn-widget-wrapper__title {
 	font-weight: 600;
 	font-size: 14px;

package/src/composables/useListView.js

@@ -291,6 +291,26 @@ export function useListView(objectTypeOrOptions, options) {
 		refresh(page)
 	}
 
+	/**
+	 * Add the next page after the rows already loaded, for a view that shows
+	 * every row at once (the board). Does nothing on the last page. A refresh
+	 * started while the page is in flight drops it.
+	 *
+	 * @return {Promise<void>}
+	 */
+	async function loadMore() {
+		const current = pagination.value
+		const next = Number(current.page || 1) + 1
+		if (next > Number(current.pages || 1)) {
+			return
+		}
+		const seq = refreshSeq
+		await objectStore.fetchCollection(getType(), buildParams(next), {
+			append: true,
+			isCurrent: () => seq === refreshSeq,
+		})
+	}
+
 	/**
 	 * Handle page-size change. Resets to page 1.
 	 *
@@ -402,6 +422,7 @@ export function useListView(objectTypeOrOptions, options) {
 		onPageSizeChange,
 		// Explicit fetch
 		refresh,
+		loadMore,
 		// The query the list sends (search, sort, facet filters, fixed filters),
 		// built from the current state, for an export that must follow the list.
 		buildParams,

package/src/css/board.css

@@ -61,6 +61,12 @@
 	font-weight: 400;
 }
 
+/* A column at its limit: the count in the error colour; "full" is said in words too. */
+.cn-board-view.cn-board-view--board .cn-board-view__badge.cn-board-view__badge--full {
+	color: var(--color-error-text, var(--color-error));
+	font-weight: 600;
+}
+
 .cn-board-view.cn-board-view--board .cn-board-view__sum {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
@@ -96,19 +102,24 @@
 	gap: 8px;
 }
 
-.cn-board-view.cn-board-view--board .cn-board-view__card-title {
+/* The title is a link drawn as a heading (board DqWerkbord): main text, no
+   underline. `!important` because a theme's `a { color; text-decoration }`
+   carries it (thematiq), and a bare `a` with `!important` beats any class. */
+.cn-board-view.cn-board-view--board .cn-board-view__card-title,
+.cn-board-view.cn-board-view--board .cn-board-view__card-title:visited {
 	flex: 1 1 auto;
 	min-width: 0;
 	font-size: 15px;
 	font-weight: 700;
 	line-height: 1.3;
-	color: var(--color-main-text);
-	text-decoration: none;
+	color: var(--color-main-text) !important;
+	text-decoration: none !important;
 	overflow-wrap: anywhere;
 }
 
 .cn-board-view.cn-board-view--board .cn-board-view__card-title:hover {
-	text-decoration: underline;
+	color: var(--color-main-text) !important;
+	text-decoration: underline !important;
 }
 
 .cn-board-view.cn-board-view--board .cn-board-view__card-title:focus-visible {
@@ -267,3 +278,93 @@
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
+
+/*
+ * screens-board-reference-columns: a wide board wraps its columns onto more
+ * rows (`config.board.wrap`), as many to a row as fit at 240px, instead of
+ * one row that scrolls sideways.
+ */
+.cn-board-view.cn-board-view--wrap .cn-board-view__columns {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	overflow-x: visible;
+}
+
+.cn-board-view.cn-board-view--wrap:not(.cn-board-view--board) .cn-board-view__columns {
+	gap: 12px;
+}
+
+/* A column the dragged card cannot reach fades; the label stays readable. */
+.cn-board-view .cn-board-view__column--unreachable {
+	opacity: 0.45;
+}
+
+/* The selection checkbox: in the board look's card head, before the title. */
+.cn-board-view .cn-board-view__select {
+	flex: none;
+	width: 16px;
+	height: 16px;
+	margin: 2px 0 0;
+	accent-color: var(--color-primary-element);
+	cursor: pointer;
+}
+
+/* Board look: the board draws no checkbox. It shows on a hovered card, on a
+   card holding focus (so Tab still reaches it), once anything is selected, and
+   always where there is no hover. Collapsed rather than hidden, so it stays in
+   the tab order. */
+@media (hover: hover) {
+	.cn-board-view.cn-board-view--board:not(.cn-board-view--selecting) .cn-board-view__card:not(:hover, :focus-within) .cn-board-view__select {
+		width: 0;
+		margin-inline-end: -8px;
+		opacity: 0;
+	}
+}
+
+/* A menu target the card cannot reach: still listed, greyed, with its note. */
+.cn-board-view.cn-board-view--board .cn-board-view__menu-item.cn-board-view__menu-item--blocked {
+	color: var(--color-text-maxcontrast);
+	cursor: not-allowed;
+}
+
+.cn-board-view .cn-board-view__menu-note {
+	margin-inline-start: auto;
+	padding-inline-start: 12px;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+/* A blocked target with the host's reason: the reason on its own line under the name. */
+.cn-board-view.cn-board-view--board .cn-board-view__menu-item.cn-board-view__menu-item--reason {
+	flex-wrap: wrap;
+	max-width: 320px;
+	padding-block: 6px;
+}
+
+.cn-board-view .cn-board-view__menu-reason {
+	flex-basis: 100%;
+	font-size: 12px;
+	line-height: 1.4;
+	color: var(--color-text-maxcontrast);
+}
+
+/* While a card is dragged: why it cannot land in this column, under the header.
+   The rest of the column fades; the reason stays at full contrast. */
+.cn-board-view .cn-board-view__column-reason {
+	margin: 0 0 8px;
+	padding: 6px 8px;
+	border-radius: var(--border-radius);
+	background-color: var(--color-main-background);
+	font-size: 12px;
+	line-height: 1.4;
+	color: var(--color-main-text);
+}
+
+.cn-board-view .cn-board-view__column--unreachable.cn-board-view__column--reason {
+	opacity: 1;
+}
+
+.cn-board-view .cn-board-view__column--reason > :not(.cn-board-view__column-reason) {
+	opacity: 0.45;
+}

package/src/css/dialog.css

@@ -35,8 +35,10 @@
 }
 
 /* The header is ours: NcModal's own close button and NcDialog's heading give
-   way (the heading stays as the accessible name, visually hidden). */
-.cn-dialog-board .modal-container__close {
+   way (the heading stays as the accessible name, visually hidden). The mask
+   class raises the rule above NcButton's `.button-vue[data-v-…]`, whose
+   stylesheet a spawned dialog can load after this one. */
+.modal-mask.cn-dialog-board .modal-container__close {
 	display: none;
 }