LiveDebugger.Components (LiveDebugger v0.1.2)

View Source

This module provides reusable components for LiveDebugger.

Summary

Functions

Renders an alert with

Attributes

  • text (:string) (required)
  • icon (:string) (required)

Renders a button.

Renders a card.

Collapsible element that can be toggled open and closed. It uses the details and summary HTML elements. If you add hide-on-open class to element it will be hidden when collapsible is opened.

Attributes

  • id (:string) (required)
  • title (:string) (required)
  • class (:any) - Defaults to nil.
  • inner_class (:any) - Defaults to nil.
  • open (:boolean) - Defaults to true.

Slots

  • right_panel
  • inner_block

Renders a fullscreen using Fullscreen hook. It can be opened and via browser "open" event (by default) with JS.dispatch or via server event (check example in fullscreen button).

Renders a button which will show a fullscreen when clicked. You can override phx-click value, but remember to push correct event at the end of handle_event function.

Typography component to render headings.

Renders an icon. Not all icons are available. If you want to use an icon check if it exists in the assets/icons folder. name must start with icon-

Renders a button with an icon in it.

Attributes

  • elements (:list) - List of maps with field :title and optional :description. Defaults to [].
  • class (:any) - Additional classes. Defaults to nil.
  • on_element_click (:string) - Defaults to nil.
  • element_click_target (:any) - Defaults to nil.
  • element_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

  • title (required) - Slot that describes how to access title from given map.
  • description - Slot that describes how to access description from given map.

Attributes

  • class (:any) - Defaults to nil.
  • text (:string) - Defaults to "See any issue? Report it".

Used to add Hook to element based on condition.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • size (:string) - Size of the spinner. Defaults to "md".
  • show (:boolean) - show or hide spinner. Defaults to true.
  • Global attributes are accepted.

Attributes

  • rows (:list) - Elements that will be displayed in the list. Defaults to [].
  • class (:any) - Additional classes. Defaults to nil.
  • on_row_click (:string) - Defaults to nil.
  • row_click_target (:any) - Defaults to nil.
  • row_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

  • column - Columns with column labels. Accepts attributes:
    • label (:string) - Column label.
    • class (:any)

Renders a tooltip using Tooltip hook.

Renders topbar with possible link to return to the main page.

Functions

alert(assigns)

Renders an alert with

Attributes

  • variant (:string) (required) - Must be one of "danger", "success", "warning", or "info".
  • class (:any) - Additional classes to add to the alert. Defaults to nil.
  • with_icon (:boolean) - Whether to show an icon. Defaults to false.
  • heading (:string) - Heading for the alert. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

badge(assigns)

Attributes

  • text (:string) (required)
  • icon (:string) (required)

button(assigns)

Renders a button.

Attributes

  • variant (:string) - Defaults to "primary".
  • size (:string) - Defaults to "md".
  • class (:any) - Additional classes to add to the button. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

card(assigns)

Renders a card.

Attributes

  • color (:string) - Defaults to "primary".
  • class (:any) - Additional classes to add to the card. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

collapsible(assigns)

Collapsible element that can be toggled open and closed. It uses the details and summary HTML elements. If you add hide-on-open class to element it will be hidden when collapsible is opened.

Examples

<.collapsible id="collapsible" open={true}>
  <:label>
    <div>Collapsible <div class="hide-on-open">Info when closed</div></div>
  </:label>
  <div>Content</div>
</.collapsible>

Attributes

  • id (:string) (required)
  • class (:any) - CSS class for parent container. Defaults to nil.
  • label_class (:any) - CSS class for the label. Defaults to nil.
  • chevron_class (:any) - CSS class for the chevron icon. Defaults to nil.
  • open (:boolean) - Whether the collapsible is open by default. Defaults to false.
  • icon (:string) - Icon for chevron. It will be rotated 90 degrees when the collapsible is open. Defaults to "icon-chevron-right".
  • Global attributes are accepted.

Slots

  • label (required)
  • inner_block (required)

collapsible_section(assigns)

