Catalog Sortable

<.list>

ConnieUI.Sortable

Beneficiary
Email
Amount
Account number
Tax ID
HEEx 
<div class="w-80">
  <ConnieUI.Sortable.list id="catalog-sortable-rows" event="rows:move" target={nil}>
    <:row :for={{key, label} <- @rows} key={key} class="flex items-center gap-2 px-3 py-2">
      <ConnieUI.Foundations.icon name="icon-dots-grid" class="size-4 text-fg-quaternary" />
      {label}
    </:row>
  </ConnieUI.Sortable.list>
</div>

Controls

:string
:string

the event a drop pushes

Set by the example

target class

Docs

No @doc for this component.

Attribute Type Default Description
id * :string
event * :string
the event a drop pushes
target * :any
The component to push to, normally `@myself`. The hook does not read it: `pushEventTo(this.el, …)` walks the DOM to the nearest enclosing LiveComponent, which is this one. It is rendered as `phx-target` because `Phoenix.LiveViewTest.render_hook/3` resolves a target from *that attribute* rather than by walking, and a component whose tests and whose browser disagree about where an event lands is how the last two bugs here got in.
class :any "flex flex-col"
Classes for the list. Deliberately no `gap`: a gap belongs to no row, so the cursor crossing it finds no drop target, the indicator clears and the browser stops offering a move. Rows space themselves from the inside instead.
Slot Slot attributes Description
:row * key, class