v1.3.3

DataTable: UI for small screens fix

v1.3.2

DropdownMenu: stacked

v1.3.1

v1.3.1

Folder-shaped UI: a tree beside the table, a trail above it, bulk selection, drag and drop.

New components

• SearchInput - icon, clear button, Escape to clear, optional debounce so a server-backed
  list is not re-fetched on every keystroke.
• Breadcrumb - ancestors are buttons emitting select, the last item is plain text; a deep
  trail collapses its middle below 920px.
• TreeView - selectable, collapsible, keyboard-operable (WAI-ARIA tree). Flat TreeNode list
  in tree order, actions and edit slots per row, disabledKeys, optional drag and drop.
• TreePicker - a button opening a search box above a TreeView, for "move into...". Search
  matches a name or a path (campaigns/q4, leading / anchors to the top level).

DataTable

• selectable: checkbox per row, select-all, and a bar for the count, your own actions
  (selection slot) and Clear. Emits selectionChange; the selection drops whenever the rows
  change, so an action can never reach a row you can no longer see.
• sticky: the toolbar, the head slot and the column headers stay in view (from 920px).
• pageSizes: a rows-per-page select beside the pager, emitting pageSize.
• draggableRows: rowDragStart / rowDragEnd; what a drop means is the page's business.
• The toolbar's search is now a debounced SearchInput.

SelectInput

Keyboard support as a combobox over a listbox: arrows move, Home/End jump, a letter jumps to the
next matching option, Enter/Space choose, Escape closes. Focus stays on the field.

Smaller things

• DropdownMenu takes text beside the icon; a long menu scrolls instead of running off screen.
• DateRangePicker keeps focus on the day you clicked.
• The inline JavaScript moved to PHP through DomHelper and ClientTimer.

Fixes

• Removing a toast or modal left an object where an array was expected: the next one threw
  "not iterable".
• A DataTable given no pageSize built its filter with page size 0.
• "Select none" left hand-ticked rows ticked: checked is only an attribute.

Upgrading

• A paged DataTable shows rows-per-page by default: pageSizes="{[]}" hides it, and it only
  reports the choice - handle (pageSize) to act on it.

• The toolbar moved inside a new .data-table-head wrapper.

• SelectInput's field is role="combobox" with tabindex="0" now, not role="button". Props
  unchanged.

  Full Changelog: v1.2.0...v1.3.1

v1.2.0

Alerts can carry an action, so a toast can offer Undo

DataTable accepts searchValue from its context

DropdownMenu component

v1.1.4: DataTable: stack below 920px, per-column classes, wrapping toolbar

- .table-stacked now turns rows into cards below 920px (was 576px): a table
  with a link, a date and actions is already cramped on a laptop beside a
  sidebar. The toolbar follows the same query (.data-table-toolbar /
  .data-table-actions): search and buttons each take a full row, centred.
- TableColumn takes an optional cssClass for the header cell. Not `$class`:
  parameter names reach the transpiled JS verbatim and `class` is reserved,
  which fails the whole bundle.
- .table-col-wide-only hides a column only between 920 and 1199px, where the
  table is still a grid but narrow; stacked cards show the field again.
- The toolbar's actions are a wrapping flex row with a gap, so buttons that run
  out of room wrap cleanly. Slot buttons need no margins of their own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

v1.1.3

CopyButton

v1.1.2: DataTable: stacked rows on phones, and room for long URLs

A `stacked` DataTable (or any table carrying .table-stacked) turns each row
into a card below 576px: the header hides, cells flow inline behind their
data-label, .table-stacked-main cells lift to the top at full width and the
row actions push to the end. DataTable labels its default cells and hands
column templates the title as `label`, which Viewi drops harmlessly for a
template that has no such prop.

.text-clamp-2 cuts a long value to two lines at any width and .cell-wide
keeps a column from being starved to one character: overflow-wrap:anywhere
takes its min-content to nothing, so a user's 1,000-character target URL
used to wrap down a 100px column and make one row fill the screen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

v1.1.1

Let the DataTable scroll sideways instead of widening the page

The table was emitted bare, so on a phone a list with more than two or three
columns pushed the whole document wider than the viewport and left every other
block on the page scrolling horizontally with it. Wrapping it in
.table-responsive keeps the overflow inside the table.

The if moves from the table to the new wrapper: it was the only thing
suppressing an empty table when the list is empty, and the empty state that
follows is a separate if, not an else, so nothing else had to change.

The toolbar and the paging row take .stack-sm's companion .center-sm (from
Pupils' admin.css) so the action buttons and the pager sit in the middle of
the collapsed column rather than jammed against its right edge.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

v1.1.0

Full Changelog: v1.0.4...v1.1.0

v1.0.4

What's Changed

• Accordion: multiple
• Overlay: SSR fix
• Alert: dismissible
• CheckBox: FormContext - optional
• Modal - header fix
• Added id property to Modal and Alert
• Alerts service - refactored
• DataTable - made CRUD properties optional
• Added BaseColumnTemplate for DataTable column definition
• Styling
• Bump esbuild from 0.18.17 to 0.25.0 in /test/js by @dependabot in #1

New Contributors

• @dependabot made their first contribution in #1

Full Changelog: v1.0.3...v1.0.4