Attributes

  • id (:string) (required)
  • title (:string) (required)
  • class (:any) - Defaults to nil.
  • inner_class (:any) - Defaults to nil.
  • open (:boolean) - Defaults to true.

Slots

  • right_panel
  • inner_block

fullscreen(assigns)

Renders a fullscreen using Fullscreen hook. It can be opened and via browser "open" event (by default) with JS.dispatch or via server event (check example in fullscreen button).

You can use fullscreen_button to open this fullscreen. You can close the fullscreen using X button or by pressing ESC key.

Attributes

  • id (:string) (required)
  • title (:string) - Title of the fullscreen. Defaults to "".
  • class (:any) - Additional classes to be added to the fullscreen element. Defaults to nil.

Slots

  • inner_block (required)

fullscreen_button(assigns)

Renders a button which will show a fullscreen when clicked. You can override phx-click value, but remember to push correct event at the end of handle_event function.

Examples

<.fullscreen_button
  id="my-fullscreen"
  on_click="open-fullscreen"
  icon="icon-expand"
/>

@impl true
def handle_event("open-fullscreen", _, socket) do
  trace_id = String.to_integer(string_id)

  socket
  |> push_event("my-fullscreen-open", %{})
  |> noreply()
end

Attributes

  • id (:string) (required) - Same as id of the fullscreen.
  • on_click (:any) - Defaults to nil.
  • on_click_target (:any) - Defaults to nil.
  • on_click_data (:any) - Defaults to nil.
  • class (:any) - Additional classes to be added to the button. Defaults to nil.
  • icon (:string) - Icon to be displayed as a button. Defaults to "icon-expand".

h1(assigns)

Typography component to render headings.

Attributes

  • class (:any) - Additional classes to add to the heading. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

icon(assigns)

Renders an icon. Not all icons are available. If you want to use an icon check if it exists in the assets/icons folder. name must start with icon-

Examples

<.icon name="icon-play" />

Attributes

  • name (:string) (required) - The name of the icon. Must start with icon-.
  • class (:any) - Additional classes to add to the icon. Defaults to nil.
  • Global attributes are accepted.

icon_button(assigns)

Renders a button with an icon in it.

Attributes

  • icon (:string) (required) - Icon to be displayed as a button.
  • size (:string) - Size of the button. Defaults to "md".
  • variant (:string) - Variant of the button. Defaults to "primary".
  • class (:any) - Additional classes to add to the button. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["id"].

list(assigns)

Attributes

  • elements (:list) - List of maps with field :title and optional :description. Defaults to [].
  • class (:any) - Additional classes. Defaults to nil.
  • on_element_click (:string) - Defaults to nil.
  • element_click_target (:any) - Defaults to nil.
  • element_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

  • title (required) - Slot that describes how to access title from given map.
  • description - Slot that describes how to access description from given map.

report_issue(assigns)

Attributes

  • class (:any) - Defaults to nil.
  • text (:string) - Defaults to "See any issue? Report it".

show_collapsible_assign(_)

Used to add Hook to element based on condition.

spinner(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • size (:string) - Size of the spinner. Defaults to "md".
  • show (:boolean) - show or hide spinner. Defaults to true.
  • Global attributes are accepted.

table(assigns)

Attributes

  • rows (:list) - Elements that will be displayed in the list. Defaults to [].
  • class (:any) - Additional classes. Defaults to nil.
  • on_row_click (:string) - Defaults to nil.
  • row_click_target (:any) - Defaults to nil.
  • row_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

  • column - Columns with column labels. Accepts attributes:
    • label (:string) - Column label.
    • class (:any)

tooltip(assigns)

Renders a tooltip using Tooltip hook.

Attributes

  • id (:string) (required)
  • content (:string) - Defaults to nil.
  • position (:string) - Defaults to "top".
  • Global attributes are accepted.

Slots

  • inner_block (required)

topbar(assigns)

Renders topbar with possible link to return to the main page.

Attributes

  • return_link? (:boolean) (required) - Whether to show a link to return to the main page.

Slots

  • inner_block