Packages

glaze_oat

1.0.0
3.0.0 2.0.0 1.0.1 1.0.0

🍩 Lustre Bindings to Oat UI Components

HexDocs

Current section

Files

Jump to
Readme
4 Versions
2 Dependencies
Dependants
Files
Activity
glaze_oat src glaze_oat@form.erl
Raw

src/glaze_oat@form.erl 

-module(glaze_oat@form).

-compile([no_auto_import, nowarn_unused_vars, nowarn_unused_function, nowarn_nomatch, inline]).

-define(FILEPATH, "src/glaze_oat/form.gleam").

-export([form/2, fieldset/2, legend/2, label/2, input/1, select/2, option/2, textarea/2, field/0, field_error/0, hint/0, group/0, error/0, as_switch/0, invalid/0, described_by/1]).



-if(?OTP_RELEASE >= 27).

-define(MODULEDOC(Str), -moduledoc(Str)).

-define(DOC(Str), -doc(Str)).

-else.

-define(MODULEDOC(Str), -compile([])).

-define(DOC(Str), -compile([])).

-endif.



?MODULEDOC(

    " Oat documentation: <https://oat.ink/components/form/>\n"

    "\n"

    " The [`form`](#form) helpers provide a compact set of primitives for building\n"

    " accessible form layouts with native HTML elements.\n"

    "\n"

    " ## Anatomy\n"

    "\n"

    " A typical form has fields with labels, optional hints, and clear error\n"

    " states. Use the attribute helpers in this module to keep those patterns\n"

    " consistent.\n"

    "\n"

    " ## Recipes\n"

    "\n"

    " ### A basic labeled field\n"

    "\n"

    " ```gleam\n"

    " import glaze_oat/form\n"

    " import lustre/attribute\n"

    " import lustre/element/html\n"

    "\n"

    " fn email_field() {\n"

    "   form.fieldset([form.field()], [\n"

    "     form.label([attribute.for(\"email\")], [html.text(\"Email\")]),\n"

    "     form.input([attribute.id(\"email\"), attribute.type_(\"email\")]),\n"

    "   ])\n"

    " }\n"

    " ```\n"

    "\n"

    " ### A field with hint and error state\n"

    "\n"

    " ```gleam\n"

    " import glaze_oat/form\n"

    " import lustre/attribute\n"

    " import lustre/element/html\n"

    "\n"

    " fn username_field() {\n"

    "   form.fieldset([form.field_error()], [\n"

    "     form.label([attribute.for(\"username\")], [html.text(\"Username\")]),\n"

    "     form.input([\n"

    "       attribute.id(\"username\"),\n"

    "       form.invalid(),\n"

    "       form.described_by(\"username-hint\"),\n"

    "     ]),\n"

    "     html.small([attribute.id(\"username-hint\"), form.hint(), form.error()], [\n"

    "       html.text(\"Username is already taken.\"),\n"

    "     ]),\n"

    "   ])\n"

    " }\n"

    " ```\n"

    "\n"

    " ## References\n"

    "\n"

    " - MDN `aria-invalid`: <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid>\n"

    " - MDN `aria-describedby`: <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby>\n"

    " - MDN ARIA `switch` role: <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/switch_role>\n"

).



-file("src/glaze_oat/form.gleam", 65).

?DOC(

    " Render a form container.\n"

    "\n"

    " Use this as the root element for grouped form controls.\n"

).

-spec form(

    list(lustre@vdom@vattr:attribute(QDC)),

    list(lustre@vdom@vnode:element(QDC))

) -> lustre@vdom@vnode:element(QDC).

form(Attrs, Children) ->

    lustre@element@html:form(Attrs, Children).



-file("src/glaze_oat/form.gleam", 76).

?DOC(

    " Render a fieldset for related controls.\n"

    "\n"

    " Useful for grouping controls that belong together.\n"

).

-spec fieldset(

    list(lustre@vdom@vattr:attribute(QDI)),

    list(lustre@vdom@vnode:element(QDI))

) -> lustre@vdom@vnode:element(QDI).

fieldset(Attrs, Children) ->

    lustre@element@html:fieldset(Attrs, Children).



-file("src/glaze_oat/form.gleam", 87).

