@protobase/ui 0.63.5 → 0.64.0

package/dist/inline-child-table/inline-child-table.js

@@ -17,10 +17,25 @@ const announcementsFor = (lines, lineName) => {
 	};
 	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
 	return {
-		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id), lines.length),
-		onDragOver: ({ active, over }) => over ? text("over", name(active.id), place(over.id), lines.length) : void 0,
-		onDragEnd: ({ active, over }) => over ? text("dropped", name(active.id), place(over.id), lines.length) : text("droppedAtStart", name(active.id)),
-		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id))
+		onDragStart: ({ active }) => text("pickedUp", {
+			name: name(active.id),
+			place: place(active.id),
+			count: lines.length
+		}),
+		onDragOver: ({ active, over }) => over ? text("over", {
+			name: name(active.id),
+			place: place(over.id),
+			count: lines.length
+		}) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("dropped", {
+			name: name(active.id),
+			place: place(over.id),
+			count: lines.length
+		}) : text("droppedAtStart", { name: name(active.id) }),
+		onDragCancel: ({ active }) => text("cancelled", {
+			name: name(active.id),
+			place: place(active.id)
+		})
 	};
 };
 /** The lines of a record as rows of the given columns, put in order by dragging or from each row's menu. */

package/dist/inline-child-table/line-row.js

