PhiaUi.Components.SortableGrid (phia_ui v0.1.17)

Copy Markdown View Source

Sortable grid drag-and-drop components for PhiaUI.

Provides sortable_grid/1 and sortable_grid_item/1. Pair with the PhiaSortableGrid hook for 2D nearest-neighbour drag-and-drop reordering.

Example

<.sortable_grid id="photo-grid" cols={3} on_reorder="grid_reorder">
  <.sortable_grid_item :for={{img, idx} <- Enum.with_index(@images)}
    id={"img-#{img.id}"} index={idx} aspect="square">
    <img src={img.url} class="w-full h-full object-cover" />
  </.sortable_grid_item>
</.sortable_grid>

Summary

Functions

sortable_grid(assigns)

Renders a sortable grid container backed by the PhiaSortableGrid hook.

sortable_grid_item(assigns)

Renders a single sortable grid cell.

Functions

sortable_grid(assigns)

Renders a sortable grid container backed by the PhiaSortableGrid hook.

The hook uses 2D Euclidean nearest-neighbour comparison to find the closest grid cell when dragging, giving a natural feel for image galleries and card grids. Emits on_reorder with %{old_index: N, new_index: M, id: "dom-id"}.

Attributes

  • id (:string) (required)
  • cols (:integer) - Defaults to 3.
  • gap (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • on_reorder (:string) - Defaults to "grid_reorder".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

sortable_grid_item(assigns)

Renders a single sortable grid cell.

The aspect attribute locks the cell ratio: "square" (1:1), "video" (16:9), or "auto" (natural height). The hook sets data-dragging during the drag.

Attributes

  • id (:string) (required)
  • index (:integer) (required)
  • aspect (:string) - Defaults to "auto". Must be one of "square", "video", or "auto".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)