@conduction/nextcloud-vue 2.78.0 → 2.79.0

package/dist/esm/nextcloud-vue.css

@@ -213,6 +213,14 @@
 	margin-inline-start: -264px;
 }
 
+/* The navigation draws the line between it and the content. NcContent draws a
+   second one on the content while the navigation is open, which doubled the
+   line and put the page 1px further from the navigation than the board's 28px.
+   Outranks NcContent's rule (six classes) with seven. */
+.cn-look-board .app-navigation[data-testid="cn-nav"]:not(.app-navigation--closed):not(.app-navigation--close) ~ .app-content.app-content {
+	border-inline-start: none;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__content {
 	box-sizing: border-box;
 	gap: 20px;
@@ -222,6 +230,31 @@
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list {
 	height: auto;
 	flex: 1 1 auto;
+	margin: 0;
+	gap: 2px;
+}
+
+/* The board's vertical rhythm (AppZijbalk): the primary action 20px from the
+   top, the list 20px under it, entries 2px apart. An empty search slot is a
+   flex child too and pushed everything 20px down, so it goes. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__search:empty {
+	display: none;
+}
+
+/* A caption is a 12px label with 6px under it, 20px after the group above
+   and 2px before its first entry. NcAppNavigationCaption gives its name a
+   15px font on a 34px line, which made it 44px high. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list > .app-navigation-caption:not(:first-child) {
+	margin-top: 18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__name {
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: normal;
+	color: inherit;
 }
 
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
@@ -306,6 +339,43 @@
 	font-size: 15px;
 }
 
+/* The footer of the board: Help and Advanced as two 40px rows at weight 400,
+   2px apart. The Help row kept the 42px of a list entry, and the Advanced
+   foldout drew a 34px button inside 4px of padding, 20px under Help. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list {
+	gap: 2px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry-link {
+	min-height: 40px;
+	font-weight: 400;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] {
+	padding: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list + [data-testid="cn-nav-settings"] {
+	margin-top: -18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child {
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child .button-vue {
+	box-sizing: border-box;
+	width: 100%;
+	height: 40px;
+	min-height: 40px;
+	padding: 0 10px;
+	border-radius: 8px;
+	font-size: 15px;
+	font-weight: 400;
+	justify-content: flex-start;
+}
+
 /* The card above the footer, pushed down. */
 .cn-look-board .cn-app-nav__card {
 	order: 0;
@@ -510,6 +580,13 @@
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
 	color: var(--color-primary-element-light-text);
 }
+
+/* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
+/* The board sets every waiting time ("3 dagen", "4 uur") in weight 600; a
+   late one is red through its variant class. */
+.cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
+	font-weight: 600;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -1262,16 +1339,27 @@
 	margin-inline-start: 0;
 }
 
-/* The first of Save view, Filter and the view switch takes the free space, so
-   the three sit at the end of row 1. */
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+/* The first of Save view and the Filter + view switch unit takes the free
+   space (the board's `flex: 1` spacer), so they sit at the end of row 1.
+   When the line is full the unit wraps as one to the START of the next line
+   while Save view stays at the end of row 1 (DqZaken); without Save view the
+   unit sits at the end of row 1 (PqTickets, PqLeads, PtPortals). */
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__view-controls) {
 	margin-inline-start: auto;
 }
 
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) ~ :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-saved-views__save ~ .cn-actions-bar__view-controls {
 	margin-inline-start: 0;
 }
 
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-controls {
+	display: flex;
+	flex: 0 0 auto;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: 8px;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;
@@ -1357,16 +1445,39 @@
 	color: var(--color-primary-element-text);
 }
 
