@protobase/layout 0.32.0 → 0.33.1

package/dist/block-specs.js

@@ -102,6 +102,19 @@ const blockSpecs = {
 			span: optional("span")
 		}
 	},
+	RecordCards: {
+		children: false,
+		props: {
+			...data,
+			...heading,
+			fields: optional("texts"),
+			cardActions: optional("texts"),
+			limit: optional("integer"),
+			display: optional("text"),
+			empty: optional("text"),
+			span: optional("span")
+		}
+	},
 	Chart: {
 		children: false,
 		props: {

package/dist/blocks.d.ts

@@ -83,6 +83,23 @@ export type RecordRowProps = DataProps & Heading & {
   empty?: string;
   span?: GridSpan;
 };
+/**
+ * What a filter finds as the cards a record page's related section draws with `presentation: 'cards'`, stacked full
+ * width under a heading that is not a card: each card its record's title linking to its page, its `fields` under their
+ * labels with a long value cut short behind Show more, and its `cardActions`' buttons; "View all" opens the rest.
+ */
+export type RecordCardsProps = DataProps & Heading & {
+  /** The fields each card shows, through relations too (`task_id.title`); the list's columns when omitted. */
+  fields?: string[];
+  /** Named actions of the resource's view, as buttons on each card. */
+  cardActions?: string[];
+  /** How many records it shows, the first in `sort` order (the list's when omitted); default 10. */
+  limit?: number;
+  /** The display of the resource's list "View all" opens, such as `cards`; the list's default when omitted. */
+  display?: string;
+  empty?: string;
+  span?: GridSpan;
+};
 /** How a chart draws its groups: bars, a line through a date field's buckets, or a donut of a field's values. */
 export type ChartType = 'bar' | 'line' | 'donut';
 /** How long each bucket of a chart over a date or timestamp field is. */
@@ -169,6 +186,7 @@ export declare const Field: Block<FieldProps>;
 export declare const Table: Block<TableProps>;
 export declare const CardRow: Block<CardRowProps>;
 export declare const RecordRow: Block<RecordRowProps>;
+export declare const RecordCards: Block<RecordCardsProps>;
 export declare const Chart: Block<ChartProps>;
 export declare const Progress: Block<ProgressProps>;
 export declare const ModalForm: Block<ModalFormProps>;

package/dist/blocks.js

@@ -9,6 +9,7 @@ const Field = defineBlock("Field", false);
 const Table = defineBlock("Table", false);
 const CardRow = defineBlock("CardRow", false);
 const RecordRow = defineBlock("RecordRow", false);
+const RecordCards = defineBlock("RecordCards", false);
 const Chart = defineBlock("Chart", false);
 const Progress = defineBlock("Progress", false);
 const ModalForm = defineBlock("ModalForm", false);
@@ -17,4 +18,4 @@ const Show = defineBlock("Show", false);
 const Link = defineBlock("Link", false);
 const Users = defineBlock("Users", false);
 //#endregion
-export { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordRow, Show, Stat, Table, Users };
+export { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordCards, RecordRow, Show, Stat, Table, Users };

package/dist/check-page.js

@@ -59,6 +59,10 @@ const nodeProblems = (node, scope, { models, actions, pages, createPages }) => {
 		case "Table":
 			for (const column of node.props.columns ?? []) if (model && !Object.hasOwn(model.fields, column)) problems.push(`unknown column "${column}" on ${model.name}`);
 			break;
+		case "RecordCards":
+			for (const name of node.props.fields ?? []) path(name, own);
+			for (const name of node.props.cardActions ?? []) if (own !== void 0 && !actions(own).has(name)) problems.push(`no action "${name}" on ${own}; declare it with view('${own}').actions(...)`);
+			break;
 		case "ModalForm":
 			if (!model) break;
 			for (const name of node.props.fields) {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Block, LayoutChild, LayoutChildren, LayoutNode, LayoutValue, isLayoutNode } from "./node.js";
-import { Action, ActionProps, ButtonVariant, Card, CardProps, CardRow, CardRowProps, Chart, ChartBucket, ChartProps, ChartType, DataProps, Elements, Field, FieldProps, Grid, GridProps, GridSpan, Link, LinkProps, ModalForm, ModalFormProps, Page, PageProps, Progress, ProgressProps, RecordCard, RecordCardProps, RecordRow, RecordRowProps, Show, ShowProps, Stat, StatProps, Table, TableProps, Users, UsersProps } from "./blocks.js";
+import { Action, ActionProps, ButtonVariant, Card, CardProps, CardRow, CardRowProps, Chart, ChartBucket, ChartProps, ChartType, DataProps, Elements, Field, FieldProps, Grid, GridProps, GridSpan, Link, LinkProps, ModalForm, ModalFormProps, Page, PageProps, Progress, ProgressProps, RecordCard, RecordCardProps, RecordCards, RecordCardsProps, RecordRow, RecordRowProps, Show, ShowProps, Stat, StatProps, Table, TableProps, Users, UsersProps } from "./blocks.js";
 import { ComponentOptions, component } from "./component.js";
 import { usersPage } from "./presets/users-page.js";
 import { PageDefinition, PageModel, PageOptions, isPageDefinition, page } from "./page.js";
@@ -11,4 +11,4 @@ import { countedResource, evaluateCondition, parseCondition } from "./condition.
 import { PathStep, resolveFieldPath } from "./field-path.js";
 import { jsx_runtime_d_exports } from "./jsx-runtime.js";
 import { FieldRefValue, fieldRef } from "@protobase/schema";
-export { Action, type ActionProps, type Block, type ButtonVariant, Card, type CardProps, CardRow, type CardRowProps, Chart, type ChartBucket, type ChartProps, type ChartType, type ComponentOptions, type DataProps, type Elements, Field, type FieldProps, type FieldRefValue, Grid, type GridProps, type GridSpan, type LayoutChild, type LayoutChildren, type LayoutNode, type LayoutValue, Link, type LinkProps, type Location, ModalForm, type ModalFormProps, Page, type PageDefinition, type PageModel, type PageOptions, type PageProps, type PathStep, Progress, type ProgressProps, RecordCard, type RecordCardProps, RecordRow, type RecordRowProps, Show, type ShowProps, Stat, type StatProps, Table, type TableProps, Users, type UsersProps, checkPages, component, conditionProblems, conditionReadable, countedResource, evaluateCondition, fieldRef, isLayoutNode, isPageDefinition, jsx_runtime_d_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath, usersPage, walkTree };
+export { Action, type ActionProps, type Block, type ButtonVariant, Card, type CardProps, CardRow, type CardRowProps, Chart, type ChartBucket, type ChartProps, type ChartType, type ComponentOptions, type DataProps, type Elements, Field, type FieldProps, type FieldRefValue, Grid, type GridProps, type GridSpan, type LayoutChild, type LayoutChildren, type LayoutNode, type LayoutValue, Link, type LinkProps, type Location, ModalForm, type ModalFormProps, Page, type PageDefinition, type PageModel, type PageOptions, type PageProps, type PathStep, Progress, type ProgressProps, RecordCard, type RecordCardProps, RecordCards, type RecordCardsProps, RecordRow, type RecordRowProps, Show, type ShowProps, Stat, type StatProps, Table, type TableProps, Users, type UsersProps, checkPages, component, conditionProblems, conditionReadable, countedResource, evaluateCondition, fieldRef, isLayoutNode, isPageDefinition, jsx_runtime_d_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath, usersPage, walkTree };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isLayoutNode } from "./node.js";
-import { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordRow, Show, Stat, Table, Users } from "./blocks.js";
+import { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordCards, RecordRow, Show, Stat, Table, Users } from "./blocks.js";
 import { component } from "./component.js";
 import { countedResource, evaluateCondition, parseCondition } from "./condition.js";
 import { walkTree } from "./walk.js";
@@ -11,4 +11,4 @@ import { checkPages } from "./check-page.js";
 import { prunePage } from "./prune-page.js";
 import { jsx_runtime_exports } from "./jsx-runtime.js";
 import { fieldRef } from "@protobase/schema";
-export { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordRow, Show, Stat, Table, Users, checkPages, component, conditionProblems, conditionReadable, countedResource, evaluateCondition, fieldRef, isLayoutNode, isPageDefinition, jsx_runtime_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath, usersPage, walkTree };
+export { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordCards, RecordRow, Show, Stat, Table, Users, checkPages, component, conditionProblems, conditionReadable, countedResource, evaluateCondition, fieldRef, isLayoutNode, isPageDefinition, jsx_runtime_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath, usersPage, walkTree };

package/dist/prune-page.js

@@ -53,6 +53,20 @@ const prune = (node, scope, access) => {
 				} : props
 			};
 		}
+		case "RecordCards": {
+			if (!model || own === void 0) return node;
+			const fields = node.props.fields;
+			const cardActions = node.props.cardActions;
+			const props = {
+				...node.props,
+				...fields && { fields: fields.filter((name) => resolveFieldPath(models, own, name).ok) },
+				...cardActions && { cardActions: cardActions.filter((name) => access.actions(own).has(name)) }
+			};
+			return {
+				...node,
+				props
+			};
+		}
 		case "ModalForm": {
 			if (!model || resource === void 0) return null;
 			if (!(node.props.mode === "create" ? access.permissions[resource]?.create : access.permissions[resource]?.update)) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/layout",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "description": "Composed pages for Protobase, written as JSX that compiles to plain data, with its JSX runtime.",
   "license": "Apache-2.0",
   "repository": {
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@protobase/schema": "0.32.0",
+    "@protobase/schema": "0.33.1",
     "aip-parsers": "^1.0.0"
   }
 }