DevactionUI.Progress (devaction_ui v0.2.3)

Copy Markdown View Source

A progress bar (role="progressbar") with a value from 0 to 100 and the tone it fills with: ink by default, amber for what the AI did, green when it is done. :segmented shows the same value in segments pieces (the steps of a job), :thin is the 4 px line of the work in the background, and indeterminate is for what has no end in sight: it shimmers (still, under reduced motion) and gives no value.

A segmented one can show where the work is: current is the piece in progress (1 is the first), drawn in current_tone (amber), with the pieces before it done in tone and the ones after it still empty; segment_tones gives each done piece its own tone ([:ok, :ok, :warn]).

size is the thickness of a bar or a segmented one (:md 6 px, :lg 8 px); by default a bar is 6 px and a segmented one 8 px. parts draws one bar in several chunks, each with its own tone (what is done, what is in review). value_label is the text of the value (3 of 5, 69%), drawn by show_value and read by assistive technology as aria-valuetext.

Summary

Functions

Whether piece index of segments is filled at value percent.

Functions

filled?(index, segments, value)

@spec filled?(pos_integer(), pos_integer(), 0..100) :: boolean()

Whether piece index of segments is filled at value percent.

progress(assigns)

Attributes

  • value (:integer) - 0 to 100; ignored when indeterminate or with parts. Defaults to 0.
  • label (:string) (required) - what is being measured, for assistive technology.
  • tone (:atom) - Defaults to :neutral. Must be one of :neutral, :warn, :ok, :risk, or :info.
  • variant (:atom) - Defaults to :bar. Must be one of :bar, :segmented, or :thin.
  • size (:atom) - thickness of a bar or a segmented one. Defaults to :auto. Must be one of :auto, :md, or :lg.
  • gap (:atom) - segmented: the space between pieces, 6 px (:md) or 4 px (:sm). Defaults to :md. Must be one of :md, or :sm.
  • segments (:integer) - how many pieces the segmented one has. Defaults to 5.
  • current (:integer) - segmented: the piece in progress, counting from 1; the ones before it are done. Defaults to nil.
  • current_tone (:atom) - segmented: the tone of the piece in progress. Defaults to :warn. Must be one of :neutral, :warn, :ok, :risk, :info, :indigo, or :emerald.
  • segment_tones (:list) - segmented: the tone of each done piece, in order; the ones past the list use tone. Defaults to [].
  • parts (:list) - chunks of one bar, in order: [%{value: 40, tone: :ok}, %{value: 20, tone: :warn}]; their sum is the value. Defaults to [].
  • indeterminate (:boolean) - Defaults to false.
  • value_label (:string) - the value in words (3 of 5); without it the value reads as a percentage. Defaults to nil.
  • show_value (:boolean) - draws the label on the left and the value in mono on the right, above the bar. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.