@@ -37,7 +37,7 @@ const LineRow = ({ line, name, columns, position, count, reorderable, onRemove,
 			reorderable ? /* @__PURE__ */ jsx("button", {
 				ref: setActivatorNodeRef,
 				type: "button",
-				"aria-label": text("dragToReorder", name),
+				"aria-label": text("dragToReorder", { name }),
 				...attributes,
 				...listeners,
 				style: { touchAction: "none" },
@@ -49,7 +49,7 @@ const LineRow = ({ line, name, columns, position, count, reorderable, onRemove,
 				children: column.cell(line)
 			}, column.key)),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
-				label: text("actionsFor", name),
+				label: text("actionsFor", { name }),
 				items: menu
 			}) : /* @__PURE__ */ jsx("span", {}),
 			error && /* @__PURE__ */ jsx("p", {

package/dist/inline-child-table/messages.js

@@ -1,38 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/inline-child-table/messages.ts
-const text = defineMessages({
-	en: {
-		instructions: "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.",
-		line: "line",
-		pickedUp: (name, place, count) => `Picked up ${name}, line ${place} of ${count}.`,
-		over: (name, place, count) => `${name} is over line ${place} of ${count}.`,
-		dropped: (name, place, count) => `${name} was dropped at line ${place} of ${count}.`,
-		droppedAtStart: (name) => `${name} was dropped where it started.`,
-		cancelled: (name, place) => `Moving ${name} was cancelled. It is back at line ${place}.`,
-		addLine: "Add line",
-		noLines: "No lines yet.",
-		moveUp: "Move up",
-		moveDown: "Move down",
-		removeLine: "Remove line",
-		dragToReorder: (name) => `Drag to reorder ${name}`,
-		actionsFor: (name) => `Actions for ${name}`
-	},
-	nl: {
-		instructions: "Druk op spatie of enter op de sleepgreep om een regel op te pakken. Verplaats hem met de pijltjestoetsen omhoog en omlaag, zet hem neer met spatie of enter, en annuleer met escape. Het regelmenu heeft ook Omhoog en Omlaag.",
-		line: "regel",
-		pickedUp: (name, place, count) => `${name} opgepakt, regel ${place} van ${count}.`,
-		over: (name, place, count) => `${name} is boven regel ${place} van ${count}.`,
-		dropped: (name, place, count) => `${name} is neergezet op regel ${place} van ${count}.`,
-		droppedAtStart: (name) => `${name} is neergezet waar hij begon.`,
-		cancelled: (name, place) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op regel ${place}.`,
-		addLine: "Regel toevoegen",
-		noLines: "Nog geen regels.",
-		moveUp: "Omhoog",
-		moveDown: "Omlaag",
-		removeLine: "Regel verwijderen",
-		dragToReorder: (name) => `Sleep om ${name} te verplaatsen`,
-		actionsFor: (name) => `Acties voor ${name}`
-	}
-});
+const text = messages("inline-child-table");
 //#endregion
 export { text };

package/dist/invitations/link-notice.js

@@ -1,14 +1,13 @@
-import { slotted } from "../locale/slotted.js";
 import { text } from "./messages.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/invitations/link-notice.tsx
 /** The invitation link to pass on, when the app cannot email it. */
 const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsx("p", {
 	className: "mt-3 break-all rounded-md border bg-muted px-3 py-2 text-xs",
-	children: slotted(text("passLinkOn"), /* @__PURE__ */ jsx("span", {
+	children: text.rich("passLinkOn", { link: /* @__PURE__ */ jsx("span", {
 		className: "font-mono",
 		children: link
-	}))
+	}) })
 }) : null;
 //#endregion
 export { LinkNotice };

package/dist/invitations/messages.js

@@ -1,24 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/invitations/messages.ts
-const text = defineMessages({
-	en: {
-		email: "Email",
-		invite: "Invite",
-		expired: "Expired",
-		until: (date) => `Until ${date}`,
-		sendAgain: "Send again",
-		revoke: "Revoke",
-		passLinkOn: "This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: {}"
-	},
-	nl: {
-		email: "E-mailadres",
-		invite: "Uitnodigen",
-		expired: "Verlopen",
-		until: (date) => `Tot ${date}`,
-		sendAgain: "Opnieuw sturen",
-		revoke: "Intrekken",
-		passLinkOn: "Deze app kan geen e-mail sturen, dus geef deze link zelf door. Die werkt één keer, tot de uitnodiging verloopt: {}"
-	}
-});
+const text = messages("invitations");
 //#endregion
 export { text };

package/dist/invitations/pending-invitation-row.js

@@ -28,7 +28,7 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 							children: [
 								gives,
 								" · ",
-								expired ? text("expired") : text("until", new Date(expiresAt).toLocaleDateString(formatTag()))
+								expired ? text("expired") : text("until", { date: new Date(expiresAt).toLocaleDateString(formatTag()) })
 							]
 						})]
 					}),

package/dist/lists/messages.js

@@ -1,8 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/lists/messages.ts
-const text = defineMessages({
-	en: { showMore: "Show more" },
-	nl: { showMore: "Meer tonen" }
-});
+const text = messages("lists");
 //#endregion
 export { text };

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

@@ -4,28 +4,10 @@ import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitleField } from "./model-helpers.js";
 import { contactFormat } from "./contact-links.js";
+import { valueTone } from "./value-color.js";
 import { listColumnNames } from "@protobase/schema/internal";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
-const tones = {
-	draft: "neutral",
-	confirmed: "blue",
-	picking: "amber",
-	shipped: "violet",
-	delivered: "green",
-	cancelled: "red",
-	sent: "blue",
-	paid: "green",
-	overdue: "red",
-	lead: "blue",
-	active: "green",
-	dormant: "neutral",
-	receipt: "green",
-	issue: "blue",
-	transfer: "violet",
-	adjustment: "amber"
-};
-const toneFor = (value) => tones[value] ?? "neutral";
 const widths = {
 	text: 200,
 	id: 140,
@@ -47,7 +29,6 @@ const fixedKinds = /* @__PURE__ */ new Set([
 	"boolean",
 	"percent"
 ]);
-const idLike = /^(number|sku|reference|code)$/;
 const kindOf = (field, view, index) => {
 	switch (field.type) {
 		case "relation": return "relation";
@@ -56,14 +37,14 @@ const kindOf = (field, view, index) => {
 		case "boolean": return "boolean";
 		case "timestamp": return "datetime";
 		case "date": return "date";
-		case "decimal": return view?.format === "percent" ? "percent" : view?.prefix === "€" ? "money" : "number";
+		case "decimal": return view?.format === "percent" ? "percent" : view?.currency !== void 0 ? "money" : "number";
 		case "integer":
-		case "bigint": return /quantity|delta/.test(field.name) ? "signed" : "number";
-		default: return idLike.test(field.name) || index === 0 && field.name === "id" ? "id" : "text";
+		case "bigint": return view?.format === "signed" ? "signed" : "number";
+		default: return view?.format === "code" || index === 0 && field.name === "id" ? "id" : "text";
 	}
 };
 const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 100);
-/** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format hints. */
+/** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format and currency hints. */
 const columnsFromModel = (resource, view, highlight = [], names = listColumnNames(resource, view)) => {
 	const title = recordTitleField(resource, view);
 	return names.flatMap((name, index) => {
@@ -72,29 +53,31 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 		const viewField = view?.fields[name];
 		const kind = kindOf(field, viewField, index);
 		const labels = Object.fromEntries((field.enumValues ?? []).map((value) => [value, enumLabel(value, viewField?.valueLabels)]));
-		const suffixWidth = viewField?.suffix ? Math.ceil(viewField.suffix.length * 7.2) : 0;
+		const prefix = (kind === "number" || kind === "signed") && viewField?.prefix ? viewField.prefix : void 0;
+		const affixWidth = Math.ceil(((prefix?.length ?? 0) + (viewField?.suffix?.length ?? 0)) * 7.2);
 		return [{
 			id: name,
 			header: viewField?.label ?? humanize(name),
 			kind,
-			width: (name === "name" ? 260 : widths[kind]) + suffixWidth,
+			width: (name === "name" ? 260 : widths[kind]) + affixWidth,
 			sortable: field.sortable,
-			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
+			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, affixWidth > 0 ? widths[kind] + affixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
 			...name === title && { title: true },
 			...kind === "text" && name !== title && contactFormat(viewField) && { link: contactFormat(viewField) },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
-				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
+				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, valueTone(viewField?.valueColors, value)])),
 				labels
 			},
 			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
 			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
+			...prefix !== void 0 && { prefix },
 			...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",
+			...kind === "money" && viewField?.currency !== void 0 && {
+				currency: viewField.currency,
 				value: (row) => row[name] == null ? null : currencyCents(row[name])
 			},
 			...(kind === "datetime" || kind === "date") && { value: (row) => row[name] == null ? null : Date.parse(String(row[name])) },
@@ -104,4 +87,4 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 	});
 };
 //#endregion
-export { columnsFromModel, listColumnNames, toneFor };
+export { columnsFromModel, listColumnNames };

package/dist/live/display-value.js

@@ -40,7 +40,7 @@ const valueTitle = (field, value, zone = viewerZone(), hints = {}) => {
 	const ms = Date.parse(value);
 	if (Number.isNaN(ms)) return void 0;
 	if (hints.format === "relative") return formatDateTime(ms, zone);
-	return text("shownIn", zoneLabel(ms, zone));
+	return text("shownIn", { zone: zoneLabel(ms, zone) });
 };
 //#endregion
 export { displayValue, valueTitle };

package/dist/live/messages.js

@@ -1,18 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/live/messages.ts
-const text = defineMessages({
-	en: {
-		yes: "Yes",
-		no: "No",
-		shownIn: (zone) => `Shown in ${zone}`,
-		fileMissing: "File missing"
-	},
-	nl: {
-		yes: "Ja",
-		no: "Nee",
-		shownIn: (zone) => `Getoond in ${zone}`,
-		fileMissing: "Bestand ontbreekt"
-	}
-});
+const text = messages("live");
 //#endregion
 export { text };

package/dist/live/value-color.js

@@ -1,8 +1,18 @@
+import { isBadgeTone } from "@protobase/schema";
 //#region src/live/value-color.ts
-/** The colour a view gives a value's badge, if any. */
-const valueColor = (colors, value) => {
+const declared = (colors, value) => {
 	const key = String(value);
 	return colors && Object.hasOwn(colors, key) ? colors[key] : void 0;
 };
+/** The hex colour a view gives a value's badge, if any; a tone name is no colour. */
+const valueColor = (colors, value) => {
+	const color = declared(colors, value);
+	return color === void 0 || isBadgeTone(color) ? void 0 : color;
+};
+/** The tone a view gives a value's badge, `neutral` when it names none. */
+const valueTone = (colors, value) => {
+	const tone = declared(colors, value);
+	return tone !== void 0 && isBadgeTone(tone) ? tone : "neutral";
+};
 //#endregion
-export { valueColor };
+export { valueColor, valueTone };

package/dist/live/view-fields.js

@@ -68,11 +68,13 @@ const widgetFields = (view, model) => {
 };
 /** Whether a range draws its histogram: only a `range` widget that asks for one. */
 const rangeHistogram = (view, field) => (view?.filters ?? []).some((widget) => widget.kind === "range" && widget.field === field && widget.histogram);
-/** How a range's values read, by the view's prefix and suffix: "€450,000" for a euro amount, "85 m²". */
+/** How a range's values read: money in the view's currency, "€450,000", else with its prefix and suffix, "85 m²". */
 const rangeFormat = (view, field) => {
 	const hints = view?.fields[field];
 	const suffix = hints?.suffix ?? "";
-	return (value) => `${hints?.prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`;
+	const currency = hints?.currency;
+	if (currency !== void 0) return (value) => `${formatMoney(value * 100, currency).replace(".00", "")}${suffix}`;
+	return (value) => `${hints?.prefix ?? ""}${value}${suffix}`;
 };
 //#endregion
 export { rangeFormat, rangeHistogram, widgetFields };