@protobase/ui 0.12.10 → 0.12.12

package/dist/lib/readable-text.js

@@ -0,0 +1,23 @@
+//#region src/lib/readable-text.ts
+const luminance = (hex) => {
+	const digits = hex.slice(1);
+	const full = digits.length === 3 ? [...digits].map((digit) => digit + digit).join("") : digits;
+	const [r, g, b] = [
+		0,
+		2,
+		4
+	].map((at) => {
+		const channel = Number.parseInt(full.slice(at, at + 2), 16) / 255;
+		return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+const light = "#ffffff";
+const dark = "#111827";
+/** The text colour, white or near black, that reads best on a hex background. */
+const readableOn = (background) => {
+	const shade = luminance(background);
+	return 1.05 / (shade + .05) >= (shade + .05) / (luminance(dark) + .05) ? light : dark;
+};
+//#endregion
+export { readableOn };

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

@@ -82,6 +82,9 @@ const columnsFromModel = (resource, view, highlight = []) => {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
 				labels
 			},
+			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
+			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
+			...viewField?.suffix !== void 0 && { suffix: viewField.suffix },
 			...kind === "money" && {
 				currency: "EUR",
 				value: (row) => row[name] == null ? null : currencyCents(row[name])

package/dist/live/display-value.js

@@ -2,7 +2,8 @@ import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
-/** A read-only rendering of a stored value, following the view's prefix, decimals, format and value label hints. */
+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. */
 const displayValue = (field, value, hints = {}) => {
 	if (value === null || value === void 0 || value === "") return "—";
 	switch (field.type) {
@@ -14,11 +15,13 @@ const displayValue = (field, value, hints = {}) => {
 		case "decimal": {
 			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
 			if (hints.format === "percent") return `${Number(value)}%`;
-			return `${hints.prefix ?? ""}${Number(text).toLocaleString("en-IE", {
+			return affixed(Number(text).toLocaleString("en-IE", {
 				minimumFractionDigits: hints.decimals ?? 0,
 				maximumFractionDigits: hints.decimals ?? 20
-			})}`;
+			}), hints);
 		}
+		case "integer":
+		case "bigint": return affixed(String(value), hints);
 		default: return typeof value === "object" ? JSON.stringify(value) : String(value);
 	}
 };

package/dist/live/filter-string.js

@@ -62,12 +62,15 @@ const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
 		if (values.length === 0) return [];
 		return [values.length === 1 ? w.eq(group.id, values[0]) : w.in(group.id, values)];
 	});
-	const range = config.range && state.range ? [w.gte(config.range.id, state.range[0]), w.lte(config.range.id, state.range[1])] : [];
+	const ranges = (config.ranges ?? []).flatMap((range) => {
+		const span = state.ranges?.[range.id];
+		return span ? [w.gte(range.id, span[0]), w.lte(range.id, span[1])] : [];
+	});
 	const date = config.dateField && state.date ? dateClauses(config.dateField, state.date, now, config.dateKind) : [];
 	const toggles = (config.toggles ?? []).filter((toggle) => state.toggles.includes(toggle.id)).map((toggle) => w.eq(toggle.id, true));
 	return [
 		...facets,
-		...range,
+		...ranges,
 		...date,
 		...toggles
 	];
@@ -103,7 +106,8 @@ const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
 	const extras = [];
 	const facetIds = new Set(config.facets.map((group) => group.id));
 	const toggleIds = new Set((config.toggles ?? []).map((toggle) => toggle.id));
-	const bounds = { clauses: [] };
+	const rangeIds = new Set((config.ranges ?? []).map((range) => range.id));
+	const bounds = /* @__PURE__ */ new Map();
 	let dateClause;
 	let todayEnd;
 	for (const clause of parsed.ast ? flatten(parsed.ast) : []) if (clause.kind === "compare" && facetIds.has(fieldName(clause)) && clause.op === "=" && literalText(clause.value) !== void 0) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], literalText(clause.value)];
@@ -113,18 +117,23 @@ const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
 		dateClause = clause;
 	} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && periodStart("today", now).startsWith(clause.value.value.slice(0, 10))) todayEnd = clause;
 	else if (clause.kind === "compare" && toggleIds.has(fieldName(clause)) && clause.op === "=" && clause.value.kind === "boolean" && clause.value.value) state.toggles.push(fieldName(clause));
