@protobase/ui 0.25.5 → 0.25.7

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

@@ -6,9 +6,11 @@ import { propsOf } from "./block-props.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/action.tsx
-/** A button for a named action of the resource's view, asking first when the action has `confirm` or `inputs`. */
-const ActionBlock = ({ node }) => {
-	const { name, resource, label, variant } = propsOf(node);
+/**
+* A button for a named action of `resource`'s view, by default of the record around it, on that record, asking first
+* when the action has `confirm` or `inputs`; nothing when the view has no such action for the user.
+*/
+const ActionButton = ({ name, resource, label, variant }) => {
 	const scope = useLayoutRecord();
 	const action = useRunAction(resource ?? scope?.model.name ?? "", name, resource === void 0 || resource === scope?.model.name ? scope : void 0);
 	const [asking, setAsking] = useState(false);
@@ -38,5 +40,7 @@ const ActionBlock = ({ node }) => {
 		}
 	})] });
 };
+/** An Action block: its button. */
+const ActionBlock = ({ node }) => /* @__PURE__ */ jsx(ActionButton, { ...propsOf(node) });
 //#endregion
-export { ActionBlock };
+export { ActionBlock, ActionButton };

package/dist/app/related-cards/clamped.js

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/related-cards/clamped.tsx
+/**
+* Its content cut off at a few lines' height with "Show more" under it when it is taller, which shows it all; the cut
+* hides the rest rather than scrolling it, so the page keeps its one scrollbar.
+*/
+const Clamped = ({ children }) => {
+	const content = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [taller, setTaller] = useState(false);
+	useLayoutEffect(() => {
+		const box = content.current;
+		if (!box) return;
+		const measure = () => setTaller(box.scrollHeight > box.parentElement.clientHeight + 1);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-start gap-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("w-full min-w-0", !open && "max-h-40 overflow-hidden"),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: content,
+				children
+			})
+		}), (taller || open) && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "-ml-2",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			children: open ? text("showLess") : text("showMore")
+		})]
+	});
+};
+//#endregion
+export { Clamped };

package/dist/app/related-cards/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/related-cards/messages.ts
+const text = defineMessages({
+	en: {
+		showMore: "Show more",
+		showLess: "Show less",
+		couldNotLoad: "Could not load",
+		nothingYet: "Nothing here yet."
+	},
+	nl: {
+		showMore: "Meer tonen",
+		showLess: "Minder tonen",
+		couldNotLoad: "Kon niet laden",
+		nothingYet: "Hier staat nog niets."
+	}
+});
+//#endregion
+export { text };

package/dist/app/related-cards/related-card.js

@@ -0,0 +1,66 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { RecordScope } from "../pages/record-scope.js";
+import { ActionButton } from "../pages/blocks/action.js";
+import { FieldValue } from "../pages/field-value.js";
+import { usePathValue } from "../pages/use-path-value.js";
+import { fieldLabel } from "../pages/blocks/field.js";
+import { Clamped } from "./clamped.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/related-cards/related-card.tsx
+const CardField = ({ scope, path }) => {
+	const { views } = useAdminMeta();
+	const value = usePathValue(scope, path);
+	if (value.state === "missing") return null;
+	const label = fieldLabel(path, value.state === "ready" ? views[value.model.name]?.fields[value.field.name]?.label : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-body text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "mt-0.5",
+			children: value.state === "loading" ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) : /* @__PURE__ */ jsx(Clamped, { children: /* @__PURE__ */ jsx(FieldValue, {
+				model: value.model,
+				field: value.field,
+				value: value.value
+			}) })
+		})]
+	});
+};
+/**
+* A related record as a card: its title linking to its page, its `fields` under their labels and the buttons of its
+* view's `actions`, run on it as everywhere else.
+*/
+const RelatedCard = ({ scope, view, fields, actions }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+	children: [
+		/* @__PURE__ */ jsx(AppLink, {
+			to: {
+				kind: "record",
+				resource: scope.model.name,
+				key: recordKey(scope.model, scope.record)
+			},
+			className: "self-start font-medium text-primary-text hover:underline",
+			children: recordTitle(scope.model, view, scope.record, scope.key)
+		}),
+		fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-3",
+			children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
+				scope,
+				path
+			}, path))
+		}),
+		actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
+			value: scope,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+			})
+		})
+	]
+});
+//#endregion
+export { RelatedCard };

package/dist/app/related-cards/related-cards.js

