Current section
Files
Jump to
Current section
Files
src/hx.erl
-module(hx).
-compile([no_auto_import, nowarn_unused_vars, nowarn_unused_function, nowarn_nomatch]).
-export([timing_declaration_to_string/1, get/1, post/1, put/1, patch/1, delete/1, trigger/1, trigger_polling/2, trigger_load_polling/2, indicator/1, target/1, swap/2, swap_oob/3, sync/1, select/1, select_oob/2, push_url/1, confirm/1, boost/1, hyper_script/1, vals/2, disable/0, disable_elt/1, disinherit/1, disinherit_all/0, encoding/1, ext/1, headers/2, history/1, history_elt/0, include/1, inherit/1, inherit_all/0, params/1, preserve/0, prompt/1, replace_url/0, no_replace_url/0, replace_url_with/1, request/1, validate/1]).
-export_type([timing/0, swap/0, sync_option/0, scroll/0, swap_option/0, extended_css_selector/0, queue/0, event/0, event_modifier/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.
-type timing() :: {seconds, integer()} | {milliseconds, integer()}.
-type swap() :: inner_html |
outer_html |
'after' |
afterbegin |
beforebegin |
beforeend |
afterend |
delete |
swap_none.
-type sync_option() :: {default, binary()} |
{drop, binary()} |
{abort, binary()} |
{replace, binary()} |
{sync_queue, binary(), queue()}.
-type scroll() :: top | bottom.
-type swap_option() :: {transition, boolean()} |
{swap, timing()} |
{settle, timing()} |
{ignore_title, boolean()} |
{scroll, scroll()} |
{show, scroll()} |
{focus_scroll, boolean()}.
-type extended_css_selector() :: {css_selector, binary()} |
document |
window |
{closest, binary()} |
{find, binary()} |
{next, gleam@option:option(binary())} |
{previous, gleam@option:option(binary())} |
this.
-type queue() :: first | last | all.
-type event() :: {event, binary(), list(event_modifier())}.
-type event_modifier() :: once |
changed |
{delay, timing()} |
{throttle, timing()} |
{from, extended_css_selector()} |
{target, binary()} |
consume |
{queue_event, gleam@option:option(queue())}.
-file("src/hx.gleam", 84).
-spec sync_option_to_string(sync_option()) -> binary().
sync_option_to_string(Sync_option) ->
case Sync_option of
{drop, Selector} ->
<<Selector/binary, ":drop"/utf8>>;
{abort, Selector@1} ->
<<Selector@1/binary, ":abort"/utf8>>;
{replace, Selector@2} ->
<<Selector@2/binary, ":replace"/utf8>>;
{sync_queue, Selector@3, first} ->
<<Selector@3/binary, ":queue first"/utf8>>;
{sync_queue, Selector@4, all} ->
<<Selector@4/binary, ":queue all"/utf8>>;
{sync_queue, Selector@5, last} ->
<<Selector@5/binary, ":queue last"/utf8>>;
{default, Selector@6} ->
Selector@6
end.
-file("src/hx.gleam", 96).
-spec swap_to_string(swap()) -> binary().
swap_to_string(Swap) ->
case Swap of
inner_html ->
<<"innerHTML"/utf8>>;
outer_html ->
<<"outerHTML"/utf8>>;
'after' ->
<<"after"/utf8>>;
afterbegin ->
<<"afterBegin"/utf8>>;
beforebegin ->
<<"beforeBegin"/utf8>>;
beforeend ->
<<"beforeEnd"/utf8>>;
afterend ->
<<"afterEnd"/utf8>>;
delete ->
<<"delete"/utf8>>;
swap_none ->
<<"none"/utf8>>
end.
-file("src/hx.gleam", 129).
-spec extended_css_selector_to_string(extended_css_selector()) -> binary().
extended_css_selector_to_string(Extended_css_selector) ->
case Extended_css_selector of
{css_selector, Css_selector} ->
Css_selector;
document ->
<<"document"/utf8>>;
window ->
<<"window"/utf8>>;
{closest, Css_selector@1} ->
<<"closest "/utf8, Css_selector@1/binary>>;
{find, Css_selector@2} ->
<<"find "/utf8, Css_selector@2/binary>>;
{next, Css_selector@3} ->
<<"next "/utf8,
(gleam@option:unwrap(Css_selector@3, <<""/utf8>>))/binary>>;
{previous, Css_selector@4} ->
<<"previous "/utf8,
(gleam@option:unwrap(Css_selector@4, <<""/utf8>>))/binary>>;
this ->
<<"this"/utf8>>
end.
-file("src/hx.gleam", 144).
-spec queue_to_string(gleam@option:option(queue())) -> binary().
queue_to_string(Queue) ->
case Queue of
{some, first} ->
<<"first"/utf8>>;
{some, last} ->
<<"last"/utf8>>;
{some, all} ->
<<"all"/utf8>>;
none ->
<<"none"/utf8>>
end.
-file("src/hx.gleam", 154).
?DOC(false).
-spec timing_declaration_to_string(timing()) -> binary().
timing_declaration_to_string(Timing) ->
case Timing of
{seconds, N} ->
<<(gleam@int:to_string(N))/binary, "s"/utf8>>;
{milliseconds, N@1} ->
<<(gleam@int:to_string(N@1))/binary, "ms"/utf8>>
end.
-file("src/hx.gleam", 110).
-spec swap_option_to_string(swap_option()) -> binary().
swap_option_to_string(Swap_option) ->
case Swap_option of
{transition, true} ->
<<"transition:true"/utf8>>;
{transition, false} ->
<<"transition:false"/utf8>>;
{swap, Timing_declaration} ->
<<"swap:"/utf8,
(timing_declaration_to_string(Timing_declaration))/binary>>;
{settle, Timing_declaration@1} ->
<<"settle:"/utf8,
(timing_declaration_to_string(Timing_declaration@1))/binary>>;
{ignore_title, true} ->
<<"ignoreTitle:true"/utf8>>;
{ignore_title, false} ->
<<"ignoreTitle:false"/utf8>>;
{scroll, top} ->
<<"scroll:top"/utf8>>;
{scroll, bottom} ->
<<"scroll:bottom"/utf8>>;
{show, top} ->
<<"show:top"/utf8>>;
{show, bottom} ->
<<"show:bottom"/utf8>>;
{focus_scroll, true} ->
<<"focus-scroll:true"/utf8>>;
{focus_scroll, false} ->
<<"focus-scroll:false"/utf8>>
end.
-file("src/hx.gleam", 167).
-spec event_modifier_to_string(event_modifier()) -> binary().
event_modifier_to_string(Event_modifier) ->
case Event_modifier of
once ->
<<"once"/utf8>>;
changed ->
<<"changed"/utf8>>;
{delay, Timing} ->
<<"delay:"/utf8, (timing_declaration_to_string(Timing))/binary>>;
{throttle, Timing@1} ->
<<"throttle:"/utf8,
(timing_declaration_to_string(Timing@1))/binary>>;
{from, Extended_css_selector} ->
<<"from:"/utf8,
(extended_css_selector_to_string(Extended_css_selector))/binary>>;
{target, Css_selector} ->
<<"target:"/utf8, Css_selector/binary>>;
consume ->
<<"consume"/utf8>>;
{queue_event, Queue} ->
<<"queue:"/utf8, (queue_to_string(Queue))/binary>>
end.
-file("src/hx.gleam", 161).
-spec event_to_string(event()) -> binary().
event_to_string(Event) ->
<<(erlang:element(2, Event))/binary,
(begin
_pipe = gleam@list:map(
erlang:element(3, Event),
fun(E) -> <<" "/utf8, (event_modifier_to_string(E))/binary>> end
),
gleam@string:join(_pipe, <<""/utf8>>)
end)/binary>>.
-file("src/hx.gleam", 190).
?DOC(
" # hx-get\n"
" Issues a GET request to the given URL when the element is triggered.\n"
" By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute, provided by lustre_hx.trigger, to specify which event will cause the request.\n"
).
-spec get(binary()) -> lustre@internals@vdom:attribute(any()).
get(Url) ->
lustre@attribute:attribute(<<"hx-get"/utf8>>, Url).
-file("src/hx.gleam", 202).
?DOC(
" # hx-post\n"
" Issues a POST request to the given URL when the element is triggered. By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute, provided by lustre_hx.trigger, to specify which event will cause the request.\n"
).
-spec post(binary()) -> lustre@internals@vdom:attribute(any()).
post(Url) ->
lustre@attribute:attribute(<<"hx-post"/utf8>>, Url).
-file("src/hx.gleam", 214).
?DOC(
" # hx-put\n"
" Issues a PUT request to the given URL when the element is triggered. By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute, provided by lustre_hx.trigger, to specify which event will cause the request.\n"
).
-spec put(binary()) -> lustre@internals@vdom:attribute(any()).
put(Url) ->
lustre@attribute:attribute(<<"hx-put"/utf8>>, Url).
-file("src/hx.gleam", 226).
?DOC(
" # hx-patch\n"
" Issues a PATCH request to the given URL when the element is triggered. By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute, provided by lustre_hx.trigger, to specify which event will cause the request.\n"
).
-spec patch(binary()) -> lustre@internals@vdom:attribute(any()).
patch(Url) ->
lustre@attribute:attribute(<<"hx-patch"/utf8>>, Url).
-file("src/hx.gleam", 238).
?DOC(
" # hx-delete\n"
" Issues a DELETE request to the given URL when the element is triggered. By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute, provided by lustre_hx.trigger, to specify which event will cause the request.\n"
).
-spec delete(binary()) -> lustre@internals@vdom:attribute(any()).
delete(Url) ->
lustre@attribute:attribute(<<"hx-delete"/utf8>>, Url).
-file("src/hx.gleam", 251).
?DOC(
" # hx-trigger\n"
" By default, AJAX requests are triggered by the “natural” event of an element:\n"
"\n"
" * input, textarea & select are triggered on the change event\n"
" * form is triggered on the submit event\n"
" * everything else is triggered by the click event\n"
"\n"
" If you want different behavior you can use the hx-trigger attribute to specify which event will cause the request.\n"
).
-spec trigger(list(event())) -> lustre@internals@vdom:attribute(any()).
trigger(Events) ->
Events@1 = begin
_pipe = Events,
_pipe@1 = gleam@list:map(_pipe, fun event_to_string/1),
gleam@string:join(_pipe@1, <<", "/utf8>>)
end,
lustre@attribute:attribute(<<"hx-trigger"/utf8>>, Events@1).
-file("src/hx.gleam", 276).
?DOC(
" # Polling trigger\n"
" Creates an attribute that triggers a request on a polling basis.\n"
" \n"
" * `timing` specifies how frequently the polling should occur (Seconds or Milliseconds)\n"
" * `filters` optional conditions that can filter when the polling is active\n"
"\n"
" ## Examples\n"
" ```gleam\n"
" // Simple polling every 5 seconds\n"
" hx.trigger_polling(timing: hx.Seconds(5), filters: None)\n"
"\n"
" // Polling with a condition - only poll when element is visible\n"
" hx.trigger_polling(timing: hx.Seconds(10), filters: Some(\"intersect\"))\n"
"\n"
" // Polling with a custom condition\n"
" hx.trigger_polling(timing: hx.Milliseconds(500), filters: Some(\"this.value.length > 3\"))\n"
" ```\n"
).
-spec trigger_polling(timing(), gleam@option:option(binary())) -> lustre@internals@vdom:attribute(any()).
trigger_polling(Timing, Filters) ->
case Filters of
{some, Filters@1} ->
lustre@attribute:attribute(
<<"hx-trigger"/utf8>>,
<<<<<<<<"every "/utf8,
(timing_declaration_to_string(Timing))/binary>>/binary,
" ["/utf8>>/binary,
Filters@1/binary>>/binary,
"]"/utf8>>
);
none ->
lustre@attribute:attribute(
<<"hx-trigger"/utf8>>,
<<"every "/utf8, (timing_declaration_to_string(Timing))/binary>>
)
end.
-file("src/hx.gleam", 306).
?DOC(
" # Load with polling trigger\n"
" Creates an attribute that triggers a request on page load and then continues on a polling basis.\n"
" \n"
" * `timing` specifies how frequently the polling should occur (Seconds or Milliseconds)\n"
" * `filters` conditions that can filter when the polling is active (required)\n"
"\n"
" ## Example\n"
" ```gleam\n"
" // Poll every 5 seconds while the element is visible\n"
" hx.trigger_load_polling(timing: hx.Seconds(5), filters: \"when_visible\")\n"
" \n"
" // Poll every 2 seconds while a condition is met\n"
" hx.trigger_load_polling(timing: hx.Seconds(2), filters: \"this.getAttribute('data-ready') === 'true'\")\n"
" ```\n"
).
-spec trigger_load_polling(timing(), binary()) -> lustre@internals@vdom:attribute(any()).
trigger_load_polling(Timing, Filters) ->
lustre@attribute:attribute(
<<"hx-trigger"/utf8>>,
<<<<<<<<"load every "/utf8,
(timing_declaration_to_string(Timing))/binary>>/binary,
" ["/utf8>>/binary,
Filters/binary>>/binary,
"]"/utf8>>
).
-file("src/hx.gleam", 334).
?DOC(
" # hx-indicator\n"
" Shows elements during the AJAX request.\n"
" \n"
" The `hx-indicator` attribute allows you to specify which element will have the `htmx-request` class\n"
" during a request. This can be used to show spinners or loading indicators while the request is in progress.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, span, text}\n"
" import hx\n"
"\n"
" // Show a loading indicator during request\n"
" div([hx.get(\"/data\"), hx.indicator(\".loading-indicator\")], [\n"
" span([class(\"loading-indicator\")], [text(\"Loading...\")]),\n"
" button([], [text(\"Load Data\")])\n"
" ])\n"
" ```\n"
).
-spec indicator(binary()) -> lustre@internals@vdom:attribute(any()).
indicator(Css_selector_or_closest) ->
lustre@attribute:attribute(<<"hx-indicator"/utf8>>, Css_selector_or_closest).
-file("src/hx.gleam", 370).
?DOC(
" # hx-target\n"
" Specifies the target element to swap content into.\n"
" \n"
" By default, htmx swaps content into the element that triggered the request.\n"
" The `hx-target` attribute allows you to target a different element for content swapping.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Target a specific element with ID\n"
" button([hx.get(\"/data\"), hx.target(hx.CssSelector(\"#result\"))], [\n"
" text(\"Load Data\")\n"
" ]),\n"
" \n"
" // Using 'this' to target the element itself\n"
" button([hx.get(\"/status\"), hx.target(hx.This)], [\n"
" text(\"Check Status\")\n"
" ]),\n"
" \n"
" // Using 'closest' to target a parent element\n"
" div([class(\"card\")], [\n"
" button([hx.get(\"/content\"), hx.target(hx.Closest(\".card\"))], [\n"
" text(\"Refresh Card\")\n"
" ])\n"
" ]),\n"
" \n"
" div([id(\"result\")], [])\n"
" ])\n"
" ```\n"
).
-spec target(extended_css_selector()) -> lustre@internals@vdom:attribute(any()).
target(Extended_css_selector) ->
lustre@attribute:attribute(
<<"hx-target"/utf8>>,
extended_css_selector_to_string(Extended_css_selector)
).
-file("src/hx.gleam", 407).
?DOC(
" # hx-swap\n"
" Controls how content is swapped into the DOM.\n"
" \n"
" The `hx-swap` attribute allows you to specify how the response will be swapped relative to the target.\n"
" You can control the swap method (innerHTML, outerHTML, etc.) and additional options through modifiers.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Basic swap using innerHTML (default)\n"
" button([hx.get(\"/content\"), hx.swap(hx.InnerHTML, None)], [\n"
" text(\"Load Content\")\n"
" ]),\n"
" \n"
" // Using outerHTML with transition\n"
" button([hx.get(\"/replace\"), hx.swap(hx.OuterHTML, Some(hx.Transition(True)))], [\n"
" text(\"Replace Completely\")\n"
" ]),\n"
" \n"
" // Add content after the target with a timing modifier\n"
" button([hx.get(\"/append\"), hx.swap(hx.After, Some(hx.Swap(hx.Milliseconds(500))))], [\n"
" text(\"Append Slowly\")\n"
" ]),\n"
" \n"
" // Add content and scroll to top\n"
" button([hx.get(\"/more\"), hx.swap(hx.Beforeend, Some(hx.Scroll(hx.Top)))], [\n"
" text(\"Load More and Scroll\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec swap(swap(), gleam@option:option(swap_option())) -> lustre@internals@vdom:attribute(any()).
swap(Swap, Option) ->
case Option of
{some, Option@1} ->
_pipe = Swap,
_pipe@1 = swap_to_string(_pipe),
_pipe@2 = gleam@string:append(
_pipe@1,
<<" "/utf8, (swap_option_to_string(Option@1))/binary>>
),
lustre@attribute:attribute(<<"hx-swap"/utf8>>, _pipe@2);
none ->
_pipe@3 = Swap,
_pipe@4 = swap_to_string(_pipe@3),
lustre@attribute:attribute(<<"hx-swap"/utf8>>, _pipe@4)
end.
-file("src/hx.gleam", 465).
?DOC(
" # hx-swap-oob\n"
" Allows you to specify that some content in a response should be swapped \"out of band\" (somewhere other than the target).\n"
" \n"
" This is useful for updating multiple parts of the page with a single request. Combines with the `hx-select-oob` attribute.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Basic out-of-band swap\n"
" button([\n"
" hx.get(\"/update-multiple\"),\n"
" hx.swap_oob(swap: hx.InnerHTML, with_css_selector: None, with_modifier: None)\n"
" ], [\n"
" text(\"Update Multiple Elements\")\n"
" ]),\n"
" \n"
" // With CSS selector targeting\n"
" button([\n"
" hx.get(\"/update-status\"),\n"
" hx.swap_oob(swap: hx.InnerHTML, with_css_selector: Some(\"#status\"), with_modifier: None)\n"
" ], [\n"
" text(\"Update Status\")\n"
" ]),\n"
" \n"
" // With both CSS selector and modifier\n"
" button([\n"
" hx.get(\"/update-content\"),\n"
" hx.swap_oob(\n"
" swap: hx.Beforeend, \n"
" with_css_selector: Some(\"#log\"), \n"
" with_modifier: Some(hx.Scroll(hx.Bottom))\n"
" )\n"
" ], [\n"
" text(\"Add To Log\")\n"
" ]),\n"
" \n"
" div([id(\"status\")], [text(\"Status: Ready\")]),\n"
" div([id(\"log\")], [])\n"
" ])\n"
" ```\n"
).
-spec swap_oob(
swap(),
gleam@option:option(binary()),
gleam@option:option(swap_option())
) -> lustre@internals@vdom:attribute(any()).
swap_oob(Swap, Css_selector, Modifier) ->
case {Css_selector, Modifier} of
{{some, Css_selector@1}, {some, Option}} ->
_pipe = Swap,
_pipe@1 = swap_to_string(_pipe),
_pipe@2 = gleam@string:append(
_pipe@1,
<<","/utf8, Css_selector@1/binary>>
),
_pipe@3 = gleam@string:append(
_pipe@2,
<<" "/utf8, (swap_option_to_string(Option))/binary>>
),
lustre@attribute:attribute(<<"hx-swap-oob"/utf8>>, _pipe@3);
{none, {some, Option@1}} ->
_pipe@4 = Swap,
_pipe@5 = swap_to_string(_pipe@4),
_pipe@6 = gleam@string:append(
_pipe@5,
<<" "/utf8, (swap_option_to_string(Option@1))/binary>>
),
lustre@attribute:attribute(<<"hx-swap-oob"/utf8>>, _pipe@6);
{{some, Css_selector@2}, none} ->
_pipe@7 = Swap,
_pipe@8 = swap_to_string(_pipe@7),
_pipe@9 = gleam@string:append(
_pipe@8,
<<","/utf8, Css_selector@2/binary>>
),
lustre@attribute:attribute(<<"hx-swap-oob"/utf8>>, _pipe@9);
{none, none} ->
_pipe@10 = Swap,
_pipe@11 = swap_to_string(_pipe@10),
lustre@attribute:attribute(<<"hx-swap-oob"/utf8>>, _pipe@11)
end.
-file("src/hx.gleam", 542).
?DOC(
" # hx-sync\n"
" Synchronizes AJAX requests with other elements.\n"
" \n"
" The `hx-sync` attribute allows you to coordinate AJAX requests so that they do not all fire at once\n"
" or in a way that might confuse the user or overwhelm the server. You can specify different sync options\n"
" to control request behavior.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Default sync option with a form\n"
" button([\n"
" hx.get(\"/data\"), \n"
" hx.sync([hx.Default(\"#myForm\")])\n"
" ], [\n"
" text(\"Synchronized with form\")\n"
" ]),\n"
" \n"
" // Drop previous requests\n"
" button([\n"
" hx.get(\"/api/search\"), \n"
" hx.sync([hx.Drop(\"#searchForm\")])\n"
" ], [\n"
" text(\"New search cancels previous\")\n"
" ]),\n"
" \n"
" // Queue requests\n"
" button([\n"
" hx.post(\"/api/queue\"), \n"
" hx.sync([hx.SyncQueue(\"#queueTarget\", hx.First)])\n"
" ], [\n"
" text(\"Queue (first)\")\n"
" ]),\n"
" \n"
" // Multiple sync options\n"
" button([\n"
" hx.post(\"/api/complex\"), \n"
" hx.sync([hx.Drop(\"#form1\"), hx.SyncQueue(\"#form2\", hx.Last)])\n"
" ], [\n"
" text(\"Complex sync\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec sync(list(sync_option())) -> lustre@internals@vdom:attribute(any()).
sync(Syncronize_on) ->
lustre@attribute:attribute(
<<"hx-sync"/utf8>>,
begin
_pipe = gleam@list:map(Syncronize_on, fun sync_option_to_string/1),
gleam@string:join(_pipe, <<" "/utf8>>)
end
).
-file("src/hx.gleam", 578).
?DOC(
" # hx-select\n"
" Selects a subset of the server response to process.\n"
" \n"
" The `hx-select` attribute allows you to select a specific part of the server response for swapping,\n"
" using CSS selectors. This is useful when you want to extract only a portion of a larger HTML response.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Select only the div with id \"content\" from the response\n"
" button([\n"
" hx.get(\"/page\"), \n"
" hx.select(\"#content\")\n"
" ], [\n"
" text(\"Load Content Only\")\n"
" ]),\n"
" \n"
" // Select elements matching a class\n"
" button([\n"
" hx.get(\"/items\"), \n"
" hx.select(\".item\")\n"
" ], [\n"
" text(\"Load Items\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec select(binary()) -> lustre@internals@vdom:attribute(any()).
select(Css_selector) ->
lustre@attribute:attribute(<<"hx-select"/utf8>>, Css_selector).
-file("src/hx.gleam", 619).
?DOC(
" # Out-of-band selection\n"
" Selects content from a response to be swapped in to the current page.\n"
" \n"
" The `select_oob` function allows you to process multiple pieces of content from a response,\n"
" selecting them with different CSS selectors and applying different swap strategies.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Basic select with no swap strategies\n"
" button([\n"
" hx.get(\"/update\"),\n"
" hx.select_oob(\".status\", [])\n"
" ], [\n"
" text(\"Update Status\")\n"
" ]),\n"
" \n"
" // With a single swap strategy\n"
" button([\n"
" hx.get(\"/update-card\"),\n"
" hx.select_oob(\".card-content\", [hx.InnerHTML])\n"
" ], [\n"
" text(\"Update Card Content\")\n"
" ]),\n"
" \n"
" // With multiple swap strategies\n"
" button([\n"
" hx.get(\"/update-multiple\"),\n"
" hx.select_oob(\".data\", [hx.OuterHTML, hx.After, hx.Delete])\n"
" ], [\n"
" text(\"Complex Update\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec select_oob(binary(), list(swap())) -> lustre@internals@vdom:attribute(any()).
select_oob(Css_selector, Swap_strategies) ->
Swap_strategies@1 = begin
_pipe = Swap_strategies,
_pipe@1 = gleam@list:map(_pipe, fun swap_to_string/1),
gleam@string:join(_pipe@1, <<","/utf8>>)
end,
case Swap_strategies@1 of
<<""/utf8>> ->
lustre@attribute:attribute(<<"hx-select"/utf8>>, Css_selector);
_ ->
lustre@attribute:attribute(
<<"hx-select"/utf8>>,
<<<<Css_selector/binary, ":"/utf8>>/binary,
Swap_strategies@1/binary>>
)
end.
-file("src/hx.gleam", 659).
?DOC(
" # hx-push-url\n"
" Pushes a URL into the browser's location bar.\n"
" \n"
" The `hx-push-url` attribute allows you to update the browser's URL without causing a full page reload. \n"
" This is useful for maintaining proper history navigation and bookmarkable URLs with AJAX.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Push URL to browser history\n"
" button([\n"
" hx.get(\"/products/123\"), \n"
" hx.push_url(True)\n"
" ], [\n"
" text(\"View Product\")\n"
" ]),\n"
" \n"
" // Don't push URL (useful for background updates)\n"
" button([\n"
" hx.get(\"/refresh-status\"), \n"
" hx.push_url(False)\n"
" ], [\n"
" text(\"Refresh Status\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec push_url(boolean()) -> lustre@internals@vdom:attribute(any()).
push_url(Bool) ->
case Bool of
true ->
lustre@attribute:attribute(<<"hx-push-url"/utf8>>, <<"true"/utf8>>);
false ->
lustre@attribute:attribute(<<"hx-push-url"/utf8>>, <<"false"/utf8>>)
end.
-file("src/hx.gleam", 687).
?DOC(
" # hx-confirm\n"
" Shows a confirmation dialog before making a request.\n"
" \n"
" The `hx-confirm` attribute is useful for dangerous or destructive operations that you\n"
" want the user to confirm before proceeding.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Simple confirmation message\n"
" button([\n"
" hx.delete(\"/user/123\"), \n"
" hx.confirm(\"Are you sure you want to delete this user?\")\n"
" ], [\n"
" text(\"Delete User\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec confirm(binary()) -> lustre@internals@vdom:attribute(any()).
confirm(Confirm_text) ->
lustre@attribute:attribute(<<"hx-confirm"/utf8>>, Confirm_text).
-file("src/hx.gleam", 712).
?DOC(
" # hx-boost\n"
" Makes regular links and forms use AJAX for navigation.\n"
" \n"
" The `hx-boost` attribute progressively enhances links and forms to use AJAX instead of full page \n"
" reloads, while falling back to standard navigation if JavaScript is disabled.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{a, button, div, form, text}\n"
" import hx\n"
"\n"
" // Apply boost to an entire section - all links/forms inside will use AJAX\n"
" div([hx.boost(True)], [\n"
" a([href(\"/products\")], [text(\"Products\")]),\n"
" a([href(\"/about\")], [text(\"About\")]),\n"
" form([action(\"/search\"), method(\"get\")], [\n"
" // Form elements...\n"
" button([], [text(\"Search\")])\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec boost(boolean()) -> lustre@internals@vdom:attribute(any()).
boost(Set) ->
case Set of
true ->
lustre@attribute:attribute(<<"hx-boost"/utf8>>, <<"true"/utf8>>);
false ->
lustre@attribute:attribute(<<"hx-boost"/utf8>>, <<"false"/utf8>>)
end.
-file("src/hx.gleam", 746).
?DOC(
" # Hyperscript integration (_)\n"
" Adds hyperscript to an element using the \"_\" attribute.\n"
" \n"
" Hyperscript is a companion language for HTMX that allows you to add client-side interactivity\n"
" with a concise, readable syntax.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Toggle a class on click\n"
" button([\n"
" hx.hyper_script(\"on click toggle .active on me\")\n"
" ], [\n"
" text(\"Toggle Active\")\n"
" ]),\n"
" \n"
" // Hide an element after a delay\n"
" div([\n"
" hx.hyper_script(\"on load wait 3s then add .hidden\")\n"
" ], [\n"
" text(\"I will disappear in 3 seconds\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec hyper_script(binary()) -> lustre@internals@vdom:attribute(any()).
hyper_script(Script) ->
lustre@attribute:attribute(<<"_"/utf8>>, Script).
-file("src/hx.gleam", 791).
?DOC(
" # hx-vals\n"
" Sets values to be included in requests.\n"
" \n"
" The `hx-vals` attribute allows you to add additional values to an AJAX request.\n"
" This is useful for including data that isn't part of a form.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import gleam/json\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Add static JSON values to the request\n"
" button([\n"
" hx.get(\"/api/fetch\"), \n"
" hx.vals(\n"
" json.object([\n"
" #(\"user_id\", json.string(\"123\")), \n"
" #(\"version\", json.number(2.0))\n"
" ]),\n"
" False\n"
" )\n"
" ], [\n"
" text(\"Fetch Data\")\n"
" ]),\n"
" \n"
" // Use JavaScript to compute values at runtime\n"
" button([\n"
" hx.post(\"/api/save\"), \n"
" hx.vals(\n"
" json.object([\n"
" #(\"timestamp\", json.string(\"now\"))\n"
" ]),\n"
" True\n"
" )\n"
" ], [\n"
" text(\"Save with Timestamp\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec vals(gleam@json:json(), boolean()) -> lustre@internals@vdom:attribute(any()).
vals(Json, Compute_value) ->
case Compute_value of
true ->
lustre@attribute:attribute(
<<"hx-vals"/utf8>>,
<<"js:"/utf8, (gleam@json:to_string(Json))/binary>>
);
false ->
lustre@attribute:attribute(
<<"hx-vals"/utf8>>,
gleam@json:to_string(Json)
)
end.
-file("src/hx.gleam", 819).
?DOC(
" # hx-disable\n"
" Disables HTMX processing for a given element.\n"
" \n"
" The `hx-disable` attribute is useful when you want to temporarily or conditionally\n"
" disable HTMX processing on an element.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // This button will not process HTMX attributes\n"
" button([\n"
" hx.get(\"/api/data\"), // This will be ignored \n"
" hx.disable()\n"
" ], [\n"
" text(\"HTMX Disabled\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec disable() -> lustre@internals@vdom:attribute(any()).
disable() ->
lustre@attribute:attribute(<<"hx-disable"/utf8>>, <<""/utf8>>).
-file("src/hx.gleam", 857).
?DOC(
" # hx-disable-elt\n"
" Disables elements during requests.\n"
" \n"
" The `hx-disable-elt` attribute allows you to specify elements that should be disabled\n"
" during the course of an AJAX request. Useful for preventing duplicate form submissions.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, form, input, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" form([\n"
" hx.post(\"/api/submit\"),\n"
" // Disable the submit button during the request\n"
" hx.disable_elt([hx.CssSelector(\"button[type='submit']\")])\n"
" ], [\n"
" input([type_(\"text\"), name(\"name\")], []),\n"
" button([type_(\"submit\")], [text(\"Submit\")])\n"
" ]),\n"
" \n"
" // Disable multiple elements\n"
" form([\n"
" hx.post(\"/api/complex-submit\"),\n"
" hx.disable_elt([\n"
" hx.CssSelector(\"input\"), \n"
" hx.CssSelector(\"button\"), \n"
" hx.This\n"
" ])\n"
" ], [\n"
" // Form elements...\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec disable_elt(list(extended_css_selector())) -> lustre@internals@vdom:attribute(any()).
disable_elt(Extended_css_selectors) ->
Selectors = begin
_pipe = Extended_css_selectors,
_pipe@1 = gleam@list:map(_pipe, fun extended_css_selector_to_string/1),
gleam@string:join(_pipe@1, <<","/utf8>>)
end,
lustre@attribute:attribute(<<"hx-disable-elt"/utf8>>, Selectors).
-file("src/hx.gleam", 892).
?DOC(
" # hx-disinherit\n"
" Controls which attributes are inherited from ancestor elements.\n"
" \n"
" The `hx-disinherit` attribute allows you to prevent specific HTMX attributes from being\n"
" inherited by an element from its ancestors.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([\n"
" // Parent has a trigger which will be inherited by children\n"
" hx.trigger([hx.Event(event: \"click\", modifiers: [])])\n"
" ], [\n"
" // This button will inherit the click trigger\n"
" button([hx.get(\"/data1\")], [text(\"Inherited Trigger\")]),\n"
" \n"
" // This button will NOT inherit the click trigger\n"
" button([\n"
" hx.get(\"/data2\"),\n"
" hx.disinherit([\"hx-trigger\"])\n"
" ], [\n"
" text(\"No Trigger Inheritance\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec disinherit(list(binary())) -> lustre@internals@vdom:attribute(any()).
disinherit(Attributes) ->
Attributes@1 = begin
_pipe = Attributes,
gleam@string:join(_pipe, <<" "/utf8>>)
end,
lustre@attribute:attribute(<<"hx-disinherit"/utf8>>, Attributes@1).
-file("src/hx.gleam", 926).
?DOC(
" # hx-disinherit (all attributes)\n"
" Prevents inheritance of all HTMX attributes from ancestor elements.\n"
" \n"
" The `disinherit_all` function is a shorthand for preventing the inheritance of\n"
" all HTMX attributes, which can help isolate parts of your UI from unwanted inheritance.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([\n"
" // Parent has multiple HTMX attributes\n"
" hx.get(\"/parent-data\"),\n"
" hx.trigger([hx.Event(event: \"click\", modifiers: [])]),\n"
" hx.swap(hx.InnerHTML, None)\n"
" ], [\n"
" // This button will inherit all HTMX attributes from parent\n"
" button([], [text(\"Inherited Everything\")]),\n"
" \n"
" // This button won't inherit any HTMX attributes\n"
" button([\n"
" hx.post(\"/isolated\"),\n"
" hx.disinherit_all()\n"
" ], [\n"
" text(\"No Inheritance\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec disinherit_all() -> lustre@internals@vdom:attribute(any()).
disinherit_all() ->
lustre@attribute:attribute(<<"hx-disinherit"/utf8>>, <<"*"/utf8>>).
-file("src/hx.gleam", 952).
?DOC(
" # hx-encoding\n"
" Sets the encoding type for the request.\n"
" \n"
" The `hx-encoding` attribute allows you to specify the encoding for HTMX requests,\n"
" particularly useful for form submissions that include file uploads.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, form, input, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Form with file uploads\n"
" form([\n"
" hx.post(\"/upload\"),\n"
" hx.encoding(\"multipart/form-data\")\n"
" ], [\n"
" input([type_(\"file\"), name(\"file\")], []),\n"
" button([type_(\"submit\")], [text(\"Upload File\")])\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec encoding(binary()) -> lustre@internals@vdom:attribute(any()).
encoding(Encoding) ->
lustre@attribute:attribute(<<"hx-encoding"/utf8>>, Encoding).
-file("src/hx.gleam", 985).
?DOC(
" # hx-ext\n"
" Includes one or more HTMX extensions for an element.\n"
" \n"
" HTMX extensions allow you to extend the functionality of HTMX with additional\n"
" features and behaviors.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Using the client-side templates extension\n"
" button([\n"
" hx.get(\"/api/data\"),\n"
" hx.ext([\"client-side-templates\"])\n"
" ], [\n"
" text(\"Load With Template\")\n"
" ]),\n"
" \n"
" // Using multiple extensions\n"
" button([\n"
" hx.post(\"/api/data\"),\n"
" hx.ext([\"json-enc\", \"ajax-header\"])\n"
" ], [\n"
" text(\"With Multiple Extensions\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec ext(list(binary())) -> lustre@internals@vdom:attribute(any()).
ext(Ext) ->
Ext@1 = begin
_pipe = Ext,
gleam@string:join(_pipe, <<","/utf8>>)
end,
lustre@attribute:attribute(<<"hx-ext"/utf8>>, Ext@1).
-file("src/hx.gleam", 1031).
?DOC(
" # hx-headers\n"
" Adds custom headers to AJAX requests.\n"
" \n"
" The `hx-headers` attribute allows you to specify additional HTTP headers to be\n"
" included in an AJAX request.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import gleam/json\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Static headers\n"
" button([\n"
" hx.get(\"/api/data\"), \n"
" hx.headers(\n"
" json.object([\n"
" #(\"X-Requested-With\", json.string(\"XMLHttpRequest\")),\n"
" #(\"Authorization\", json.string(\"Bearer token123\"))\n"
" ]),\n"
" False\n"
" )\n"
" ], [\n"
" text(\"With Custom Headers\")\n"
" ]),\n"
" \n"
" // Dynamic headers using JavaScript\n"
" button([\n"
" hx.post(\"/api/submit\"), \n"
" hx.headers(\n"
" json.object([\n"
" #(\"X-Session-Token\", json.string(\"localStorage.getItem('token')\"))\n"
" ]),\n"
" True\n"
" )\n"
" ], [\n"
" text(\"With Dynamic Headers\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec headers(gleam@json:json(), boolean()) -> lustre@internals@vdom:attribute(any()).
headers(Headers, Compute_value) ->
case Compute_value of
true ->
lustre@attribute:attribute(
<<"hx-headers"/utf8>>,
<<"js:"/utf8, (gleam@json:to_string(Headers))/binary>>
);
false ->
lustre@attribute:attribute(
<<"hx-headers"/utf8>>,
gleam@json:to_string(Headers)
)
end.
-file("src/hx.gleam", 1069).
?DOC(
" # hx-history\n"
" Controls if the element should be included in the browser history.\n"
" \n"
" The `hx-history` attribute allows you to control whether requests for a given element\n"
" should be recorded in the browser's history.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // This will be added to browser history (default behavior with push_url)\n"
" button([\n"
" hx.get(\"/page1\"),\n"
" hx.push_url(True),\n"
" hx.history(True)\n"
" ], [\n"
" text(\"Navigate with History\")\n"
" ]),\n"
" \n"
" // This will not be added to browser history even though push_url is True\n"
" button([\n"
" hx.get(\"/temp-view\"),\n"
" hx.push_url(True),\n"
" hx.history(False)\n"
" ], [\n"
" text(\"Temporary View\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec history(boolean()) -> lustre@internals@vdom:attribute(any()).
history(Should_be_saved) ->
case Should_be_saved of
true ->
lustre@attribute:attribute(<<"hx-history"/utf8>>, <<"true"/utf8>>);
false ->
lustre@attribute:attribute(<<"hx-history"/utf8>>, <<"false"/utf8>>)
end.
-file("src/hx.gleam", 1098).
?DOC(
" # hx-history-elt\n"
" Marks the element that should be included in the browser history.\n"
" \n"
" The `hx-history-elt` attribute specifies that this element's innerHTML should be\n"
" saved and restored when the user navigates through browser history.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // The main content area that should be saved in browser history\n"
" div([hx.history_elt()], [\n"
" text(\"This content will be saved in browser history\")\n"
" ]),\n"
" \n"
" // Navigation buttons\n"
" button([hx.get(\"/page1\"), hx.push_url(True)], [text(\"Page 1\")]),\n"
" button([hx.get(\"/page2\"), hx.push_url(True)], [text(\"Page 2\")])\n"
" ])\n"
" ```\n"
).
-spec history_elt() -> lustre@internals@vdom:attribute(any()).
history_elt() ->
lustre@attribute:attribute(<<"hx-history-elt"/utf8>>, <<""/utf8>>).
-file("src/hx.gleam", 1132).
?DOC(
" # hx-include\n"
" Includes additional elements in the AJAX request.\n"
" \n"
" The `hx-include` attribute allows you to include values from other elements\n"
" in the current request. This is useful for gathering data from multiple parts of a form.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, form, input, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" form([id(\"search-form\")], [\n"
" input([type_(\"text\"), name(\"query\")], []),\n"
" // Filter options outside the form\n"
" div([id(\"filters\")], [\n"
" input([type_(\"checkbox\"), name(\"filter1\"), value(\"yes\")], []),\n"
" text(\"Include results from archive\")\n"
" ])\n"
" ]),\n"
" \n"
" // This button includes both the form and the filters\n"
" button([\n"
" hx.get(\"/search\"),\n"
" hx.include(hx.CssSelector(\"#search-form, #filters\"))\n"
" ], [\n"
" text(\"Search\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec include(extended_css_selector()) -> lustre@internals@vdom:attribute(any()).
include(Extended_css_selector) ->
lustre@attribute:attribute(
<<"hx-include"/utf8>>,
extended_css_selector_to_string(Extended_css_selector)
).
-file("src/hx.gleam", 1165).
?DOC(
" # hx-inherit\n"
" Explicitly specifies which attributes to inherit from ancestors.\n"
" \n"
" The `hx-inherit` attribute is the opposite of `hx-disinherit`. It allows you to specify\n"
" which HTMX attributes should be inherited from ancestor elements.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([\n"
" // Parent has multiple HTMX attributes\n"
" hx.get(\"/parent-data\"),\n"
" hx.trigger([hx.Event(event: \"click\", modifiers: [])]),\n"
" hx.swap(hx.OuterHTML, None)\n"
" ], [\n"
" // This button will only inherit the hx-trigger attribute\n"
" button([\n"
" hx.post(\"/button-action\"),\n"
" hx.inherit([\"hx-trigger\"])\n"
" ], [\n"
" text(\"Inherit Trigger Only\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec inherit(list(binary())) -> lustre@internals@vdom:attribute(any()).
inherit(Attributes) ->
Attributes@1 = begin
_pipe = Attributes,
gleam@string:join(_pipe, <<" "/utf8>>)
end,
lustre@attribute:attribute(<<"hx-inherit"/utf8>>, Attributes@1).
-file("src/hx.gleam", 1199).
?DOC(
" # hx-inherit (all attributes)\n"
" Explicitly inherits all attributes from ancestors.\n"
" \n"
" The `inherit_all` function ensures that all HTMX attributes are inherited,\n"
" which can be useful to override a previous `hx-disinherit` attribute.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([\n"
" // Block inheritance for all children\n"
" hx.get(\"/parent-data\"),\n"
" hx.trigger([hx.Event(event: \"click\", modifiers: [])]),\n"
" hx.disinherit_all()\n"
" ], [\n"
" // This button won't inherit any HTMX attributes\n"
" button([hx.post(\"/action1\")], [text(\"No Inheritance\")]),\n"
" \n"
" // This button will force inheritance of all attributes\n"
" button([\n"
" hx.post(\"/action2\"),\n"
" hx.inherit_all()\n"
" ], [\n"
" text(\"Force Inheritance\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec inherit_all() -> lustre@internals@vdom:attribute(any()).
inherit_all() ->
lustre@attribute:attribute(<<"hx-inherit"/utf8>>, <<"*"/utf8>>).
-file("src/hx.gleam", 1246).
?DOC(
" # hx-params\n"
" Controls which parameters are submitted with a request.\n"
" \n"
" The `hx-params` attribute allows you to filter which parameters should be\n"
" submitted in an AJAX request, such as form fields.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, form, input, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" form([id(\"user-form\")], [\n"
" input([type_(\"text\"), name(\"username\")], []),\n"
" input([type_(\"password\"), name(\"password\")], []),\n"
" input([type_(\"hidden\"), name(\"csrf_token\")], []),\n"
" \n"
" // Only send the username and csrf_token\n"
" button([\n"
" hx.post(\"/check-username\"),\n"
" hx.params(\"username,csrf_token\")\n"
" ], [\n"
" text(\"Check Username\")\n"
" ]),\n"
" \n"
" // Send none of the form fields (only values from hx-vals would be sent)\n"
" button([\n"
" hx.post(\"/custom-action\"),\n"
" hx.params(\"none\")\n"
" ], [\n"
" text(\"Custom Action\")\n"
" ]),\n"
" \n"
" // Send all except password\n"
" button([\n"
" hx.post(\"/save-profile\"),\n"
" hx.params(\"not password\")\n"
" ], [\n"
" text(\"Save Profile\")\n"
" ])\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec params(binary()) -> lustre@internals@vdom:attribute(any()).
params(Params) ->
lustre@attribute:attribute(<<"hx-params"/utf8>>, Params).
-file("src/hx.gleam", 1278).
?DOC(
" # hx-preserve\n"
" Preserves an element's state between requests.\n"
" \n"
" The `hx-preserve` attribute ensures that an element is not re-rendered when a\n"
" parent element is re-rendered by HTMX. This is useful for preserving\n"
" input values, scroll positions, etc.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, input, text, textarea}\n"
" import hx\n"
"\n"
" div([id(\"form-container\")], [\n"
" // This textarea will keep its content even when the parent is refreshed\n"
" textarea([hx.preserve()], []),\n"
" \n"
" // This will also keep its current input value\n"
" input([type_(\"text\"), name(\"name\"), hx.preserve()], []),\n"
" \n"
" // This button refreshes the parent container\n"
" button([\n"
" hx.get(\"/refresh-form\"),\n"
" hx.target(hx.CssSelector(\"#form-container\"))\n"
" ], [\n"
" text(\"Refresh Form\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec preserve() -> lustre@internals@vdom:attribute(any()).
preserve() ->
lustre@attribute:attribute(<<"hx-preserve"/utf8>>, <<""/utf8>>).
-file("src/hx.gleam", 1303).
?DOC(
" # hx-prompt\n"
" Displays a prompt before submitting a request.\n"
" \n"
" The `hx-prompt` attribute shows a prompt dialog that asks for user input before\n"
" making the AJAX request. The prompt value is included in the request.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Ask for a comment when deleting\n"
" button([\n"
" hx.delete(\"/items/123\"),\n"
" hx.prompt(\"Please provide a reason for deletion:\")\n"
" ], [\n"
" text(\"Delete Item\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec prompt(binary()) -> lustre@internals@vdom:attribute(any()).
prompt(Prompt_text) ->
lustre@attribute:attribute(<<"hx-prompt"/utf8>>, Prompt_text).
-file("src/hx.gleam", 1328).
?DOC(
" # hx-replace-url (enable)\n"
" Replaces the current URL after the request completes.\n"
" \n"
" The `replace_url` function enables URL replacement, which is useful for single-page\n"
" applications to update the browser's address bar without adding a history entry.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Replace the URL without adding to history\n"
" button([\n"
" hx.get(\"/view/123\"),\n"
" hx.replace_url()\n"
" ], [\n"
" text(\"View Item\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec replace_url() -> lustre@internals@vdom:attribute(any()).
replace_url() ->
lustre@attribute:attribute(<<"hx-replace"/utf8>>, <<"true"/utf8>>).
-file("src/hx.gleam", 1356).
?DOC(
" # hx-replace-url (disable)\n"
" Disables URL replacement for the request.\n"
" \n"
" The `no_replace_url` function explicitly disables URL replacement,\n"
" which can be useful to override an inherited behavior.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([hx.replace_url()], [\n"
" // This button will replace the URL (inherited from parent)\n"
" button([hx.get(\"/view/1\")], [text(\"View 1\")]),\n"
" \n"
" // This button won't replace the URL\n"
" button([\n"
" hx.get(\"/view/2\"),\n"
" hx.no_replace_url()\n"
" ], [\n"
" text(\"View 2\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec no_replace_url() -> lustre@internals@vdom:attribute(any()).
no_replace_url() ->
lustre@attribute:attribute(<<"hx-replace"/utf8>>, <<"false"/utf8>>).
-file("src/hx.gleam", 1381).
?DOC(
" # hx-replace-url (with URL)\n"
" Replaces the current URL with a specified one.\n"
" \n"
" The `replace_url_with` function allows you to specify a different URL to put in the browser's\n"
" address bar than the one that was requested.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Use a different URL in the address bar than the API endpoint\n"
" button([\n"
" hx.post(\"/api/items/add\"),\n"
" hx.replace_url_with(\"/items\")\n"
" ], [\n"
" text(\"Add Item\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec replace_url_with(binary()) -> lustre@internals@vdom:attribute(any()).
replace_url_with(Url) ->
lustre@attribute:attribute(<<"hx-replace"/utf8>>, Url).
-file("src/hx.gleam", 1414).
?DOC(
" # hx-request\n"
" Configures various aspects of the AJAX request.\n"
" \n"
" The `hx-request` attribute allows you to configure various aspects of the AJAX request\n"
" using a simple JSON-like syntax.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" // Configure timeout and show progress\n"
" button([\n"
" hx.get(\"/api/long-process\"),\n"
" hx.request(\"{timeout:10000, showProgress:true}\")\n"
" ], [\n"
" text(\"Start Long Process\")\n"
" ]),\n"
" \n"
" // Configure to not process responses\n"
" button([\n"
" hx.post(\"/api/fire-and-forget\"),\n"
" hx.request(\"{noHeaders:true, ignoreTitle:true}\")\n"
" ], [\n"
" text(\"Send Notification\")\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec request(binary()) -> lustre@internals@vdom:attribute(any()).
request(Request) ->
lustre@attribute:attribute(<<"hx-request"/utf8>>, Request).
-file("src/hx.gleam", 1451).
?DOC(
" # hx-validate\n"
" Controls whether form validation should occur before a request.\n"
" \n"
" The `hx-validate` attribute determines whether HTML5 validation should occur\n"
" on form inputs before a request is sent.\n"
"\n"
" ## Example\n"
" ```gleam\n"
" import lustre/element.{button, div, form, input, text}\n"
" import hx\n"
"\n"
" div([], [\n"
" form([], [\n"
" input([type_(\"email\"), required(True), name(\"email\")], []),\n"
" \n"
" // This will validate the email field\n"
" button([\n"
" hx.post(\"/api/subscribe\"),\n"
" hx.validate(True)\n"
" ], [\n"
" text(\"Subscribe (with validation)\")\n"
" ]),\n"
" \n"
" // This will skip validation\n"
" button([\n"
" hx.post(\"/api/quick-subscribe\"),\n"
" hx.validate(False)\n"
" ], [\n"
" text(\"Quick Subscribe\")\n"
" ])\n"
" ])\n"
" ])\n"
" ```\n"
).
-spec validate(boolean()) -> lustre@internals@vdom:attribute(any()).
validate(Bool) ->
case Bool of
true ->
lustre@attribute:attribute(<<"hx-validate"/utf8>>, <<"true"/utf8>>);
false ->
lustre@attribute:attribute(<<"hx-validate"/utf8>>, <<"false"/utf8>>)
end.