diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/components.gleam | 34 | ||||
| -rw-r--r-- | examples/counter.gleam | 15 | ||||
| -rw-r--r-- | examples/input.gleam | 82 | ||||
| -rw-r--r-- | examples/svg.gleam | 20 |
4 files changed, 63 insertions, 88 deletions
diff --git a/examples/components.gleam b/examples/components.gleam index b87cf84..e813708 100644 --- a/examples/components.gleam +++ b/examples/components.gleam @@ -56,18 +56,15 @@ fn update(history, msg) { fn view(history) { let on_custom_click = event.on("custom-click", function.constant(Ok("click"))) - div( - [], - [ - button([event.on_click("reset")], [text("Reset")]), - ol([], list.map(history, fn(msg) { li([], [text(msg)]) })), - element( - "custom-counter", - [on_custom_click, attribute.property("count", list.length(history))], - [ol([], list.map(history, fn(msg) { li([], [text(msg)]) }))], - ), - ], - ) + div([], [ + button([event.on_click("reset")], [text("Reset")]), + ol([], list.map(history, fn(msg) { li([], [text(msg)]) })), + element( + "custom-counter", + [on_custom_click, attribute.property("count", list.length(history))], + [ol([], list.map(history, fn(msg) { li([], [text(msg)]) }))], + ), + ]) } // COUNTER --------------------------------------------------------------------- @@ -89,12 +86,9 @@ fn counter_update(count, msg) { } fn counter_view(count) { - div( - [], - [ - button([event.on_click(Clicked)], [text("Click me!")]), - p([], [text("Count: "), text(int.to_string(count))]), - slot([]), - ], - ) + div([], [ + button([event.on_click(Clicked)], [text("Click me!")]), + p([], [text("Count: "), text(int.to_string(count))]), + slot([]), + ]) } diff --git a/examples/counter.gleam b/examples/counter.gleam index ab453da..37af39a 100644 --- a/examples/counter.gleam +++ b/examples/counter.gleam @@ -44,13 +44,10 @@ pub fn update(model: Model, msg: Msg) -> Model { // VIEW ------------------------------------------------------------------------ pub fn view(model: Model) -> Element(Msg) { - div( - [], - [ - button([event.on_click(Incr)], [text("+")]), - button([event.on_click(Decr)], [text("-")]), - button([event.on_click(Reset)], [text("Reset")]), - p([], [text(int.to_string(model))]), - ], - ) + div([], [ + button([event.on_click(Incr)], [text("+")]), + button([event.on_click(Decr)], [text("-")]), + button([event.on_click(Reset)], [text("Reset")]), + p([], [text(int.to_string(model))]), + ]) } diff --git a/examples/input.gleam b/examples/input.gleam index 62338a2..6425b0c 100644 --- a/examples/input.gleam +++ b/examples/input.gleam @@ -57,26 +57,20 @@ fn update(model: Model, msg: Msg) -> Model { // RENDER ---------------------------------------------------------------------- fn view(model: Model) -> Element(Msg) { - div( - [attribute.class("container")], - [ - card([ - email_input(model.email), - password_input(model.password), - remember_checkbox(model.remember_me), - pre( - [attribute.class("debug")], - [ - string.inspect(model) - |> string.replace("(", "(\n ") - |> string.replace(", ", ",\n ") - |> string.replace(")", "\n)") - |> text, - ], - ), + div([attribute.class("container")], [ + card([ + email_input(model.email), + password_input(model.password), + remember_checkbox(model.remember_me), + pre([attribute.class("debug")], [ + string.inspect(model) + |> string.replace("(", "(\n ") + |> string.replace(", ", ",\n ") + |> string.replace(")", "\n)") + |> text, ]), - ], - ) + ]), + ]) } fn card(content: List(Element(a))) -> Element(a) { @@ -98,35 +92,29 @@ fn render_input( value: String, label_: String, ) -> Element(Msg) { - div( - [attribute.class("input")], - [ - label([attribute.for(id)], [text(label_)]), - input([ - attribute.id(id), - attribute.name(id), - attribute.type_(type_), - attribute.required(True), - attribute.value(dynamic.from(value)), - event.on_input(fn(value) { Typed(field, value) }), - ]), - ], - ) + div([attribute.class("input")], [ + label([attribute.for(id)], [text(label_)]), + input([ + attribute.id(id), + attribute.name(id), + attribute.type_(type_), + attribute.required(True), + attribute.value(dynamic.from(value)), + event.on_input(fn(value) { Typed(field, value) }), + ]), + ]) } fn remember_checkbox(checked: Bool) -> Element(Msg) { - div( - [attribute.class("flex items-center")], - [ - input([ - attribute.id("remember-me"), - attribute.name("remember-me"), - attribute.type_("checkbox"), - attribute.checked(checked), - attribute.class("checkbox"), - event.on_click(Toggled(RememberMe, !checked)), - ]), - label([attribute.for("remember-me")], [text("Remember me")]), - ], - ) + div([attribute.class("flex items-center")], [ + input([ + attribute.id("remember-me"), + attribute.name("remember-me"), + attribute.type_("checkbox"), + attribute.checked(checked), + attribute.class("checkbox"), + event.on_click(Toggled(RememberMe, !checked)), + ]), + label([attribute.for("remember-me")], [text("Remember me")]), + ]) } diff --git a/examples/svg.gleam b/examples/svg.gleam index 640867b..93be5e3 100644 --- a/examples/svg.gleam +++ b/examples/svg.gleam @@ -46,18 +46,14 @@ pub fn update(model: Model, msg: Msg) -> Model { // VIEW ------------------------------------------------------------------------ pub fn view(model: Model) -> Element(Msg) { - div( - [], - [ - button( - [event.on_click(Incr)], - [plus([attribute.style([#("color", "red")])])], - ), - button([event.on_click(Decr)], [minus([])]), - button([event.on_click(Reset)], [text("Reset")]), - p([], [text(int.to_string(model))]), - ], - ) + div([], [ + button([event.on_click(Incr)], [ + plus([attribute.style([#("color", "red")])]), + ]), + button([event.on_click(Decr)], [minus([])]), + button([event.on_click(Reset)], [text("Reset")]), + p([], [text(int.to_string(model))]), + ]) } fn plus(attrs) { |