DevactionUI.ColorPicker (devaction_ui v0.2.3)

Copy Markdown View Source

A colour field with a panel: a square for saturation and brightness, a hue strip, an optional opacity strip, a row of preset colours and, in a browser that has one, the eyedropper. It always sends hex (#RRGGBB, or #RRGGBBAA with alpha) in the text field named name, so a form reads it like any other field and phx-change hears every change. The hook sits on a wrapper with the id <id>-picker (the field keeps id itself), and rest goes to that wrapper. disabled locks the field, the swatch and the panel, required goes to the text field.

The start colour is the value attr (default #2563EB) and the presets are the presets attr: the browser reads both from the markup (data-value, the preset buttons), so there is no second copy to keep in step. The shadows of the panel, the swatch and the thumbs are the --picker-* tokens of the stylesheet, which change with the theme.

The area is a role="slider" moved with the pointer or the arrow keys (Shift for a bigger step); the hue and opacity strips are native range inputs. Esc closes the panel and gives the focus back to the field. All words are given by the caller, including the template that says the colour aloud (area_text), where %{color}, %{saturation} and %{brightness} are filled by the browser.

Summary

Functions

color_picker(assigns)

Functions

color_picker(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • value (:string) - #RRGGBB, or #RRGGBBAA with alpha. Defaults to "#2563EB".
  • label (:string) (required) - the visible name of the field.
  • presets (:list) - the ready colours, as hex. Defaults to ["#DC2626", "#EA580C", "#D29A1E", "#16A34A", "#0D9488", "#2563EB", "#7C3AED", "#DB2777"].
  • alpha (:boolean) - adds the opacity strip. Defaults to false.
  • error (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • toggle_label (:string) (required) - names the swatch button that opens the panel.
  • area_label (:string) (required) - names the saturation and brightness square.
  • area_text (:string) - what the square says aloud; %{color}, %{saturation}, %{brightness} are filled in. Defaults to "%{color}, saturation %{saturation}%, brightness %{brightness}%".
  • hue_label (:string) (required)
  • alpha_label (:string) - names the opacity strip; required with alpha. Defaults to nil.
  • presets_label (:string) (required)
  • eyedropper_label (:string) - names the eyedropper button, which shows only when given (as its text, unless there is an icon). Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • eyedropper_icon - the eyedropper button's icon, drawn by the caller.