@protobase/ui 0.22.3 → 0.22.5

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/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/filter-panel/filter-menu.js

@@ -38,7 +38,7 @@ const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, chil
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: cn("absolute top-full z-30 mt-1.5 rounded-lg border bg-background p-3 shadow-pop", alignEnd ? "right-0" : "left-0"),
 			style: { width },
-			children
+			children: typeof children === "function" ? children(() => setOpen(false)) : children
 		})]
 	});
 };

package/dist/filter-panel/filter-panel.js

@@ -5,16 +5,22 @@ import { FacetCombobox } from "./facet-combobox.js";
 import { FacetGroup } from "./facet-group.js";
 import { FilterMenu } from "./filter-menu.js";
 import { FilterSection } from "./filter-section.js";
+import { MoreFiltersMenu } from "./more-filters-menu.js";
 import { RangeFilter } from "./range-filter.js";
+import { activeFilterKeys, barFilters, mergeKeys } from "./secondary-filters.js";
 import { ToggleRow } from "./toggle-row.js";
 import { ToolbarRow, toolbarShows } from "./toolbar-row.js";
 import { useFilterState } from "./use-filter-state.js";
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-panel.tsx
 const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth, leading, trailing }) => {
 	const [state, setState] = useFilterState(value, defaultValue, onChange);
 	const chips = activeChips(config, state);
+	const activeKeys = activeFilterKeys(chips);
+	const [revealed, setRevealed] = useState(() => activeKeys);
+	const [justPicked, setJustPicked] = useState();
+	useEffect(() => setRevealed((current) => mergeKeys(current, activeKeys)), [activeKeys.join(",")]);
 	const chipsView = /* @__PURE__ */ jsx(ActiveFilterChips, {
 		chips,
 		lockedLabels,
@@ -87,24 +93,29 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 			})
 		]
 	});
