@conduction/nextcloud-vue 2.129.0 → 2.130.0

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -64,6 +64,9 @@
 							{{ col.label }}
 						</template>
 					</th>
+					<th v-if="rowActions.length > 0" scope="col" class="cn-record-list__cell--actions">
+						{{ rowActionsHeader }}
+					</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -78,12 +81,34 @@
 							:label="cell.text"
 							:variant="cell.tone"
 							size="small" />
-						<router-link v-else-if="cellIndex === 0 && item.to" :to="item.to">
+						<router-link v-else-if="cellIndex === 0 && item.to" :to="item.to" class="cn-record-list__cell-text">
 							{{ cell.text }}
 						</router-link>
-						<template v-else>
-							{{ cell.text }}
-						</template>
+						<span v-else class="cn-record-list__cell-text">{{ cell.text }}</span>
+						<span v-if="cell.sub" class="cn-record-list__cell-sub">{{ cell.sub }}</span>
+					</td>
+					<td v-if="rowActions.length > 0" class="cn-record-list__cell--actions">
+						<NcActions
+							v-if="item.rowActions.length > 0"
+							:aria-label="rowActionsLabel"
+							data-testid="cn-record-list-row-actions">
+							<template v-for="entry in item.rowActions" :key="`row-action-${entry.index}`">
+								<NcActionLink
+									v-if="entry.href"
+									:href="entry.href"
+									:target="entry.external ? '_blank' : undefined"
+									:data-testid="`cn-record-list-row-action-${entry.index}`">
+									{{ entry.action.label }}
+								</NcActionLink>
+								<NcActionButton
+									v-else
+									:closeAfterClick="true"
+									:data-testid="`cn-record-list-row-action-${entry.index}`"
+									@click="runRowActionEntry(entry.action, item.row)">
+									{{ entry.action.label }}
+								</NcActionButton>
+							</template>
+						</NcActions>
 					</td>
 				</tr>
 			</tbody>
@@ -99,14 +124,38 @@
 		<!-- `groupBy`: a heading per group, each group its own list, named by
 		     its heading. Without it this is one list, as before. -->
 		<template v-for="group in itemGroups" v-else :key="group.key">
+			<div
+				v-if="group.label && footerGroup !== '' && group.value === footerGroup"
+				class="cn-record-list__group-head"
+				data-testid="cn-record-list-group-head">
+				<h3
+					:id="group.headingId"
+					class="cn-record-list__group-heading"
+					data-testid="cn-record-list-group-heading">
+					{{ group.label }}
+				</h3>
+				<NcButton
+					variant="secondary"
+					:class="{ 'cn-record-list__action--tonal': footerTonal }"
+					:disabled="footerDisabled"
+					:aria-describedby="footerDisabled && footerAction.reason ? footerReasonId : null"
+					data-testid="cn-record-list-footer-action"
+					@click="runFooterAction">
+					<template v-if="footerAction.icon" #icon>
+						<CnIcon :name="footerAction.icon" :size="16" />
+					</template>
+					{{ footerAction.label }}
+				</NcButton>
+			</div>
 			<h3
-				v-if="group.label"
+				v-else-if="group.label"
 				:id="group.headingId"
 				class="cn-record-list__group-heading"
 				data-testid="cn-record-list-group-heading">
 				{{ group.label }}
 			</h3>
 			<ul
+				v-if="group.items.length > 0"
 				class="cn-record-list__list"
 				:aria-labelledby="group.label ? group.headingId : null"
 				:data-testid="isGrouped ? 'cn-record-list-group' : null">
