@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -85,8 +85,9 @@
 				<div
 					v-if="entry.widget && entry.stack.length"
 					class="cn-tabs-widget__stack"
+					:class="{ 'cn-tabs-widget__stack--grid': !!entry.grid }"
 					data-testid="cn-tabs-widget-stack">
-					<div class="cn-tabs-widget__stack-first">
+					<div class="cn-tabs-widget__stack-first" :style="spanStyle(entry.grid, 0)">
 						<CnDetailWidgetHost
 							:widget="entry.widget"
 							chrome="card"
@@ -108,9 +109,10 @@
 							@selectObject="onSelectObject" />
 					</div>
 					<div
-						v-for="child in entry.stack"
+						v-for="(child, childIndex) in entry.stack"
 						:key="`${entry.key}-${child.id}`"
 						class="cn-tabs-widget__stack-item"
+						:style="spanStyle(entry.grid, childIndex + 1)"
 						:data-testid="`cn-tabs-widget-stack-${child.id}`">
 						<CnDetailWidgetHost
 							:widget="child"
@@ -330,12 +332,17 @@ export default {
 		 * names the list; `count` and `countField` win over it. `overflow: true`
 		 * lists the tab under "More".
 		 *
+		 * A tab with `widgetIds` can lay them out in a grid instead of one under
+		 * the other: `columns: 4` gives each a quarter of the row, and
+		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
+		 * the page grid does. Widgets wrap onto the next row.
+		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
+		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean, columns?: number, layout?: Array<{widgetId: string, gridWidth: number}>}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -552,6 +559,7 @@ export default {
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
 					stack: widgets.slice(1),
+					grid: this.stackGrid(tab, widgets),
 					count,
 					overflow,
 					pending: visibility === 'pending',
@@ -751,6 +759,46 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The grid a stack lays its widgets out in, as one column span (of 12)
+		 * per widget in order, or null for the plain vertical stack. A tab says
+		 * `columns: 4` (every widget spans a quarter of the row) and/or
+		 * `layout: [{ widgetId, gridWidth }]`, the page grid's width key per
+		 * widget (of 12; a widget it does not name takes the `columns` share, or
+		 * the whole row). Widgets wrap onto the next row. Heights follow the
+		 * content.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {Array<object>} widgets The widgets of the stack, in order.
+		 * @return {number[]|null} The column span of each widget, or null.
+		 */
+		stackGrid(tab, widgets) {
+			if (!tab || typeof tab !== 'object' || widgets.length < 2) {
+				return null
+			}
+			const clamp = (value) => Math.min(12, Math.max(1, Math.floor(Number(value))))
+			const columns = Number(tab.columns)
+			const share = Number.isFinite(columns) && columns >= 1 ? clamp(12 / Math.min(12, Math.floor(columns))) : 12
+			const placed = new Map((Array.isArray(tab.layout) ? tab.layout : [])
+				.filter((entry) => entry && typeof entry.widgetId === 'string' && Number.isFinite(Number(entry.gridWidth)))
+				.map((entry) => [entry.widgetId, clamp(entry.gridWidth)]))
+			if (placed.size === 0 && share === 12) {
+				return null
+			}
+			return widgets.map((widget) => placed.get(widget.id) ?? share)
+		},
+
+		/**
+		 * The inline column span of one widget of a gridded stack.
+		 *
+		 * @param {number[]|null} grid The spans of the stack, or null.
+		 * @param {number} index The widget's position in the stack.
+		 * @return {object|undefined} The style, or undefined without a grid.
+		 */
+		spanStyle(grid, index) {
+			return grid ? { gridColumn: `span ${grid[index] || 12}` } : undefined
+		},
+
 		/**
 		 * The widget ids a tab names: `widgetIds` (a stack) when it holds at
 		 * least one id, else `widgetId`, or the bare string.
@@ -999,6 +1047,29 @@ export default {
 	gap: 20px;
 }
 
+/* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
+   onto the next row, a row's cards as tall as the tallest. Narrow, it is the
+   plain stack again. */
+.cn-tabs-widget__stack--grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	align-items: stretch;
+}
+
+.cn-tabs-widget__stack--grid > * {
+	min-width: 0;
+}
+
+@media (max-width: 700px) {
+	.cn-tabs-widget__stack--grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.cn-tabs-widget__stack--grid > * {
+		grid-column: auto !important;
+	}
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -1119,6 +1190,14 @@ export default {
 	height: 100%;
 }
 
+/* A list widget's footer Add bleeds through its card's 16px content padding
+   (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
+   holds the list directly the footer stuck out 4px on the right and at the
+   bottom and made the panel scroll. It bleeds exactly the panel's padding. */
+.cn-tabs-widget__tabs :deep(.cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add) {
+	margin: auto -12px -12px;
+}
+
 .cn-tabs-widget__title {
 	align-items: center;
 	display: inline-flex;

package/src/components/CnTasksWidget/CnTasksWidget.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-tasks-widget">
+	<div class="cn-tasks-widget" :class="{ 'cn-tasks-widget--list': isList }">
 		<!-- One quiet line on failure, never a leaked axios status string
 		     (ADR-062). The real error goes to the console. -->
 		<p v-if="error" class="cn-tasks-widget__error">
@@ -21,7 +21,7 @@
 			<!-- The count states the server TOTAL, never the rendered length
 			     (ADR-062): the number a person acts on is how much work
 			     exists, not how much fits the cell. -->
-			<p class="cn-tasks-widget__count">
+			<p v-if="!isList" class="cn-tasks-widget__count">
 				{{ countLabel }}
 			</p>
 			<ul class="cn-tasks-widget__list">
@@ -33,23 +33,53 @@
 					@click="onRowClick(task, $event)"
 					@mousedown="preventMiddleClickAutoscroll"
 					@auxclick="onRowAuxClick(task, $event)">
-					<span class="cn-tasks-widget__body">
-						<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
-						<span class="cn-tasks-widget__meta">{{ metaLine(task) }}</span>
-					</span>
-					<!-- Overdue is carried by the WORDING (taskDueLabel) and by
-					     weight; the colour only reinforces it. -->
-					<span
-						class="cn-tasks-widget__due"
-						:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
-						{{ dueLabel(task) }}
-					</span>
+					<!-- List variant: a checkbox completes the viewer's own task
+					     (the task with a declared outcome list keeps the menu, as
+					     a checkbox cannot choose an outcome). Other rows get a
+					     spacer so the titles stay aligned. -->
+					<template v-if="isList">
+						<input
+							v-if="canCheck(task)"
+							type="checkbox"
+							class="cn-tasks-widget__check"
+							:checked="completing.includes(String(task.uuid))"
+							:disabled="completing.includes(String(task.uuid))"
+							:aria-label="tr('Mark {title} as done').replace('{title}', titleOf(task))"
+							data-testid="cn-tasks-widget-check"
+							@click.stop
+							@change="check(task)">
+						<span v-else class="cn-tasks-widget__check-spacer" aria-hidden="true" />
+						<span class="cn-tasks-widget__body">
+							<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
+							<span class="cn-tasks-widget__meta cn-tasks-widget__meta--split">
+								<span class="cn-tasks-widget__subject">{{ subjectOf(task) }}</span>
+								<span
+									class="cn-tasks-widget__due"
+									:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
+									{{ dueLabel(task) }}
+								</span>
+							</span>
+						</span>
+					</template>
+					<template v-else>
+						<span class="cn-tasks-widget__body">
+							<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
+							<span class="cn-tasks-widget__meta">{{ metaLine(task) }}</span>
+						</span>
+						<!-- Overdue is carried by the WORDING (taskDueLabel) and by
+						     weight; the colour only reinforces it. -->
+						<span
+							class="cn-tasks-widget__due"
+							:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
+							{{ dueLabel(task) }}
+						</span>
+					</template>
 					<!-- Only verbs the contract can accept are offered; the
 					     server still authorizes, and a refusal is toasted in
 					     its own words. Stopped clicks: the menu must not also
 					     open the row. -->
 					<NcActions
-						v-if="canClaim(task) || canComplete(task)"
+						v-if="(canClaim(task) || canComplete(task)) && !(isList && canCheck(task))"
 						class="cn-tasks-widget__actions"
 						:forceMenu="true"
 						:aria-label="tr('Task actions')"
@@ -90,6 +120,7 @@ import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import { taskDeepLink, taskDueLabel } from '../../composables/indexSources.js'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
+import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 
@@ -185,8 +216,14 @@ export default {
 		 *   receiving the task uuid as `:id`. Omitted = the click opens the
 		 *   task's openregister deep link instead.
 		 * - `emptyText` — override for the empty-inbox line.
+		 * - `variant` — `list` draws a checkbox list: a checkbox that completes
+		 *   the viewer's own task, the title, the subject on a second muted
+		 *   line and the due date at its right. Default: the compact rows.
+		 * - `viewAllRoute` / `viewAllLabel` — a "View all" text link in the
+		 *   card header: a route name or location `{ name, params?, query? }`,
+		 *   and its label (default "View all"). `headerLink` works too.
 		 *
-		 * @type {{scope?: string, limit?: number, pollSeconds?: number, rowRoute?: string, emptyText?: string}}
+		 * @type {{scope?: string, limit?: number, pollSeconds?: number, rowRoute?: string, emptyText?: string, variant?: string, viewAllRoute?: (string|object), viewAllLabel?: string}}
 		 */
 		content: {
 			type: Object,
@@ -214,6 +251,8 @@ export default {
 		},
 	},
 
+	emits: ['header'],
+
 	setup(props) {
 		// The shared endpoint engine owns request dedup, the short-TTL cache
 		// and the cn:page:refresh / cn:widget:refresh subscriptions — the
@@ -253,10 +292,30 @@ export default {
 	data() {
 		return {
 			pollTimer: null,
+			/** Uuids of the tasks a checkbox is completing, until the next read. */
+			completing: [],
 		}
 	},
 
 	computed: {
+		/**
+		 * Whether the rows draw as the checkbox list (`content.variant: 'list'`).
+		 *
+		 * @return {boolean}
+		 */
+		isList() {
+			return this.content.variant === 'list'
+		},
+
+		/**
+		 * The header "View all" link the content declares, or null.
+		 *
+		 * @return {object|null}
+		 */
+		headerLink() {
+			return contentHeaderLink(this.content)
+		},
+
 		/**
 		 * Effective translate function: the explicit prop, then the injected
 		 * host one, then `@nextcloud/l10n` under the library's own app id.
@@ -357,6 +416,19 @@ export default {
 		},
 	},
 
+	watch: {
+		headerLink: {
+			immediate: true,
+			handler(link) {
+				/**
+				 * @event header Emitted with the card header's parts: the "View all" link, if any.
+				 * @type {{link: (object|null), note: string}}
+				 */
+				this.$emit('header', { link, note: '' })
+			},
+		},
+	},
+
 	mounted() {
 		this.startPolling()
 		document.addEventListener('visibilitychange', this.onVisibilityChange)
@@ -423,6 +495,43 @@ export default {
 			return task.displayTitle || task.title || String(task.uuid || '')
 		},
 
+		/**
+		 * The subject (the case a task sits on), for the list variant's second line.
+		 *
+		 * @param {object} task The task row.
+		 * @return {string} The subject's title, or ''.
+		 */
+		subjectOf(task) {
+			return task.subject && task.subject.title ? String(task.subject.title) : ''
+		},
+
+		/**
+		 * Whether the list variant draws a checkbox on the row: the viewer's own
+		 * open task, with no outcome list to choose from.
+		 *
+		 * @param {object} task The task row.
+		 * @return {boolean}
+		 */
+		canCheck(task) {
+			return this.canComplete(task) && !(Array.isArray(task.outcomes) && task.outcomes.length > 0)
+		},
+
+		/**
+		 * Complete a task from its checkbox, with the server's default outcome.
+		 *
+		 * @param {object} task The task row.
+		 * @return {Promise<void>}
+		 */
+		async check(task) {
+			const uuid = String(task.uuid || '')
+			if (uuid === '' || this.completing.includes(uuid)) {
+				return
+			}
+			this.completing = [...this.completing, uuid]
+			await this.postVerb(task, 'complete', { outcome: 'done' })
+			this.completing = this.completing.filter((id) => id !== uuid)
+		},
+
 		/**
 		 * The secondary line: subject, state and priority — whichever of
 		 * those the row actually carries, in words.
@@ -721,6 +830,57 @@ function normaliseScope(raw) {
 	font-variant-numeric: tabular-nums;
 }
 
+/* List variant, after the dashboard board's My tasks card: a checkbox, the
+   title, the subject on a muted second line and the due date at its right. */
+.cn-tasks-widget--list .cn-tasks-widget__row {
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 0;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__name {
+	font-weight: 400;
+	font-size: 15px;
+	line-height: 1.35;
+	color: var(--color-main-text);
+}
+
+.cn-tasks-widget__check,
+.cn-tasks-widget__check-spacer {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin: 1px 0 0;
+}
+
+.cn-tasks-widget__check {
+	accent-color: var(--color-primary-element);
+	cursor: pointer;
+}
+
+.cn-tasks-widget__meta--split {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 13px;
+	overflow: visible;
+}
+
+.cn-tasks-widget__subject {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__due {
+	font-size: 13px;
+	font-weight: 500;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__due--overdue {
+	font-weight: 600;
+}
+
 /* Overdue: weight AND colour on top of the wording, which already says
    "Overdue by N days" — the signal survives monochrome. */
 .cn-tasks-widget__due--overdue {