+	const { shown, more } = barFilters(config, revealed);
+	const onPick = (key) => {
+		setRevealed((current) => mergeKeys(current, [key]));
+		setJustPicked(key);
+	};
 	const menus = [
-		...config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
+		...config.facets.filter((group) => shown.has(`facet:${group.id}`)).map((group) => /* @__PURE__ */ jsx(FilterMenu, {
 			label: group.label,
 			activeCount: (state.facets[group.id] ?? []).length,
 			width: group.combobox ? 280 : void 0,
-			defaultOpen: defaultOpenMenu === group.id,
+			defaultOpen: defaultOpenMenu === group.id || justPicked === `facet:${group.id}`,
 			children: facetView(group, true)
 		}, group.id)),
-		...ranges.map((range) => /* @__PURE__ */ jsx(FilterMenu, {
+		...ranges.filter((range) => shown.has(`range:${range.id}`)).map((range) => /* @__PURE__ */ jsx(FilterMenu, {
 			label: range.label,
 			activeCount: state.ranges?.[range.id] ? 1 : 0,
 			width: 280,
-			defaultOpen: defaultOpenMenu === range.id,
+			defaultOpen: defaultOpenMenu === range.id || justPicked === `range:${range.id}`,
 			children: rangeView(range)
 		}, `range:${range.id}`)),
-		...dateView ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
+		...dateView && shown.has("date") ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
 	];
-	const toggles = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx("div", {
+	const toggles = (config.toggles ?? []).filter((toggle) => shown.has(`toggle:${toggle.id}`)).map((toggle) => /* @__PURE__ */ jsx("div", {
 		className: "flex items-center gap-2 text-muted-foreground",
 		children: /* @__PURE__ */ jsx(ToggleRow, {
 			label: toggle.label,
@@ -115,7 +126,11 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 	const groups = [
 		leading ? [/* @__PURE__ */ jsx(Fragment, { children: leading }, "leading")] : [],
 		menus,
-		toggles
+		toggles,
+		more.length > 0 ? [/* @__PURE__ */ jsx(MoreFiltersMenu, {
+			items: more,
+			onPick
+		}, "more")] : []
 	];
 	if (!toolbarShows(groups, trailing) && chips.length === 0 && !lockedLabels?.length) return null;
 	return /* @__PURE__ */ jsxs("div", {

package/dist/filter-panel/more-filters-menu.js

@@ -0,0 +1,54 @@
+import { menuItemClass } from "../primitives/menu-item.js";
+import { FilterMenu } from "./filter-menu.js";
+import { menuKeyTarget } from "../primitives/menu-keys.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/filter-panel/more-filters-menu.tsx
+const Items = ({ items, onPick, close }) => {
+	const buttons = useRef([]);
+	useEffect(() => buttons.current[0]?.focus(), []);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") return close();
+		const target = menuKeyTarget(event.key, buttons.current.indexOf(document.activeElement), items.length);
+		if (target === void 0) return;
+		event.preventDefault();
+		buttons.current[target]?.focus();
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		role: "menu",
+		"aria-label": "More filters",
+		onKeyDown,
+		className: "-mx-3 -my-3",
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
+			role: "none",
+			children: /* @__PURE__ */ jsx("button", {
+				ref: (button) => {
+					buttons.current[index] = button;
+				},
+				type: "button",
+				role: "menuitem",
+				className: menuItemClass,
+				onClick: () => {
+					close();
+					onPick(item.key);
+				},
+				children: item.label
+			})
+		}, item.key))
+	});
+};
+/** The secondary filters the bar does not show yet, in a menu at its end; picking one puts it in the bar. */
+const MoreFiltersMenu = ({ items, onPick }) => {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(FilterMenu, {
+		label: "More filters",
+		activeCount: 0,
+		children: (close) => /* @__PURE__ */ jsx(Items, {
+			items,
+			onPick,
+			close
+		})
+	});
+};
+//#endregion
+export { MoreFiltersMenu };

package/dist/filter-panel/secondary-filters.js

@@ -0,0 +1,46 @@
+//#region src/filter-panel/secondary-filters.ts
+/** The filter a chip belongs to: `facet:<id>`, `range:<id>`, `toggle:<id>` or `date`. A filter is active exactly when it has a chip. */
+const activeFilterKeys = (chips) => [...new Set(chips.map((chip) => chip.key.split(":").slice(0, 2).join(":")))];
+/** `revealed` itself when it holds every key already, else a copy with the missing keys appended. */
+const mergeKeys = (revealed, keys) => {
+	const missing = keys.filter((key) => !revealed.includes(key));
+	return missing.length === 0 ? revealed : [...revealed, ...missing];
+};
+/** The filter keys the bar draws, and the secondary filters left for the "More filters" menu, in the order the bar draws them. */
+const barFilters = (config, revealed) => {
+	const all = [
+		...config.facets.map((group) => ({
+			key: `facet:${group.id}`,
+			label: group.label,
+			secondary: group.secondary
+		})),
+		...(config.ranges ?? []).map((range) => ({
+			key: `range:${range.id}`,
+			label: range.label,
+			secondary: range.secondary
+		})),
+		...config.datePresets ? [{
+			key: "date",
+			label: "Date",
+			secondary: config.dateSecondary
+		}] : [],
+		...(config.toggles ?? []).map((toggle) => ({
+			key: `toggle:${toggle.id}`,
+			label: toggle.label,
+			secondary: toggle.secondary
+		}))
+	];
+	const shown = /* @__PURE__ */ new Set();
+	const more = [];
+	for (const filter of all) if (!filter.secondary || revealed.includes(filter.key)) shown.add(filter.key);
+	else more.push({
+		key: filter.key,
+		label: filter.label
+	});
+	return {
+		shown,
+		more
+	};
+};
+//#endregion
+export { activeFilterKeys, barFilters, mergeKeys };

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

@@ -122,7 +122,8 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		...skeleton.dateField && {
 			datePresets: skeleton.datePresets ?? true,
 			dateField: skeleton.dateField,
-			dateKind: skeleton.dateKind
+			dateKind: skeleton.dateKind,
+			...skeleton.dateSecondary && { dateSecondary: true }
 		},
 		toggles: skeleton.toggles?.map((toggle) => ({
 			...toggle,

package/dist/live/view-fields.js

@@ -11,14 +11,16 @@ const isNumber = (model, field) => {
 };
 /** 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,
+const secondaryOf = (widget) => widget.secondary ? { secondary: true } : {};
+const emptyRange = (widget) => ({
+	id: widget.field,
+	label: widget.field,
 	min: 0,
 	max: 0,
 	step: 1,
 	histogram: [],
-	format: String
+	format: String,
+	...secondaryOf(widget)
 });
 /**
 * The widgets of a view in the shape `filter-string` talks to; options and counts are filled in later. Facets on a
@@ -34,7 +36,8 @@ const widgetFields = (view, model) => {
 				label: widget.field,
 				options: [],
 				searchable: widget.search,
-				...model?.fields[widget.field]?.type === "relation" && { combobox: true }
+				...model?.fields[widget.field]?.type === "relation" && { combobox: true },
+				...secondaryOf(widget)
 			}];
 			if (widget.kind === "flags") return [{
 				id: widget.fields.join("|"),
@@ -44,19 +47,22 @@ const widgetFields = (view, model) => {
 					label: field,
 					count: 0
 				})),
-				flags: true
+				flags: true,
+				...secondaryOf(widget)
 			}];
 			return [];
 		}),
-		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
+		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget)] : []),
 		...date && {
 			dateField: date.field,
+			...date.secondary && { dateSecondary: true },
 			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",
 			...date.presets.length > 0 && { datePresets: date.presets }
 		},
 		toggles: widgets.flatMap((widget) => widget.kind === "toggle" ? [{
 			id: widget.field,
-			label: widget.field
+			label: widget.field,
+			...secondaryOf(widget)
 		}] : [])
 	};
 };

package/dist/package.js

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

package/dist/primitives/menu-item.js

@@ -0,0 +1,4 @@
+//#region src/primitives/menu-item.ts
+const menuItemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
+//#endregion
+export { menuItemClass };

package/dist/record-view/action-menu.js

@@ -1,10 +1,10 @@
 import { cn } from "../lib/cn.js";
+import "../primitives/menu-item.js";
 import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreVertical } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/record-view/action-menu.tsx
-const itemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
 /**
 * The actions of an action rail as a menu behind a "..." button, as a mobile screen's top bar holds them: each item the
 * rail's, a link where the rail draws one, disabled with its reason when it cannot run. `className` styles the button.
@@ -39,7 +39,7 @@ const ActionMenu = ({ actions, label = "Actions", className }) => {
 				role: "none",
 				onClick: () => setOpen(false),
 				children: render ? render({
-					className: itemClass,
+					className: "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60",
 					children,
 					role: "menuitem"
 				}) : /* @__PURE__ */ jsx("button", {
@@ -48,7 +48,7 @@ const ActionMenu = ({ actions, label = "Actions", className }) => {
 					onClick: onRun,
 					disabled: Boolean(blocked) || running,
 					title: blocked,
-					className: itemClass,
+					className: "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60",
 					children
 				})
 			}, name);