@protobase/ui 0.12.14 → 0.12.16

package/dist/app/displays/card-carousel.js

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/cn.js";
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { cardPhotoList, cardPhotosRequest, shownPhoto } from "./card-photos.js";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/displays/card-carousel.tsx
+const arrow = "pointer-events-auto absolute top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm opacity-0 transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 [@media(hover:none)]:opacity-100";
+/**
+* A card whose picture steps through its photos with arrows, the card's own image first. The photos load when an arrow
+* is first pressed, so the list loads as it does without them. The arrows sit over the card's link, beside it in the
+* document, so pressing one does not open the record; the card's list item must be `relative group/card`.
+*/
+const CardCarousel = ({ photos, recordKey, cover, children }) => {
+	const client = useClient();
+	const [opened, setOpened] = useState(false);
+	const [step, setStep] = useState(0);
+	const request = cardPhotosRequest(photos, recordKey);
+	const loaded = useQuery({
+		queryKey: keys.list(photos.resource, request.filter, request.orderBy ?? "", request.pageSize, `card-photos:${photos.image}`),
+		enabled: opened,
+		queryFn: async () => (await client.list(photos.resource, request)).items.map((item) => item[photos.image])
+	});
+	const list = cardPhotoList(cover, loaded.data ?? []);
+	const index = shownPhoto(step, list.length);
+	const press = (by) => {
+		setOpened(true);
+		setStep((current) => current + by);
+	};
+	const single = loaded.data !== void 0 && list.length < 2;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(list[index]), !single && /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute inset-x-px top-px aspect-[4/3]",
+		"aria-busy": loaded.isFetching,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Previous photo",
+				className: cn(arrow, "left-2"),
+				onClick: () => press(-1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Next photo",
+				className: cn(arrow, "right-2"),
+				onClick: () => press(1),
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			loaded.error && /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-x-2 top-2 rounded bg-background/85 px-1.5 py-0.5 text-center text-xs text-danger-text",
+				children: "Could not load the photos"
+			}),
+			loaded.data !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: "absolute inset-x-0 bottom-2 flex justify-center",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: `Photo ${index + 1} of ${list.length}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 text-[11px] tabular-nums leading-none",
+					"aria-hidden": true,
+					children: list.length > 10 ? `${index + 1} / ${list.length}` : list.map((_, dot) => /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dot === index ? "bg-foreground" : "bg-foreground/35") }, dot))
+				})]
+			})
+		]
+	})] });
+};
+//#endregion
+export { CardCarousel };

package/dist/app/displays/card-photos.js

@@ -0,0 +1,21 @@
+import { isStoredFile } from "../../live/file-values.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/displays/card-photos.ts
+const where = createWhere();
+/** The list request for a card's photos: the records pointing at the card's, in the display's order, with only their image. */
+const cardPhotosRequest = (photos, recordKey) => ({
+	filter: printFilter(where.eq(photos.field, recordKey)),
+	...photos.sort !== void 0 && { orderBy: photos.sort },
+	fields: [photos.image],
+	pageSize: 100
+});
+/** The files a card steps through: its own image first, then the loaded photos less that same file; empty values are left out. */
+const cardPhotoList = (cover, loaded) => {
+	const coverUri = isStoredFile(cover) ? cover.uri : void 0;
+	const rest = loaded.filter((photo) => isStoredFile(photo) && photo.uri !== coverUri);
+	return coverUri === void 0 ? rest : [cover, ...rest];
+};
+/** The position shown after `step` presses forward, or back when negative, wrapping around both ends. */
+const shownPhoto = (step, count) => count === 0 ? 0 : (step % count + count) % count;
+//#endregion
+export { cardPhotoList, cardPhotosRequest, shownPhoto };

package/dist/app/displays/cards-display.js

@@ -11,6 +11,7 @@ import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { namedIcon } from "../named-icon.js";
 import { ValueBadge } from "../value-badge.js";
+import { CardCarousel } from "./card-carousel.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
@@ -39,9 +40,10 @@ const MetaValue = ({ icon, children }) => {
 	});
 };
 /**
-* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it,
-* small meta fields below, those with a value, and the labels of its flags that are true; or, with a `card` component,
-* what it draws of the row, the built-in content again when it is missing or throws.
+* A card per record, opening its page: its image across the top, with arrows through its photos when the display names
+* them, the title over the subtitle, the badge beside it, small meta fields below, those with a value, and the labels of
+* its flags that are true; or, with a `card` component, what it draws of the row, the built-in content again when it is
+* missing or throws.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
 	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
@@ -76,6 +78,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 		});
 	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	const photos = Card ? void 0 : display.photos;
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
 		empty: `No ${plural} match.`,
@@ -89,8 +92,9 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
 				const raised = flags.filter((name) => row.record[name] === true);
-				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
-					image !== void 0 && /* @__PURE__ */ jsx(CardImage, { value: row.record[image] }),
+				const cover = image === void 0 ? void 0 : row.record[image];
+				const builtIn = (photo) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					(image !== void 0 || photos !== void 0) && /* @__PURE__ */ jsx(CardImage, { value: photo }),
 					/* @__PURE__ */ jsxs("span", {
 						className: "flex items-start justify-between gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -128,7 +132,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						}) }, name))
 					})
 				] });
-				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {
+				const card = (photo) => /* @__PURE__ */ jsx(AppLink, {
 					to: {
 						kind: "record",
 						resource: model.name,
@@ -137,10 +141,19 @@ const CardsDisplay = ({ model, view, display, list }) => {
 					className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
 					children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
 						name: display.card,
-						fallback: builtIn,
+						fallback: builtIn(photo),
 						children: /* @__PURE__ */ jsx(Card, { row })
-					}) : builtIn
-				}) }, row.key);
+					}) : builtIn(photo)
+				});
+				return /* @__PURE__ */ jsx("li", {
+					className: photos ? "group/card relative" : void 0,
+					children: photos ? /* @__PURE__ */ jsx(CardCarousel, {
+						photos,
+						recordKey: row.key,
+						cover,
+						children: card
+					}) : card(cover)
+				}, row.key);
 			})
 		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});

package/dist/package.js

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