@@ -360,11 +409,39 @@
 		     says why (`disabledReason`: "Kan zodra de beslissing is
 		     verzonden"). -->
 		<div
-			v-if="footerAction && !error"
+			v-if="footerGroupHead && rows.length === 0 && !error && !loading"
+			class="cn-record-list__group-head"
+			data-testid="cn-record-list-group-head">
+			<h3 class="cn-record-list__group-heading" data-testid="cn-record-list-group-heading">
+				{{ footerGroupHead }}
+			</h3>
+			<NcButton
+				variant="secondary"
+				:class="{ 'cn-record-list__action--tonal': footerTonal }"
+				:disabled="footerDisabled"
+				:aria-describedby="footerDisabled && footerAction.reason ? footerReasonId : null"
+				data-testid="cn-record-list-footer-action"
+				@click="runFooterAction">
+				<template v-if="footerAction.icon" #icon>
+					<CnIcon :name="footerAction.icon" :size="16" />
+				</template>
+				{{ footerAction.label }}
+			</NcButton>
+		</div>
+		<p
+			v-if="footerGroup !== '' && footerDisabled && footerAction && footerAction.reason && !error"
+			:id="footerReasonId"
+			class="cn-record-list__footer-reason"
+			data-testid="cn-record-list-footer-reason">
+			{{ footerAction.reason }}
+		</p>
+		<div
+			v-if="footerAction && footerGroup === '' && !error"
 			class="cn-record-list__footer"
 			data-testid="cn-record-list-footer">
 			<NcButton
 				variant="secondary"
+				:class="{ 'cn-record-list__action--tonal': footerTonal }"
 				:disabled="footerDisabled"
 				:aria-describedby="footerDisabled && footerAction.reason ? footerReasonId : null"
 				data-testid="cn-record-list-footer-action"
@@ -661,6 +738,41 @@ export default {
 			}
 		},
 
