@conduction/nextcloud-vue 2.84.0 → 2.85.0

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

@@ -96,19 +96,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 +272,59 @@
 	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);
+}

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;
 }
 

package/src/css/index-page.css

@@ -104,6 +104,19 @@
 	margin-top: 0;
 }
 
+/* The board view's footer: how many rows it holds of how many match, and
+   "Load more" while the list is not complete. */
+.cn-index-page__board-load {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 16px;
+	padding: 12px 16px;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
 /* Table view owns both scroll axes. With the page column scrolling instead, the
    table's horizontal scrollbar sat at the bottom of the (taller-than-viewport)
    table, so it only appeared after scrolling down, and the pagination was
@@ -369,3 +382,39 @@
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
+
+/*
+ * screens-board-reference-columns: the board view's controls after the
+ * search (board DqWerkbord): "Case type:" and "Columns:" as a 600 label and a
+ * 36px select, then the hint in the secondary text colour.
+ */
+.cn-index-page__board-control {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-index-page__board-select {
+	height: 36px;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 10px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 400;
+}
+
+.cn-index-page__board-select--strong {
+	font-weight: 500;
+}
+
+.cn-index-page__board-hint {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}

package/src/css/kpi-card.css

@@ -444,6 +444,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;