@protobase/ui 0.22.1 → 0.22.3

package/dist/app/export/cells.js

@@ -19,7 +19,10 @@ const csvText = (column, value, labels, mode) => {
 	const { field, hints } = column;
 	if (field.type === "file") return fileText(value, mode);
 	if (field.type === "relation") return mode === "shown" ? relationLabel(column, value, labels) : String(value);
-	if (mode === "shown") return displayValue(field, value, hints);
+	if (mode === "shown") return displayValue(field, value, {
+		...hints,
+		format: void 0
+	});
 	if (typeof value === "object") return JSON.stringify(value);
 	return String(value);
 };

package/dist/app/field-editor.js

@@ -106,7 +106,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		})
 	});
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
-		title: valueTitle(field, stored),
+		title: valueTitle(field, stored, void 0, hints),
 		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});

package/dist/app/hand-order/hand-order.js

@@ -16,6 +16,6 @@ const listHandOrder = (model, permissions) => model.position?.within === void 0
 * The field a related section sorts its records by hand in: those of one parent, when the section lists every record
 * whose `within` relation points at the page's record, no filter or join resource leaving some out.
 */
-const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.filter ? writablePosition(model, permissions) : void 0;
+const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.from && !item.filter ? writablePosition(model, permissions) : void 0;
 //#endregion
 export { listHandOrder, relatedHandOrder };

package/dist/app/incoming-relations.js

@@ -11,7 +11,7 @@ const where$1 = createWhere();
 */
 const incomingRelations = (model, resources, views, layout, lines) => {
 	if (model.primaryKey.length !== 1) return [];
-	const listed = new Set(layoutItems(layout).flatMap((item) => item.kind === "related" && !item.through ? [`${item.resource}.${item.field}`] : []));
+	const listed = new Set(layoutItems(layout).flatMap((item) => item.kind === "related" && !item.through && !item.from ? [`${item.resource}.${item.field}`] : []));
 	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && source.name !== lines?.name && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
 		source,
 		field: field.name

package/dist/app/pages/field-value.js

@@ -87,7 +87,7 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
-		title: valueTitle(field, value),
+		title: valueTitle(field, value, void 0, hints),
 		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums", hints.multiline && "whitespace-pre-line break-words"),
 		children: text
 	});

package/dist/app/record-page.js

@@ -59,6 +59,7 @@ import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { IncomingCard } from "./incoming-card.js";
 import { RelatedSection } from "./related-section.js";
+import { relatedValue } from "./related-value.js";
 import { Fragment, useMemo } from "react";
 import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
@@ -302,7 +303,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				format: contact,
 				value: text
 			}) : /* @__PURE__ */ jsx("strong", {
-				title: valueTitle(field, value),
+				title: valueTitle(field, value, void 0, hint(name)),
 				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});
@@ -361,11 +362,14 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				children
 			}, `group:${item.title}`)];
 		}
-		if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
-			item,
-			recordKey,
-			owner: model.name
-		}, `related:${item.title}`)];
+		if (item.kind === "related") {
+			if (item.from !== void 0 && !known(item.from)) return [];
+			return [/* @__PURE__ */ jsx(RelatedSection, {
+				item,
+				value: relatedValue(item, stored.record, recordKey),
+				owner: model.name
+			}, `related:${item.title}`)];
+		}
 		if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
 		if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
 			item,
