@protobase/ui 0.12.1 → 0.12.2

package/dist/app/current-address.js

@@ -1,9 +1,10 @@
+import { defaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
-import { encodeKey, tableDisplay } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema";
 //#region src/app/current-address.ts
-/** What a list shows when its address names nothing: the view's default display, the list's sort, the filters in a bar. */
-const listDefaults = (model, view) => ({
-	display: view?.list?.default ?? tableDisplay,
+/** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
+const listDefaults = (model, view, xs = false) => ({
+	display: defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
 	filterLayout: "bar"
 });

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

@@ -1,6 +1,7 @@
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { cardFields } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
@@ -9,7 +10,6 @@ import { WidgetPart } from "../field-types/widget-part.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
-import { cardFields } from "./list-displays.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";

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

@@ -1,6 +1,6 @@
 import { humanize } from "../../live/naming.js";
-import { parseSort } from "../list-order.js";
 import { displayChoices, sortFields } from "./list-displays.js";
+import { parseSort } from "../list-order.js";
 import { Segmented } from "../../primitives/segmented.js";
 import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,6 +3,16 @@ import { humanize } from "../../live/naming.js";
 import { encodeKey, tableDisplay } from "@protobase/schema";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
+/**
+* The display a list opens in when its address names none. Below the `sm` breakpoint a list with a cards display opens
+* in one: the view's default when that is a cards display, else the first. Otherwise the view's default, or the table.
+*/
+const defaultDisplay = (view, xs) => {
+	const fallback = view?.list?.default ?? tableDisplay;
+	if (!xs) return fallback;
+	const cards = displaysOf(view).filter((display) => display.kind === "cards");
+	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
+};
 /** The display a list shows for the address's `name`: `undefined` for the table, and the view's default for a name it does not have. */
 const shownDisplay = (view, name) => {
 	if (name === tableDisplay) return void 0;
@@ -59,4 +69,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };
+export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };

package/dist/app/list-page.js

@@ -5,6 +5,7 @@ import { Button } from "../primitives/button.js";
 import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -23,7 +24,6 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
-import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { CardsDisplay } from "./displays/cards-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";

package/dist/app/use-app-address.js

@@ -1,3 +1,4 @@
+import { useIsXs } from "../lib/use-media-query.js";
 import { changedList, currentAddress, listDefaults } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { Link, useRouter } from "./router.js";
@@ -13,6 +14,7 @@ import { appPath, readAppPath } from "@protobase/schema";
 const useAppAddress = () => {
 	const { path, params, basePath, navigate } = useRouter();
 	const { pages, resources, views } = useAdminMeta();
+	const xs = useIsXs();
 	const pageNames = useMemo(() => new Set(Object.keys(pages)), [pages]);
 	const query = params.toString();
 	const read = useMemo(() => readAppPath(query ? `${path}?${query}` : path, pageNames), [
@@ -20,7 +22,11 @@ const useAppAddress = () => {
 		query,
 		pageNames
 	]);
-	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource]), [resources, views]);
+	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource], xs), [
+		resources,
+		views,
+		xs
+	]);
 	const address = useMemo(() => currentAddress(read, defaults), [read, defaults]);
 	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
 	return {

package/dist/lib/use-media-query.js

@@ -8,5 +8,7 @@ const useMediaQuery = (query) => useSyncExternalStore((onChange) => {
 }, () => window.matchMedia(query).matches, () => false);
 /** The `md` breakpoint: where the sidebar stops being a drawer and tables stop squeezing. */
 const useIsDesktop = () => useMediaQuery("(min-width: 768px)");
+/** Below the `sm` breakpoint: a phone, where a list opens in its cards display. */
+const useIsXs = () => useMediaQuery("not all and (min-width: 640px)");
 //#endregion
-export { useIsDesktop, useMediaQuery };
+export { useIsDesktop, useIsXs, useMediaQuery };

package/dist/package.js

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