API Reference supabase_surface v0.4.0
Modules
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Basic Badges
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
With Dot
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
States
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Divider with content
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
TODO: investigate how to correctly apply styling, currently "sbui-tab-button-underline" and "sbui-tab-button-underline--active" are overridden by other styles
A Surface component that handles auth for Supabase.
Properties
- color :string, values: ["gray", "red", "yellow", "green", "blue", "indigo", "purple", "pink"] - The color for the badge.
- size :string, values: ["large", "small"], default: "small" - The size of the badge.
- dot :boolean, default: false - .
Slots
- default, required: true - Content of the badge.
A html button with predefined sizes, types and optional link
functionality.
Properties
- light :boolean, default: false - If
light
style should be used.. - orientation :string, values: ["left", "right", "center"], default: "center" - The orientation in case content is provided.
- type :string, values: ["horizontal", "vertical"], default: "horizontal" - The divider type.
- class :css_class - CSS classes to apply to the divider.
Slots
- default, required: false - The content.
A dropdown component using alpinejs.
Properties
- to :string - When provided, the dropdown item will serve as a link using LivePatch for method :get and a <button /> for :post.
- method :atom, default: :get - The method to use when used as a link.
- opts :keyword, default: [] - Additional options passed to the component.
- class :css_class - Additional CSS class(es) to apply to the dropdown item.
Slots
- default, required: true
- icon, required: false - An optional icon for this dropdown item. See DropdownItemIcon..
This component is used together with DropdownItem to add an icon to the dropdown item.
An input field that let the user enter one or multiple e-mails.
Provides a wrapper for Phoenix.HTML.Form's email_input/3
function.
All options passed via opts
will be sent to email_input/3
, value
and
class
can be set directly and will override anything in opts
.
An input field that let the user enter a password.
Provides a wrapper for Phoenix.HTML.Form's password_input/3
function.
All options passed via opts
will be sent to password_input/3
, value
and
class
can be set directly and will override anything in opts
.
Properties
- id :string, required: true - The id of the live view.
- session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view. .
An input field that let the user enter a single-line text.
Provides a wrapper for Phoenix.HTML.Form's text_input/3
function.
All options passed via opts
will be sent to text_input/3
, value
and
class
can be set directly and will override anything in opts
.
Properties
- id :string, required: true - The id of the live component (required by LiveView for stateful components). .
- title :string - The title for the Modal.
- description :string - Description for the Modal.
- layout :string, values: ["horizontal", "vertical"], default: "horizontal" - The layout of the Modal.
- hide_footer :boolean, default: false - Flag to hide the Modal footer.
- size :string, values: ["tiny", "small", "medium", "large"], default: "large" - The Modal size.
- variant :string, values: ["danger", "warning", "success"], default: "success" - Variant for the Modal.
- visible :boolean, default: false - If the Modal is visible.
- class :css_class, default: "" - Additional CSS classes.
- overlay_class :css_class, default: "" - Additional CSS classes for the overlay.
- footer_background :boolean, default: false - To use a background for the footer.
- align_footer :string, values: ["right", "left"], default: "left" - Where to put the buttons in the footer.
- cancel_text :string, default: "Cancel"
- confirm_text :string, default: "Confirm"
- closable :boolean, default: false - Add 'x' icon to close the Modal.
Slots
- default - Modal content.
- trigger - Slot for the trigger element to open the Modal.
- icon - Slot for additional icon.
Properties
- id :string, required: true - The id of the live component (required by LiveView for stateful components). .
- type :string, values: ["pills", "underlined", "cards"], default: "pills"
- size :string, values: ["tiny", "small", "medium", "large", "xlarge"], default: "tiny"
- block :boolean, default: false
Slots
- tabs
- add_on_before
Properties
- href :string - The url to link to.
- target :string, values: ["_blank", "_self", "_parent", "_top", "framename"], default: "_blank" - The target for the link.
- class :css_class - Additional CSS classes.
- opts :keyword, default: [] - Additional options passed to the element.
Slots
- default, required: true - The link text.
Events
- click - Click event for the link.
Properties
- type :atom, values: [:default, :success, :danger, :secondary, :warning] - The type (color) of the text.
- disabled :boolean, default: false - Apply
disabled
style. - underline :boolean, default: false - Apply
underline
style. - strikethrough :boolean, default: false - Apply
strikethrough
style. - small :boolean, default: false - Apply
small
style. - class :css_class - CSS classes to apply.
- html_type :string, values: ["span", "kbd", "code", "mark", "strong"], default: "span" - Which html tag to use for enclosing the tag.
- opts :keyword, default: [] - Additional options passed to the element.
Slots
- default, required: true - The content.
A plug to handle access and refresh tokens.