LiveDebugger.Components (LiveDebugger v0.1.2)
View SourceThis 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 tonil
.inner_class
(:any
) - Defaults tonil
.open
(:boolean
) - Defaults totrue
.
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 tonil
.on_element_click
(:string
) - Defaults tonil
.element_click_target
(:any
) - Defaults tonil
.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 tonil
.text
(:string
) - Defaults to"See any issue? Report it"
.
Used to add Hook to element based on condition.
Attributes
class
(:any
) - CSS class. Defaults tonil
.size
(:string
) - Size of the spinner. Defaults to"md"
.show
(:boolean
) - show or hide spinner. Defaults totrue
.- Global attributes are accepted.
Attributes
rows
(:list
) - Elements that will be displayed in the list. Defaults to[]
.class
(:any
) - Additional classes. Defaults tonil
.on_row_click
(:string
) - Defaults tonil
.row_click_target
(:any
) - Defaults tonil
.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
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 tonil
.with_icon
(:boolean
) - Whether to show an icon. Defaults tofalse
.heading
(:string
) - Heading for the alert. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Attributes
text
(:string
) (required)icon
(:string
) (required)
Renders a button.
Attributes
variant
(:string
) - Defaults to"primary"
.size
(:string
) - Defaults to"md"
.class
(:any
) - Additional classes to add to the button. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a card.
Attributes
color
(:string
) - Defaults to"primary"
.class
(:any
) - Additional classes to add to the card. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
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 tonil
.label_class
(:any
) - CSS class for the label. Defaults tonil
.chevron_class
(:any
) - CSS class for the chevron icon. Defaults tonil
.open
(:boolean
) - Whether the collapsible is open by default. Defaults tofalse
.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)
Attributes
id
(:string
) (required)title
(:string
) (required)class
(:any
) - Defaults tonil
.inner_class
(:any
) - Defaults tonil
.open
(:boolean
) - Defaults totrue
.
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).
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 tonil
.
Slots
inner_block
(required)
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 asid
of the fullscreen.on_click
(:any
) - Defaults tonil
.on_click_target
(:any
) - Defaults tonil
.on_click_data
(:any
) - Defaults tonil
.class
(:any
) - Additional classes to be added to the button. Defaults tonil
.icon
(:string
) - Icon to be displayed as a button. Defaults to"icon-expand"
.
Typography component to render headings.
Attributes
class
(:any
) - Additional classes to add to the heading. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
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 withicon-
.class
(:any
) - Additional classes to add to the icon. Defaults tonil
.- Global attributes are accepted.
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 tonil
.- Global attributes are accepted. Supports all globals plus:
["id"]
.
Attributes
elements
(:list
) - List of maps with field:title
and optional:description
. Defaults to[]
.class
(:any
) - Additional classes. Defaults tonil
.on_element_click
(:string
) - Defaults tonil
.element_click_target
(:any
) - Defaults tonil
.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 tonil
.text
(:string
) - Defaults to"See any issue? Report it"
.
Used to add Hook to element based on condition.
Attributes
class
(:any
) - CSS class. Defaults tonil
.size
(:string
) - Size of the spinner. Defaults to"md"
.show
(:boolean
) - show or hide spinner. Defaults totrue
.- Global attributes are accepted.
Attributes
rows
(:list
) - Elements that will be displayed in the list. Defaults to[]
.class
(:any
) - Additional classes. Defaults tonil
.on_row_click
(:string
) - Defaults tonil
.row_click_target
(:any
) - Defaults tonil
.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.
Attributes
id
(:string
) (required)content
(:string
) - Defaults tonil
.position
(:string
) - Defaults to"top"
.- Global attributes are accepted.
Slots
inner_block
(required)
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