Packages
gbr_ui

1.0.1
🎨 Gleam UI lustre library by @gleam-br
HexDocs
Current section
Files
Jump to
Readme 1 Version 2 Dependencies Dependants Files Activity
gbr_ui src gbr@ui@admin@button.erl
Raw
src/gbr@ui@admin@button.erl

-module(gbr@ui@admin@button).
-compile([no_auto_import, nowarn_unused_vars, nowarn_unused_function, nowarn_nomatch, inline]).
-define(FILEPATH, "src\\gbr\\ui\\admin\\button.gleam").
-export([new/1, label/2, disabled/2, class/2, classes/2, at_right/2, at_left/2, at/1, on_click_opt/2, on_click/2, render/1, primary/1, dark_mode/2, app_nav/3, back/3, sidebar/3]).
-export_type([type/0, size/0, shape/0, state/0, u_i_button/0, u_i_button_render/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(
    "\n"
    " ⚉ Gleam UI button super element.\n"
    "\n"
    " Supose button text and svg at left side:\n"
    "\n"
    "```gleam\n"
    " import gbr/ui/button\n"
    "\n"
    " import gbr/ui/svg\n"
    " import gbr/ui/svg/icons\n"
    "\n"
    " import gbr/ui/core/model.{type UIRender, uilabel}\n"
    "\n"
    " fn render(id: String) -> UIRender(a) {\n"
    "   label = uilabel(\"Button w/ icon back!\", [])\n"
    "   let inner = [\n"
    "     svg.new(\"id-svg\", 20, 20)\n"
    "       |> icons.back()\n"
    "       |> svg.render()\n"
    "     ]\n"
    "   ]\n"
    "   button.new(id)\n"
    "     |> button.label(label)\n"
    "     |> button.at_left(inner)\n"
    "     |> button.on_click(onclick)\n"
    "     |> button.render()\n"
    " }\n"
    "```\n"
    "\n"
    " ### Roadmap\n"
    "\n"
    " 🚧 **Work in progress**\n"
    "\n"
    " - [ ] type behavior\n"
    " - [ ] size behavior\n"
    " - [ ] icon behavior\n"
    "   - [ ] direction top, down, left and right\n"
    "   - [ ] badge styled\n"
    " - [ ] state behavior\n"
    " - [ ] shape behavior\n"
    " - [ ] group behavior\n"
    " - [ ] loading behavior\n"
    " - [ ] contrast accessibilty 4:5:1\n"
    "\n"
).

-type type() :: default.

-type size() :: md.

-type shape() :: rect.

-type state() :: enabled | disabled.

-opaque u_i_button() :: {u_i_button,
        gbr@ui@core@el:u_i_el(),
        type(),
        size(),
        state(),
        shape(),
        gleam@option:option(binary())}.

-type u_i_button_render(OUZ) :: {u_i_button_render,
        u_i_button(),
        list(lustre@vdom@vnode:element(OUZ)),
        gleam@option:option(OUZ)}.

-file("src\\gbr\\ui\\admin\\button.gleam", 141).
?DOC(" New button super element.\n").
-spec new(binary()) -> u_i_button().
new(Id) ->
    {u_i_button, gbr@ui@core@el:new(Id), default, md, enabled, rect, none}.

-file("src\\gbr\\ui\\admin\\button.gleam", 154).
?DOC(" Set button label.\n").
-spec label(u_i_button(), binary()) -> u_i_button().
label(In, Text) ->
    {u_i_button,
        erlang:element(2, In),
        erlang:element(3, In),
        erlang:element(4, In),
        erlang:element(5, In),
        erlang:element(6, In),
        {some, Text}}.

-file("src\\gbr\\ui\\admin\\button.gleam", 160).
?DOC(" Set button disabled.\n").
-spec disabled(u_i_button(), boolean()) -> u_i_button().
disabled(In, Disabled) ->
    case Disabled of
        false ->
            {u_i_button,
                erlang:element(2, In),
                erlang:element(3, In),
                erlang:element(4, In),
                enabled,
                erlang:element(6, In),
                erlang:element(7, In)};

        true ->
            {u_i_button,
                erlang:element(2, In),
                erlang:element(3, In),
                erlang:element(4, In),
                disabled,
                erlang:element(6, In),
                erlang:element(7, In)}
    end.

-file("src\\gbr\\ui\\admin\\button.gleam", 169).
?DOC(" Set button class.\n").
-spec class(u_i_button(), binary()) -> u_i_button().
class(In, Class) ->
    El = gbr@ui@core@el:class(erlang:element(2, In), Class),
    {u_i_button,
        El,
        erlang:element(3, In),
        erlang:element(4, In),
        erlang:element(5, In),
        erlang:element(6, In),
        erlang:element(7, In)}.

-file("src\\gbr\\ui\\admin\\button.gleam", 177).
?DOC(" Set button classes.\n").
-spec classes(u_i_button(), list({binary(), boolean()})) -> u_i_button().
classes(In, Classes) ->
    El = gbr@ui@core@el:classes(erlang:element(2, In), Classes),
    {u_i_button,
        El,
        erlang:element(3, In),
        erlang:element(4, In),
        erlang:element(5, In),
        erlang:element(6, In),
        erlang:element(7, In)}.

-file("src\\gbr\\ui\\admin\\button.gleam", 191).
?DOC(" New button render at right inner and onclick event.\n").
-spec at_right(u_i_button(), list(lustre@vdom@vnode:element(OVC))) -> u_i_button_render(OVC).
at_right(In, Inner) ->
    {u_i_button, _, _, _, _, _, Text} = In,
    Inner@1 = case Text of
        {some, Text@1} ->
            lists:append(Inner, [lustre@element@html:text(Text@1)]);

        none ->
            Inner
    end,
    {u_i_button_render, In, Inner@1, none}.

-file("src\\gbr\\ui\\admin\\button.gleam", 204).
?DOC(" New button render at left inner and onclick event.\n").
-spec at_left(u_i_button(), list(lustre@vdom@vnode:element(OVF))) -> u_i_button_render(OVF).
at_left(In, Inner) ->
    {u_i_button, _, _, _, _, _, Text} = In,
    Inner@1 = case Text of
        {some, Text@1} ->
            [lustre@element@html:text(Text@1) | Inner];

        none ->
            Inner
    end,
    {u_i_button_render, In, Inner@1, none}.

-file("src\\gbr\\ui\\admin\\button.gleam", 216).
?DOC(" New button render at default.\n").
-spec at(u_i_button()) -> u_i_button_render(any()).
at(In) ->
    {u_i_button, _, _, _, _, _, Text} = In,
    Inner = case Text of
        {some, Text@1} ->
            [lustre@element@html:text(Text@1)];

        none ->
            []
    end,
    {u_i_button_render, In, Inner, none}.

-file("src\\gbr\\ui\\admin\\button.gleam", 228).
?DOC(" Set button render onclick event.\n").
-spec on_click_opt(u_i_button_render(OVK), gleam@option:option(OVK)) -> u_i_button_render(OVK).
on_click_opt(In, Onclick) ->
    {u_i_button_render, erlang:element(2, In), erlang:element(3, In), Onclick}.

-file("src\\gbr\\ui\\admin\\button.gleam", 232).
-spec on_click(u_i_button_render(OVO), OVO) -> u_i_button_render(OVO).
on_click(In, Onclick) ->
    on_click_opt(In, {some, Onclick}).

-file("src\\gbr\\ui\\admin\\button.gleam", 238).
?DOC(" Render button super element to `lustre/element.{type Element}`.\n").
-spec render(u_i_button_render(OVR)) -> lustre@vdom@vnode:element(OVR).
render(At) ->
    {u_i_button_render, In, Inner, Onclick} = At,
    {u_i_button, El, _, _, _, _, _} = In,
    Onclick@1 = begin
        _pipe = gleam@option:map(Onclick, fun lustre@event:on_click/1),
        gleam@option:unwrap(_pipe, lustre@attribute:none())
    end,
    Attrs = [Onclick@1 | gbr@ui@core@el:attrs(El)],
    lustre@element@html:button(Attrs, Inner).

-file("src\\gbr\\ui\\admin\\button.gleam", 339).
-spec do_inner(
    u_i_button(),
    list(lustre@vdom@vnode:element(OWF)),
    gleam@option:option(OWF)
) -> u_i_button_render(OWF).
do_inner(In, Inner, Onclick) ->
    {u_i_button_render, In, Inner, Onclick}.

-file("src\\gbr\\ui\\admin\\button.gleam", 185).
?DOC(" Set button disabled.\n").
-spec primary(u_i_button()) -> u_i_button().
primary(In) ->
    class(
        In,
        <<"inline-flex items-center justify-center w-full gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600 disabled:bg-gray-400 disabled:cursor-not-allowed"/utf8>>
    ).

-file("src\\gbr\\ui\\admin\\button.gleam", 297).
?DOC(" Render dark mode toggle button.\n").
-spec dark_mode(binary(), gleam@option:option(OVZ)) -> lustre@vdom@vnode:element(OVZ).
dark_mode(Id, Onclick) ->
    Button = begin
        _pipe = new(Id),
        class(
            _pipe,
            <<"hover:text-dark-900 relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"/utf8>>
        )
    end,
    Inner = [begin
            _pipe@1 = gbr@ui@svg:new(20, 20),
            _pipe@2 = gbr@ui@svg@icons:moon(_pipe@1),
            _pipe@3 = fun gbr@ui@svg@core:class/2(
                _pipe@2,
                <<"hidden dark:block"/utf8>>
            ),
            gbr@ui@svg:render(_pipe@3)
        end,
        begin
            _pipe@4 = gbr@ui@svg:new(20, 20),
            _pipe@5 = gbr@ui@svg@icons:sun(_pipe@4),
            _pipe@6 = fun gbr@ui@svg@core:class/2(
                _pipe@5,
                <<"dark:hidden"/utf8>>
            ),
            gbr@ui@svg:render(_pipe@6)
        end],
    _pipe@7 = Button,
    _pipe@8 = do_inner(_pipe@7, Inner, Onclick),
    render(_pipe@8).

-file("src\\gbr\\ui\\admin\\button.gleam", 319).
?DOC(" Render app nav mobile toggle button.\n").
-spec app_nav(binary(), boolean(), gleam@option:option(OWC)) -> lustre@vdom@vnode:element(OWC).
app_nav(Id, Open, Onclick) ->
    Button = begin
        _pipe = new(Id),
        _pipe@1 = class(
            _pipe,
            <<"z-99999 flex h-10 w-10 items-center justify-center rounded-lg text-gray-700 hover:bg-gray-100 xl:hidden dark:text-gray-400 dark:hover:bg-gray-800"/utf8>>
        ),
        classes(_pipe@1, [{<<"bg-gray-100 dark:bg-gray-800"/utf8>>, Open}])
    end,
    Inner = [begin
            _pipe@2 = gbr@ui@svg:new(24, 24),
            _pipe@3 = gbr@ui@svg@icons:app_nav(_pipe@2),
            gbr@ui@svg:render(_pipe@3)
        end],
    _pipe@4 = Button,
    _pipe@5 = do_inner(_pipe@4, Inner, Onclick),
    render(_pipe@5).

-file("src\\gbr\\ui\\admin\\button.gleam", 253).
?DOC(" Render back history button.\n").
-spec back(binary(), binary(), OVU) -> lustre@vdom@vnode:element(OVU).
back(Id, Text, Onclick) ->
    Inner = [begin
            _pipe = gbr@ui@svg:new(20, 20),
            _pipe@1 = gbr@ui@svg@icons:back(_pipe),
            gbr@ui@svg:render(_pipe@1)
        end],
    _pipe@2 = new(Id),
    _pipe@3 = class(
        _pipe@2,
        <<"inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"/utf8>>
    ),
    _pipe@4 = label(_pipe@3, Text),
    _pipe@5 = at_left(_pipe@4, Inner),
    _pipe@6 = on_click(_pipe@5, Onclick),
    render(_pipe@6).

-file("src\\gbr\\ui\\admin\\button.gleam", 270).
?DOC(" Render sidebar toggle button.\n").
-spec sidebar(binary(), boolean(), gleam@option:option(OVW)) -> lustre@vdom@vnode:element(OVW).
sidebar(Id, Open, Onclick) ->
    Button = begin
        _pipe = new(Id),
        _pipe@1 = class(
            _pipe,
            <<"z-99999 flex h-10 w-10 items-center justify-center rounded-lg border-gray-200 text-gray-500 lg:h-11 lg:w-11 lg:border dark:border-gray-800 dark:text-gray-400"/utf8>>
        ),
        classes(
            _pipe@1,
            [{<<"lg:bg-transparent dark:lg:bg-transparent bg-gray-100 dark:bg-gray-800"/utf8>>,
                    Open}]
        )
    end,
    Inner = [begin
            _pipe@2 = gbr@ui@svg:new(12, 16),
            _pipe@3 = gbr@ui@svg@icons:hamburguer_small(_pipe@2),
            _pipe@4 = fun gbr@ui@svg@core:class/2(
                _pipe@3,
                <<"hidden lg:block fill-current"/utf8>>
            ),
            gbr@ui@svg:render(_pipe@4)
        end,
        begin
            _pipe@5 = gbr@ui@svg:new(24, 24),
            _pipe@6 = gbr@ui@svg@icons:hamburguer(_pipe@5),
            _pipe@7 = fun gbr@ui@svg@core:classes/2(
                _pipe@6,
                [{<<"block lg:hidden"/utf8>>, not Open},
                    {<<"hidden"/utf8>>, Open}]
            ),
            gbr@ui@svg:render(_pipe@7)
        end,
        begin
            _pipe@8 = gbr@ui@svg:new(24, 24),
            _pipe@9 = gbr@ui@svg@icons:cross(_pipe@8),
            _pipe@10 = fun gbr@ui@svg@core:classes/2(
                _pipe@9,
                [{<<"block lg:hidden"/utf8>>, Open},
                    {<<"hidden"/utf8>>, not Open}]
            ),
            gbr@ui@svg:render(_pipe@10)
        end],
    _pipe@11 = do_inner(Button, Inner, Onclick),
    render(_pipe@11).
Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT