@protobase/ui 0.25.4 → 0.25.6

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