@protobase/ui 0.22.2 → 0.22.4

package/dist/app/charts/chart-view.js

@@ -65,10 +65,12 @@ const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter =
 	const slices = valueSlices(groups, field, view?.fields[groupBy], measure, filter);
 	return type === "donut" ? /* @__PURE__ */ jsx(GroupDonut, {
 		resource: model.name,
+		view,
 		slices,
 		measure
 	}) : /* @__PURE__ */ jsx(GroupBars, {
 		resource: model.name,
+		view,
 		slices,
 		measure
 	});

package/dist/app/charts/group-bars.js

@@ -1,23 +1,20 @@
 import { AppLink } from "../use-app-address.js";
 import { measureText } from "./chart-groups.js";
+import { filteredListAddress } from "../list-link.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/charts/group-bars.tsx
 /**
 * A ranked list of a field's values, each a bar as long as its number and a link to its records. Bars in rows read on
 * a phone as well as on a desk, and carry their label and value as text, so no colour has to say what a bar is.
 */
-const GroupBars = ({ resource, slices, measure }) => {
+const GroupBars = ({ resource, view, slices, measure }) => {
 	const largest = Math.max(0, ...slices.map((slice) => slice.value ?? 0));
 	return /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-col gap-1",
 		children: slices.map((slice) => {
 			const share = largest > 0 && slice.value !== null ? Math.max(0, slice.value) / largest : 0;
 			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
-				to: {
-					kind: "list",
-					resource,
-					filter: slice.filter
-				},
+				to: filteredListAddress(view, resource, slice.filter),
 				className: "group grid grid-cols-[minmax(6rem,35%)_1fr_auto] items-center gap-3 rounded-md px-1 py-1 hover:bg-muted",
 				title: measure.kind === "count" ? void 0 : `${measureText(slice.count, { kind: "count" })} records`,
 				children: [

package/dist/app/charts/group-donut.js

@@ -1,5 +1,6 @@
 import { AppLink } from "../use-app-address.js";
 import { measureText } from "./chart-groups.js";
+import { filteredListAddress } from "../list-link.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 //#region src/app/charts/group-donut.tsx
@@ -22,7 +23,7 @@ const SliceTooltip = ({ active, payload, measure }) => {
 * A donut of how a total shares out over a field's values, with a legend that names each, gives its number and share,
 * and links to its records: the legend, not the colour, says which slice is which.
 */
-const GroupDonut = ({ resource, slices, measure }) => {
+const GroupDonut = ({ resource, view, slices, measure }) => {
 	const drawn = slices.filter((slice) => slice.value !== null && slice.value > 0);
 	const whole = drawn.reduce((sum, slice) => sum + slice.value, 0);
 	return /* @__PURE__ */ jsxs("div", {
@@ -51,11 +52,7 @@ const GroupDonut = ({ resource, slices, measure }) => {
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "flex w-full min-w-0 flex-col gap-0.5",
 			children: slices.map((slice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
-				to: {
-					kind: "list",
-					resource,
-					filter: slice.filter
-				},
+				to: filteredListAddress(view, resource, slice.filter),
 				className: "group flex items-center gap-2 rounded-md px-1 py-0.5 hover:bg-muted",
 				children: [
 					/* @__PURE__ */ jsx("span", {

package/dist/app/current-address.js

@@ -24,7 +24,8 @@ const listedResource = (resources, views, resource) => {
 const listDefaults = (model, view, xs = false) => ({
 	display: model ? listDefaultDisplay(model, view, xs) : defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
-	filterLayout: "bar"
+	filterLayout: "bar",
+	filter: view?.list?.filter ?? ""
 });
 /** The address as read from the location, with a list's defaults filled in and a record's key as text. */
 const currentAddress = (read, defaults) => {
@@ -38,11 +39,10 @@ const currentAddress = (read, defaults) => {
 	if (read?.kind !== "list") return read;
 	return {
 		...defaults(read.resource),
-		filter: "",
 		...read
 	};
 };
-/** The list address after `change`, leaving out every value that is empty or its default, so `/<resource>` stays clean. */
+/** The list address after `change`, leaving out every value that is empty or its default (a cleared filter is written as an empty `filter=` when the default is not empty), so `/<resource>` stays clean. */
 const changedList = (read, change, defaults) => {
 	const next = {
 		...read,
@@ -52,7 +52,7 @@ const changedList = (read, change, defaults) => {
 	return {
 		kind: "list",
 		resource: read.resource,
-		...next.filter && { filter: next.filter },
+		...differs("filter") && { filter: next.filter },
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },
 		...differs("filterLayout") && { filterLayout: next.filterLayout },

package/dist/app/displays/board-allowed.js

@@ -0,0 +1,26 @@
+import { parseFilter } from "@protobase/schema";
+//#region src/app/displays/board-allowed.ts
+const flatten = (expr) => expr.kind === "and" ? expr.args.flatMap(flatten) : [expr];
+const text = (value) => value.kind === "string" ? String(value.value) : void 0;
+const allowedBy = (clause, by) => {
+	if (clause.kind === "compare" && clause.op === "=" && clause.field.path.join(".") === by) {
+		const value = text(clause.value);
+		return value === void 0 ? void 0 : [value];
+	}
+	if (clause.kind === "in" && clause.field.path.join(".") === by) {
+		const values = clause.values.map(text);
+		return values.every((value) => value !== void 0) ? values : void 0;
+	}
+};
+/**
+* The columns of a board `filter` does not rule out: those its top-level `by = "v"` and `in(by, ...)` clauses allow. Any
+* other clause leaves every column, so a column is left out only when no record in it can match.
+*/
+const columnsAllowed = (filter, by, columns) => {
+	const parsed = parseFilter(filter);
+	if (!parsed.ok || !parsed.ast) return columns;
+	const clauses = flatten(parsed.ast).map((clause) => allowedBy(clause, by)).filter((values) => values !== void 0);
+	return columns.filter((column) => clauses.every((values) => column.value !== null && values.includes(column.value)));
+};
+//#endregion
+export { columnsAllowed };

package/dist/app/displays/board-display.js

@@ -4,6 +4,7 @@ import { can } from "../permissions.js";
 import { RecordCard } from "./record-card.js";
 import { collision, columnCoordinates, columnId } from "./board-dnd.js";
 import { BoardColumnView } from "./board-column.js";
+import { columnsAllowed } from "./board-allowed.js";
 import { useBoardMove } from "./use-board-move.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,7 +15,7 @@ import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useS
 * a card dragged, or moved with the keyboard, to another column saves the record with that column's value.
 */
 const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit }) => {
-	const columns = boardColumns(model, view, display);
+	const columns = columnsAllowed(filter, display.by, boardColumns(model, view, display));
 	const card = boardCard(model, view, display);
 	const permissions = usePermissions(model.name);
 	const movable = can(permissions, "update") && !model.fields[display.by]?.readOnly;

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/list-link.js

@@ -0,0 +1,23 @@
+//#region src/app/list-link.ts
+/**
+* The list of `resource` opened on exactly the records `filter` counted or showed: with no filter, an empty one when
+* the view's list opens on a default filter, so the link does not narrow what it counted; otherwise a clean path.
+*/
+const filteredListAddress = (view, resource, filter) => {
+	if (filter) return {
+		kind: "list",
+		resource,
+		filter
+	};
+	if (view?.list?.filter) return {
+		kind: "list",
+		resource,
+		filter: ""
+	};
+	return {
+		kind: "list",
+		resource
+	};
+};
+//#endregion
+export { filteredListAddress };

package/dist/app/pages/blocks/stat.js

@@ -5,12 +5,14 @@ import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
+import { filteredListAddress } from "../../list-link.js";
 import { FieldValue } from "../field-value.js";
 import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/stat.tsx
 const big = "text-2xl font-semibold tracking-tight tabular-nums";
 const Count = ({ model, filter }) => {
+	const { views } = useAdminMeta();
 	const count = useCount(model, filter);
 	if (count.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" });
 	if (count.error) return /* @__PURE__ */ jsx("span", {
@@ -18,11 +20,7 @@ const Count = ({ model, filter }) => {
 		children: "Could not count"
 	});
 	return /* @__PURE__ */ jsx(AppLink, {
-		to: {
-			kind: "list",
-			resource: model.name,
-			filter
-		},
+		to: filteredListAddress(views[model.name], model.name, filter),
 		className: `${big} hover:text-primary-text after:absolute after:inset-0 after:content-['']`,
 		children: count.data.toLocaleString("en-IE")
 	});

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

@@ -303,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
 			});
@@ -524,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/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.2";
+var version = "0.22.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };