@scattered-light/loomiere-base-ui 0.18.0 → 0.19.0

package/README.md

@@ -254,10 +254,18 @@ npm install @tanstack/react-table
 ```
 
 ```tsx
-import { DataList, DataTable, CollectionToolbar, CollectionPagination, defineColumns, useCollection } from '@scattered-light/loomiere-base-ui/custom/collection';
+import { DataList, DataTable, CollectionToolbar, CollectionPagination, CollectionCards, defineColumns, useCollection } from '@scattered-light/loomiere-base-ui/custom/collection';
 import { EditableList } from '@scattered-light/loomiere-base-ui/custom';
 ```
 
+`CollectionCards` shows the current page as a grid of cards, for a page that lists things such as Entities or accounts. Give it `renderCard` (a `StatCard` works well); `CollectionToolbar` and `CollectionPagination` work with it as they do with the table.
+
+```tsx
+<CollectionToolbar collection={collection} searchLabel="Find an Entity" showSort />
+<CollectionCards collection={collection} label="Entities" renderCard={(e) => <StatCard title={e.name} onOpen={() => open(e.id)} />} />
+<CollectionPagination page={collection.page} pageCount={collection.pageCount} total={collection.pageTotal} onPageChange={collection.setPage} label="Entities" />
+```
+
 `useCollection` holds search, sort, filters, selection, grouping, paging, and column order and visibility. DataTable and DataList render that same state. Switch views by changing the component. The plain `<table class="Table">` is unchanged, for static tables and reports.
 
 Columns decide how a value sorts, searches, filters and totals. `rowHeader` names the row. One column may use a tabs filter. Money totals add in minor units. Search is deferred, not debounced.

package/dist/custom/collection/index.d.ts

@@ -477,6 +477,24 @@ interface DataTableTotalRow<T = unknown> {
  */
 declare function DataTable<T>({ collection, label, caption, onRowActivate, getRowHref, activeRowId, rowActions, empty, loading, stickyHeader, stickyRowHeader, narrow, size, totalStyle, totalRows, treeLines, headerStyle, figures, disclosure, getRowKind, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
+interface CollectionCardsProps<T> {
+    collection: CollectionApi<T>;
+    /** Names the list for screen readers: "Entities". */
+    label: string;
+    /** One card for a row, such as a StatCard. */
+    renderCard: (row: T) => React.ReactNode;
+    /** Shown when the data itself is empty. A search with no matches uses the built-in no-results state. */
+    empty?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * The rows of a collection as a grid of cards, for a page that lists things such as Entities or
+ * accounts. Search, filter, sort and paging come from the same collection the table and list use,
+ * so CollectionToolbar and CollectionPagination work with it unchanged. It shows the current page.
+ */
+declare function CollectionCards<T>({ collection, label, renderCard, empty, loading, className }: CollectionCardsProps<T>): react_jsx_runtime.JSX.Element;
+
 interface CollectionPaginationProps {
     /** 1-based. */
     page: number;
@@ -586,4 +604,4 @@ declare const CollectionToolbar: typeof CollectionToolbarImpl & {
  */
 declare function totalText<T>(column: CollectionColumn<T>, rows: readonly T[], locale: string): string;
 
-export { type CellContext, type CollectionAlign, type CollectionApi, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type DataTableTotalRow, type FilterKind, type FilterOption, type ListSlot, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };
+export { type CellContext, type CollectionAlign, type CollectionApi, CollectionCards, type CollectionCardsProps, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type DataTableTotalRow, type FilterKind, type FilterOption, type ListSlot, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };

package/dist/custom/collection/index.js

@@ -771,6 +771,25 @@ function widthStyle(width) {
   if (!width || width === "auto" || width === "min") return void 0;
   return { width: `var(--sl-${width.replace(/\./g, "-")})` };
 }
+function CollectionCards({ collection, label, renderCard, empty, loading, className }) {
+  const rows = collection.pageRows;
+  if (loading && collection.totalCount === 0) {
+    return /* @__PURE__ */ jsx(LoadingNote, { text: collection.messages.loading });
+  }
+  if (!rows.length) {
+    return collection.totalCount > 0 || collection.isFiltered ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        kind: "no-results",
+        title: collection.messages.noResults,
+        description: collection.messages.noResultsDescription,
+        actions: /* @__PURE__ */ jsx(Button, { emphasis: "standard", onClick: collection.clearFilters, children: collection.messages.clearFilters })
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, { children: empty ?? /* @__PURE__ */ jsx(EmptyState, { size: "compact", kind: "start", title: collection.messages.nothingHere }) });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: cn("CollectionCards", className), "aria-label": label, children: rows.map((row) => /* @__PURE__ */ jsx("li", { children: renderCard(row) }, collection.getRowId(row))) });
+}
 function CollectionPagination({
   page,
   pageCount,
@@ -1543,6 +1562,6 @@ function leafRows(row) {
   return children.flatMap(leafRows);
 }
 
-export { CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, totalText, useCollection };
+export { CollectionCards, CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, totalText, useCollection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map