@conduction/nextcloud-vue 2.98.0 → 2.99.0

package/src/css/look-board.css

@@ -141,6 +141,50 @@
 	color: var(--color-primary-element-text);
 }
 
+/* ---- Header action buttons (CnActionButtons) ----------------------------- */
+/* The board draws a page's secondary actions as neutral 40px buttons: the
+   main background, a grey border, the main text at 600 (DqZaak "Bericht",
+   "Document", "Contact vastleggen", "Bewerken"). Nextcloud's secondary button
+   is a primary tint. The label hands its ink to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *),
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	height: var(--cn-board-control-height);
+	min-height: var(--cn-board-control-height);
+	padding: 0 14px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
+   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+.cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
+	gap: 10px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+	margin-inline-end: 8px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
+	width: 16px;
+	height: 16px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *):hover,
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
 /* ---- The buildiq square ------------------------------------------------ */
 .cn-look-board .cn-buildiq-edit .cn-buildiq-edit__actions .button-vue {
 	box-sizing: border-box;
@@ -153,6 +197,34 @@
 	border-radius: var(--cn-board-control-radius);
 }
 
+/* ---- The Actions menu trigger (CnActionsMenu) ---------------------------- */
+/* A menu asked for as `secondary` ("Meer" in a detail header, "Acties" at the
+   end of a tab strip) is the board's neutral control: the main background, a
+   grey border, the main text at 600 (DqZaak), not Nextcloud's primary tint.
+   NcActions marks a secondary menu `action-item--secondary` on its root and
+   keeps a class given to it off, so the rule reads that marker. The label
+   hands its ink to --nldesign-color-on-surface for a theme that forces the
+   body ink onto every span (thematiq). */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
+/* A trailing chevron ("Meer ⌄") follows the label, 6px after it. */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle:has(.chevron-down-icon) .button-vue__wrapper:not(.cn-look-nextcloud *) {
+	flex-direction: row-reverse;
+	gap: 6px;
+}
+
 /* ---- The navigation ---------------------------------------------------- */
 .cn-look-board .app-navigation[data-testid="cn-nav"] {
 	--app-navigation-padding: 0px;
@@ -374,6 +446,71 @@
 	font-weight: 600;
 }
 
