DevactionUI.Kanban (devaction_ui v0.1.0)

Copy Markdown View Source

A board of columns with cards that move: drag a card to another column or to another place in its own, or focus it and press Alt + arrow keys (←→ between columns, ↑↓ within one). The hook moves the card in the page at once and tells the LiveView, which stays the source of truth: it receives the event with %{"card" => id, "from" => column, "to" => column, "index" => position} and re-renders. To refuse a move, answer with {:reply, %{rejected: true}, socket} and the hook puts the card back where it was.

A column may have a wip limit: when it is full it turns red and takes no more cards from other columns. While a card is dragged the target shows a dashed "drop here" slot (drop_label). The caller gives the texts (drop_label, full_label, moved_label with __COLUMN__), so the library carries no language.

Summary

Functions

card(assigns)

Attributes

  • id (:string) (required) - the card's id; it is what the move event carries.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

kanban(assigns)

Attributes

  • id (:string) (required)
  • label (:string) (required) - the board's name, for assistive technology.
  • event (:string) - the event sent to the LiveView when a card moves. Defaults to "move_card".
  • drop_label (:string) (required)
  • full_label (:string) (required)
  • moved_label (:string) (required) - with __COLUMN__.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • column (required) - Accepts attributes:
    • id (:string) (required)
    • title (:string) (required)
    • wip (:integer) - the most cards the column takes.
    • count (:integer) - how many cards it has now (the hook keeps it after a move).