@@ -0,0 +1,85 @@
+import { useIsXs } from "../../lib/use-media-query.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { defaultOrderBy } from "../list-order.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { scopeOf, useCount, useListPage } from "../pages/use-layout-data.js";
+import { embeddedDisplay, viewAllAddress } from "../embedded-list/embedded-display.js";
+import { text } from "../embedded-list/messages.js";
+import { cutOffNote } from "../embedded-list/cut-off-note.js";
+import { text as text$1 } from "./messages.js";
+import { RelatedCard } from "./related-card.js";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/related-cards/related-cards.tsx
+/**
+* The first `limit` records of a list as cards stacked full width, each with its fields and its actions' buttons, and a
+* link to the whole list beside a note such as "The first 10 of 37." when there are more.
+*/
+const RelatedCards = ({ model, view, filter, sort, fields, actions, limit, display, empty }) => {
+	const xs = useIsXs();
+	const orderBy = sort || defaultOrderBy(model, view);
+	const page = useListPage(model, {
+		filter,
+		sort: orderBy,
+		pageSize: limit
+	});
+	const count = useCount(model, filter);
+	if (page.isPending) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: Array.from({ length: 2 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" }, index))
+	});
+	if (page.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: text$1("couldNotLoad"),
+		error: page.error
+	});
+	const rows = page.data.items;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: empty ?? text$1("nothingYet")
+	});
+	const note = count.data === void 0 ? void 0 : cutOffNote(rows.length, count.data, false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-3",
+			children: rows.map((row) => {
+				const scope = scopeOf(model, row);
+				return /* @__PURE__ */ jsx(RelatedCard, {
+					scope,
+					view,
+					fields,
+					actions
+				}, scope.key);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: note
+			}), /* @__PURE__ */ jsxs(AppLink, {
+				to: viewAllAddress(model, view, xs, {
+					filter,
+					orderBy,
+					display: embeddedDisplay(view, xs, { preferred: display })
+				}),
+				className: "flex items-center gap-1 font-medium text-primary-text hover:underline",
+				children: [
+					text("viewAll"),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: (view?.names?.plural ?? humanize(model.name)).toLowerCase()
+					}),
+					/* @__PURE__ */ jsx(ArrowRight, {
+						className: "size-3.5",
+						"aria-hidden": true
+					})
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { RelatedCards };

package/dist/app/related-section.js

@@ -14,6 +14,7 @@ import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { text } from "./record-messages.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { ReorderButton } from "./hand-order/reorder-button.js";
+import { RelatedCards } from "./related-cards/related-cards.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
@@ -78,7 +79,7 @@ const Empty = ({ empty }) => /* @__PURE__ */ jsx("p", {
 });
 /**
 * A record page section listing the first records of another resource that point at this record, directly or through
-* a join resource, in the list page's table or display, with a link to them all in the list. When they are ordered by
+* a join resource, in the list page's table or display, or as cards with their actions, with a link to them all in the list. When they are ordered by
 * hand within this record, **Reorder** shows them all in their order, to be moved by their drag handles.
 */
 const RelatedSection = ({ item, value, owner }) => {
@@ -100,6 +101,25 @@ const RelatedSection = ({ item, value, owner }) => {
 	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 listed = (list) => match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+		title: text("couldNotLoadRelated"),
+		error: match.error
+	}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { empty: item.empty }) : list(match.filter);
+	if (item.presentation === "cards") return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		help: item.help,
+		children: listed((filter) => /* @__PURE__ */ jsx(RelatedCards, {
+			model,
+			view,
+			filter,
+			sort: item.sort ?? "",
+			fields: columns,
+			actions: item.actions ?? [],
+			limit: item.limit ?? 10,
+			display: item.display,
+			empty: item.empty
+		}))
+	});
 	const handOrder = relatedHandOrder(item, model, permissions);
 	const displaySwitch = /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
 		view,
@@ -130,20 +150,17 @@ const RelatedSection = ({ item, value, owner }) => {
 		title: item.title,
 		help: item.help,
 		actions,
-		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-			title: text("couldNotLoadRelated"),
-			error: match.error
-		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { empty: item.empty }) : /* @__PURE__ */ jsx(EmbeddedList, {
+		children: listed((filter) => /* @__PURE__ */ jsx(EmbeddedList, {
 			model,
 			view,
-			filter: match.filter,
+			filter,
 			sort: item.sort ?? "",
 			columns,
 			limit: item.limit ?? 10,
 			display,
 			empty: item.empty,
 			opens
-		}, match.filter)
+		}, filter))
 	});
 };
 //#endregion

package/dist/package.js

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