+/* ---- Breadcrumbs (CnBreadcrumbs) ----------------------------------------- */
+/* The board draws a trail as a line of 14px text, 8px apart: the crumbs that
+   lead somewhere as underlined links in the primary colour, the current one
+   as plain muted text (DqZaak "Alle zaken / 2026-0082"). NcBreadcrumbs draws
+   each crumb as a 34px tertiary button. The doubled classes outrank its
+   scoped rules; the ink goes through --nldesign-color-on-surface as well, for
+   a theme that forces the body ink onto every link and span (thematiq). */
+.cn-look-board .cn-breadcrumbs.cn-breadcrumbs:not(.cn-look-nextcloud *) {
+	min-height: 0;
+	height: auto;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-breadcrumbs .breadcrumb__crumbs:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb.vue-crumb:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element);
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: inherit;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) .button-vue__text {
+	padding: 0;
+	font-weight: inherit;
+	line-height: inherit;
+	text-decoration: underline;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) .button-vue__text {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb__separator:not(.cn-look-nextcloud *) {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
 /* ---- Settings: header, cards in a grid, version card ------------------- */
 .cn-look-board .cn-admin-settings-shell__header:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__header:not(.cn-look-nextcloud *) {
@@ -792,7 +929,26 @@
    ground ("Verzoek", "Nieuw"); the default look keeps the brighter
    primary-element text. The other tones already match the board. */
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
-	color: var(--color-primary-element-light-text);
+	--cn-status-badge-ink: var(--color-primary-element-light-text);
+	color: var(--cn-status-badge-ink);
+}
+
+/* Every board pill is 13px at 600 on a 3px 10px pad with a 12px corner
+   (DqZaak's header pills, DqZaken's status column). */
+.cn-look-board .cn-status-badge:not(.cn-status-badge--small):not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+/* A pill paints its own pairing of ink and fill. A theme that forces the body
+   ink onto every span (thematiq's text rule, `!important` at id level) reads
+   that ink from --nldesign-color-on-surface when the surface sets it, so the
+   pill hands it its own ink: "In behandeling" stays purple on purple. */
+.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--cn-status-badge-ink);
 }
 
 /* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
@@ -802,6 +958,68 @@
 	font-weight: 600;
 }
 
+/* ---- Label and value pairs (CnDetailGrid) -------------------------------- */
+/* The board draws pairs as plain text, not as grey cards with an accent bar:
+   the grid as a 13px muted label over a 15px value at weight 500 with a
+   hairline under each pair (DqZaak "Zaakgegevens"), the horizontal layout as
+   two columns of 14px text, the label column as wide as its longest label
+   (the side cards). Both at the board's line height, 1.2, not Nextcloud's 1.5:
+   a pair is 47px tall on the board. The muted label also hands its ink to
+   --nldesign-color-on-surface, which a theme that forces the body ink onto
+   every div (thematiq) reads. */
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
+	gap: 12px 24px;
+	font-size: 15px;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal:not(.cn-look-nextcloud *) {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	font-size: 14px;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	gap: 3px;
+	padding: 0;
+	border-inline-start: none;
+	border-radius: 0;
+	background: none;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	display: contents;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	min-width: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	font-size: inherit;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	margin: 0;
+	font-size: inherit;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
 /* ---- Dashboard card titles --------------------------------------------- */
 /* A card's title on a dashboard (and on the widgets under a reports page) is
    the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and

package/src/index.js

@@ -280,6 +280,8 @@ export {
 	CnSearchPage,
 	CnSectionsWidget,
 	CnSettingsCard,
+	CnSettingsField,
+	CnSettingsFieldsSection,
 	CnSettingsFormWidget,
 	CnSettingsPage,
 	CnSettingsSection,
@@ -344,6 +346,7 @@ export {
 	CnWidgetVisibilityRulesModal,
 	CnWidgetWrapper,
 	CnWizardDialog,
+	CnWorkingCalendarWidget,
 	CnWorkspaceFilterWidget,
 	DEFAULT_DATE_RANGE_PRESETS,
 	defaultPageTypes,

package/src/utils/libraryWidgetKeys.js

@@ -152,6 +152,7 @@ export const DASHBOARD_CATALOG_WIDGET_KEYS = Object.freeze([
 	'toggle-table',
 	'video',
 	'week-strip',
+	'working-calendar',
 	'workspace-filter',
 ])
 

package/src/utils/workingCalendarMonth.js

@@ -0,0 +1,82 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * workingCalendarMonth: the weeks of one month as a working calendar draws
+ * them, Monday first, each day marked working or not and with the closures
+ * that fall on it.
+ *
+ * Pure: the closures come in from the caller (OpenRegister's calendar preview
+ * computes them), nothing here knows a holiday.
+ *
+ * @module utils/workingCalendarMonth
+ * @spec openspec/changes/working-calendar-widget/specs/working-calendar-widget/spec.md#requirement-a-working-calendar-shows-a-month
+ */
+
+/**
+ * A date as `YYYY-MM-DD`.
+ *
+ * @param {number} year The year.
+ * @param {number} month The month, 0 to 11.
+ * @param {number} day The day of the month.
+ * @return {string} The date.
+ */
+export function isoDate(year, month, day) {
+	return `${String(year).padStart(4, '0')}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+}
+
+/**
+ * The stored exceptions of a calendar as `{ date, name }`: entries are a
+ * `YYYY-MM-DD` string or an object with `date` and an optional `name`.
+ *
+ * @param {unknown} exceptions The stored list.
+ * @return {Array<{date: string, name: string}>} The exceptions.
+ */
+export function normaliseExceptions(exceptions) {
+	return (Array.isArray(exceptions) ? exceptions : []).map((entry) => {
+		if (typeof entry === 'string') {
+			return { date: entry, name: '' }
+		}
+		if (entry && typeof entry === 'object' && typeof entry.date === 'string') {
+			return { date: entry.date, name: typeof entry.name === 'string' ? entry.name : '' }
+		}
+		return null
+	}).filter((entry) => entry && /^\d{4}-\d{2}-\d{2}$/.test(entry.date))
+}
+
+/**
+ * The weeks of a month, Monday first. A slot outside the month is null.
+ *
+ * @param {number} year The year.
+ * @param {number} month The month, 0 to 11.
+ * @param {object} options The calendar.
+ * @param {number[]} [options.workingWeekdays] ISO weekdays that work (1 = Monday); Monday to Friday by default.
+ * @param {Map<string, {name: string, kind: string}>} [options.closures] Closed dates, by `YYYY-MM-DD`.
+ * @param {string} [options.today] Today as `YYYY-MM-DD`.
+ * @return {Array<Array<null|{date: string, day: number, weekday: number, working: boolean, closure: (null|{name: string, kind: string}), today: boolean}>>} The weeks.
+ */
+export function buildMonth(year, month, { workingWeekdays = [1, 2, 3, 4, 5], closures = new Map(), today = '' } = {}) {
+	const days = new Date(Date.UTC(year, month + 1, 0)).getUTCDate()
+	const firstWeekday = ((new Date(Date.UTC(year, month, 1)).getUTCDay() + 6) % 7) + 1
+	const slots = Array.from({ length: firstWeekday - 1 }, () => null)
+	for (let day = 1; day <= days; day += 1) {
+		const date = isoDate(year, month, day)
+		const weekday = ((firstWeekday - 1 + day - 1) % 7) + 1
+		slots.push({
+			date,
+			day,
+			weekday,
+			working: workingWeekdays.includes(weekday) && !closures.has(date),
+			closure: closures.get(date) || null,
+			today: date === today,
+		})
+	}
+	while (slots.length % 7 !== 0) {
+		slots.push(null)
+	}
+	const weeks = []
+	for (let i = 0; i < slots.length; i += 7) {
+		weeks.push(slots.slice(i, i + 7))
+	}
+	return weeks
+}