@protobase/ui 0.12.13 → 0.12.14

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

@@ -2,7 +2,7 @@ import { Badge } from "../../primitives/badge.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
-import { cardFields } from "./list-displays.js";
+import { cardFields, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { fileShown, isPreviewable } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
@@ -40,8 +40,8 @@ const MetaValue = ({ icon, children }) => {
 };
 /**
 * A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it,
-* small meta fields below and the labels of its flags that are true; or, with a `card` component, what it draws of the
-* row, the built-in content again when it is missing or throws.
+* small meta fields below, those with a value, and the labels of its flags that are true; or, with a `card` component,
+* what it draws of the row, the built-in content again when it is missing or throws.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
 	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
@@ -108,7 +108,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 					}),
 					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
 						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
-						children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
+						children: filledMeta(row, meta).map((name) => /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ jsx("dt", {
 								className: "sr-only",

package/dist/app/displays/list-displays.js

@@ -37,6 +37,8 @@ const cardFields = (model, view, display) => ({
 	meta: display.meta ?? [],
 	flags: display.flags ?? []
 });
+/** The meta fields a card shows for a row: those with a value, so a listing for rent only shows no purchase price. */
+const filledMeta = (row, meta) => meta.filter((name) => row.record[name] !== null && row.record[name] !== void 0 && row.record[name] !== "");
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
@@ -73,4 +75,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };
+export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledMeta, loadedFields, shownDisplay, shownFields, sortFields };

package/dist/data-grid/cells.js

@@ -29,7 +29,7 @@ const renderCell = (spec, value) => {
 		});
 		case "money": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: [formatMoney(Number(value), spec.currency), spec.suffix]
+			children: [formatMoney(Number(value), spec.currency, spec.decimals), spec.suffix]
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",

package/dist/format/money.js

@@ -1,15 +1,21 @@
 //#region src/format/money.ts
 const formatters = /* @__PURE__ */ new Map();
