|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
/// <summary>Types and functions supporting htmx attributes in Giraffe View Engine</summary>
|
|
|
|
|
module Giraffe.ViewEngine.Htmx
|
|
|
|
|
|
|
|
|
|
/// <summary>Valid values for the <tt>hx-encoding</tt> attribute</summary>
|
|
|
|
|
/// <summary>Valid values for the <c>hx-encoding</c> attribute</summary>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxEncoding =
|
|
|
|
|
|
|
|
|
@ -195,11 +195,11 @@ type HxEvent =
|
|
|
|
|
/// <summary>The htmx event name</summary>
|
|
|
|
|
override this.ToString() = fst HxEvent.Values[this]
|
|
|
|
|
|
|
|
|
|
/// <summary>The <tt>hx-on</tt> variant of the htmx event name</summary>
|
|
|
|
|
/// <summary>The <c>hx-on</c> variant of the htmx event name</summary>
|
|
|
|
|
member this.ToHxOnString() = snd HxEvent.Values[this]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>Helper to create the <tt>hx-headers</tt> attribute</summary>
|
|
|
|
|
/// <summary>Helper to create the <c>hx-headers</c> attribute</summary>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxHeaders =
|
|
|
|
|
|
|
|
|
@ -207,7 +207,8 @@ module HxHeaders =
|
|
|
|
|
let From = Giraffe.Htmx.Common.toJson
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>Values / helpers for the <tt>hx-params</tt> attribute</summary>
|
|
|
|
|
/// <summary>Values / helpers for the <c>hx-params</c> attribute</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-params/">Documentation</seealso>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxParams =
|
|
|
|
|
|
|
|
|
@ -219,18 +220,19 @@ module HxParams =
|
|
|
|
|
|
|
|
|
|
/// <summary>Include the specified parameters</summary>
|
|
|
|
|
/// <param name="fields">One or more fields to include in the request</param>
|
|
|
|
|
/// <returns>The list of fields for the <tt>hx-params</tt> attribute value</returns>
|
|
|
|
|
/// <returns>The list of fields for the <c>hx-params</c> attribute value</returns>
|
|
|
|
|
let With fields =
|
|
|
|
|
match fields with [] -> "" | _ -> fields |> List.reduce (fun acc it -> $"{acc},{it}")
|
|
|
|
|
|
|
|
|
|
/// <summary>Exclude the specified parameters</summary>
|
|
|
|
|
/// <param name="fields">One or more fields to exclude from the request</param>
|
|
|
|
|
/// <returns>The list of fields for the <tt>hx-params</tt> attribute value prefixed with "not"</returns>
|
|
|
|
|
/// <returns>The list of fields for the <c>hx-params</c> attribute value prefixed with "not"</returns>
|
|
|
|
|
let Except fields =
|
|
|
|
|
With fields |> sprintf "not %s"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>Helpers to define <tt>hx-request</tt> attribute values</summary>
|
|
|
|
|
/// <summary>Helpers to define <c>hx-request</c> attribute values</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-request/">Documentation</seealso>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxRequest =
|
|
|
|
|
|
|
|
|
@ -251,21 +253,21 @@ module HxRequest =
|
|
|
|
|
$"\"timeout\": {ms}"
|
|
|
|
|
|
|
|
|
|
/// <summary>Include or exclude credentials from the request</summary>
|
|
|
|
|
/// <param name="send"><tt>true</tt> if credentials should be sent, <tt>false</tt> if not</param>
|
|
|
|
|
/// <param name="send"><c>true</c> if credentials should be sent, <c>false</c> if not</param>
|
|
|
|
|
/// <returns>A string with the configured credential options</returns>
|
|
|
|
|
let Credentials send =
|
|
|
|
|
(toLowerBool >> sprintf "\"credentials\": %s") send
|
|
|
|
|
|
|
|
|
|
/// <summary>Exclude or include headers from the request</summary>
|
|
|
|
|
/// <param name="exclude">
|
|
|
|
|
/// <tt>true</tt> if no headers should be sent; <tt>false</tt> if headers should be sent
|
|
|
|
|
/// <c>true</c> if no headers should be sent; <c>false</c> if headers should be sent
|
|
|
|
|
/// </param>
|
|
|
|
|
/// <returns>A string with the configured header options</returns>
|
|
|
|
|
let NoHeaders exclude =
|
|
|
|
|
(toLowerBool >> sprintf "\"noHeaders\": %s") exclude
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// Helpers for the `hx-trigger` attribute
|
|
|
|
|
/// <summary>Helpers for the <c>hx-trigger</c> attribute</summary>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxTrigger =
|
|
|
|
|
|
|
|
|
@ -366,7 +368,8 @@ module HxTrigger =
|
|
|
|
|
let QueueNone = Queue "none"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>Helper to create the `hx-vals` attribute</summary>
|
|
|
|
|
/// <summary>Helper to create the <c>hx-vals</c> attribute</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-vals/">Documentation</seealso>
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module HxVals =
|
|
|
|
|
|
|
|
|
@ -374,149 +377,291 @@ module HxVals =
|
|
|
|
|
let From = Giraffe.Htmx.Common.toJson
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
open Giraffe.Htmx
|
|
|
|
|
|
|
|
|
|
/// <summary>Attributes and flags for htmx</summary>
|
|
|
|
|
[<AutoOpen>]
|
|
|
|
|
module HtmxAttrs =
|
|
|
|
|
|
|
|
|
|
/// <summary>Progressively enhances anchors and forms to use AJAX requests</summary>
|
|
|
|
|
/// <remarks>Use <tt>_hxNoBoost</tt> to set to false</remarks>
|
|
|
|
|
/// <remarks>Use <c>_hxNoBoost</c> to set to false</remarks>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-boost/">Documentation</seealso>
|
|
|
|
|
let _hxBoost = attr "hx-boost" "true"
|
|
|
|
|
|
|
|
|
|
/// <summary>Shows a <tt>confirm()</tt> dialog before issuing a request</summary>
|
|
|
|
|
/// <summary>Shows a <c>confirm()</c> dialog before issuing a request</summary>
|
|
|
|
|
/// <param name="prompt">The prompt to present to the user when seeking their confirmation</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-confirm</tt> attribute</returns>
|
|
|
|
|
/// <returns>A configured <c>hx-confirm</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-confirm/">Documentation</seealso>
|
|
|
|
|
let _hxConfirm prompt =
|
|
|
|
|
attr "hx-confirm" prompt
|
|
|
|
|
|
|
|
|
|
/// <summary>Issues a <tt>DELETE</tt> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the <tt>DELETE</tt> request should be sent</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-delete</tt> attribute</returns>
|
|
|
|
|
/// <summary>Issues a <c>DELETE</c> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the <c>DELETE</c> request should be sent</param>
|
|
|
|
|
/// <returns>A configured <c>hx-delete</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-delete/">Documentation</seealso>
|
|
|
|
|
let _hxDelete url =
|
|
|
|
|
attr "hx-delete" url
|
|
|
|
|
|
|
|
|
|
/// <summary>Disables htmx processing for the given node and any children nodes</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-disable/">Documentation</seealso>
|
|
|
|
|
let _hxDisable = flag "hx-disable"
|
|
|
|
|
|
|
|
|
|
/// <summary>Specifies elements that should be disabled when an htmx request is in flight</summary>
|
|
|
|
|
/// <param name="elt">The element to disable when an htmx request is in flight</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-disabled-elt</tt> attribute</returns>
|
|
|
|
|
/// <returns>A configured <c>hx-disabled-elt</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-disabled-elt/">Documentation</seealso>
|
|
|
|
|
let _hxDisabledElt elt =
|
|
|
|
|
attr "hx-disabled-elt" elt
|
|
|
|
|
|
|
|
|
|
/// <summary>Disinherit all ("*") or specific htmx attributes</summary>
|
|
|
|
|
/// <param name="hxAttrs">The htmx attributes to disinherit (should start with "hx-")</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-disinherit</tt> attribute</returns>
|
|
|
|
|
/// <returns>A configured <c>hx-disinherit</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-disinherit/">Documentation</seealso>
|
|
|
|
|
let _hxDisinherit hxAttrs =
|
|
|
|
|
attr "hx-disinherit" hxAttrs
|
|
|
|
|
|
|
|
|
|
/// <summary>Changes the request encoding type</summary>
|
|
|
|
|
/// <param name="enc">The encoding type (use <tt>HxEncoding</tt> constants)</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-encoding</tt> attribute</returns>
|
|
|
|
|
/// <param name="enc">The encoding type (use <c>HxEncoding</c> constants)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-encoding</c> attribute</returns>
|
|
|
|
|
/// <seealso cref="HxEncoding" />
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-encoding/">Documentation</seealso>
|
|
|
|
|
let _hxEncoding enc =
|
|
|
|
|
attr "hx-encoding" enc
|
|
|
|
|
|
|
|
|
|
/// <summary>Extensions to use for this element</summary>
|
|
|
|
|
/// <param name="exts">A list of extensions to apply to this element</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-ext</tt> attribute</returns>
|
|
|
|
|
/// <returns>A configured <c>hx-ext</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-ext/">Documentation</seealso>
|
|
|
|
|
let _hxExt exts =
|
|
|
|
|
attr "hx-ext" exts
|
|
|
|
|
|
|
|
|
|
/// <summary>Issues a <tt>GET</tt> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the <tt>GET</tt> request should be sent</param>
|
|
|
|
|
/// <returns>A configured <tt>hx-get</tt> attribute</returns>
|
|
|
|
|
/// <summary>Issues a <c>GET</c> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the <c>GET</c> request should be sent</param>
|
|
|
|
|
/// <returns>A configured <c>hx-get</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-get/">Documentation</seealso>
|
|
|
|
|
let _hxGet url =
|
|
|
|
|
attr "hx-get" url
|
|
|
|
|
|
|
|
|
|
/// <summary>Adds to the headers that will be submitted with the request</summary>
|
|
|
|
|
[<System.Obsolete "Convert this parameter">]
|
|
|
|
|
let _hxHeaders = attr "hx-headers"
|
|
|
|
|
/// <param name="hdrs">The headers to include with the request</param>
|
|
|
|
|
/// <returns>A configured <c>hx-headers</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-headers/">Documentation</seealso>
|
|
|
|
|
let _hxHeaders hdrs =
|
|
|
|
|
attr "hx-headers" hdrs
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Set to "false" to prevent pages with sensitive information from being stored in the history cache
|
|
|
|
|
let _hxHistory = attr "hx-history"
|
|
|
|
|
/// </summary>
|
|
|
|
|
/// <param name="shouldStore">Whether the page should be stored in the history cache</param>
|
|
|
|
|
/// <returns>A configured <c>hx-history</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-history/">Documentation</seealso>
|
|
|
|
|
let _hxHistory shouldStore =
|
|
|
|
|
attr "hx-history" (toLowerBool shouldStore)
|
|
|
|
|
|
|
|
|
|
/// The element to snapshot and restore during history navigation
|
|
|
|
|
let _hxHistoryElt = flag "hx-history-elt"
|
|
|
|
|
/// <summary>The element to snapshot and restore during history navigation</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-history-elt/">Documentation</seealso>
|
|
|
|
|
let _hxHistoryElt =
|
|
|
|
|
flag "hx-history-elt"
|
|
|
|
|
|
|
|
|
|
/// Includes additional data in AJAX requests
|
|
|
|
|
let _hxInclude = attr "hx-include"
|
|
|
|
|
/// <summary>Includes additional data in AJAX requests</summary>
|
|
|
|
|
/// <param name="spec">The specification of what should be included in the request</param>
|
|
|
|
|
/// <returns>A configured <c>hx-include</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-include/">Documentation</seealso>
|
|
|
|
|
let _hxInclude spec =
|
|
|
|
|
attr "hx-include" spec
|
|
|
|
|
|
|
|
|
|
/// The element to put the htmx-request class on during the AJAX request
|
|
|
|
|
let _hxIndicator = attr "hx-indicator"
|
|
|
|
|
/// <summary>The element to put the <c>htmx-request</c> class on during the AJAX request</summary>
|
|
|
|
|
/// <param name="selector">The selector for the indicator element</param>
|
|
|
|
|
/// <returns>A configured <c>hx-indicator</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-indicator/">Documentation</seealso>
|
|
|
|
|
let _hxIndicator selector =
|
|
|
|
|
attr "hx-indicator" selector
|
|
|
|
|
|
|
|
|
|
/// Overrides a previous `hx-boost`
|
|
|
|
|
let _hxNoBoost = attr "hx-boost" "false"
|
|
|
|
|
/// <summary>Overrides a previous <c>hx-boost</c> (hx-boost="false")</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-boost/">Documentation</seealso>
|
|
|
|
|
let _hxNoBoost =
|
|
|
|
|
attr "hx-boost" "false"
|
|
|
|
|
|
|
|
|
|
/// Attach an event handler for DOM events
|
|
|
|
|
let _hxOnEvent evtName =
|
|
|
|
|
attr $"hx-on:%s{evtName}"
|
|
|
|
|
/// <summary>Attach an event handler for DOM events</summary>
|
|
|
|
|
/// <param name="evtName">The name of the event</param>
|
|
|
|
|
/// <param name="handler">The script to be executed when the event occurs</param>
|
|
|
|
|
/// <returns>A configured <c>hx-on</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-on/">Documentation</seealso>
|
|
|
|
|
let _hxOnEvent evtName handler =
|
|
|
|
|
attr $"hx-on:%s{evtName}" handler
|
|
|
|
|
|
|
|
|
|
/// Attach an event handler for htmx events
|
|
|
|
|
let _hxOnHxEvent (hxEvent: HxEvent) =
|
|
|
|
|
_hxOnEvent $":{hxEvent.ToHxOnString()}"
|
|
|
|
|
/// <summary>Attach an event handler for htmx events</summary>
|
|
|
|
|
/// <param name="hxEvent">The <c>HxEvent</c> to be handled</param>
|
|
|
|
|
/// <param name="handler">The script to be executed when the event occurs</param>
|
|
|
|
|
/// <returns>A configured <c>hx-on::</c> attribute</returns>
|
|
|
|
|
/// <seealso cref="HxEvent" />
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-on/">Documentation</seealso>
|
|
|
|
|
let _hxOnHxEvent (hxEvent: HxEvent) handler =
|
|
|
|
|
_hxOnEvent $":{hxEvent.ToHxOnString()}" handler
|
|
|
|
|
|
|
|
|
|
/// Filters the parameters that will be submitted with a request
|
|
|
|
|
let _hxParams = attr "hx-params"
|
|
|
|
|
/// <summary>Filters the parameters that will be submitted with a request</summary>
|
|
|
|
|
/// <param name="toInclude">The fields to include (use <c>HxParams</c> to generate this value)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-params</c> attribute</returns>
|
|
|
|
|
/// <seealso cref="HxParams" />
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-params/">Documentation</seealso>
|
|
|
|
|
let _hxParams toInclude =
|
|
|
|
|
attr "hx-params" toInclude
|
|
|
|
|
|
|
|
|
|
/// Issues a PATCH to the specified URL
|
|
|
|
|
let _hxPatch = attr "hx-patch"
|
|
|
|
|
/// <summary>Issues a <c>PATCH</c> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the request should be directed</param>
|
|
|
|
|
/// <returns>A configured <c>hx-patch</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-patch/">Documentation</seealso>
|
|
|
|
|
let _hxPatch url =
|
|
|
|
|
attr "hx-patch" url
|
|
|
|
|
|
|
|
|
|
/// Issues a POST to the specified URL
|
|
|
|
|
let _hxPost = attr "hx-post"
|
|
|
|
|
/// <summary>Issues a <c>POST</c> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the request should be directed</param>
|
|
|
|
|
/// <returns>A configured <c>hx-post</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-post/">Documentation</seealso>
|
|
|
|
|
let _hxPost url =
|
|
|
|
|
attr "hx-post" url
|
|
|
|
|
|
|
|
|
|
/// Preserves an element between requests
|
|
|
|
|
let _hxPreserve = attr "hx-preserve" "true"
|
|
|
|
|
/// <summary>Preserves an element between requests</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-preserve/">Documentation</seealso>
|
|
|
|
|
let _hxPreserve =
|
|
|
|
|
flag "hx-preserve"
|
|
|
|
|
|
|
|
|
|
/// Shows a prompt before submitting a request
|
|
|
|
|
let _hxPrompt = attr "hx-prompt"
|
|
|
|
|
/// <summary>Shows a <c>prompt()</c> dialog before submitting a request</summary>
|
|
|
|
|
/// <param name="text">The text for the prompt</param>
|
|
|
|
|
/// <returns>A configured <c>hx-prompt</c> attribute</returns>
|
|
|
|
|
/// <remarks>The value provided will be in the <c>HX-Prompt</c> request header</remarks>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-prompt/">Documentation</seealso>
|
|
|
|
|
let _hxPrompt text =
|
|
|
|
|
attr "hx-prompt" text
|
|
|
|
|
|
|
|
|
|
/// Pushes the URL into the location bar, creating a new history entry
|
|
|
|
|
let _hxPushUrl = attr "hx-push-url"
|
|
|
|
|
/// <summary>Pushes the URL into the location bar, creating a new history entry</summary>
|
|
|
|
|
/// <param name="spec">
|
|
|
|
|
/// <ul>
|
|
|
|
|
/// <li>"true" to push the fetched URL</li>
|
|
|
|
|
/// <li>"false" to explicitly not push the fetched URL</li>
|
|
|
|
|
/// <li>A specific URL to push</li>
|
|
|
|
|
/// </ul>
|
|
|
|
|
/// </param>
|
|
|
|
|
/// <returns>A configured <c>hx-push-url</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-push-url/">Documentation</seealso>
|
|
|
|
|
let _hxPushUrl spec =
|
|
|
|
|
attr "hx-push-url" spec
|
|
|
|
|
|
|
|
|
|
/// Issues a PUT to the specified URL
|
|
|
|
|
let _hxPut = attr "hx-put"
|
|
|
|
|
/// <summary>Issues a <c>PUT</c> to the specified URL</summary>
|
|
|
|
|
/// <param name="url">The URL to which the request should be directed</param>
|
|
|
|
|
/// <returns>A configured <c>hx-put</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-put/">Documentation</seealso>
|
|
|
|
|
let _hxPut url =
|
|
|
|
|
attr "hx-put" url
|
|
|
|
|
|
|
|
|
|
/// Replaces the current URL in the browser's history stack
|
|
|
|
|
let _hxReplaceUrl = attr "hx-replace-url"
|
|
|
|
|
/// <summary>Replaces the current URL in the browser's history stack</summary>
|
|
|
|
|
/// <param name="spec">
|
|
|
|
|
/// <ul>
|
|
|
|
|
/// <li>"true" to replace the current URL with the fetched one</li>
|
|
|
|
|
/// <li>"false" to explicitly replace nothing</li>
|
|
|
|
|
/// <li>A specific URL to replace in the browser's history</li>
|
|
|
|
|
/// </ul>
|
|
|
|
|
/// </param>
|
|
|
|
|
/// <returns>A configured <c>hx-replace-url</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-replace-url/">Documentation</seealso>
|
|
|
|
|
let _hxReplaceUrl spec =
|
|
|
|
|
attr "hx-replace-url" spec
|
|
|
|
|
|
|
|
|
|
/// Configures various aspects of the request
|
|
|
|
|
let _hxRequest = attr "hx-request"
|
|
|
|
|
/// <summary>Configures various aspects of the request</summary>
|
|
|
|
|
/// <param name="spec">The configuration spec (use <c>HxRequest.Configure</c> to create value)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-request</c> attribute</returns>
|
|
|
|
|
/// <seealso cref="HxRequest.Configure" />
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-request/">Documentation</seealso>
|
|
|
|
|
let _hxRequest spec =
|
|
|
|
|
attr "hx-request" spec
|
|
|
|
|
|
|
|
|
|
/// Selects a subset of the server response to process
|
|
|
|
|
let _hxSelect = attr "hx-select"
|
|
|
|
|
/// <summary>Selects a subset of the server response to process</summary>
|
|
|
|
|
/// <param name="selector">A CSS selector for the content to be selected</param>
|
|
|
|
|
/// <returns>A configured <c>hx-select</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-select/">Documentation</seealso>
|
|
|
|
|
let _hxSelect selector =
|
|
|
|
|
attr "hx-select" selector
|
|
|
|
|
|
|
|
|
|
/// Selects a subset of an out-of-band server response
|
|
|
|
|
let _hxSelectOob = attr "hx-select-oob"
|
|
|
|
|
/// <summary>Selects a subset of an out-of-band server response</summary>
|
|
|
|
|
/// <param name="selectors">One or more comma-delimited CSS selectors for the content to be selected</param>
|
|
|
|
|
/// <returns>A configured <c>hx-select-oob</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-select-oob/">Documentation</seealso>
|
|
|
|
|
let _hxSelectOob selectors =
|
|
|
|
|
attr "hx-select-oob" selectors
|
|
|
|
|
|
|
|
|
|
/// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
|
|
|
|
|
let _hxSwap = attr "hx-swap"
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Controls how the response content is swapped into the DOM (e.g. <c>outerHTML</c> or <c>beforeEnd</c>)
|
|
|
|
|
/// </summary>
|
|
|
|
|
/// <param name="swap">The type of swap to perform (use <c>HxSwap</c> values)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-swap</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-swap/">Documentation</seealso>
|
|
|
|
|
let _hxSwap swap =
|
|
|
|
|
attr "hx-swap" swap
|
|
|
|
|
|
|
|
|
|
/// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd'), enabling CSS
|
|
|
|
|
/// transitions
|
|
|
|
|
let _hxSwapWithTransition = sprintf "%s transition:true" >> _hxSwap
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Controls how the response content is swapped into the DOM (e.g. <c>outerHTML</c> or <c>beforeEnd</c>), enabling
|
|
|
|
|
/// CSS transitions
|
|
|
|
|
/// </summary>
|
|
|
|
|
/// <param name="swap">The type of swap to perform (use <c>HxSwap</c> values)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-swap</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-swap/">Documentation</seealso>
|
|
|
|
|
let _hxSwapWithTransition swap =
|
|
|
|
|
_hxSwap $"%s{swap} transition:true"
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
/// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
|
|
|
|
|
let _hxSwapOob = attr "hx-swap-oob"
|
|
|
|
|
/// </summary>
|
|
|
|
|
/// <param name="swap">
|
|
|
|
|
/// <ul>
|
|
|
|
|
/// <li>"true" to mark this as an OOB swap</li>
|
|
|
|
|
/// <li>Any <c>HxSwap</c> value</li>
|
|
|
|
|
/// <li>Any <c>HxSwap</c> value, followed by a colon (<c>:</c>) and a CSS selector</li>
|
|
|
|
|
/// </ul>
|
|
|
|
|
/// </param>
|
|
|
|
|
/// <returns>A configured <c>hx-swap-oob</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-swap-oob/">Documentation</seealso>
|
|
|
|
|
let _hxSwapOob swap =
|
|
|
|
|
attr "hx-swap-oob" swap
|
|
|
|
|
|
|
|
|
|
/// Synchronize events based on another element
|
|
|
|
|
let _hxSync = attr "hx-sync"
|
|
|
|
|
|
|
|
|
|
/// Specifies the target element to be swapped
|
|
|
|
|
let _hxTarget = attr "hx-target"
|
|
|
|
|
/// <summary>Specifies the target element to be swapped</summary>
|
|
|
|
|
/// <param name="selector">A CSS selector or relative reference (or both) to identify the target</param>
|
|
|
|
|
/// <returns>A configured <c>hx-target</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-target/">Documentation</seealso>
|
|
|
|
|
let _hxTarget selector =
|
|
|
|
|
attr "hx-target" selector
|
|
|
|
|
|
|
|
|
|
/// Specifies the event that triggers the request
|
|
|
|
|
let _hxTrigger = attr "hx-trigger"
|
|
|
|
|
|
|
|
|
|
/// Validate an input element (uses HTML5 validation API)
|
|
|
|
|
let _hxValidate = flag "hx-validate"
|
|
|
|
|
/// <summary>Validate an input element (uses HTML5 validation API)</summary>
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-validate/">Documentation</seealso>
|
|
|
|
|
let _hxValidate =
|
|
|
|
|
flag "hx-validate"
|
|
|
|
|
|
|
|
|
|
/// Adds to the parameters that will be submitted with the request
|
|
|
|
|
let _hxVals = attr "hx-vals"
|
|
|
|
|
/// <summary>Adds to the parameters that will be submitted with the request</summary>
|
|
|
|
|
/// <param name="values">The values for the parameters (use <c>HxVals.From</c> to create)</param>
|
|
|
|
|
/// <returns>A configured <c>hx-vals</c> attribute</returns>
|
|
|
|
|
/// <seealso cref="HxVals.From" />
|
|
|
|
|
/// <seealso href="https://htmx.org/attributes/hx-vals/">Documentation</seealso>
|
|
|
|
|
let _hxVals values =
|
|
|
|
|
attr "hx-vals" values
|
|
|
|
|
|
|
|
|
|
/// The name of the message to swap into the DOM.
|
|
|
|
|
let _sseSwap = attr "sse-swap"
|
|
|
|
|
/// <summary>The URL of the SSE server</summary>
|
|
|
|
|
/// <param name="url">The URL from which events will be received</param>
|
|
|
|
|
/// <returns>A configured <c>sse-connect</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/extensions/sse/#usage">Extension Docs</seealso>
|
|
|
|
|
let _sseConnect url =
|
|
|
|
|
attr "sse-connect" url
|
|
|
|
|
|
|
|
|
|
/// The URL of the SSE server.
|
|
|
|
|
let _sseConnect = attr "sse-connect"
|
|
|
|
|
/// <summary>The name(s) of the message(s) to swap into the DOM</summary>
|
|
|
|
|
/// <param name="messages">The message names (comma-delimited) to swap (use "message" for unnamed events)</param>
|
|
|
|
|
/// <returns>A configured <c>sse-swap</c> attribute</returns>
|
|
|
|
|
/// <seealso href="https://htmx.org/extensions/sse/#usage">Extension Docs</seealso>
|
|
|
|
|
let _sseSwap messages =
|
|
|
|
|
attr "sse-swap" messages
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>Script tags to pull htmx into a web page</summary>
|
|
|
|
@ -552,9 +697,9 @@ module RenderFragment =
|
|
|
|
|
$"<em>– ID {nodeId} not found –</em>"
|
|
|
|
|
|
|
|
|
|
/// <summary>Find the node with the named ID</summary>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute to find</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute to find</param>
|
|
|
|
|
/// <param name="node">The node tree to search</param>
|
|
|
|
|
/// <returns>The node with the requested <tt>id</tt> attribute, or <tt>None</tt> if it was not found</returns>
|
|
|
|
|
/// <returns>The node with the requested <c>id</c> attribute, or <c>None</c> if it was not found</returns>
|
|
|
|
|
let rec findIdNode nodeId (node: XmlNode) : XmlNode option =
|
|
|
|
|
match node with
|
|
|
|
|
| Text _ -> None
|
|
|
|
@ -567,18 +712,18 @@ module RenderFragment =
|
|
|
|
|
module AsString =
|
|
|
|
|
|
|
|
|
|
/// <summary>Render to HTML for the given ID</summary>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodes">The node trees to search</param>
|
|
|
|
|
/// <returns>The HTML for the given <tt>id</tt> node, or an error message if it was not found</returns>
|
|
|
|
|
/// <returns>The HTML for the given <c>id</c> node, or an error message if it was not found</returns>
|
|
|
|
|
let htmlFromNodes nodeId (nodes: XmlNode list) =
|
|
|
|
|
match nodes |> List.tryPick (findIdNode nodeId) with
|
|
|
|
|
| Some idNode -> RenderView.AsString.htmlNode idNode
|
|
|
|
|
| None -> nodeNotFound nodeId
|
|
|
|
|
|
|
|
|
|
/// <summary>Render to HTML for the given ID</summary>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="node">The node tree to search</param>
|
|
|
|
|
/// <returns>The HTML for the given <tt>id</tt> node, or an error message if it was not found</returns>
|
|
|
|
|
/// <returns>The HTML for the given <c>id</c> node, or an error message if it was not found</returns>
|
|
|
|
|
let htmlFromNode nodeId node =
|
|
|
|
|
match findIdNode nodeId node with
|
|
|
|
|
| Some idNode -> RenderView.AsString.htmlNode idNode
|
|
|
|
@ -591,18 +736,18 @@ module RenderFragment =
|
|
|
|
|
let private utf8 = System.Text.Encoding.UTF8
|
|
|
|
|
|
|
|
|
|
/// <summary>Render to bytes for the given ID</summary>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodes">The node trees to search</param>
|
|
|
|
|
/// <returns>The bytes for the given <tt>id</tt> node, or an error message if it was not found</returns>
|
|
|
|
|
/// <returns>The bytes for the given <c>id</c> node, or an error message if it was not found</returns>
|
|
|
|
|
let htmlFromNodes nodeId (nodes: XmlNode list) =
|
|
|
|
|
match nodes |> List.tryPick (findIdNode nodeId) with
|
|
|
|
|
| Some idNode -> RenderView.AsBytes.htmlNode idNode
|
|
|
|
|
| None -> nodeNotFound nodeId |> utf8.GetBytes
|
|
|
|
|
|
|
|
|
|
/// <summary>Render to bytes for the given ID</summary>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="node">The node tree to search</param>
|
|
|
|
|
/// <returns>The bytes for the given <tt>id</tt> node, or an error message if it was not found</returns>
|
|
|
|
|
/// <returns>The bytes for the given <c>id</c> node, or an error message if it was not found</returns>
|
|
|
|
|
let htmlFromNode nodeId node =
|
|
|
|
|
match findIdNode nodeId node with
|
|
|
|
|
| Some idNode -> RenderView.AsBytes.htmlNode idNode
|
|
|
|
@ -612,18 +757,18 @@ module RenderFragment =
|
|
|
|
|
[<RequireQualifiedAccess>]
|
|
|
|
|
module IntoStringBuilder =
|
|
|
|
|
|
|
|
|
|
/// <summary>Render HTML into a <tt>StringBuilder</tt> for the given ID</summary>
|
|
|
|
|
/// <param name="sb">The <tt>StringBuilder</tt> into which the bytes will be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <summary>Render HTML into a <c>StringBuilder</c> for the given ID</summary>
|
|
|
|
|
/// <param name="sb">The <c>StringBuilder</c> into which the bytes will be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="nodes">The node trees to search</param>
|
|
|
|
|
let htmlFromNodes sb nodeId (nodes: XmlNode list) =
|
|
|
|
|
match nodes |> List.tryPick (findIdNode nodeId) with
|
|
|
|
|
| Some idNode -> RenderView.IntoStringBuilder.htmlNode sb idNode
|
|
|
|
|
| None -> nodeNotFound nodeId |> sb.Append |> ignore
|
|
|
|
|
|
|
|
|
|
/// <summary>Render HTML into a <tt>StringBuilder</tt> for the given ID</summary>
|
|
|
|
|
/// <param name="sb">The <tt>StringBuilder</tt> into which the bytes will be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <tt>id</tt> attribute for the node to be rendered</param>
|
|
|
|
|
/// <summary>Render HTML into a <c>StringBuilder</c> for the given ID</summary>
|
|
|
|
|
/// <param name="sb">The <c>StringBuilder</c> into which the bytes will be rendered</param>
|
|
|
|
|
/// <param name="nodeId">The <c>id</c> attribute for the node to be rendered</param>
|
|
|
|
|
/// <param name="node">The node tree to search</param>
|
|
|
|
|
let htmlFromNode sb nodeId node =
|
|
|
|
|
match findIdNode nodeId node with
|
|
|
|
|