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
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 |
|---|---|---|---|
| No data found. | |||
| key * | :string |
|
|
| id * | :string |
|
|
| target * | :any |
|
|
| shown_ids * | :list |
the ids on screen, from `paginated`
|
|
| total * | :integer |
|
|