Catalog Selection

<.select_all>

ConnieUI.Selection

Director Agreement — L. Hansen Talent Release — M. Olsen Location Permit — Nyhavn
HEEx
<ConnieUI.Layouts.vstack gap="sm">
  <ConnieUI.Selection.select_all key="catalog-select-all" id="catalog-select-all" total={3} shown_ids={@shown_ids} target={nil} />
  <ConnieUI.Layouts.inline :for={row <- @rows}>
    <ConnieUI.Selection.check key={@controls[:key]} row_id={row.id} target={nil} />
    {row.internal_title}
  </ConnieUI.Layouts.inline>
</ConnieUI.Layouts.vstack>

Controls

:string
:string
:integer

Set by the example

target shown_ids

Docs

The select-all control, for the `:col` slot's `header`. Tri-state, derived in the browser from the boxes themselves, for the same reason as `check/1`: reading the selection here would put it on the `:col` slot, whose attrs and row content are one change-tracking unit, so every tick would re-render every row. With every match on screen, clicking selects them all or clears. Once the query matches more than is on screen it cannot stand for one action, so it becomes a menu naming both scopes. The menu's chevron hangs into the cell's right padding (a negative right margin the width of the chevron and its gap) rather than widening the column: the column is as wide as a row's box either way, so a list does not shift when the control turns into a menu, and the gap to the next column is the same on every list. The cell needs at least that much right padding.
Attribute Type Default Description
key * :string
id * :string
target * :any
shown_ids * :list
the ids on screen, from `paginated`
total * :integer