@protobase/ui 0.33.0 → 0.33.1

package/dist/app/embedded-list/embedded-list.js

@@ -9,8 +9,10 @@ import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { can } from "../permissions.js";
-import { DataGrid } from "../../data-grid/data-grid.js";
+import { text } from "./messages.js";
+import { cutOffNote } from "./cut-off-note.js";
 import { viewAllAddress } from "./embedded-display.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
 import { BoardDisplay } from "../displays/board-display.js";
 import { CalendarDisplay } from "../displays/calendar-display.js";
 import { TimelineDisplay } from "../displays/timeline-display.js";
@@ -19,8 +21,6 @@ import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
 import { DisplaySwitch } from "../displays/display-controls.js";
 import { embeddedColumns } from "./embedded-columns.js";
-import { text } from "./messages.js";
-import { cutOffNote } from "./cut-off-note.js";
 import { embeddedRowTargets } from "./embedded-row-targets.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";

package/dist/app/pages/blocks/record-cards.js

@@ -0,0 +1,40 @@
+import { SectionContent } from "../../../record-view/section.js";
+import { listColumnNames } from "../../../live/columns-from-model.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { propsOf } from "./block-props.js";
+import { RelatedCards } from "../../related-cards/related-cards.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/record-cards.tsx
+/**
+* What a filter finds as the record page's related cards, stacked full width under a heading like a record page
+* section's, with no card frame around them, so no card sits in another.
+*/
+const RecordCardsBlock = ({ node, slots }) => {
+	const { resource, filter = "", sort = "", fields, cardActions = [], limit = 10, display, title, description, empty } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	const view = views[model.name];
+	return /* @__PURE__ */ jsx("section", {
+		className: "min-w-0",
+		"aria-label": title,
+		children: /* @__PURE__ */ jsx(SectionContent, {
+			title,
+			help: description,
+			actions: slots.actions,
+			children: /* @__PURE__ */ jsx(RelatedCards, {
+				model,
+				view,
+				filter,
+				sort,
+				fields: fields ?? listColumnNames(model, view),
+				actions: cardActions,
+				limit,
+				display,
+				empty
+			})
+		})
+	});
+};
+//#endregion
+export { RecordCardsBlock };

package/dist/app/pages/render-node.js

@@ -14,6 +14,7 @@ import { ModalFormBlock } from "./blocks/modal-form.js";
 import { PageBlock } from "./blocks/page-block.js";
 import { ProgressBlock } from "./blocks/progress.js";
 import { RecordCardBlock } from "./blocks/record-card.js";
+import { RecordCardsBlock } from "./blocks/record-cards.js";
 import { RecordRowBlock } from "./blocks/record-row.js";
 import { ShowBlock } from "./blocks/show.js";
 import { StatBlock } from "./blocks/stat.js";
@@ -34,6 +35,7 @@ const blocks = {
 	Table: TableBlock,
 	CardRow: CardRowBlock,
 	RecordRow: RecordRowBlock,
+	RecordCards: RecordCardsBlock,
 	Chart: ChartBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,

package/dist/app/record-row/record-row-body.js

@@ -7,8 +7,8 @@ import { defaultOrderBy } from "../list-order.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
-import { useLiveRows } from "../../live/use-live-rows.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
 import { FilterChipList } from "../searches/filter-chip-list.js";
 import { useFilterChips } from "../searches/use-filter-chips.js";
 import { text } from "./messages.js";

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

@@ -5,9 +5,9 @@ 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 { embeddedDisplay, viewAllAddress } from "../embedded-list/embedded-display.js";
 import { text as text$1 } from "./messages.js";
 import { RelatedCard } from "./related-card.js";
 import { ArrowRight } from "lucide-react";

package/dist/app/related-section.js

@@ -6,6 +6,7 @@ import { listColumnNames } from "../live/columns-from-model.js";
 import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
 import { countQuery } from "./pages/use-layout-data.js";
+import { RelatedCards } from "./related-cards/related-cards.js";
 import { searchAll } from "../live/search-all.js";
 import { relatedHandOrder } from "./hand-order/hand-order.js";
 import { relatedOpens } from "./related-opens.js";
@@ -14,7 +15,6 @@ 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";

package/dist/package.js

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

package/dist/record-view/section.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from "react";
 //#region src/record-view/section.d.ts
-/** A titled part of the record page; `actions` sit at the end of the title's line. */
-export declare const Section: ({ title, help, actions, children }: {
-  title: string;
+type SectionProps = {
+  title?: string;
   help?: string;
   actions?: ReactNode;
   children: ReactNode;
+};
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+export declare const Section: ({ title, help, actions, children }: SectionProps & {
+  title: string;
 }) => import("react").JSX.Element;
 //#endregion

package/dist/record-view/section.js

@@ -1,28 +1,35 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/section.tsx
-/** A titled part of the record page; `actions` sit at the end of the title's line. */
-const Section = ({ title, help, actions, children }) => {
-	const heading = /* @__PURE__ */ jsx("h2", {
+/** A section's title, its `actions` at the end of the title's line and its help, over its content, with no frame or spacing around them. */
+const SectionContent = ({ title, help, actions, children }) => {
+	const heading = title ? /* @__PURE__ */ jsx("h2", {
 		className: "text-[16px] font-semibold text-foreground",
 		children: title
-	});
-	return /* @__PURE__ */ jsxs("section", {
-		className: "py-8 first:pt-8",
-		children: [
-			actions ? /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
-				children: [heading, actions]
-			}) : heading,
-			help && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 max-w-xl leading-6 text-muted-foreground",
-				children: help
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-5",
-				children
-			})
-		]
-	});
+	}) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		actions ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
+			children: [heading ?? /* @__PURE__ */ jsx("span", {}), actions]
+		}) : heading,
+		help && /* @__PURE__ */ jsx("p", {
+			className: "mt-1 max-w-xl leading-6 text-muted-foreground",
+			children: help
+		}),
+		Boolean(heading || actions || help) ? /* @__PURE__ */ jsx("div", {
+			className: "mt-5",
+			children
+		}) : children
+	] });
 };
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+const Section = ({ title, help, actions, children }) => /* @__PURE__ */ jsx("section", {
+	className: "py-8 first:pt-8",
+	children: /* @__PURE__ */ jsx(SectionContent, {
+		title,
+		help,
+		actions,
+		children
+	})
+});
 //#endregion
-export { Section };
+export { Section, SectionContent };