@protobase/layout 0.40.7 → 0.40.8

package/dist/block-specs.js

@@ -107,6 +107,8 @@ const blockSpecs = {
 		props: {
 			...data,
 			...heading,
+			layout: optional("cardsLayout"),
+			cardWidth: optional("cardWidth"),
 			fields: optional("texts"),
 			cardActions: optional("texts"),
 			limit: optional("integer"),
@@ -213,6 +215,13 @@ const ranges = [
 	"1y",
 	"all"
 ];
+const cardsLayouts = ["stack", "carousel"];
+const cardWidths = [
+	"1/4",
+	"1/3",
+	"1/2",
+	"2/3"
+];
 const oneOf = (values) => [(value) => typeof value === "string" && values.includes(value), values.join(", ")];
 const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 const checks = {
@@ -232,6 +241,8 @@ const checks = {
 	chartType: oneOf(chartTypes),
 	bucket: oneOf(buckets),
 	range: oneOf(ranges),
+	cardsLayout: oneOf(cardsLayouts),
+	cardWidth: oneOf(cardWidths),
 	address: [(value) => isObject(value) && !isLayoutNode(value) && typeof value.kind === "string", "an address, such as { kind: 'list', resource: 'orders' }"]
 };
 /** Problems with one element's props and children against its block's spec. */

package/dist/blocks.d.ts

@@ -83,12 +83,20 @@ export type RecordRowProps = DataProps & Heading & {
   empty?: string;
   span?: GridSpan;
 };
+/** How a `RecordCards` lays out its cards: stacked full width, or in one row that scrolls sideways, snapping each card to its left edge. */
+export type CardsLayout = 'stack' | 'carousel';
+/** How wide each card of a carousel is, as a share of the block's width. */
+export type CardWidth = '1/4' | '1/3' | '1/2' | '2/3';
 /**
  * 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 & {
+  /** Default `stack`; `carousel` puts the cards in one row that scrolls sideways. */
+  layout?: CardsLayout;
+  /** How wide each card of a carousel is, as a share of the block's width, so the next one peeks in; default `2/3`. */
+  cardWidth?: CardWidth;
   /** 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. */

package/dist/cards-layout.d.ts

@@ -0,0 +1,8 @@
+import { CardWidth, CardsLayout, RecordCardsProps } from "./blocks.js";
+//#region src/cards-layout.d.ts
+/** How a `RecordCards` lays out its cards, its props' defaults filled in: stacked, and two thirds wide in a carousel. */
+export declare const cardsLayoutOf: ({ layout, cardWidth }: Pick<RecordCardsProps, "layout" | "cardWidth">) => {
+  layout: CardsLayout;
+  cardWidth: CardWidth;
+};
+//#endregion

package/dist/cards-layout.js

@@ -0,0 +1,8 @@
+//#region src/cards-layout.ts
+/** How a `RecordCards` lays out its cards, its props' defaults filled in: stacked, and two thirds wide in a carousel. */
+const cardsLayoutOf = ({ layout, cardWidth }) => ({
+	layout: layout ?? "stack",
+	cardWidth: cardWidth ?? "2/3"
+});
+//#endregion
+export { cardsLayoutOf };

package/dist/check-page.js

@@ -60,6 +60,7 @@ const nodeProblems = (node, scope, { models, actions, pages, createPages }) => {
 			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":
+			if (node.props.cardWidth !== void 0 && node.props.layout !== "carousel") problems.push(`"cardWidth" sizes the cards of a carousel; set layout to 'carousel' or leave it out`);
 			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;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 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, RecordCards, RecordCardsProps, RecordRow, RecordRowProps, Show, ShowProps, Stat, StatProps, Table, TableProps, Users, UsersProps } from "./blocks.js";
+import { Action, ActionProps, ButtonVariant, Card, CardProps, CardRow, CardRowProps, CardWidth, CardsLayout, 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";
+import { cardsLayoutOf } from "./cards-layout.js";
 import { Location, walkTree } from "./walk.js";
 import { checkPages } from "./check-page.js";
 import { conditionProblems, conditionReadable } from "./check-condition.js";
@@ -11,4 +12,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, 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 };
+export { Action, type ActionProps, type Block, type ButtonVariant, Card, type CardProps, CardRow, type CardRowProps, type CardWidth, type CardsLayout, 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, cardsLayoutOf, 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

@@ -5,10 +5,11 @@ import { countedResource, evaluateCondition, parseCondition } from "./condition.
 import { walkTree } from "./walk.js";
 import { isPageDefinition, page } from "./page.js";
 import { usersPage } from "./presets/users-page.js";
+import { cardsLayoutOf } from "./cards-layout.js";
 import { resolveFieldPath } from "./field-path.js";
 import { conditionProblems, conditionReadable } from "./check-condition.js";
 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, 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 };
+export { Action, Card, CardRow, Chart, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, RecordCards, RecordRow, Show, Stat, Table, Users, cardsLayoutOf, checkPages, component, conditionProblems, conditionReadable, countedResource, evaluateCondition, fieldRef, isLayoutNode, isPageDefinition, jsx_runtime_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath, usersPage, walkTree };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/layout",
-  "version": "0.40.7",
+  "version": "0.40.8",
   "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.40.7",
+    "@protobase/schema": "0.40.8",
     "aip-parsers": "^1.0.0"
   }
 }