+		/**
+		 * The group value `footerAction.group` puts the action in, with
+		 * `groupBy`; '' when the action stands under the list.
+		 *
+		 * @spec openspec/changes/record-list-group-action/specs/record-list/spec.md#requirement-a-record-lists-action-can-end-a-group-heading-as-a-tonal-pill
+		 * @return {string}
+		 */
+		footerGroup() {
+			const group = this.content?.footerAction?.group
+			if (!this.footerAction || !this.isGrouped || group === null || group === undefined || group === '') {
+				return ''
+			}
+			return String(group)
+		},
+
+		/**
+		 * The heading of the action's group, for the list without rows.
+		 *
+		 * @return {string}
+		 */
+		footerGroupHead() {
+			if (this.footerGroup === '') {
+				return ''
+			}
+			const c = this.content
+			const labels = c.valueLabels && typeof c.valueLabels[c.groupBy] === 'object' ? c.valueLabels[c.groupBy] : {}
+			const named = labels[this.footerGroup] || this.footerGroup
+			return this.translate(named)
+		},
+
+		/** @return {boolean} Whether the action is drawn as a tonal pill (`footerAction.variant: "tonal"`). */
+		footerTonal() {
+			return this.content?.footerAction?.variant === 'tonal'
+		},
+
 		/**
 		 * What `footerAction.disabledWhen` depends on, so it is evaluated again
 		 * when the condition, the record or the workspace changes.
@@ -842,7 +954,7 @@ export default {
 		 * or not at all. Without `groupBy` all rows are one unheaded group.
 		 *
 		 * @spec openspec/changes/record-list-group-headings/specs/record-list/spec.md#requirement-a-record-list-can-group-its-rows-under-headings
-		 * @return {Array<{key: string, label: string, headingId: string, items: Array<object>}>} The groups.
+		 * @return {Array<{key: string, value: string, label: string, headingId: string, items: Array<object>}>} The groups.
 		 */
 		itemGroups() {
 			if (!this.isGrouped) {
@@ -869,10 +981,15 @@ export default {
 			if (buckets.has('')) {
 				values.push('')
 			}
+			if (this.footerGroup !== '' && !buckets.has(this.footerGroup)) {
+				buckets.set(this.footerGroup, [])
+				values.splice(buckets.has('') ? values.length - 1 : values.length, 0, this.footerGroup)
+			}
 			return values.map((value, index) => {
 				const named = value === '' ? c.groupEmptyLabel : (labels[value] || value)
 				return {
 					key: `group-${value}`,
+					value,
 					label: typeof named === 'string' && named !== '' ? this.translate(named) : '',
 					headingId: `${this.groupIdBase}-${index}`,
 					items: buckets.get(value),
@@ -904,6 +1021,8 @@ export default {
 			const indentPath = this.content?.indentPath
 			const rows = this.items.map((item) => ({
 				key: item.key,
+				row: item.row,
+				rowActions: this.rowActions.length > 0 ? this.rowActionsOf(item.row) : [],
 				to: item.attrs.to || null,
 				depth: indentPath ? Math.max(0, Math.floor(Number(readPath(item.row, indentPath)) || 0)) : 0,
 				cells: this.tableColumns.map((col) => {
@@ -913,6 +1032,7 @@ export default {
 					return {
 						key: col.key,
 						text,
+						sub: typeof col.sub === 'string' ? this.fill(col.sub, item.row) : '',
 						align: col.align,
 						alert: col.alertAbove !== undefined && Number.isFinite(limit) && text !== '' && Number.isFinite(value) && value > limit,
 						tone: this.cellToneOf(col, item.row, text),
@@ -1110,6 +1230,17 @@ export default {
 				}))
 		},
 
+		/**
+		 * The heading of the `table` presentation's actions column.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/record-list-table-row-actions/specs/record-list-table/spec.md#requirement-a-table-row-can-carry-a-second-line-and-an-actions-menu
+		 */
+		rowActionsHeader() {
+			const own = this.content?.rowActionsHeader
+			return typeof own === 'string' && own !== '' ? this.translate(own) : t('nextcloud-vue', 'Actions')
+		},
+
 		/** @return {string} The accessible name of a row's actions menu. */
 		rowActionsLabel() {
 			const own = this.content?.rowActionsLabel
@@ -1318,7 +1449,7 @@ export default {
 			if (!declared || this.footerDisabled) {
 				return undefined
 			}
-			const { disabledWhen, disabledReason, ...action } = declared
+			const { disabledWhen, disabledReason, group, variant, ...action } = declared
 			if (typeof this.cnDispatchAction === 'function') {
 				return this.cnDispatchAction(action)
 			}
@@ -1531,16 +1662,22 @@ export default {
 		 * Run a `rowAction` that is not a plain link through the page's
 		 * dispatcher: a `handler` gets the row as its last argument, an
 		 * `open-modal` gets it as the `row` prop, an `object-op` acts on it.
+		 * With `endpoint` it calls that app URL for the row, as a `rowActions`
+		 * endpoint entry does.
 		 *
 		 * @param {object} row The row.
 		 * @return {unknown} What the dispatcher returns.
 		 * @spec openspec/changes/screens-record-list-row-action/specs/record-list/spec.md
+		 * @spec openspec/changes/record-list-row-action-endpoint/specs/record-list/spec.md#requirement-a-rows-one-action-can-call-an-app-endpoint-for-that-row
 		 */
 		runRowAction(row) {
 			const action = this.content?.rowAction
 			if (!action || typeof action !== 'object') {
 				return undefined
 			}
+			if (typeof action.endpoint === 'string' && action.endpoint !== '') {
+				return this.runRowActionEntry(action, row)
+			}
 			const type = action.type || 'handler'
 			let wrapped = action
 			if (type === 'handler') {
@@ -2342,6 +2479,34 @@ export default {
 	line-height: 1.4;
 }
 
+.cn-record-list__group-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin-top: 6px;
+}
+
+.cn-record-list__group-head .cn-record-list__group-heading {
+	margin: 0;
+}
+
+.cn-record-list__action--tonal.button-vue {
+	min-height: 34px;
+	height: 34px;
+	padding: 0 12px;
+	border: 0;
+	border-radius: 17px;
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.cn-record-list__action--tonal.button-vue:hover:not(:disabled) {
+	background-color: var(--color-primary-element-light-hover);
+}
+
 .cn-record-list__footer {
 	display: flex;
 	flex-direction: column;
@@ -2539,6 +2704,19 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 }
 
+.cn-record-list__cell-sub {
+	display: block;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-record-list__table .cn-record-list__cell--actions {
+	width: 1%;
+	padding-inline-start: 12px;
+	text-align: end;
+	white-space: nowrap;
+}
+
 .cn-record-list__sort {
 	display: inline-flex;
 	gap: 4px;

package/src/css/look-board-detail.css

@@ -562,14 +562,17 @@
 	font-size: 13px;
 }
 
-.cn-look-board .cn-conversation-thread__channel {
+/* A message's channel pill: 20px in the soft ink (DqZaakContact). It names
+   the thread to outrank the component's scoped muted ink. */
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__channel {
 	padding: 1px 8px;
 	border: 1px solid var(--color-border);
 	border-radius: 12px;
 	background: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft);
 	font-size: 12px;
 	font-weight: 600;
+	line-height: 16px;
 }
 
 /* The case Status card as the board draws it: no grey box, the status's
@@ -1324,3 +1327,25 @@
 .cn-look-board .cn-facts-widget__action:not(.cn-look-nextcloud *) {
 	font-weight: 600;
 }
+
+/* ---- A card's Add ------------------------------------------------------ */
+/* The board draws a list card's Add as the neutral secondary at the 40px
+   control height, right-aligned in the title row (DqZaakGerelateerd
+   "Deelzaak aanmaken", DqZaakTaken "Toevoegen"). CnDetailWidgetHost renders
+   that button in the board look, so the list's footer Add bar, which ADR-062
+   draws in the Nextcloud look, is hidden in the card. The size outranks a
+   card title row's 34px buttons.
+   @spec openspec/changes/board-object-list-add-button/specs/board-object-list-add-button/spec.md#requirement-the-board-look-draws-a-cards-add-as-a-title-row-button */
+.cn-look-board .cn-detail-page__catalog-card:not(.cn-look-nextcloud *) .cn-object-list-widget__add {
+	display: none;
+}
+
+/* An empty list card shows its text under the title-row Add, without the
+   empty state's own Add. A filter's "clear" action stays. */
+.cn-look-board .cn-detail-page__catalog-card:not(.cn-look-nextcloud *) .cn-widget-empty-state__action:has(> .cn-object-list-widget__empty-add) {
+	display: none;
+}
+
+.cn-look-board .cn-widget-wrapper__actions .button-vue.cn-detail-page__catalog-add:has(> .button-vue__wrapper > .button-vue__text:not(:empty)):where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}

package/src/css/look-board-index.css

@@ -208,6 +208,16 @@
 	cursor: pointer;
 }
 
+/* Inside a record card the chip row is 36px, 12px in (DqZaakContact's channel
+   chips, as DqZaakHistorie's). */
+.cn-look-board .cn-conversation-thread .cn-quick-filter-bar .cn-quick-filter-bar__tab {
+	--nldesign-component-button-border-radius: 18px;
+	height: 36px;
+	min-height: 36px;
+	padding: 0 12px;
+	border-radius: 18px;
+}
+
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab:hover {
 	background: var(--color-background-hover);
@@ -805,8 +815,13 @@
 	padding: 0;
 }
 
-/* The title column: a 15px weight 600 link, the secondary line under it. */
-.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title {
+/* The title column: a 15px weight 600 link, the secondary line under it. A
+   framed widget table in a card or a settings section shows its first column
+   as plain text (DqInstellingen, DqTermijnen, DqDoorlooptijd); a borderless
+   one, the dashboard's compact case list, keeps the link (DqDashboard). The
+   `:where()` keeps the rule's weight.
+   @spec openspec/changes/board-widget-table-plain-title/specs/board-widget-table-plain-title/spec.md */
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title:not(.cn-widget-object-table :where(.cn-table-container:not(.cn-table-container--borderless)) *) {
 	color: var(--color-main-text);
 	font-size: 15px;
 	font-weight: 600;
@@ -1769,3 +1784,36 @@
 .cn-look-board .cn-saved-views-panel__row .action-item__menutoggle:not(.cn-look-nextcloud *) {
 	border-radius: 17px;
 }
+
+/* The board view's selects take the board control border (DqWerkbord). The
+   theme forces a select's border colour from its form token, so the token
+   gets the colour too. */
+.cn-look-board .cn-index-page__board-select:not(.cn-look-nextcloud *) {
+	--nldesign-component-form-select-border-color: var(--cn-board-control-border);
+	border-color: var(--cn-board-control-border);
+}
+
+/* ---- Page tabs (CnIndexPage `pageTabs`, DqContracten) ------------------ */
+/* The sibling-page tabs are links; the board draws them as folder tabs in
+   the main ink at 14px, the open one at 700 on a white bottom edge, with no
+   line under the strip. The theme paints every link, so the ink also goes
+   to its link tokens and the underline needs !important.
+   @spec openspec/changes/board-index-page-tabs/specs/board-index-page-tabs/spec.md#requirement-board-index-page-tabs-are-folder-tabs-in-the-main-ink */
+.cn-look-board .cn-index-page__page-tabs:not(.cn-look-nextcloud *) {
+	border-bottom: 0;
+}
+
+.cn-look-board .cn-index-page__page-tabs:not(.cn-look-nextcloud *) .cn-index-page__page-tab {
+	--nldesign-color-on-surface: var(--color-main-text);
+	--nldesign-component-link-color: var(--color-main-text);
+	--nldesign-component-link-hover-color: var(--color-main-text);
+	color: var(--color-main-text);
+	font-size: 14px;
+	line-height: normal;
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-index-page__page-tabs:not(.cn-look-nextcloud *) .cn-index-page__page-tab--active {
+	border-bottom: 1px solid var(--color-main-background);
+	font-weight: 700;
+}

package/src/css/look-board.css

@@ -670,6 +670,13 @@
 	--button-size: var(--cn-board-control-height);
 }
 
+/* The contact thread's labelled header action (DqZaakContact "Contact
+   vastleggen") stands at the same 40px.
+   @spec openspec/changes/board-thread-header-button-height/specs/board-thread-header-button-height/spec.md#requirement-a-thread-headers-labelled-button-is-40px */
+.cn-look-board .cn-conversation-thread__header-actions .button-vue:not(.action-item__menutoggle):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
 /* ---- A workspace filter's table export ---------------------------------- */
 /* "CSV exporteren" beside "Rapport laden" is the neutral secondary at the
    40px control height, 14px in (DqTermijnen).
@@ -2350,6 +2357,48 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	color: var(--color-text-maxcontrast) !important;
 }
 
+/* A text card sits at the card inset with its text 8px under the title
+   (DqDagAfsluiten "Hoe dit werkt"), its blocks at the widget's size and a
+   1.5 line height. CnTextWidget pads itself 16px inline and the theme sets
+   every p at 15px, hence the !important.
+   @spec openspec/changes/board-dashboard-text-card/specs/board-dashboard-text-card/spec.md#requirement-a-board-dashboard-text-card-sits-at-the-card-inset-under-its-title */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-text-widget {
+	margin-top: -2px;
+	padding: 0 var(--cn-board-dashboard-card-inset) 20px !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-text-widget__content > * {
+	font-size: inherit !important;
+	line-height: 1.5 !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-text-widget__content > :first-child {
+	margin-top: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-text-widget__content > :last-child {
+	margin-bottom: 0;
+}
+
+/* A stat grid card draws plain figures at the card inset (DqDagAfsluiten
+   "Uw dag"): 14px under the title, 16px apart, each a 13px label over a 24px
+   figure, 2px apart, without the stat tile's padding or edge. The cell's
+   variables are set on the cell, over a board tile's own.
+   @spec openspec/changes/board-stat-grid-flat/specs/board-stat-grid-flat/spec.md#requirement-a-board-stat-grid-draws-flat-figures-at-the-card-inset */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-stat-grid {
+	gap: 16px;
+	margin: 4px 0 0;
+	padding: 0 var(--cn-board-dashboard-card-inset) 20px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-stat-grid .cn-kpi-card.cn-kpi-card--stacked {
+	--cn-kpi-stacked-padding: 0;
+	--cn-kpi-stacked-gap: 2px;
+	--cn-kpi-stacked-title-size: 13px;
+	--cn-kpi-stacked-value-size: 24px;
+	border-width: 0;
+}
+
 /* An activity item pads itself 4px, so the body takes 4px less. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-nc-widget-widget__body {
 	padding: 0 calc(var(--cn-board-dashboard-card-inset) - 4px) 16px;
@@ -2646,9 +2695,10 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 /* Any labelled button in the card's body is 40px, a text-only one 16px in at
    both sides (DqBeheerinstellingen "Opslaan", "Verbinding testen";
    PtBeheerinstellingen "Adres opslaan"), not only the card's own save row.
-   The title row's actions keep 34px (DqVthInstellingen "Regel toevoegen").
+   The title row's actions and an image field's button keep 34px
+   (DqVthInstellingen "Regel toevoegen", DqInstellingenAlgemeen "Ander logo").
    @spec openspec/changes/board-settings-section-buttons/specs/board-settings-section-buttons/spec.md#requirement-a-labelled-button-on-a-board-settings-card-is-40px */
-.cn-look-board .settings-section:not(.cn-look-nextcloud *) .button-vue.button-vue:has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-settings-section__actions *) {
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .button-vue.button-vue:has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-settings-section__actions *):not(.cn-settings-field__image-row *) {
 	--button-size: var(--cn-field-height, 40px);
 }
 

package/src/integrations/builtin/calendar/CnCalendarCard.vue

@@ -34,11 +34,15 @@
 			<NcButton
 				v-for="action in shownHeaderActions"
 				:key="action"
-				:variant="action === 'create' ? 'primary' : 'secondary'"
+				:variant="action === 'create' && createVariant !== 'secondary' ? 'primary' : 'secondary'"
 				:data-testid="`cn-calendar-card-${action}`"
 				@click="action === 'create' ? (showCreate = true) : (showPicker = true)">
 				<template #icon>
-					<Plus v-if="action === 'create'" :size="20" />
+					<CnIcon v-if="action === 'create' && createIcon"
+						:name="createIcon"
+						:size="20"
+						data-testid="cn-calendar-card-create-icon" />
+					<Plus v-else-if="action === 'create'" :size="20" />
 					<LinkVariant v-else :size="20" />
 				</template>
 				{{ action === 'create' ? createLabel : linkLabel }}
@@ -139,6 +143,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import CnCalendarEventCreate from '../../../components/CnCalendarEventCreate/CnCalendarEventCreate.vue'
 import CnCalendarEventPicker from '../../../components/CnCalendarEventPicker/CnCalendarEventPicker.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
+import CnIcon from '../../../components/CnIcon/CnIcon.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { userLocale } from '../../../utils/userLocale.js'
 import { linkCalendarEvent } from './calendarEventLink.js'
@@ -151,7 +156,7 @@ import { linkCalendarEvent } from './calendarEventLink.js'
 export default {
 	name: 'CnCalendarCard',
 
-	components: { CnCalendarEventCreate, CnCalendarEventPicker, CnDetailCard, LinkVariant, NcButton, NcLoadingIcon, Plus, CalendarClock, CalendarCheck },
+	components: { CnCalendarEventCreate, CnCalendarEventPicker, CnDetailCard, CnIcon, LinkVariant, NcButton, NcLoadingIcon, Plus, CalendarClock, CalendarCheck },
 
 	props: {
 		/** OpenRegister register id (slug or uuid). Optional for user-dashboard. */
@@ -200,6 +205,10 @@ export default {
 		headerActions: { type: Array, default: () => [] },
 		/** Label of the `create` button. */
 		createLabel: { type: String, default: () => t('nextcloud-vue', 'Make an appointment') },
+		/** `secondary` draws the `create` button outlined instead of primary. */
+		createVariant: { type: String, default: 'primary' },
+		/** Icon name of the `create` button; a plus without it. */
+		createIcon: { type: String, default: '' },
 		/** Label of the `link` button. */
 		linkLabel: { type: String, default: () => t('nextcloud-vue', 'Link an existing one') },
 	},

package/src/integrations/builtin/calendar/__tests__/CnCalendarCardHeaderActions.spec.js

@@ -17,7 +17,8 @@ const CnCalendarCard = require('../CnCalendarCard.vue').default
 
 const STUBS = {
 	NcLoadingIcon: { template: '<div class="cn-loading" />' },
-	NcButton: { template: '<button v-bind="$attrs"><slot /></button>' },
+	NcButton: { template: '<button v-bind="$attrs"><slot /><slot name="icon" /></button>' },
+	CnIcon: { props: ['name'], template: '<i :data-name="name" />' },
 	CnCalendarEventCreate: { name: 'CnCalendarEventCreate', template: '<div class="create-modal" />' },
 	CnCalendarEventPicker: { name: 'CnCalendarEventPicker', template: '<div class="picker-modal" />' },
 }
@@ -95,4 +96,14 @@ describe('CnCalendarCard header actions', () => {
 		await flush()
 		expect(wrapper.find('[role="alert"]').text()).toContain('Not your calendar')
 	})
+
+	it('draws the create button secondary when asked', async () => {
+		const primary = mountCard({ headerActions: ['create'] })
+		await flush()
+		expect(primary.find('[data-testid="cn-calendar-card-create"]').attributes('variant')).toBe('primary')
+		const quiet = mountCard({ headerActions: ['create'], createVariant: 'secondary', createIcon: 'CalendarPlusOutline' })
+		await flush()
+		expect(quiet.find('[data-testid="cn-calendar-card-create"]').attributes('variant')).toBe('secondary')
+		expect(quiet.find('[data-testid="cn-calendar-card-create-icon"]').attributes('data-name')).toBe('CalendarPlusOutline')
+	})
 })

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.149.0",
+	"version": "2.150.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1346,7 +1346,8 @@
 							},
 							"readOnly": { "type": "boolean", "default": false, "description": "No drag and no Move to while the columns come from this field." },
 							"moveHandler": { "type": "string", "minLength": 1, "description": "A handler in the app's registry that makes the move: it gets `{ card, toKey, field, value, target }` (value: the referenced id to write; target: its row) and returns a promise; a rejection shows its message as the refusal. Absent, the field is written with a PATCH." },
-							"moveTargetsHandler": { "type": "string", "minLength": 1, "description": "A handler in the app's registry that answers where one card may go: it gets `{ card, field }` and returns the values (referenced ids) it can reach. Columns out of reach fade during a drag, read \"not allowed\" in the card menu, and refuse a drop." }
+							"moveTargetsHandler": { "type": "string", "minLength": 1, "description": "A handler in the app's registry that answers where one card may go: it gets `{ card, field }` and returns the values (referenced ids) it can reach. Columns out of reach fade during a drag, read \"not allowed\" in the card menu, and refuse a drop." },
+							"states": { "$ref": "#/$defs/boardDeclaredStates" }
 						}
 					}
 				},
@@ -1394,7 +1395,30 @@
 					"type": "boolean",
 					"default": false,
 					"description": "screens-board-reference-columns (2.97.0): wrap the columns onto more rows, as many to a row as fit at 240px, instead of one row that scrolls sideways. For a board with more stages than fit."
-				}
+				},
+				"states": { "$ref": "#/$defs/boardDeclaredStates" }
+			}
+		},
+		"boardDeclaredStates": {
+			"type": "array",
+			"minItems": 1,
+			"description": "board-declared-states (2.150.0): the columns the board draws for a field, in order, instead of the field's enum or lifecycle states. Each entry is a value or `{ key, label?, color?, hidden?, closed? }`: `hidden` draws no column (its cards go to Elsewhere), `closed` starts the column folded, `label` is an i18n key. On `board` it applies to the `statusField`; on a `columnFields` entry to that field. Ignored on a `source` or `kind: values` column.",
+			"items": {
+				"oneOf": [
+					{ "type": "string", "minLength": 1 },
+					{
+						"type": "object",
+						"additionalProperties": false,
+						"required": ["key"],
+						"properties": {
+							"key": { "type": "string", "minLength": 1 },
+							"label": { "type": "string" },
+							"color": { "type": "string" },
+							"hidden": { "type": "boolean" },
+							"closed": { "type": "boolean" }
+						}
+					}
+				]
 			}
 		},
 		"headerPill": {