gbr/ui/core/el

Gleam UI super element

Motivation

The lustre elements contains the generic event type that difficult to work with element in stateless mode.

So, the gbr/ui/core/el module has types and functions to work with attributes and properties without needs to trait genenric event type.

Types

UIAtt

</>

Attributes of element with key

Attributes to avoid generic event type with tuple of two strings

part.1: Attribute name
part.2: Attribute value

Will be convert to lustre/attribute.attribute(name,value)

pub type UIAtt =
  dict.Dict(String, List(#(String, String)))

UIClass

</>

Attribute lustre/attribute.class with key

pub type UIClass =
  dict.Dict(String, String)

UIClasses

</>

Attribute lustre/attribute.classes with key

Perfect to toggle (on, off) one or more class into element.

pub type UIClasses =
  dict.Dict(String, List(#(String, Bool)))

UIEl

opaque </>

Element super ui.

id: Equals lustre/attribute.classes
classes: lustre/attribute.classes
style: lustre/attribute.style
att: lustre/attribute.attribute

pub opaque type UIEl

UIStyles

</>

Attribute lustre/attribute.style with key

Perfect to toggle (on, off) one or more class into element.

pub type UIStyles =
  dict.Dict(String, List(#(String, String)))

Values

att

</>

pub fn att(el: UIEl, att: List(#(String, String))) -> UIEl

Append list of custom attributes

el: Element info
att: Properties to set in key

Uses id like key to set custom attributes to element.

Equals att_key(el, el.id, value)

att_any

</>

pub fn att_any(el: UIEl, name: String) -> Bool

att_any_key

</>

pub fn att_any_key(el: UIEl, key: String, name: String) -> Bool

att_get_key

</>

pub fn att_get_key(
  el: UIEl,
  key: String,
  name: String,
) -> option.Option(String)

att_key

</>

pub fn att_key(
  el: UIEl,
  key: String,
  att: List(#(String, String)),
) -> UIEl

Append custom attributes

el: Element info
key: Key identification
att: Properties to set in key

attrs

</>

pub fn attrs(el: UIEl) -> List(attribute.Attribute(a))

Convert to lustre/attributes attributes by identification.

in: Element info to convert

Precedence order attributes:

id
class
classes
style
others in att

attrs_key

</>

pub fn attrs_key(
  el: UIEl,
  key: String,
) -> List(attribute.Attribute(a))

class

</>

pub fn class(el: UIEl, class: String) -> UIEl

Replace class attribute element

Uses id like key to set class attribute

Equals class_key(el, el.id, value)

class_key

</>

pub fn class_key(el: UIEl, key: String, class: String) -> UIEl

classes

</>

pub fn classes(el: UIEl, classes: List(#(String, Bool))) -> UIEl

Append classes attribute element

Uses id like key to set classes attribute

Equals classes_key(el, el.id, value)

classes_key

</>

pub fn classes_key(
  el: UIEl,
  key: String,
  classes: List(#(String, Bool)),
) -> UIEl

Append classes attribute element

el: Element info
key: Key identification
classes: Properties lustre.attribute.classes

get_classes

</>

pub fn get_classes(el: UIEl, name: String) -> option.Option(Bool)

get_classes_key

</>

pub fn get_classes_key(
  el: UIEl,
  key: String,
  name: String,
) -> option.Option(Bool)

get_id

</>

pub fn get_id(el: UIEl) -> String

id

</>

pub fn id(el: UIEl, id: String) -> UIEl

Replace id element

el: Element info
id: lustre.attribute.id

new

</>

pub fn new(id: String) -> UIEl

New super element with initial class styled

id: lustre/attribute.id

Create dictonary and insert item with id element to represent default custom attributes, classes, styles, etc of element.

style

</>

pub fn style(el: UIEl, styles: List(#(String, String))) -> UIEl

Replace style attribute element

Uses id like key to set style attribute

Equals style_key(el, el.id, value)

style_key

</>

pub fn style_key(
  el: UIEl,
  key: String,
  styles: List(#(String, String)),
) -> UIEl

Append style attribute element

el: Element info
key: Key identification
styles: Properties lustre.attribute.style