-const formatterFor = (currency) => {
-	const cached = formatters.get(currency);
+const formatterFor = (currency, decimals) => {
+	const key = `${currency}:${decimals ?? ""}`;
+	const cached = formatters.get(key);
 	if (cached) return cached;
 	const created = new Intl.NumberFormat("en-IE", {
 		style: "currency",
-		currency
+		currency,
+		...decimals !== void 0 && {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals
+		}
 	});
-	formatters.set(currency, created);
+	formatters.set(key, created);
 	return created;
 };
-const formatMoney = (cents, currency = "EUR") => formatterFor(currency).format(cents / 100);
+/** An amount in cents in the currency, with its usual decimals or `decimals` of them. */
+const formatMoney = (cents, currency = "EUR", decimals) => formatterFor(currency, decimals).format(cents / 100);
 //#endregion
 export { formatMoney };

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

@@ -69,13 +69,14 @@ const columnsFromModel = (resource, view, highlight = []) => {
 		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;
 		return [{
 			id: name,
 			header: viewField?.label ?? humanize(name),
 			kind,
-			width: name === "name" ? 260 : widths[kind],
+			width: (name === "name" ? 260 : widths[kind]) + suffixWidth,
 			sortable: field.sortable,
-			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0),
+			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),
 			...fixedKinds.has(kind) && { fixed: true },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
@@ -85,6 +86,7 @@ const columnsFromModel = (resource, view, highlight = []) => {
 			...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" && viewField?.decimals !== void 0 && { decimals: viewField.decimals },
 			...kind === "money" && {
 				currency: "EUR",
 				value: (row) => row[name] == null ? null : currencyCents(row[name])

package/dist/live/filter-string.js

@@ -60,6 +60,10 @@ const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
 	const facets = config.facets.flatMap((group) => {
 		const values = state.facets[group.id] ?? [];
 		if (values.length === 0) return [];
+		if (group.flags) {
+			const chosen = group.options.filter((option) => values.includes(option.value)).map((option) => w.eq(option.value, true));
+			return chosen.length === 0 ? [] : [chosen.length === 1 ? chosen[0] : w.or(...chosen)];
+		}
 		return [values.length === 1 ? w.eq(group.id, values[0]) : w.in(group.id, values)];
 	});
 	const ranges = (config.ranges ?? []).flatMap((range) => {
@@ -79,6 +83,17 @@ const clausesToText = (clauses) => clauses.length === 0 ? "" : printFilter(w.and
 const stateToText = (config, state, extras = [], now = /* @__PURE__ */ new Date()) => clausesToText([...stateToClauses(config, state, now), ...extras]);
 const flatten = (expr) => expr.kind === "and" ? expr.args.flatMap(flatten) : [expr];
 const fieldName = (expr) => expr.field.path.join(".");
+const isTrue = (expr) => expr.kind === "compare" && expr.op === "=" && expr.value.kind === "boolean" && expr.value.value;
+const flagsChosen = (clause, groupOf) => {
+	const parts = clause.kind === "or" ? clause.args : [clause];
+	if (!parts.every(isTrue)) return void 0;
+	const fields = parts.map(fieldName);
+	const group = groupOf.get(fields[0]);
+	return group !== void 0 && fields.every((field) => groupOf.get(field) === group) ? {
+		group,
+		fields
+	} : void 0;
+};
 const literalText = (value) => value.kind === "number" ? String(value.raw) : value.kind === "string" ? String(value.value) : void 0;
 const presetOf = (clause, now) => {
 	const v = clause.value;
@@ -104,26 +119,31 @@ const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
 		toggles: []
 	};
 	const extras = [];
-	const facetIds = new Set(config.facets.map((group) => group.id));
+	const facetIds = new Set(config.facets.filter((group) => !group.flags).map((group) => group.id));
+	const flagGroupOf = new Map(config.facets.filter((group) => group.flags).flatMap((group) => group.options.map((option) => [option.value, group.id])));
 	const toggleIds = new Set((config.toggles ?? []).map((toggle) => toggle.id));
 	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)];
-	else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
-	else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
-		state.date = presetOf(clause, now);
-		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" && 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);
+	for (const clause of parsed.ast ? flatten(parsed.ast) : []) {
+		const flags = flagsChosen(clause, flagGroupOf);
+		if (flags && !state.facets[flags.group]) state.facets[flags.group] = flags.fields;
+		else 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)];
+		else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
+		else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
+			state.date = presetOf(clause, now);
+			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" && 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;

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

@@ -25,25 +25,30 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		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 counted = skeleton.facets.flatMap((group) => (group.flags ? group.options.map((option) => option.value) : [group.id]).map((field) => ({
+		group: group.id,
+		field
+	})));
+	const facetQueries = useQueries({ queries: counted.map(({ group, field }) => {
 		const filter = stateToText(skeleton, {
 			...state,
 			facets: {
 				...state.facets,
-				[group.id]: []
+				[group]: []
 			}
 		}, extras);
 		return {
-			queryKey: keys.facets(model.name, group.id, filter),
-			queryFn: () => client.facets(model.name, group.id, {
+			queryKey: keys.facets(model.name, field, filter),
+			queryFn: () => client.facets(model.name, field, {
 				filter,
 				limit: 50
 			})
 		};
 	}) });
-	const labelQueries = useQueries({ queries: skeleton.facets.map((group, index) => {
+	const counts = (group, field) => facetQueries[counted.findIndex((entry) => entry.group === group && entry.field === field)]?.data;
+	const labelQueries = useQueries({ queries: skeleton.facets.map((group) => {
 		const target = targetOf(group.id);
-		const ids = labelKeys((facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
+		const ids = labelKeys((counts(group.id, group.id) ?? []).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,
@@ -67,9 +72,20 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		};
 	}) });
 	const facetGroup = (group, index) => {
+		if (group.flags) {
+			const options = group.options.map(({ value }) => ({
+				value,
+				label: label(value),
+				count: counts(group.id, value)?.find((facet) => String(facet.value) === "true")?.count ?? 0
+			}));
+			return {
+				...group,
+				options
+			};
+		}
 		const field = model.fields[group.id];
 		const names = new Map(labelQueries[index]?.data ?? []);
-		const counted = (facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [{
+		const values = (counts(group.id, group.id) ?? []).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
@@ -78,7 +94,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		return {
 			...group,
 			label: label(group.id),
-			options: search.matches ? matchOptions(search.matches, counted) : counted,
+			options: search.matches ? matchOptions(search.matches, values) : values,
 			...names.size > 0 && { labels: Object.fromEntries(names) },
 			...search.onSearch && { onSearch: search.onSearch }
 		};

package/dist/live/view-fields.js

@@ -27,14 +27,27 @@ const widgetFields = (view, model) => {
 	const widgets = view?.filters ?? [];
 	const date = widgets.find((widget) => widget.kind === "dateRange");
 	return {
-		facets: widgets.flatMap((widget) => widget.kind === "facets" && !rangeOf(widget, model) ? [{
-			id: widget.field,
-			label: widget.field,
-			options: [],
-			searchable: widget.search,
-			...model?.fields[widget.field]?.type === "relation" && { combobox: true }
-		}] : []),
-		ranges: widgets.flatMap((widget) => rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
+		facets: widgets.flatMap((widget) => {
+			if (widget.kind === "facets" && !rangeOf(widget, model)) return [{
+				id: widget.field,
+				label: widget.field,
+				options: [],
+				searchable: widget.search,
+				...model?.fields[widget.field]?.type === "relation" && { combobox: true }
+			}];
+			if (widget.kind === "flags") return [{
+				id: widget.fields.join("|"),
+				label: widget.label,
+				options: widget.fields.map((field) => ({
+					value: field,
+					label: field,
+					count: 0
+				})),
+				flags: true
+			}];
+			return [];
+		}),
+		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
 		...date && {
 			dateField: date.field,
 			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",

package/dist/package.js

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