@protobase/ui 0.21.10 → 0.21.11

package/dist/app/create/create-values.js

@@ -1,5 +1,6 @@
 import { isEditable, toPatchValue } from "../../live/field-values.js";
 import { whenShown } from "../record-mode/record-mode.js";
+import { isRecordCondition } from "@protobase/schema";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
 /** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
@@ -13,7 +14,7 @@ const createSections = (model, view) => {
 	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
 	const placed = /* @__PURE__ */ new Set();
 	const sections = (view?.layout ?? []).flatMap((item) => {
-		if (item.kind !== "section" || !whenShown(item.when, true)) return [];
+		if (item.kind !== "section" || isRecordCondition(item.when) || !whenShown(item.when, true)) return [];
 		const fields = item.fields.filter((name) => creatable.includes(name) && !placed.has(name) && whenShown(view?.fields[name]?.when, true));
 		fields.forEach((name) => placed.add(name));
 		return fields.length > 0 ? [{

package/dist/app/pages/blocks/show.js

@@ -1,43 +1,14 @@
-import { useClient } from "../../../data/api-provider.js";
-import { useAdminMeta } from "../../meta-gate.js";
 import { useLayoutRecord } from "../record-scope.js";
-import { countQuery } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { usePathValues } from "../use-path-value.js";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-import { useQueries } from "@tanstack/react-query";
-import { countedResource, evaluateCondition, parseCondition } from "@protobase/layout";
+import { useConditions } from "../use-conditions.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import "@protobase/layout";
 //#region src/app/pages/blocks/show.tsx
 /** Its children while `when` holds: fields of the record around it, and `<resource>.count` for any resource. */
 const ShowBlock = ({ node, children }) => {
 	const { when } = propsOf(node);
-	const { resources } = useAdminMeta();
-	const client = useClient();
-	const scope = useLayoutRecord();
-	const condition = useMemo(() => parseCondition(when), [when]);
-	const paths = condition.ok ? condition.paths : [];
-	const counted = paths.map((path) => countedResource(path, (name) => Boolean(scope && Object.hasOwn(scope.model.fields, name))));
-	const fieldPaths = paths.filter((_, index) => counted[index] === void 0);
-	const fields = usePathValues(scope, fieldPaths);
-	const counts = useQueries({ queries: counted.flatMap((resource) => {
-		const model = resource === void 0 ? void 0 : resources[resource];
-		if (!model) return [];
-		return [countQuery(client, model)];
-	}) });
-	if (!condition.ok) return null;
-	if (fields.some((value) => value.state === "loading") || counts.some((count) => count.isPending)) return null;
-	const values = {};
-	fieldPaths.forEach((path, index) => {
-		const value = fields[index];
-		if (value.state === "ready") values[path] = value.value;
-	});
-	let next = 0;
-	paths.forEach((path, index) => {
-		if (counted[index] === void 0) return;
-		values[path] = resources[counted[index]] ? counts[next++]?.data ?? 0 : 0;
-	});
-	return evaluateCondition(condition, values) ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+	const [shown] = useConditions([when], useLayoutRecord());
+	return shown ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 };
 //#endregion
 export { ShowBlock };

package/dist/app/pages/use-conditions.js

@@ -0,0 +1,49 @@
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { countQuery } from "./use-layout-data.js";
+import { usePathValues } from "./use-path-value.js";
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { countedResource, evaluateCondition, parseCondition } from "@protobase/layout";
+//#region src/app/pages/use-conditions.ts
+/**
+* Whether each condition holds for the record around it (`scope`): `undefined` while a value it reads loads, `false`
+* when it does not parse. Fields come from the stored record, followed through relations; `<resource>.count` counts
+* records. All conditions share one set of queries, so the hook count never changes with the conditions.
+*/
+const useConditions = (whens, scope) => {
+	const { resources } = useAdminMeta();
+	const client = useClient();
+	const key = JSON.stringify(whens);
+	const parsed = useMemo(() => JSON.parse(key).map(parseCondition), [key]);
+	const isField = (name) => Boolean(scope && Object.hasOwn(scope.model.fields, name));
+	const paths = [...new Set(parsed.flatMap((condition) => condition.ok ? condition.paths : []))];
+	const counted = new Map(paths.flatMap((path) => {
+		const resource = countedResource(path, isField);
+		return resource === void 0 ? [] : [[path, resource]];
+	}));
+	const fieldPaths = paths.filter((path) => !counted.has(path));
+	const countedModels = [...new Set(counted.values())].flatMap((resource) => resources[resource] ? [resources[resource]] : []);
+	const fields = usePathValues(scope, fieldPaths);
+	const counts = useQueries({ queries: countedModels.map((model) => countQuery(client, model)) });
+	return parsed.map((condition) => {
+		if (!condition.ok) return false;
+		const values = {};
+		for (const path of condition.paths) {
+			const resource = counted.get(path);
+			if (resource === void 0) {
+				const value = fields[fieldPaths.indexOf(path)];
+				if (value.state === "loading") return void 0;
+				if (value.state === "ready") values[path] = value.value;
+				continue;
+			}
+			const index = countedModels.findIndex((model) => model.name === resource);
+			if (index === -1) values[path] = 0;
+			else if (counts[index].isPending) return void 0;
+			else values[path] = counts[index].data ?? 0;
+		}
+		return evaluateCondition(condition, values);
+	});
+};
+//#endregion
+export { useConditions };

package/dist/app/record-mode/record-mode.js

@@ -32,7 +32,10 @@ const recordShown = (mode, canUpdate, edit) => {
 const helpShown = (own, view, editing) => (own ?? view?.helpWhen ?? "always") === "always" || editing;
 /** A field's help line on the record page, when it shows. */
 const fieldHelp = (hints, view, editing) => hints?.help !== void 0 && helpShown(hints.helpWhen, view, editing) ? hints.help : void 0;
-/** Whether a field or layout item shows: always, unless it says only while editing or only while reading and the page is not. */
+/**
+* Whether a field or layout item shows: always, unless it says only while editing or only while reading and the page is not.
+* A record condition is no mode and counts as always here; the record page evaluates it separately.
+*/
 const whenShown = (when, editing) => {
 	if (when === "editing") return editing;
 	if (when === "reading") return !editing;

package/dist/app/record-mode/shown-layout.js

@@ -0,0 +1,18 @@
+import { whenShown } from "./record-mode.js";
+import { isRecordCondition } from "@protobase/schema";
+//#region src/app/record-mode/shown-layout.ts
+/** The items with a record condition in `when`, whose conditions the page evaluates. */
+const conditionalItems = (items) => items.filter((item) => isRecordCondition(item.when));
+/**
+* The items that show: those with a record condition only when it holds (`held`, one answer per conditional item in
+* order, `undefined` while loading) and the page is no preview; the others by the form or read view.
+*/
+const shownLayout = (items, held, editing, preview) => {
+	let next = 0;
+	return items.filter((item) => {
+		if (!isRecordCondition(item.when)) return whenShown(item.when, editing);
+		return !preview && held[next++] === true;
+	});
+};
+//#endregion
+export { conditionalItems, shownLayout };

package/dist/app/record-mode/use-shown-layout.js

@@ -0,0 +1,14 @@
+import { useConditions } from "../pages/use-conditions.js";
+import { conditionalItems, shownLayout } from "./shown-layout.js";
+//#region src/app/record-mode/use-shown-layout.ts
+/**
+* The layout items to draw: those meant for the form or the read view as the page is, and those with a record
+* condition while it holds for the saved record. Conditional items stay out while their values load and on a preview.
+*/
+const useShownLayout = (items, scope, editing, preview) => {
+	const conditions = preview ? [] : conditionalItems(items).map((item) => item.when);
+	const held = useConditions(conditions, scope);
+	return shownLayout(items, held, editing, preview);
+};
+//#endregion
+export { useShownLayout };

package/dist/app/record-page.js

@@ -52,6 +52,7 @@ import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
 import { HistorySection } from "./history/history-section.js";
 import { CommentsSection } from "./comments/comments-section.js";
+import { useShownLayout } from "./record-mode/use-shown-layout.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { IncomingCard } from "./incoming-card.js";
@@ -190,7 +191,14 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		editor.change(name, keyValue(target, next.key));
 	};
 	const { fields: fieldTypes } = useProjectUi();
-	const layout = layoutFor(model, view, shown === "read").filter((item) => whenShown(item.when, editing));
+	const scope = {
+		model,
+		record: stored.record,
+		key: recordKey,
+		etag: stored.etag,
+		permissions: stored.permissions
+	};
+	const layout = useShownLayout(layoutFor(model, view, shown === "read"), scope, editing, preview);
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const hasStatus = model.fields.status?.type === "enum";
 	const statusValue = stored.record.status;
@@ -307,13 +315,6 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			}];
 		})
 	});
-	const scope = {
-		model,
-		record: stored.record,
-		key: recordKey,
-		etag: stored.etag,
-		permissions: stored.permissions
-	};
 	const save = async () => {
 		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
 	};

package/dist/app/related-section.js

@@ -5,6 +5,7 @@ import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
 import { useAdminMeta, usePermissions } from "./meta-gate.js";
+import { countQuery } from "./pages/use-layout-data.js";
 import { searchAll } from "../live/search-all.js";
 import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
@@ -82,7 +83,15 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
 	const permissions = usePermissions(item.resource);
 	const [sorting, setSorting] = useState(false);
+	const client = useClient();
+	const counting = Boolean(item.hideEmpty && model && match.filter);
+	const count = useQuery({
+		queryKey: keys.count(item.resource, match.filter ?? ""),
+		enabled: counting,
+		queryFn: () => countQuery(client, model, match.filter ?? "").queryFn()
+	});
 	if (!model) return null;
+	if (item.hideEmpty && (match.isPending || match.filter === null || counting && (count.isPending || count.data === 0))) return null;
 	const opens = relatedOpens(item, model, resources);
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
 	const handOrder = relatedHandOrder(item, model, permissions);

package/dist/package.js

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