-	else if (clause.kind === "compare" && config.range?.id === fieldName(clause) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
-		if (clause.op === ">=") bounds.low = clause.value.value;
-		else bounds.high = clause.value.value;
-		bounds.clauses.push(clause);
+	else if (clause.kind === "compare" && rangeIds.has(fieldName(clause)) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
+		const range = bounds.get(fieldName(clause)) ?? { clauses: [] };
+		if (clause.op === ">=") range.low = clause.value.value;
+		else range.high = clause.value.value;
+		range.clauses.push(clause);
+		bounds.set(fieldName(clause), range);
 	} else extras.push(clause);
 	if (state.date === "yesterday" && !todayEnd) {
 		extras.push(dateClause);
 		state.date = void 0;
 	}
 	if (todayEnd && state.date !== "yesterday") extras.push(todayEnd);
-	if (bounds.low !== void 0 && bounds.high !== void 0) state.range = [bounds.low, bounds.high];
-	else extras.push(...bounds.clauses);
+	for (const [id, range] of bounds) if (range.low !== void 0 && range.high !== void 0) state.ranges = {
+		...state.ranges,
+		[id]: [range.low, range.high]
+	};
+	else extras.push(...range.clauses);
 	return {
 		ok: true,
 		state,

package/dist/live/reference-options.js

@@ -0,0 +1,14 @@
+//#region src/live/reference-options.ts
+/** Records found by a search as options, with the count of each that the facet counts know. */
+const matchOptions = (matches, counted) => {
+	const counts = new Map(counted.map((option) => [option.value, option.count]));
+	return matches.map(([value, label]) => ({
+		value,
+		label,
+		...counts.get(value) !== void 0 && { count: counts.get(value) }
+	}));
+};
+/** The keys a facet needs names for: the values it counted and those chosen, which may lie outside the counted ones. */
+const labelKeys = (counted, chosen) => [.../* @__PURE__ */ new Set([...counted, ...chosen])];
+//#endregion
+export { labelKeys, matchOptions };

package/dist/live/use-filter-config.js

@@ -3,21 +3,28 @@ import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { humanize } from "./naming.js";
 import { fetchLabels } from "./relation-labels.js";
+import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
-import { useHistogram } from "../data/use-aggregates.js";
-import { widgetFields } from "./view-fields.js";
+import { labelKeys, matchOptions } from "./reference-options.js";
+import { useReferenceSearch } from "./use-reference-search.js";
+import { rangeHistogram, widgetFields } from "./view-fields.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/use-filter-config.ts
+const histogramBuckets = 24;
 /**
-* The panel's config for a view: facet counts come from `:facets`, each computed with every
-* other active filter applied but not its own, so choosing one value does not hide the rest.
+* The panel's config for a view: facet counts come from `:facets` and each range's bounds from `:histogram`, each
+* computed with every other active filter applied but not its own, so choosing one value does not hide the rest.
 */
 const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
 	const skeleton = widgetFields(view, model);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
+	const targetOf = (name) => {
+		const field = model.fields[name];
+		return field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	};
 	const facetQueries = useQueries({ queries: skeleton.facets.map((group) => {
 		const filter = stateToText(skeleton, {
 			...state,
@@ -35,44 +42,66 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		};
 	}) });
 	const labelQueries = useQueries({ queries: skeleton.facets.map((group, index) => {
-		const field = model.fields[group.id];
-		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
-		const ids = (facetQueries[index]?.data ?? []).map((facet) => String(facet.value));
+		const target = targetOf(group.id);
+		const ids = labelKeys((facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
 		return {
 			queryKey: keys.labels(`facet:${model.name}.${group.id}`, ids.join(",")),
 			enabled: Boolean(target) && ids.length > 0,
 			queryFn: async () => [...await fetchLabels(queryClient, client, target, ids, views[target.name])]
 		};
 	}) });
-	const rangeFilter = stateToText({
-		...skeleton,
-		range: void 0
-	}, state, extras);
-	const histogram = useHistogram(model.name, skeleton.range?.id ?? "", rangeFilter, 24, Boolean(skeleton.range));
-	const prefix = skeleton.range ? view?.fields[skeleton.range.id]?.prefix : void 0;
+	const searches = useReferenceSearch(skeleton.facets.map((group) => ({
+		id: group.id,
+		target: group.combobox ? targetOf(group.id) : void 0
+	})), views);
+	const ranges = skeleton.ranges ?? [];
+	const histogramQueries = useQueries({ queries: ranges.map((range) => {
+		const filter = stateToText(skeleton, setRange(state, range.id, void 0), extras);
+		const buckets = rangeHistogram(view, range.id) ? histogramBuckets : 1;
+		return {
+			queryKey: keys.histogram(model.name, range.id, buckets, filter),
+			queryFn: () => client.histogram(model.name, range.id, {
+				filter,
+				buckets
+			})
+		};
+	}) });
+	const facetGroup = (group, index) => {
+		const field = model.fields[group.id];
+		const names = new Map(labelQueries[index]?.data ?? []);
+		const counted = (facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [{
+			value: String(facet.value),
+			label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),
+			count: facet.count
+		}]);
+		const search = searches[index];
+		return {
+			...group,
+			label: label(group.id),
+			options: search.matches ? matchOptions(search.matches, counted) : counted,
+			...names.size > 0 && { labels: Object.fromEntries(names) },
+			...search.onSearch && { onSearch: search.onSearch }
+		};
+	};
+	const rangeConfig = (range, index) => {
+		const data = histogramQueries[index]?.data;
+		if (!data || data.min === null || data.max === null) return [];
+		const hints = view?.fields[range.id];
+		const prefix = hints?.prefix;
+		const suffix = hints?.suffix ?? "";
+		return [{
+			...range,
+			label: label(range.id),
+			min: Math.floor(data.min),
+			max: Math.ceil(data.max),
+			step: Math.max(1, Math.round((data.max - data.min) / 100)),
+			histogram: rangeHistogram(view, range.id) ? data.buckets.map((bucket) => bucket.count) : [],
+			format: (value) => `${prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`
+		}];
+	};
 	return {
-		facets: skeleton.facets.map((group, index) => {
-			const field = model.fields[group.id];
-			const names = new Map(labelQueries[index]?.data ?? []);
-			return {
-				...group,
-				label: label(group.id),
-				options: (facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [{
-					value: String(facet.value),
-					label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),
-					count: facet.count
-				}])
-			};
-		}),
-		...skeleton.range && histogram.data && histogram.data.min !== null && histogram.data.max !== null && { range: {
-			...skeleton.range,
-			label: label(skeleton.range.id),
-			min: Math.floor(histogram.data.min),
-			max: Math.ceil(histogram.data.max),
-			step: Math.max(1, Math.round((histogram.data.max - histogram.data.min) / 100)),
-			histogram: histogram.data.buckets.map((bucket) => bucket.count),
-			format: (value) => prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)
-		} },
+		facets: skeleton.facets.map(facetGroup),
+		ranges: ranges.flatMap(rangeConfig),
 		...skeleton.dateField && {
 			datePresets: skeleton.datePresets ?? true,
 			dateField: skeleton.dateField,

package/dist/live/use-reference-search.js

@@ -0,0 +1,53 @@
+import { useClient } from "../data/api-provider.js";
+import { labelFieldOf } from "./model-helpers.js";
+import { useState } from "react";
+import { keepPreviousData, useQueries } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/live/use-reference-search.ts
+const where = createWhere();
+/**
+* The search text typed into each facet's combobox and the records of its target resource that match it. A facet
+* without a target, or whose target has no search fields or a composite key, gets nothing: its options are filtered
+* by name instead.
+*/
+const useReferenceSearch = (targets, views) => {
+	const client = useClient();
+	const [texts, setTexts] = useState({});
+	const searchable = (target) => Boolean(target?.search?.length) && target.primaryKey.length === 1;
+	const results = useQueries({ queries: targets.map(({ id, target }) => {
+		const text = (texts[id] ?? "").trim();
+		return {
+			queryKey: [
+				"reference-search",
+				id,
+				target?.name ?? "",
+				text
+			],
+			enabled: searchable(target) && text !== "",
+			placeholderData: keepPreviousData,
+			queryFn: async () => {
+				const keyField = target.primaryKey[0];
+				const labelField = labelFieldOf(target, views[target.name]);
+				return (await client.list(target.name, {
+					filter: printFilter(where.search(text)),
+					fields: [keyField, labelField],
+					pageSize: 20
+				})).items.map((item) => [String(item[keyField]), String(item[labelField])]);
+			}
+		};
+	}) });
+	return targets.map(({ id, target }, index) => {
+		if (!searchable(target)) return {};
+		const onSearch = (text) => setTexts((current) => ({
+			...current,
+			[id]: text
+		}));
+		if ((texts[id] ?? "").trim() === "") return { onSearch };
+		return {
+			onSearch,
+			matches: results[index]?.data ?? []
+		};
+	});
+};
+//#endregion
+export { useReferenceSearch };

package/dist/live/value-color.js

@@ -0,0 +1,8 @@
+//#region src/live/value-color.ts
+/** The colour a view gives a value's badge, if any. */
+const valueColor = (colors, value) => {
+	const key = String(value);
+	return colors && Object.hasOwn(colors, key) ? colors[key] : void 0;
+};
+//#endregion
+export { valueColor };

package/dist/live/view-fields.js

@@ -1,25 +1,40 @@
 //#region src/live/view-fields.ts
-/** The widgets of a view in the shape `filter-string` talks to; options and counts are filled in later. */
+const numberTypes = [
+	"integer",
+	"bigint",
+	"decimal"
+];
+const isNumber = (model, field) => {
+	const type = model?.fields[field]?.type;
+	return type !== void 0 && numberTypes.includes(type);
+};
+/** A filter on a number field is a range slider, whichever widget the view asked for. */
+const rangeOf = (widget, model) => widget.kind === "range" || widget.kind === "facets" && isNumber(model, widget.field);
+const emptyRange = (field) => ({
+	id: field,
+	label: field,
+	min: 0,
+	max: 0,
+	step: 1,
+	histogram: [],
+	format: String
+});
+/**
+* The widgets of a view in the shape `filter-string` talks to; options and counts are filled in later. Facets on a
+* reference to another resource's records are a combobox, which searches those records.
+*/
 const widgetFields = (view, model) => {
 	const widgets = view?.filters ?? [];
-	const range = widgets.find((widget) => widget.kind === "range");
 	const date = widgets.find((widget) => widget.kind === "dateRange");
 	return {
-		facets: widgets.flatMap((widget) => widget.kind === "facets" ? [{
+		facets: widgets.flatMap((widget) => widget.kind === "facets" && !rangeOf(widget, model) ? [{
 			id: widget.field,
 			label: widget.field,
 			options: [],
-			searchable: widget.search
+			searchable: widget.search,
+			...model?.fields[widget.field]?.type === "relation" && { combobox: true }
 		}] : []),
-		...range && { range: {
-			id: range.field,
-			label: range.field,
-			min: 0,
-			max: 0,
-			step: 1,
-			histogram: [],
-			format: String
-		} },
+		ranges: widgets.flatMap((widget) => rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
 		...date && {
 			dateField: date.field,
 			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",
@@ -31,5 +46,7 @@ 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);
 //#endregion
-export { widgetFields };
+export { rangeHistogram, widgetFields };

package/dist/package.js

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

package/dist/primitives/badge.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { readableOn } from "../lib/readable-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/badge.tsx
 const tones = {
@@ -17,9 +18,17 @@ const dots = {
 	red: "bg-danger",
 	violet: "bg-violet"
 };
-const Badge = ({ tone = "neutral", dot = true, children, className }) => /* @__PURE__ */ jsxs("span", {
-	className: cn("inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", tones[tone], className),
-	children: [dot && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
+const arrow = "polygon(0 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0 100%)";
+const Badge = ({ tone = "neutral", dot = true, color, shape, children, className }) => /* @__PURE__ */ jsxs("span", {
+	style: {
+		...color !== void 0 && {
+			backgroundColor: color,
+			color: readableOn(color)
+		},
+		...shape === "arrow" && { clipPath: arrow }
+	},
+	className: cn(shape === "arrow" ? "inline-flex h-5 items-center gap-1.5 rounded-l-sm pr-4 pl-2 text-xs font-semibold whitespace-nowrap" : "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", color === void 0 && tones[tone], className),
+	children: [dot && color === void 0 && shape === void 0 && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
 });
 //#endregion
 export { Badge };