API Reference supabase_surface v0.1.4

Modules

SupabaseSurface keeps the contexts that define your domain and business logic.

A Surface component that handles auth for Supabase.

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

  • 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.

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. .

A html button with predefined sizes, types and optional link functionality.

Size

You can define the size of a button using the size prop.

Button Types

You can define the type of a button using the type prop.

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.

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. .

A dropdown component using alpinejs.

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

  • 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.

Properties

  • class :css_class - CSS class to pass to the svg.
  • provider :string, values: ["google", "github", "gitlab", "bitbucket", "twitter", "facebook"], required: true - provider.

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

  • 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.

Properties

  • level :integer, values: [1, 2, 3, 4, 5], default: 1 - The level for the resulting heading.
  • class :css_class - Extra CSS classes to apply.

Slots

  • default, required: true - The title content.

A plug to handle access and refresh tokens.