@protobase/ui 0.12.13 → 0.12.15

package/dist/app/displays/card-carousel.js

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/cn.js";
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { cardPhotoList, cardPhotosRequest, shownPhoto } from "./card-photos.js";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/displays/card-carousel.tsx
+const arrow = "pointer-events-auto absolute top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm opacity-0 transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 [@media(hover:none)]:opacity-100";
+/**
+* A card whose picture steps through its photos with arrows, the card's own image first. The photos load when an arrow
+* is first pressed, so the list loads as it does without them. The arrows sit over the card's link, beside it in the
+* document, so pressing one does not open the record; the card's list item must be `relative group/card`.
+*/
+const CardCarousel = ({ photos, recordKey, cover, children }) => {
+	const client = useClient();
+	const [opened, setOpened] = useState(false);
+	const [step, setStep] = useState(0);
+	const request = cardPhotosRequest(photos, recordKey);
+	const loaded = useQuery({
+		queryKey: keys.list(photos.resource, request.filter, request.orderBy ?? "", request.pageSize, `card-photos:${photos.image}`),
+		enabled: opened,
+		queryFn: async () => (await client.list(photos.resource, request)).items.map((item) => item[photos.image])
+	});
+	const list = cardPhotoList(cover, loaded.data ?? []);
+	const index = shownPhoto(step, list.length);
+	const press = (by) => {
+		setOpened(true);
+		setStep((current) => current + by);
+	};
+	const single = loaded.data !== void 0 && list.length < 2;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(list[index]), !single && /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute inset-x-px top-px aspect-[4/3]",
+		"aria-busy": loaded.isFetching,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Previous photo",
+				className: cn(arrow, "left-2"),
+				onClick: () => press(-1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Next photo",
+				className: cn(arrow, "right-2"),
+				onClick: () => press(1),
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			loaded.error && /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-x-2 top-2 rounded bg-background/85 px-1.5 py-0.5 text-center text-xs text-danger-text",
+				children: "Could not load the photos"
+			}),
+			loaded.data !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: "absolute inset-x-0 bottom-2 flex justify-center",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: `Photo ${index + 1} of ${list.length}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 text-[11px] tabular-nums leading-none",
+					"aria-hidden": true,
+					children: list.length > 10 ? `${index + 1} / ${list.length}` : list.map((_, dot) => /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dot === index ? "bg-foreground" : "bg-foreground/35") }, dot))
+				})]
+			})
+		]
+	})] });
+};
+//#endregion
+export { CardCarousel };

package/dist/app/displays/card-photos.js

@@ -0,0 +1,21 @@
+import { isStoredFile } from "../../live/file-values.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/displays/card-photos.ts
+const where = createWhere();
+/** The list request for a card's photos: the records pointing at the card's, in the display's order, with only their image. */
+const cardPhotosRequest = (photos, recordKey) => ({
+	filter: printFilter(where.eq(photos.field, recordKey)),
+	...photos.sort !== void 0 && { orderBy: photos.sort },
+	fields: [photos.image],
+	pageSize: 100
+});
+/** The files a card steps through: its own image first, then the loaded photos less that same file; empty values are left out. */
+const cardPhotoList = (cover, loaded) => {
+	const coverUri = isStoredFile(cover) ? cover.uri : void 0;
+	const rest = loaded.filter((photo) => isStoredFile(photo) && photo.uri !== coverUri);
+	return coverUri === void 0 ? rest : [cover, ...rest];
+};
+/** The position shown after `step` presses forward, or back when negative, wrapping around both ends. */
+const shownPhoto = (step, count) => count === 0 ? 0 : (step % count + count) % count;
+//#endregion
+export { cardPhotoList, cardPhotosRequest, shownPhoto };

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";
@@ -11,6 +11,7 @@ import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { namedIcon } from "../named-icon.js";
 import { ValueBadge } from "../value-badge.js";
+import { CardCarousel } from "./card-carousel.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
@@ -39,9 +40,10 @@ 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.
+* A card per record, opening its page: its image across the top, with arrows through its photos when the display names
+* them, the title over the subtitle, the badge beside it, 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);
@@ -76,6 +78,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 		});
 	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	const photos = Card ? void 0 : display.photos;
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
 		empty: `No ${plural} match.`,
@@ -89,8 +92,9 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
 				const raised = flags.filter((name) => row.record[name] === true);
-				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
-					image !== void 0 && /* @__PURE__ */ jsx(CardImage, { value: row.record[image] }),
+				const cover = image === void 0 ? void 0 : row.record[image];
+				const builtIn = (photo) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					(image !== void 0 || photos !== void 0) && /* @__PURE__ */ jsx(CardImage, { value: photo }),
 					/* @__PURE__ */ jsxs("span", {
 						className: "flex items-start justify-between gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -108,7 +112,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",
@@ -128,7 +132,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						}) }, name))
 					})
 				] });
-				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {
+				const card = (photo) => /* @__PURE__ */ jsx(AppLink, {
 					to: {
 						kind: "record",
 						resource: model.name,
@@ -137,10 +141,19 @@ const CardsDisplay = ({ model, view, display, list }) => {
 					className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
 					children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
 						name: display.card,
-						fallback: builtIn,
+						fallback: builtIn(photo),
 						children: /* @__PURE__ */ jsx(Card, { row })
-					}) : builtIn
-				}) }, row.key);
+					}) : builtIn(photo)
+				});
+				return /* @__PURE__ */ jsx("li", {
+					className: photos ? "group/card relative" : void 0,
+					children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
+						photos,
+						recordKey: row.key,
+						cover,
+						children: card
+					}) : card(cover)
+				}, row.key);
 			})
 		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});

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.15";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };