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

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