@scattered-light/loomiere-base-ui 0.17.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/{chunk-DBNGJCTF.js → chunk-2BFNETZZ.js}

@@ -3604,7 +3604,7 @@ var PickerSplitTrigger = React10.forwardRef(function PickerSplitTrigger2({ class
 var SideNav = React10.forwardRef(function SideNav2({ className, collapsed, children, ...props }, ref) {
   return /* @__PURE__ */ jsx("nav", { ref, className: cn("SideNav", className), "data-collapsed": collapsed ? "" : void 0, ...props, children });
 });
-var SideNavItem = React10.forwardRef(function SideNavItem2({ className, current, count, countTone, disabled, hint, children, href, onClick, ...props }, ref) {
+var SideNavItem = React10.forwardRef(function SideNavItem2({ className, current, count, countTone, disabled, hint, nested, children, href, onClick, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "a",
     {
@@ -3615,6 +3615,7 @@ var SideNavItem = React10.forwardRef(function SideNavItem2({ className, current,
       "aria-disabled": disabled ? true : void 0,
       "data-current": current ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-nested": nested ? "" : void 0,
       onClick: disabled ? (event) => event.preventDefault() : onClick,
       ...props,
       children: [
@@ -3872,5 +3873,5 @@ var EditableList = {
 };
 
 export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Popover, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney2 as formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday };
-//# sourceMappingURL=chunk-DBNGJCTF.js.map
-//# sourceMappingURL=chunk-DBNGJCTF.js.map
+//# sourceMappingURL=chunk-2BFNETZZ.js.map
+//# sourceMappingURL=chunk-2BFNETZZ.js.map