-/* Save view: 34px, radius 17, on the light primary tint. */
+/* Save view: a ghost button, 34px, radius 17, no border, on the light primary
+   tint, a 14px icon 6px before the label, on one line. */
 .cn-look-board .cn-saved-views__save .button-vue {
 	min-height: 34px;
 	height: 34px;
-	padding: 0 14px;
+	padding: 0 12px;
+	border: 0;
 	border-radius: 17px;
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 13px;
 	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue:hover {
+	background: var(--color-primary-element-light-hover);
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__wrapper {
+	gap: 6px;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__icon {
+	width: auto;
+	min-width: 0;
+	height: auto;
+	min-height: 0;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__text {
+	margin: 0;
+	padding: 0;
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
@@ -1598,6 +1709,29 @@
 	text-decoration: none;
 }
 
+/* Only the title is underlined (DqZaken). An underline set on the cell
+   reaches every in-flow child whatever its own text-decoration, so the
+   secondary lines become inline blocks on a line of their own: an atomic
+   inline box is the one thing the underline does not reach. */
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	display: inline-block;
+	width: 100%;
+	vertical-align: top;
+}
+
+/* `rowTitle: "plain"` (PqTickets, OcPublicaties): the title is bold text in
+   the main text colour without an underline, the secondary line 13px muted,
+   2px under it. The row stays clickable through its stretched row link. */
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	margin-top: 2px;
+	font-size: 13px;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
@@ -1620,15 +1754,36 @@
 	--default-clickable-area: 34px;
 }
 
+/* The row menu: a 34px square, three dots, a grey border on the main
+   background (DqZaken, PqTickets). A theme that styles every secondary button
+   with `!important` (the nldesign theme: a primary border, 8px 16px padding,
+   `min-width: max-content`) would otherwise turn it into a 64px wide button
+   with a blue border, so the board values are `!important` too. */
+.cn-look-board .cn-row-actions--board .button-vue,
+.cn-look-board .cn-row-actions--board .button-vue:hover,
+.cn-look-board .cn-row-actions--board .button-vue:focus {
+	box-sizing: border-box !important;
+	width: 34px !important;
+	min-width: 34px !important;
+	height: 34px !important;
+	min-height: 34px !important;
+	padding: 0 !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: 8px !important;
+	color: var(--cn-board-text-soft) !important;
+}
+
 .cn-look-board .cn-row-actions--board .button-vue {
-	width: 34px;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
-	padding: 0;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 8px;
-	background: var(--color-main-background);
+	background: var(--color-main-background) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
 }
 
 /* ------------------------------------------------------------------ footer */
@@ -2188,6 +2343,34 @@
 	min-width: 0;
 }
 
+/* Fit to the container (CnDataTable's `fitWidth`, on in CnWidgetObjectTable).
+
+   In a narrow tile the auto layout made the table as wide as its one-line
+   cells, so it ran past the tile and clipped the trailing column (a date).
+   Here every column but one takes the width of its content (`width: 1%` asks
+   for as little as the content allows), and the grow column takes what is
+   left. `max-width: 0` is what lets that column go below its content's width:
+   the table no longer counts its text, so the text is cut with an ellipsis
+   instead of widening the table. The full value stays in the cell's tooltip. */
+.cn-data-table--fit {
+	width: 100%;
+}
+
+.cn-data-table--fit th,
+.cn-data-table--fit td {
+	width: 1%;
+}
+
+.cn-data-table--fit th.cn-table-col--grow,
+.cn-data-table--fit td.cn-table-col--grow {
+	width: auto;
+	min-width: 0;
+	max-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -2536,6 +2719,15 @@
 	color: var(--color-text-maxcontrast);
 }
 
+/* The empty row holds a sentence (the empty text, or why a lens cannot
+   answer), not a cell value: it wraps instead of being cut to one line. The
+   selector carries the table class so it outranks the one-line cell rule. */
+.cn-data-table .cn-table-empty td {
+	max-width: none;
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
 /* ========================================
    Backwards compatibility aliases
    (legacy OpenRegister CSS class names)
@@ -5692,6 +5884,16 @@ a.cn-kpi-card--board * {
 	gap: 20px;
 }
 
+/* GridStack insets every cell by its 12px margin, the outer edge included, so
+   the tab strip started 12px below the top of the body column and stopped 12px
+   short of its end, while the side column started at the top. Pulling the grid
+   out by that margin puts its first card on the column's edges: the side column
+   is level with the strip, and the strip ends where the body column ends. */
+.cn-look-board.cn-detail-page--with-side > .cn-detail-page__body > .cn-detail-page__grid {
+	margin: -12px;
+	width: auto;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it
@@ -9236,9 +9438,24 @@ svg.leaflet-image-layer.leaflet-interactive path {
    does not rest on colour alone. */
 .cn-cell-renderer__date--success[data-v-37d7b88f],
 .cn-cell-renderer__date--warning[data-v-37d7b88f],
-.cn-cell-renderer__date--error[data-v-37d7b88f] {
+.cn-cell-renderer__date--error[data-v-37d7b88f],
+.cn-cell-renderer__age--success[data-v-37d7b88f],
+.cn-cell-renderer__age--warning[data-v-37d7b88f],
+.cn-cell-renderer__age--error[data-v-37d7b88f] {
 	font-weight: 600;
 }
+.cn-cell-renderer__age[data-v-37d7b88f] {
+	white-space: nowrap;
+}
+.cn-cell-renderer__age--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-cell-renderer__age--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-cell-renderer__age--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+}
 .cn-cell-renderer__date--success[data-v-37d7b88f] {
 	color: var(--color-text-success, var(--color-success-text));
 }
@@ -9534,6 +9751,34 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 0;
 }
 
+/* Fit to the container (CnDataTable's `fitWidth`, on in CnWidgetObjectTable).
+
+   In a narrow tile the auto layout made the table as wide as its one-line
+   cells, so it ran past the tile and clipped the trailing column (a date).
+   Here every column but one takes the width of its content (`width: 1%` asks
+   for as little as the content allows), and the grow column takes what is
+   left. `max-width: 0` is what lets that column go below its content's width:
+   the table no longer counts its text, so the text is cut with an ellipsis
+   instead of widening the table. The full value stays in the cell's tooltip. */
+.cn-data-table--fit {
+	width: 100%;
+}
+
+.cn-data-table--fit th,
+.cn-data-table--fit td {
+	width: 1%;
+}
+
+.cn-data-table--fit th.cn-table-col--grow,
+.cn-data-table--fit td.cn-table-col--grow {
+	width: auto;
+	min-width: 0;
+	max-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -9882,6 +10127,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	color: var(--color-text-maxcontrast);
 }
 
+/* The empty row holds a sentence (the empty text, or why a lens cannot
+   answer), not a cell value: it wraps instead of being cut to one line. The
+   selector carries the table class so it outranks the one-line cell rule. */
+.cn-data-table .cn-table-empty td {
+	max-width: none;
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
 /* ========================================
    Backwards compatibility aliases
    (legacy OpenRegister CSS class names)
@@ -14545,6 +14799,13 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	min-width: 0;
 	flex: 1 1 auto;
 }
+
+/* The crumbs give way, the controls do not: a long crumb (a folder named
+   after a uuid) shrank the upload button to "Bestanden..." while the crumbs
+   kept their width. */
+.cn-files-browser__bar[data-v-f5bdd9e2] > :not(.cn-files-browser__crumbs) {
+	flex-shrink: 0;
+}
 .cn-files-browser__file-input[data-v-f5bdd9e2] {
 	display: none;
 }
@@ -35021,6 +35282,44 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 	height: var(--cn-board-control-height, 40px);
 }
 
+/* The switch row under the header (screens-dashboard-greeting-header): the
+   view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
+   radius 17, 13px/600, a 14px icon, primary light on primary deep). */
+.cn-dashboard-page__switch-row[data-v-824052fe] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+.cn-dashboard-page__switch-row-spacer[data-v-824052fe] {
+	flex: 1 1 auto;
+}
+.cn-dashboard-page__view-link[data-v-824052fe] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 34px;
+	padding: 0 12px;
+	border-radius: 17px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	text-decoration: none !important;
+}
+.cn-dashboard-page__view-link[data-v-824052fe]:hover {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+.cn-dashboard-page__view-link[data-v-824052fe]:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+.cn-dashboard-page__view-link-icon[data-v-824052fe] {
+	display: inline-flex;
+}
+
 /* The period group, in a row of its own between the header and the KPI row. */
 .cn-dashboard-page__date-range--segmented[data-v-824052fe] {
 	margin-bottom: 16px;

package/dist/esm/utils/boardDate.js

@@ -0,0 +1,193 @@
+import { translatePlural, getLanguage, getCanonicalLocale } from '@nextcloud/l10n';
+import { parseDateValue } from './dateVariant.js';
+import { compareVisibleWhen } from './visibleWhen.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * boardDate: the two short time readings the drawn boards put in a table cell.
+ *
+ * - A date ("5 okt", "30 okt", "14 feb 2024"): day and short month in the
+ *   user's language, the year only when it is not the current year.
+ * - An age ("4 uur", "1 dag", "3 dagen"): how long something has been
+ *   waiting, in hours under a day and in whole calendar days after that.
+ *
+ * Both read the Nextcloud user LANGUAGE for the month and unit names. A
+ * Nextcloud account keeps its locale (date order) apart from its language,
+ * and a Dutch reader whose locale was left at the en_US default saw
+ * "Feb 14, 2024": the language decides the words, so it decides here, and the
+ * locale is only used when it is a region of that same language.
+ *
+ * @module utils/boardDate
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md
+ */
+
+
+const MS_PER_HOUR = 3600000;
+const MS_PER_DAY = 86400000;
+
+/** Variants an age rule may name. `danger` is accepted as an alias of `error`. */
+const AGE_VARIANTS = Object.freeze(['default', 'success', 'warning', 'error']);
+
+/**
+ * Read a language or locale tag from an @nextcloud/l10n getter, which throws
+ * when Nextcloud has not set one (outside a Nextcloud page, in a test).
+ *
+ * @param {() => string} getter `getLanguage` or `getCanonicalLocale`.
+ * @return {string} The tag with `-` separators, or ''.
+ */
+function readTag(getter) {
+	try {
+		return String(getter() || '').replace(/_/g, '-')
+	} catch {
+		return ''
+	}
+}
+
+/**
+ * The BCP 47 tag the board dates are written in: the user's locale when it is
+ * a region of the user's language (`nl-BE` for language `nl`), else the
+ * language itself.
+ *
+ * @return {string|undefined} The tag, or undefined to let Intl choose.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+ */
+function boardDateLocale() {
+	const language = readTag(getLanguage);
+	const locale = readTag(getCanonicalLocale);
+	const base = (tag) => tag.split('-')[0].toLowerCase();
+	if (language && locale && base(language) === base(locale)) {
+		return locale
+	}
+	return language || locale || undefined
+}
+
+/**
+ * A date in the board's short form: "5 okt", or "14 feb 2024" outside the
+ * current year.
+ *
+ * @param {unknown} value A Date, a timestamp or an ISO string.
+ * @param {Date} [now] The reference moment (defaults to the current time).
+ * @param {string} [locale] BCP 47 tag (defaults to `boardDateLocale()`).
+ * @return {string} The short date, or '' when the value is not a date.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+ */
+function formatBoardDate(value, now = new Date(), locale = boardDateLocale()) {
+	const date = parseDateValue(value);
+	if (date === null) {
+		return ''
+	}
+	const options = { day: 'numeric', month: 'short' };
+	if (date.getFullYear() !== now.getFullYear()) {
+		options.year = 'numeric';
+	}
+	try {
+		return new Intl.DateTimeFormat(locale, options).format(date)
+	} catch {
+		return new Intl.DateTimeFormat(undefined, options).format(date)
+	}
+}
+
+/**
+ * Whole calendar days from the date until `now` (0 today, 1 yesterday), or
+ * null when the value is not a date. A future date gives a negative number.
+ *
+ * @param {unknown} value The date.
+ * @param {Date} [now] The reference moment.
+ * @return {number|null} The day count.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+ */
+function ageInDays(value, now = new Date()) {
+	const date = parseDateValue(value);
+	if (date === null) {
+		return null
+	}
+	// UTC midnights of the two LOCAL days, so a daylight-saving hour never
+	// turns one day into zero or two.
+	const start = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+	const today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
+	return Math.round((today - start) / MS_PER_DAY)
+}
+
+/**
+ * How long something has waited: "4 uur" under 24 hours (at least 1), else
+ * "1 dag" / "3 dagen" in whole calendar days. Plural forms come from the
+ * library's own catalogue (`nextcloud-vue`). A date in the future reads as
+ * waiting no time: "0 hours".
+ *
+ * @param {unknown} value The moment the wait started.
+ * @param {Date} [now] The reference moment.
+ * @return {string} The age, or '' when the value is not a date.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+ */
+function formatAge(value, now = new Date()) {
+	const date = parseDateValue(value);
+	if (date === null) {
+		return ''
+	}
+	const elapsed = now.getTime() - date.getTime();
+	if (elapsed < MS_PER_DAY) {
+		const hours = elapsed <= 0 ? 0 : Math.max(1, Math.floor(elapsed / MS_PER_HOUR));
+		return translatePlural('nextcloud-vue', '%n hour', '%n hours', hours)
+	}
+	const days = shownAgeDays(date, now);
+	return translatePlural('nextcloud-vue', '%n day', '%n days', days)
+}
+
+/**
+ * The number of days an age cell shows: 0 under 24 hours (the cell then reads
+ * hours), else the whole calendar days, at least 1. The threshold rules
+ * compare against this number, so the colour always agrees with the text.
+ *
+ * @param {unknown} value The moment the wait started.
+ * @param {Date} [now] The reference moment.
+ * @return {number|null} The day count, or null when the value is not a date.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold
+ */
+function shownAgeDays(value, now = new Date()) {
+	const date = parseDateValue(value);
+	if (date === null) {
+		return null
+	}
+	if (now.getTime() - date.getTime() < MS_PER_DAY) {
+		return 0
+	}
+	return Math.max(1, ageInDays(date, now))
+}
+
+/**
+ * The variant of the first `variantWhen` rule the age in days matches, or ''
+ * when none does. Same rule shape as the `date` widget (`{ op, value,
+ * variant }`, first match wins), compared against the number of days the cell
+ * shows (`shownAgeDays`): `[{ op: "gte", value: 3, variant: "error" }]` turns a wait of three
+ * days or more red.
+ *
+ * @param {unknown} value The moment the wait started.
+ * @param {Array<{op: string, value: number, variant: string}>} rules The rules.
+ * @param {Date} [now] The reference moment.
+ * @return {string} `success | warning | error | default`, or ''.
+ * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold
+ */
+function resolveAgeVariant(value, rules, now = new Date()) {
+	if (!Array.isArray(rules) || rules.length === 0) {
+		return ''
+	}
+	const days = shownAgeDays(value, now);
+	if (days === null) {
+		return ''
+	}
+	for (const rule of rules) {
+		if (!rule || typeof rule !== 'object') {
+			continue
+		}
+		if (compareVisibleWhen(days, rule.op || 'eq', rule.value) === true) {
+			const variant = rule.variant === 'danger' ? 'error' : rule.variant;
+			return AGE_VARIANTS.includes(variant) ? variant : ''
+		}
+	}
+	return ''
+}
+
+export { AGE_VARIANTS, ageInDays, boardDateLocale, formatAge, formatBoardDate, resolveAgeVariant, shownAgeDays };
+//# sourceMappingURL=boardDate.js.map

package/dist/esm/utils/boardDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boardDate.js","sources":["../../../src/utils/boardDate.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * boardDate: the two short time readings the drawn boards put in a table cell.\n *\n * - A date (\"5 okt\", \"30 okt\", \"14 feb 2024\"): day and short month in the\n *   user's language, the year only when it is not the current year.\n * - An age (\"4 uur\", \"1 dag\", \"3 dagen\"): how long something has been\n *   waiting, in hours under a day and in whole calendar days after that.\n *\n * Both read the Nextcloud user LANGUAGE for the month and unit names. A\n * Nextcloud account keeps its locale (date order) apart from its language,\n * and a Dutch reader whose locale was left at the en_US default saw\n * \"Feb 14, 2024\": the language decides the words, so it decides here, and the\n * locale is only used when it is a region of that same language.\n *\n * @module utils/boardDate\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md\n */\n\nimport { getCanonicalLocale, getLanguage, translatePlural as n } from '@nextcloud/l10n'\nimport { parseDateValue } from './dateVariant.js'\nimport { compareVisibleWhen } from './visibleWhen.js'\n\nconst MS_PER_HOUR = 3600000\nconst MS_PER_DAY = 86400000\n\n/** Variants an age rule may name. `danger` is accepted as an alias of `error`. */\nexport const AGE_VARIANTS = Object.freeze(['default', 'success', 'warning', 'error'])\n\n/**\n * Read a language or locale tag from an @nextcloud/l10n getter, which throws\n * when Nextcloud has not set one (outside a Nextcloud page, in a test).\n *\n * @param {() => string} getter `getLanguage` or `getCanonicalLocale`.\n * @return {string} The tag with `-` separators, or ''.\n */\nfunction readTag(getter) {\n\ttry {\n\t\treturn String(getter() || '').replace(/_/g, '-')\n\t} catch {\n\t\treturn ''\n\t}\n}\n\n/**\n * The BCP 47 tag the board dates are written in: the user's locale when it is\n * a region of the user's language (`nl-BE` for language `nl`), else the\n * language itself.\n *\n * @return {string|undefined} The tag, or undefined to let Intl choose.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language\n */\nexport function boardDateLocale() {\n\tconst language = readTag(getLanguage)\n\tconst locale = readTag(getCanonicalLocale)\n\tconst base = (tag) => tag.split('-')[0].toLowerCase()\n\tif (language && locale && base(language) === base(locale)) {\n\t\treturn locale\n\t}\n\treturn language || locale || undefined\n}\n\n/**\n * A date in the board's short form: \"5 okt\", or \"14 feb 2024\" outside the\n * current year.\n *\n * @param {unknown} value A Date, a timestamp or an ISO string.\n * @param {Date} [now] The reference moment (defaults to the current time).\n * @param {string} [locale] BCP 47 tag (defaults to `boardDateLocale()`).\n * @return {string} The short date, or '' when the value is not a date.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language\n */\nexport function formatBoardDate(value, now = new Date(), locale = boardDateLocale()) {\n\tconst date = parseDateValue(value)\n\tif (date === null) {\n\t\treturn ''\n\t}\n\tconst options = { day: 'numeric', month: 'short' }\n\tif (date.getFullYear() !== now.getFullYear()) {\n\t\toptions.year = 'numeric'\n\t}\n\ttry {\n\t\treturn new Intl.DateTimeFormat(locale, options).format(date)\n\t} catch {\n\t\treturn new Intl.DateTimeFormat(undefined, options).format(date)\n\t}\n}\n\n/**\n * Whole calendar days from the date until `now` (0 today, 1 yesterday), or\n * null when the value is not a date. A future date gives a negative number.\n *\n * @param {unknown} value The date.\n * @param {Date} [now] The reference moment.\n * @return {number|null} The day count.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited\n */\nexport function ageInDays(value, now = new Date()) {\n\tconst date = parseDateValue(value)\n\tif (date === null) {\n\t\treturn null\n\t}\n\t// UTC midnights of the two LOCAL days, so a daylight-saving hour never\n\t// turns one day into zero or two.\n\tconst start = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())\n\tconst today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())\n\treturn Math.round((today - start) / MS_PER_DAY)\n}\n\n/**\n * How long something has waited: \"4 uur\" under 24 hours (at least 1), else\n * \"1 dag\" / \"3 dagen\" in whole calendar days. Plural forms come from the\n * library's own catalogue (`nextcloud-vue`). A date in the future reads as\n * waiting no time: \"0 hours\".\n *\n * @param {unknown} value The moment the wait started.\n * @param {Date} [now] The reference moment.\n * @return {string} The age, or '' when the value is not a date.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited\n */\nexport function formatAge(value, now = new Date()) {\n\tconst date = parseDateValue(value)\n\tif (date === null) {\n\t\treturn ''\n\t}\n\tconst elapsed = now.getTime() - date.getTime()\n\tif (elapsed < MS_PER_DAY) {\n\t\tconst hours = elapsed <= 0 ? 0 : Math.max(1, Math.floor(elapsed / MS_PER_HOUR))\n\t\treturn n('nextcloud-vue', '%n hour', '%n hours', hours)\n\t}\n\tconst days = shownAgeDays(date, now)\n\treturn n('nextcloud-vue', '%n day', '%n days', days)\n}\n\n/**\n * The number of days an age cell shows: 0 under 24 hours (the cell then reads\n * hours), else the whole calendar days, at least 1. The threshold rules\n * compare against this number, so the colour always agrees with the text.\n *\n * @param {unknown} value The moment the wait started.\n * @param {Date} [now] The reference moment.\n * @return {number|null} The day count, or null when the value is not a date.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold\n */\nexport function shownAgeDays(value, now = new Date()) {\n\tconst date = parseDateValue(value)\n\tif (date === null) {\n\t\treturn null\n\t}\n\tif (now.getTime() - date.getTime() < MS_PER_DAY) {\n\t\treturn 0\n\t}\n\treturn Math.max(1, ageInDays(date, now))\n}\n\n/**\n * The variant of the first `variantWhen` rule the age in days matches, or ''\n * when none does. Same rule shape as the `date` widget (`{ op, value,\n * variant }`, first match wins), compared against the number of days the cell\n * shows (`shownAgeDays`): `[{ op: \"gte\", value: 3, variant: \"error\" }]` turns a wait of three\n * days or more red.\n *\n * @param {unknown} value The moment the wait started.\n * @param {Array<{op: string, value: number, variant: string}>} rules The rules.\n * @param {Date} [now] The reference moment.\n * @return {string} `success | warning | error | default`, or ''.\n * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold\n */\nexport function resolveAgeVariant(value, rules, now = new Date()) {\n\tif (!Array.isArray(rules) || rules.length === 0) {\n\t\treturn ''\n\t}\n\tconst days = shownAgeDays(value, now)\n\tif (days === null) {\n\t\treturn ''\n\t}\n\tfor (const rule of rules) {\n\t\tif (!rule || typeof rule !== 'object') {\n\t\t\tcontinue\n\t\t}\n\t\tif (compareVisibleWhen(days, rule.op || 'eq', rule.value) === true) {\n\t\t\tconst variant = rule.variant === 'danger' ? 'error' : rule.variant\n\t\t\treturn AGE_VARIANTS.includes(variant) ? variant : ''\n\t\t}\n\t}\n\treturn ''\n}\n"],"names":["n"],"mappings":"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"}