Dala.Preview.Canvas (dala v0.0.7)

Copy Markdown View Source

Interactive drag-and-drop UI design canvas for Dala.

A Phoenix LiveView that provides a visual design tool with:

  • Component palette (left sidebar)
  • Design canvas with live preview (center)
  • Property editor (right sidebar)
  • Code preview panel (bottom, collapsible)

Uses the Dala UI tree map format internally with unique IDs for tracking. IDs are stripped during code generation.

Summary

Functions

canvas_footer(assigns)
code_panel(assigns)
design_canvas(assigns)
header_bar(assigns)
live_preview(assigns)
palette(assigns)
prop_editor(assigns)
prop_field(assigns)
property_editor(assigns)
tree_node(assigns)

Functions

canvas_footer(assigns)

Attributes

  • module_name (:string) (required)

code_panel(assigns)

Attributes

  • tree (:map) (required)
  • code_style (:atom) (required)
  • module_name (:string) (required)

design_canvas(assigns)

Attributes

  • tree (:map) (required)
  • selected_id (:any) - Defaults to nil.

header_bar(assigns)

Attributes

  • code_style (:atom) (required)
  • show_code (:boolean) (required)
  • module_name (:string) (required)

live_preview(assigns)

Attributes

  • tree (:map) (required)

palette(assigns)

prop_editor(assigns)

Attributes

  • node (:map) (required)

prop_field(assigns)

Attributes

  • node (:map) (required)
  • prop_name (:atom) (required)
  • prop_type (:atom) (required)
  • default (:any) - Defaults to nil.

property_editor(assigns)

Attributes

  • tree (:map) (required)
  • selected_id (:any) - Defaults to nil.

tree_node(assigns)

Attributes

  • node (:map) (required)
  • selected_id (:any) - Defaults to nil.
  • depth (:integer) - Defaults to 0.