DevactionUI.ProgressToast (devaction_ui v0.2.3)

Copy Markdown View Source

A notice for a job that takes a while: it fills as the job advances (progress, 0 to 100), with a ring of light while it runs. When the LiveView sets state to :done it waits a moment (1.6 s, paused while the pointer or the focus is on it), leaves, and tells the LiveView (on_dismiss, with phx-value-id) to drop it. An :error never leaves by itself: the person reads it, tries again through the action slot, or closes it. The icon slot receives the state, so the mark can be a spinner while it runs, a check when it is done and a warning when it fails.

variant is the look: :fill (the default) tints the card with the progress, with a 34 px tile for the icon; :bar is the dark card with a 3 px bar along its base, for an upload with a cancel in the action slot (shown while it runs or fails); :steps is the batch in stages, a count (3/5) over steps segments. The ring of light (aura) is on while a :fill or :bar one runs; aura={false} turns it off.

The LiveView is the source of truth: it holds the job's progress (from an Oban job's PubSub, say) and renders this with the current state and progress.

Summary

Functions

A progress notice that fills, runs a bar along its base, or counts stages.

Functions

progress_toast(assigns)

@spec progress_toast(map()) :: Phoenix.LiveView.Rendered.t()

A progress notice that fills, runs a bar along its base, or counts stages.

Attributes

  • id (:string) (required)
  • state (:atom) - Defaults to :running. Must be one of :running, :done, or :error.
  • variant (:atom) - Defaults to :fill. Must be one of :fill, :bar, or :steps.
  • progress (:integer) - 0 to 100. Defaults to 0.
  • steps (:integer) - :steps: how many stages the batch has. Defaults to 5.
  • aura (:boolean) - the ring of light while it runs. Defaults to true.
  • title (:string) (required)
  • percent_label (:string) - the text of the percentage on the right (the count of :steps); without it, the progress and a percent sign, or 3/5. Defaults to nil.
  • on_dismiss (:string) (required) - event sent with phx-value-id when it leaves.
  • dismiss_label (:string) (required) - for the × button.
  • target (:any) - the @myself of a LiveComponent that holds the toast. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - drawn before the title; receives the state (:let={state}).
  • close_icon - replaces the typographic × of the dismiss button.
  • inner_block - a line under the title: the step, or what went wrong.
  • action - the button that tries again (:fill, when it failed) or cancels (:bar).