DevactionUI.Kanban (devaction_ui v0.2.3)

Copy Markdown View Source

A board of columns with cards that move: drag a card (with a mouse, a pen or a finger) 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 its counter turns red and it takes no more cards from other columns. While a card is dragged the target shows a dashed "drop here" slot (drop_label) and the card in hand is dimmed where it was. The caller gives the texts (drop_label, full_label, moved_label with __COLUMN__, hint_label), so the library carries no language. hint_label is how to move a card with the keyboard (e.g. "Alt and the arrow keys move the card"): it is read after the name of each card.

A column may carry a tone (a dot of that colour before its title) and a footer slot for what goes under its cards, such as a "new task" button. The columns are lists and the cards their items.

Dragging uses pointer events, so it works the same on a touch screen: a mouse or a pen starts after a few pixels, a finger after holding still for a moment (moving first scrolls the page, as it should). The card in hand is a floating copy that follows the pointer while the original stays dimmed in place, the board and the window scroll by themselves near their edges, and Esc gives the drag up. Buttons, links and fields inside a card do not start a drag. The keyboard (Alt + arrows) keeps working, with the board's hint_label read after each card. count of a column is what its meter shows until the hook runs: give it the number of cards.

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__.
  • hint_label (:string) (required) - how to move a card with the keyboard.
  • 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).
    • tone (:atom) - a DevactionUI.Tone: the colour of the dot before the title.
  • footer - what goes under the cards of one column. Accepts attributes:
    • column (:string) (required) - the id of the column.