?DOC(

    " Render a legend for a fieldset.\n"

    "\n"

    " Use this as the visible title for a grouped set of controls.\n"

).

-spec legend(

    list(lustre@vdom@vattr:attribute(QDO)),

    list(lustre@vdom@vnode:element(QDO))

) -> lustre@vdom@vnode:element(QDO).

legend(Attrs, Children) ->

    lustre@element@html:legend(Attrs, Children).



-file("src/glaze_oat/form.gleam", 98).

?DOC(

    " Render a form label.\n"

    "\n"

    " Pair with `attribute.for(...)` to associate it with an input id.\n"

).

-spec label(

    list(lustre@vdom@vattr:attribute(QDU)),

    list(lustre@vdom@vnode:element(QDU))

) -> lustre@vdom@vnode:element(QDU).

label(Attrs, Children) ->

    lustre@element@html:label(Attrs, Children).



-file("src/glaze_oat/form.gleam", 105).

-spec input(list(lustre@vdom@vattr:attribute(QEA))) -> lustre@vdom@vnode:element(QEA).

input(Attrs) ->

    lustre@element@html:input(Attrs).



-file("src/glaze_oat/form.gleam", 109).

-spec select(

    list(lustre@vdom@vattr:attribute(QEE)),

    list(lustre@vdom@vnode:element(QEE))

) -> lustre@vdom@vnode:element(QEE).

select(Attrs, Children) ->

    lustre@element@html:select(Attrs, Children).



-file("src/glaze_oat/form.gleam", 116).

-spec option(list(lustre@vdom@vattr:attribute(QEK)), binary()) -> lustre@vdom@vnode:element(QEK).

option(Attrs, Label) ->

    lustre@element@html:option(Attrs, Label).



-file("src/glaze_oat/form.gleam", 120).

-spec textarea(list(lustre@vdom@vattr:attribute(QEO)), binary()) -> lustre@vdom@vnode:element(QEO).

textarea(Attrs, Value) ->

    lustre@element@html:textarea(Attrs, Value).



-file("src/glaze_oat/form.gleam", 126).

?DOC(" Mark a field container for default field styling.\n").

-spec field() -> lustre@vdom@vattr:attribute(any()).

field() ->

    lustre@attribute:attribute(<<"data-field"/utf8>>, <<""/utf8>>).



-file("src/glaze_oat/form.gleam", 132).

?DOC(" Mark a field container as errored.\n").

-spec field_error() -> lustre@vdom@vattr:attribute(any()).

field_error() ->

    lustre@attribute:attribute(<<"data-field"/utf8>>, <<"error"/utf8>>).



-file("src/glaze_oat/form.gleam", 138).

?DOC(" Mark an element as helper or hint text.\n").

-spec hint() -> lustre@vdom@vattr:attribute(any()).

hint() ->

    lustre@attribute:attribute(<<"data-hint"/utf8>>, <<""/utf8>>).



-file("src/glaze_oat/form.gleam", 142).

-spec group() -> lustre@vdom@vattr:attribute(any()).

group() ->

    lustre@attribute:class(<<"group"/utf8>>).



-file("src/glaze_oat/form.gleam", 146).

-spec error() -> lustre@vdom@vattr:attribute(any()).

error() ->

    lustre@attribute:class(<<"error"/utf8>>).



-file("src/glaze_oat/form.gleam", 152).

?DOC(" Set ARIA `role=\"switch\"` for switch-style controls.\n").

-spec as_switch() -> lustre@vdom@vattr:attribute(any()).

as_switch() ->

    lustre@attribute:role(<<"switch"/utf8>>).



-file("src/glaze_oat/form.gleam", 160).

?DOC(

    " Set `aria-invalid=\"true\"`.\n"

    "\n"

    " Use this on controls in an invalid state.\n"

).

-spec invalid() -> lustre@vdom@vattr:attribute(any()).

invalid() ->

    lustre@attribute:attribute(<<"aria-invalid"/utf8>>, <<"true"/utf8>>).



-file("src/glaze_oat/form.gleam", 166).

?DOC(" Set `aria-describedby` to reference hint or error text.\n").

-spec described_by(binary()) -> lustre@vdom@vattr:attribute(any()).

described_by(Name) ->

    lustre@attribute:attribute(<<"aria-describedby"/utf8>>, Name).