DevactionUI.SignatureField (devaction_ui v0.2.3)

A field to sign: draw with the mouse, the finger or the pen, or type the name; clear and start again. It writes what was signed into hidden inputs for the form: the method, the typed name or the SVG of the stroke (DevactionUI.Signature hook, exportSvg). The SVG is the drawing only, in its own coordinates, so it can be kept and drawn back at any size. A drawing is accepted by the server only after safe_path?/1.

The pad stays mounted when the mode changes (it is only hidden), so a stroke is not lost by a look at the typed name; the form reads name[method] to know which of name[path] and name[typed] counts. Drawing has no keyboard equivalent: the typed mode is the way for whoever cannot draw. The typed name is set in the Caveat font (.signature-typed), which the package does not load: add Caveat (weight 500) to the page, for example from Google Fonts, or the name falls back to the browser's cursive. To use another face, give font (a CSS font-family value such as "'Dancing Script', cursive") and load that one instead.

guide_label writes a line of text under the guide line of the pad ("Sign above the line"); typed_label is the visible label of the name field; required marks the name field as required (a drawing is checked by the server, with safe_path?/1). error marks both ways of signing as invalid and disabled makes the whole field inert.

Summary

Functions

safe_path?(path)

Whether a path is only path commands and numbers, so it can be drawn back without being trusted.

signature_field(assigns)

to_svg(path, color \\ "#18181B")

The SVG of a stroke, nil for one that is not safe. color is #RRGGBB or currentColor (default ink on white); another value gives nil too.

Functions

safe_path?(path)

@spec safe_path?(term()) :: boolean()

Whether a path is only path commands and numbers, so it can be drawn back without being trusted.

signature_field(assigns)

Attributes

id (:string) (required)
name (:string) (required) - the form field: name[method], name[typed] and name[path].
mode (:atom) - Defaults to :draw. Must be one of :draw, or :type.
typed (:string) - Defaults to "".
label (:string) (required)
mode_event (:string) (required) - sent with phx-value-mode by the two buttons.
draw_label (:string) (required)
type_label (:string) (required)
clear_label (:string) (required)
pad_label (:string) - names the drawing area for assistive technology, as Signature area; without it the area is hidden from them. Defaults to nil.
empty_label (:string) - the status while nothing is drawn, such as "Signature empty"; the status shows when given. Defaults to nil.
ready_label (:string) - the status once there is a stroke. Defaults to nil.
guide_label (:string) - text under the guide line of the pad, such as "Sign above the line". Defaults to nil.
typed_label (:string) - the visible label of the name field; without it the field is named by label. Defaults to nil.
font (:string) - a CSS font-family for the typed name, such as "'Dancing Script', cursive"; the page loads the font. Letters, digits, spaces, commas, quotes and hyphens only. Defaults to nil.
hint (:string) - Defaults to nil.
error (:string) - Defaults to nil.
required (:boolean) - marks the name field as required. Defaults to false.
disabled (:boolean) - Defaults to false.
class (:any) - Defaults to nil.
target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
Global attributes are accepted.

Slots

clear_icon - the icon of the clear button, such as an eraser.

to_svg(path, color \\ "#18181B")

@spec to_svg(String.t(), String.t()) :: String.t() | nil

The SVG of a stroke, nil for one that is not safe. color is #RRGGBB or currentColor (default ink on white); another value gives nil too.