@conduction/nextcloud-vue 2.62.0 → 2.64.0

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -15,39 +15,51 @@
 		</NcNoteCard>
 
 		<div v-else class="cn-choice-cards__grid" :style="gridStyle">
-			<label
+			<!-- One cell per option: the card's label, and below it whatever the
+			     `#option-actions` slot adds. The slot sits OUTSIDE the label on
+			     purpose: a button inside a label is interactive content inside
+			     interactive content, and a click on it would toggle the radio. -->
+			<div
 				v-for="option in normalizedOptions"
 				:key="String(option.value)"
-				class="cn-choice-cards__option"
-				:class="{ 'cn-choice-cards__option--selected': isSelected(option) }">
-				<!-- A REAL, VISIBLE input, not a styled div with a click handler.
-				     It carries the checked state to assistive technology and to
-				     Windows high-contrast mode for free, and it keeps the
-				     selection perceivable without colour (WCAG 1.4.1) — the
-				     card's active border alone would not be. -->
-				<input
-					class="cn-choice-cards__input"
-					:type="multiple ? 'checkbox' : 'radio'"
-					:name="groupName"
-					:value="String(option.value)"
-					:checked="isSelected(option)"
-					:disabled="disabled"
-					@change="onToggle(option)">
-				<CnCard
-					class="cn-choice-cards__card"
-					:title="option.label"
-					titleTag="span"
-					:description="option.description"
-					:stats="option.stats || []"
-					:tags="option.tags || []"
-					:active="isSelected(option)"
-					activeVariant="primary"
-					:descriptionLines="descriptionLines">
-					<template v-if="option.icon" #icon>
-						<CnIcon :name="option.icon" :size="20" />
-					</template>
-				</CnCard>
-			</label>
+				class="cn-choice-cards__cell">
+				<label
+					class="cn-choice-cards__option"
+					:class="{ 'cn-choice-cards__option--selected': isSelected(option) }">
+					<!-- A REAL, VISIBLE input, not a styled div with a click handler.
+					     It carries the checked state to assistive technology and to
+					     Windows high-contrast mode for free, and it keeps the
+					     selection perceivable without colour (WCAG 1.4.1) — the
+					     card's active border alone would not be. -->
+					<input
+						class="cn-choice-cards__input"
+						:type="multiple ? 'checkbox' : 'radio'"
+						:name="groupName"
+						:value="String(option.value)"
+						:checked="isSelected(option)"
+						:disabled="disabled"
+						@change="onToggle(option)">
+					<CnCard
+						class="cn-choice-cards__card"
+						:title="option.label"
+						titleTag="span"
+						:description="option.description"
+						:stats="option.stats || []"
+						:tags="option.tags || []"
+						:active="isSelected(option)"
+						activeVariant="primary"
+						:descriptionLines="descriptionLines">
+						<template v-if="option.icon" #icon>
+							<CnIcon :name="option.icon" :size="20" />
+						</template>
+					</CnCard>
+				</label>
+				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
+					<!-- @slot option-actions Content below one card, outside its label
+					     (e.g. a per-option Load button). Scope: `{ option, selected }`. -->
+					<slot name="option-actions" :option="option" :selected="isSelected(option)" />
+				</div>
+			</div>
 		</div>
 	</fieldset>
 </template>
@@ -298,6 +310,19 @@ export default {
 	padding: 12px;
 }
 
+.cn-choice-cards__cell {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-inline-size: 0;
+}
+
+.cn-choice-cards__actions {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
 .cn-choice-cards__option {
 	position: relative;
 	display: block;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -11,8 +11,14 @@
 -->
 <template>
 	<div class="cn-dashboard-page" data-testid="cn-dashboard-page">
-		<!-- Header -->
-		<div class="cn-dashboard-page__header" data-testid="cn-dashboard-page-header">
+		<!-- Header. `showHeader: false` drops the whole row (title, description,
+		     header actions, edit toggle) for a page that opens with its own
+		     heading, such as a greeting; the title then stays as a visually
+		     hidden heading so the main landmark keeps its name. -->
+		<h2 v-if="!showHeader && title" class="hidden-visually" data-testid="cn-dashboard-page-hidden-title">
+			{{ resolvedTitle }}
+		</h2>
+		<div v-if="showHeader" class="cn-dashboard-page__header" data-testid="cn-dashboard-page-header">
 			<div class="cn-dashboard-page__header-left">
 				<div v-if="title || $slots['title-meta']" class="cn-dashboard-page__title-row">
 					<h2 v-if="title" class="cn-dashboard-page__title">
@@ -282,9 +288,9 @@
 					<NcEmptyContent
 						:name="installAppLabel(missingRequiredApp(item))"
 						:description="t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.')"
-						class="cn-dashboard-page__requires-app">
+						class="cn-dashboard-page__requires-app cn-requires-app">
 						<template #icon>
-							<Download :size="32" />
+							<Download :size="24" />
 						</template>
 						<template #action>
 							<NcButton
@@ -320,6 +326,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -400,6 +407,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -478,6 +486,7 @@
 						:flush="item.flush !== false"
 						:class="{ 'cn-dashboard-page__card-fit': isCardWidget(item) }"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
 						:docsAnchor="getWidgetDocsAnchor(item)"
@@ -502,6 +511,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -537,6 +547,7 @@
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:showRefresh="getWidgetShowRefresh(item)"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
@@ -566,6 +577,7 @@
 						:titleIconVariant="getWidgetTitleIconVariant(item)"
 						:class="{ 'cn-dashboard-page__card-fit': isCardWidget(item) }"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
 						:docsAnchor="getWidgetDocsAnchor(item)"
@@ -921,6 +933,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Whether the header row renders: title, description, header actions
+		 * and the edit toggle. `false` (manifest `config.showHeader: false`)
+		 * drops it for a page whose first widget is its heading; the title
+		 * then renders visually hidden so the page keeps an accessible name.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-dashboard-page-can-hide-its-header
+		 */
+		showHeader: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -3410,6 +3435,22 @@ export default {
 			return def?.buttons || []
 		},
 
+		/**
+		 * The widget's header text link (`headerLink` on the layout entry,
+		 * else on the widget definition), forwarded to CnWidgetWrapper.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @param {object} item Layout placement entry.
+		 * @return {object|null}
+		 */
+		getWidgetHeaderLink(item) {
+			if (item?.headerLink && typeof item.headerLink === 'object') {
+				return item.headerLink
+			}
+			const def = this.getWidgetDef(item.widgetId)
+			return (def?.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null
+		},
+
 		/**
 		 * Whether a widget's overflow Actions menu shows the Refresh item.
 		 * An explicit per-widget flag wins — on the widget definition or