@@ -520,7 +524,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 											return [{
 												label: hint(name)?.label ?? humanize(name),
 												value: known(name) ? /* @__PURE__ */ jsx("span", {
-													title: valueTitle(field, stored.record[name]),
+													title: valueTitle(field, stored.record[name], void 0, hint(name)),
 													children: displayValue(field, stored.record[name], hint(name))
 												}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
 											}];

package/dist/app/related-section.js

@@ -28,13 +28,13 @@ const and = (...parts) => {
 * all the join records that point at this record hold, read page by page. `null` when no join record does, so nothing
 * can match.
 */
-const useMatch = (item, recordKey) => {
+const useMatch = (item, value) => {
 	const client = useClient();
 	const { resources } = useAdminMeta();
 	const through = item.through;
 	const via = through ? resources[through.resource] : void 0;
 	const key = through?.key ?? via?.primaryKey[0];
-	const viaFilter = through ? and(printFilter(where$1.eq(through.field, recordKey)), through.filter) : "";
+	const viaFilter = through ? and(printFilter(where$1.eq(through.field, value)), through.filter) : "";
 	const collected = useQuery({
 		queryKey: keys.list(via?.name ?? "", viaFilter, "", 0, `related:${key}`),
 		enabled: Boolean(via && key),
@@ -46,8 +46,13 @@ const useMatch = (item, recordKey) => {
 			return [...new Set(joined.items.flatMap((row) => row[key] === null || row[key] === void 0 ? [] : [String(row[key])]))];
 		}
 	});
+	if (value === null) return {
+		filter: null,
+		isPending: false,
+		error: null
+	};
 	if (!through) return {
-		filter: and(printFilter(where$1.eq(item.field, recordKey)), item.filter),
+		filter: and(printFilter(where$1.eq(item.field, value)), item.filter),
 		isPending: false,
 		error: null
 	};
@@ -75,11 +80,11 @@ const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
 * a join resource, in the list page's table or display, with a link to them all in the list. When they are ordered by
 * hand within this record, **Sort** shows them all in their order, to be moved by their drag handles.
 */
-const RelatedSection = ({ item, recordKey, owner }) => {
+const RelatedSection = ({ item, value, owner }) => {
 	const { resources, views } = useAdminMeta();
 	const model = resources[item.resource];
 	const view = model && views[model.name];
-	const match = useMatch(item, recordKey);
+	const match = useMatch(item, value);
 	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
 	const permissions = usePermissions(item.resource);
 	const [sorting, setSorting] = useState(false);
@@ -116,7 +121,7 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 			model,
 			view,
 			field: handOrder,
-			filter: printFilter(where$1.eq(item.field, recordKey)),
+			filter: printFilter(where$1.eq(item.field, value)),
 			columns
 		})
 	});

package/dist/app/related-value.js

@@ -0,0 +1,14 @@
+import { relationTarget } from "./related-opens.js";
+//#region src/app/related-value.ts
+/**
+* The value a related section's `field` is matched against: the record's key, or with `from` that field's value as it
+* is (a relation by its key). Null when the record holds none, so the section lists nothing.
+*/
+const relatedValue = (item, record, recordKey) => {
+	if (item.from === void 0) return recordKey;
+	const value = record[item.from];
+	if (typeof value === "boolean") return value;
+	return relationTarget(record, item.from) ?? null;
+};
+//#endregion
+export { relatedValue };

package/dist/data-grid/cell-text.js

@@ -1,6 +1,6 @@
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
-import { formatDate, formatDateTime } from "../format/date.js";
+import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown } from "../live/file-values.js";
 import { enumLabel } from "@protobase/schema";
@@ -15,7 +15,7 @@ const cellText = (spec, value) => {
 		case "id": return String(value);
 		case "money": return `${formatMoney(Number(value), spec.currency, spec.decimals)}${spec.suffix ?? ""}`;
 		case "date": return formatDate(Number(value));
-		case "datetime": return formatDateTime(Number(value));
+		case "datetime": return spec.relative ? formatRelativeTime(Math.round((Date.now() - Number(value)) / 1e3)) : formatDateTime(Number(value));
 		case "number": return `${formatInt(Number(value))}${spec.suffix ?? ""}`;
 		case "signed": return `${formatSigned(Number(value))}${spec.suffix ?? ""}`;
 		case "percent": return Number(value) === 0 ? "—" : formatPercent(Number(value));

package/dist/data-grid/cells.js

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { viewerZone, zoneLabel } from "../format/zone.js";
+import { formatDateTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown, shownImage } from "../live/file-values.js";
 import { cellText } from "./cell-text.js";
@@ -39,7 +40,7 @@ const renderCell = (spec, value) => {
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			title: `Shown in ${zoneLabel(Number(value), viewerZone())}`,
+			title: spec.relative ? formatDateTime(Number(value)) : `Shown in ${zoneLabel(Number(value), viewerZone())}`,
 			children: text
 		});
 		case "number": return /* @__PURE__ */ jsx("span", {

package/dist/filter-panel/filter-config.js

@@ -1,5 +1,6 @@
 //#region src/filter-panel/filter-config.ts
 const defaultDatePresets = [
+	"today",
 	"7d",
 	"30d",
 	"year"
@@ -7,6 +8,7 @@ const defaultDatePresets = [
 const datePresetLabels = {
 	today: "Today",
 	yesterday: "Yesterday",
+	"24h": "Last 24 hours",
 	"7d": "Last 7 days",
 	"30d": "Last 30 days",
 	"90d": "Last 90 days",

package/dist/format/date.js

@@ -79,11 +79,12 @@ const units = [
 	["hour", 3600],
 	["minute", 60]
 ];
-/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
+/** "5 minutes ago", "yesterday", "in 3 hours"; `seconds` is how long ago it was, negative for a time to come. */
 const formatRelativeTime = (seconds) => {
-	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
-	if (unit === "second" && seconds < 45) return "just now";
-	return relative.format(-Math.floor(seconds / size), unit);
+	const away = Math.abs(seconds);
+	const [unit, size] = units.find(([, size]) => away >= size) ?? ["second", 1];
+	if (unit === "second" && away < 45) return "just now";
+	return relative.format(-Math.sign(seconds) * Math.floor(away / size), unit);
 };
 //#endregion
 export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };

package/dist/live/columns-from-model.js

@@ -92,6 +92,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
 			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
 			...viewField?.suffix !== void 0 && { suffix: viewField.suffix },
+			...kind === "datetime" && viewField?.format === "relative" && { relative: true },
 			...kind === "money" && viewField?.decimals !== void 0 && { decimals: viewField.decimals },
 			...kind === "money" && {
 				currency: "EUR",

package/dist/live/display-value.js

@@ -1,5 +1,5 @@
 import { viewerZone, zoneLabel } from "../format/zone.js";
-import { formatDate, formatDateTime } from "../format/date.js";
+import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
 import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
@@ -8,13 +8,16 @@ const affixed = (text, hints) => `${hints.prefix ?? ""}${text}${hints.suffix ??
 * A read-only rendering of a stored value, following the view's prefix, suffix, decimals, format and value label hints; a
 * timestamp on the clock of `zone`, the viewer's unless given.
 */
-const displayValue = (field, value, hints = {}, zone = viewerZone()) => {
+const displayValue = (field, value, hints = {}, zone = viewerZone(), now = Date.now()) => {
 	if (value === null || value === void 0 || value === "") return "—";
 	switch (field.type) {
 		case "boolean": return value ? "Yes" : "No";
 		case "file": return fileShown(value)?.name ?? "—";
 		case "enum": return enumLabel(String(value), hints.valueLabels);
-		case "timestamp": return formatDateTime(Date.parse(String(value)), zone);
+		case "timestamp": {
+			const ms = Date.parse(String(value));
+			return hints.format === "relative" ? formatRelativeTime(Math.round((now - ms) / 1e3)) : formatDateTime(ms, zone);
+		}
 		case "date": return formatDate(Date.parse(String(value)));
 		case "decimal": {
 			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
@@ -29,11 +32,13 @@ const displayValue = (field, value, hints = {}, zone = viewerZone()) => {
 		default: return typeof value === "object" ? JSON.stringify(value) : String(value);
 	}
 };
-/** The hover label of a shown value: the time zone a timestamp is shown in, nothing for other values. */
-const valueTitle = (field, value, zone = viewerZone()) => {
+/** The hover label of a shown value: the time zone a timestamp is shown in, or its exact time when shown relative; nothing for other values. */
+const valueTitle = (field, value, zone = viewerZone(), hints = {}) => {
 	if (field.type !== "timestamp" || typeof value !== "string") return void 0;
 	const ms = Date.parse(value);
-	return Number.isNaN(ms) ? void 0 : `Shown in ${zoneLabel(ms, zone)}`;
+	if (Number.isNaN(ms)) return void 0;
+	if (hints.format === "relative") return formatDateTime(ms, zone);
+	return `Shown in ${zoneLabel(ms, zone)}`;
 };
 //#endregion
 export { displayValue, valueTitle };

package/dist/live/filter-string.js

@@ -7,6 +7,10 @@ const span = {
 	end: 0
 };
 const relative = {
+	"24h": {
+		amount: 24,
+		unit: "h"
+	},
 	"7d": {
 		amount: 7,
 		unit: "d"

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.22.1";
+var version = "0.22.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };