Packages

🎨 Gleam UI lustre library by @gleam-br

Current section

Files

Jump to
gbr_ui src gbr@ui@admin@select.erl
Raw

src/gbr@ui@admin@select.erl

-module(gbr@ui@admin@select).
-compile([no_auto_import, nowarn_unused_vars, nowarn_unused_function, nowarn_nomatch, inline]).
-define(FILEPATH, "src\\gbr\\ui\\admin\\select.gleam").
-export([new/1, label/2, placeholder/2, items/2, multi/2, at/1, onchange/2, selected/2, render/1]).
-export_type([u_i_select/0, u_i_select_render/1, u_i_select_item/0]).
-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(
"\n"
" Gleam UI input select super element.\n"
"\n"
).
-opaque u_i_select() :: {u_i_select,
gbr@ui@core@el:u_i_el(),
list(u_i_select_item()),
boolean(),
gleam@option:option(gbr@ui@typo:u_i_typo())}.
-type u_i_select_render(QFL) :: {u_i_select_render,
u_i_select(),
gleam@option:option(fun((binary()) -> QFL))}.
-type u_i_select_item() :: {u_i_select_item, binary(), binary(), boolean()}.
-file("src\\gbr\\ui\\admin\\select.gleam", 59).
?DOC(" Constructor of select super element.\n").
-spec new(binary()) -> u_i_select().
new(Id) ->
{u_i_select, gbr@ui@core@el:new(Id), [], false, none}.
-file("src\\gbr\\ui\\admin\\select.gleam", 65).
?DOC(" Set select title.\n").
-spec label(u_i_select(), gbr@ui@typo:u_i_typo()) -> u_i_select().
label(In, Label) ->
{u_i_select,
erlang:element(2, In),
erlang:element(3, In),
erlang:element(4, In),
{some, Label}}.
-file("src\\gbr\\ui\\admin\\select.gleam", 69).
-spec placeholder(u_i_select(), binary()) -> u_i_select().
placeholder(In, Placeholder) ->
El = gbr@ui@core@el:att(
erlang:element(2, In),
[{<<"placeholder"/utf8>>, Placeholder}]
),
{u_i_select,
El,
erlang:element(3, In),
erlang:element(4, In),
erlang:element(5, In)}.
-file("src\\gbr\\ui\\admin\\select.gleam", 77).
?DOC(" Set select items (options).\n").
-spec items(u_i_select(), list(u_i_select_item())) -> u_i_select().
items(In, Items) ->
{u_i_select,
erlang:element(2, In),
Items,
erlang:element(4, In),
erlang:element(5, In)}.
-file("src\\gbr\\ui\\admin\\select.gleam", 83).
?DOC(" Set select multi items can selected.\n").
-spec multi(u_i_select(), boolean()) -> u_i_select().
multi(In, Multi) ->
{u_i_select,
erlang:element(2, In),
erlang:element(3, In),
Multi,
erlang:element(5, In)}.
-file("src\\gbr\\ui\\admin\\select.gleam", 96).
-spec at(u_i_select()) -> u_i_select_render(any()).
at(In) ->
{u_i_select_render, In, none}.
-file("src\\gbr\\ui\\admin\\select.gleam", 100).
-spec onchange(u_i_select_render(QFT), fun((binary()) -> QFT)) -> u_i_select_render(QFT).
onchange(At, Onchange) ->
{u_i_select_render, erlang:element(2, At), {some, Onchange}}.
-file("src\\gbr\\ui\\admin\\select.gleam", 150).
-spec items_toggle(binary(), list(u_i_select_item())) -> list(u_i_select_item()).
items_toggle(Value, Items) ->
gleam@list:map(
Items,
fun(Item) ->
gleam@bool:guard(
erlang:element(2, Item) /= Value,
Item,
fun() ->
{u_i_select_item,
erlang:element(2, Item),
erlang:element(3, Item),
true}
end
)
end
).
-file("src\\gbr\\ui\\admin\\select.gleam", 89).
?DOC(" Update select based by event occurs.\n").
-spec selected(u_i_select(), binary()) -> u_i_select().
selected(In, Value) ->
{u_i_select, _, Items, _, _} = In,
Items@1 = items_toggle(Value, Items),
{u_i_select,
erlang:element(2, In),
Items@1,
erlang:element(4, In),
erlang:element(5, In)}.
-file("src\\gbr\\ui\\admin\\select.gleam", 328).
-spec filter_items_selected(list(u_i_select_item()), boolean()) -> list(u_i_select_item()).
filter_items_selected(Options, Is_selected) ->
gleam@list:filter(
Options,
fun(Opt) ->
{u_i_select_item, _, _, Selected} = Opt,
Selected =:= Is_selected
end
).
-file("src\\gbr\\ui\\admin\\select.gleam", 258).
-spec do_items_multi(list(u_i_select_item())) -> list(lustre@vdom@vnode:element(any())).
do_items_multi(Items) ->
gleam@list:map(
filter_items_selected(Items, false),
fun(Option) ->
lustre@element@html:'div'(
[],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"hover:bg-primary/5 w-full cursor-pointer rounded-t border-b border-gray-200 dark:border-gray-800"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"relative flex w-full items-center border-l-2 border-transparent p-2 pl-2"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex w-full items-center"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"mx-2 leading-6 text-gray-800 dark:text-white/90"/utf8>>
),
lustre@attribute:value(
erlang:element(
2,
Option
)
)],
[lustre@element@html:text(
erlang:element(
3,
Option
)
)]
)]
)]
)]
)]
)
end
).
-file("src\\gbr\\ui\\admin\\select.gleam", 291).
-spec do_items_selected_multi(list(u_i_select_item())) -> list(lustre@vdom@vnode:element(any())).
do_items_selected_multi(Items) ->
gleam@list:map(
filter_items_selected(Items, true),
fun(Option) ->
lustre@element@html:'div'(
[lustre@attribute:class(
<<"group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pr-2 pl-2.5 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"max-w-full flex-initial"/utf8>>
),
lustre@attribute:value(erlang:element(2, Option))],
[lustre@element@html:text(erlang:element(3, Option))]
),
lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex flex-auto flex-row-reverse"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"cursor-pointer pl-2 text-gray-500 group-hover:text-gray-400 dark:text-gray-400"/utf8>>
)],
[begin
_pipe = gbr@ui@svg:new(14, 14),
_pipe@1 = gbr@ui@svg@icons:close(_pipe),
gbr@ui@svg:render(_pipe@1)
end]
)]
)]
)
end
).
-file("src\\gbr\\ui\\admin\\select.gleam", 239).
-spec do_items(list(u_i_select_item())) -> list(lustre@vdom@vnode:element(any())).
do_items(Items) ->
gleam@list:map(
Items,
fun(Option) ->
{u_i_select_item, Value, Label, Selected} = Option,
Classes = case Selected of
true ->
<<<<"text-gray-700 dark:bg-gray-900 dark:text-gray-400"/utf8,
" "/utf8>>/binary,
"text-gray-800 dark:text-white/90"/utf8>>;
false ->
<<"text-gray-700 dark:bg-gray-900 dark:text-gray-400"/utf8>>
end,
lustre@element@html:option(
[lustre@attribute:class(Classes),
lustre@attribute:value(Value),
lustre@attribute:selected(Selected)],
Label
)
end
).
-file("src\\gbr\\ui\\admin\\select.gleam", 158).
-spec do_multi(
binary(),
lustre@vdom@vnode:element(QGF),
list(u_i_select_item())
) -> lustre@vdom@vnode:element(QGF).
do_multi(Id, Label, Items) ->
lustre@element@html:'div'(
[],
[Label,
lustre@element@html:'div'(
[],
[lustre@element@html:select(
[lustre@attribute:id(Id),
lustre@attribute:class(<<"hidden"/utf8>>)],
do_items(Items)
),
lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex flex-col items-center"/utf8>>
)],
[lustre@element@html:input(
[lustre@attribute:type_(<<"hidden"/utf8>>),
lustre@attribute:name(<<"values"/utf8>>)]
),
lustre@element@html:'div'(
[lustre@attribute:class(
<<"relative z-20 inline-block w-full"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"relative flex flex-col items-center"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"w-full"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pr-3 pl-3 outline-hidden transition dark:border-gray-700 dark:bg-gray-900"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex flex-auto flex-wrap gap-2"/utf8>>
)],
lists:append(
do_items_selected_multi(
Items
),
[lustre@element@html:'div'(
[],
[lustre@element@html:input(
[lustre@attribute:class(
case gleam@list:is_empty(
Items
) of
true ->
<<"block"/utf8>>;
false ->
<<"hidden"/utf8>>
end
),
lustre@attribute:class(
<<"h-full w-full appearance-none border-0 bg-transparent p-1 pr-2 text-sm outline-hidden placeholder:text-gray-800 focus:border-0 focus:ring-0 focus:outline-hidden dark:placeholder:text-white/90"/utf8>>
)]
)]
)]
)
),
lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex w-7 items-center py-1 pr-1 pl-1"/utf8>>
)],
[lustre@element@html:button(
[lustre@attribute:class(
<<"h-5 w-5 cursor-pointer text-gray-700 outline-hidden focus:outline-hidden dark:text-gray-400"/utf8>>
)],
[begin
_pipe = gbr@ui@svg:new(
20,
20
),
_pipe@1 = gbr@ui@svg@icons:arrow(
_pipe
),
_pipe@2 = fun gbr@ui@svg@core:class/2(
_pipe@1,
<<"stroke-current"/utf8>>
),
gbr@ui@svg:render(
_pipe@2
)
end]
)]
)]
)]
),
lustre@element@html:'div'(
[lustre@attribute:class(
<<"w-full px-4"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900"/utf8>>
)],
[lustre@element@html:'div'(
[lustre@attribute:class(
<<"flex w-full flex-col"/utf8>>
)],
do_items_multi(
Items
)
)]
)]
)]
)]
)]
)]
)]
).
-file("src\\gbr\\ui\\admin\\select.gleam", 106).
?DOC(" Render select super element to `lustre/element.{type Element}`.\n").
-spec render(u_i_select_render(QFX)) -> lustre@vdom@vnode:element(QFX).
render(At) ->
{u_i_select_render, In, Onchange} = At,
{u_i_select, El, Items, Multi, Label} = In,
Id = gbr@ui@core@el:get_id(erlang:element(2, In)),
Label@2 = case Label of
none ->
lustre@element:none();
{some, Label@1} ->
lustre@element@html:label(
[lustre@attribute:for(Id),
lustre@attribute:class(
<<"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"/utf8>>
)],
[gbr@ui@typo:render(Label@1)]
)
end,
gleam@bool:guard(
Multi,
do_multi(Id, Label@2, Items),
fun() ->
Onchange@1 = begin
_pipe = gleam@option:map(Onchange, fun lustre@event:on_change/1),
gleam@option:unwrap(_pipe, lustre@attribute:none())
end,
Attrs = begin
_pipe@1 = gbr@ui@core@el:class(
El,
<<"dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"/utf8>>
),
gbr@ui@core@el:attrs(_pipe@1)
end,
lustre@element@html:'div'(
[],
[Label@2,
lustre@element@html:'div'(
[lustre@attribute:class(
<<"relative z-20 bg-transparent"/utf8>>
)],
[lustre@element@html:select(
[Onchange@1 | Attrs],
do_items(Items)
),
lustre@element@html:span(
[lustre@attribute:class(
<<"pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-700 dark:text-gray-400"/utf8>>
)],
[begin
_pipe@2 = gbr@ui@svg:new(20, 20),
_pipe@3 = gbr@ui@svg@icons:arrow(
_pipe@2
),
_pipe@4 = fun gbr@ui@svg@core:class/2(
_pipe@3,
<<"stroke-current"/utf8>>
),
gbr@ui@svg:render(_pipe@4)
end]
)]
)]
)
end
).