analytics/PlausibleWeb.Live.Components.Form.html

529 lines
24 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="ExDoc v0.31.1">
<meta name="project" content="Plausible v0.0.1">
<title>PlausibleWeb.Live.Components.Form — Plausible v0.0.1</title>
<link rel="stylesheet" href="dist/html-elixir-FM2CSD74.css" />
<script src="dist/handlebars.runtime-NWIB6V2M.js"></script>
<script src="dist/handlebars.templates-43PMFBC7.js"></script>
<script src="dist/sidebar_items-2BF32E1E.js"></script>
<script src="docs_config.js"></script>
<script async src="dist/html-L4O5OK2K.js"></script>
</head>
<body data-type="modules" class="page-module">
<script>
try {
var settings = JSON.parse(localStorage.getItem('ex_doc:settings') || '{}');
if (settings.theme === 'dark' ||
((settings.theme === 'system' || settings.theme == null) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.body.classList.add('dark')
}
} catch (error) { }
</script>
<div class="main">
<button id="sidebar-menu" class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
<i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
</button>
<div class="background-layer"></div>
<nav id="sidebar" class="sidebar">
<div class="sidebar-header">
<div class="sidebar-projectInfo">
<a href="readme.html" class="sidebar-projectImage">
<img src="assets/logo.png" alt="Plausible" />
</a>
<div>
<a href="readme.html" class="sidebar-projectName" translate="no">
Plausible
</a>
<div class="sidebar-projectVersion" translate="no">
v0.0.1
</div>
</div>
</div>
<ul id="sidebar-listNav" class="sidebar-listNav" role="tablist">
<li>
<button id="extras-list-tab-button" role="tab" data-type="extras" aria-controls="extras-tab-panel" aria-selected="true" tabindex="0">
Pages
</button>
</li>
<li>
<button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-tab-panel" aria-selected="false" tabindex="-1">
Modules
</button>
</li>
<li>
<button id="tasks-list-tab-button" role="tab" data-type="tasks" aria-controls="tasks-tab-panel" aria-selected="false" tabindex="-1">
<span translate="no">Mix</span> Tasks
</button>
</li>
</ul>
</div>
<div id="extras-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="extras-list-tab-button">
<ul id="extras-full-list" class="full-list"></ul>
</div>
<div id="modules-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>
<ul id="modules-full-list" class="full-list"></ul>
</div>
<div id="tasks-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden>
<ul id="tasks-full-list" class="full-list"></ul>
</div>
</nav>
<main class="content">
<output role="status" id="toast"></output>
<div class="content-outer">
<div id="content" class="content-inner">
<div class="top-search">
<div class="search-settings">
<form class="search-bar" action="search.html">
<label class="search-label">
<span class="sr-only">Search documentation of Plausible</span>
<input name="q" type="text" class="search-input" placeholder="Search Documentation (press /)" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</label>
<button type="submit" class="search-button" aria-label="Submit Search">
<i class="ri-search-2-line ri-lg" aria-hidden="true" title="Submit search"></i>
</button>
<button type="button" tabindex="-1" class="search-close-button" aria-hidden="true">
<i class="ri-close-line ri-lg" title="Cancel search"></i>
</button>
</form>
<div class="autocomplete">
</div>
<button class="icon-settings display-settings">
<i class="ri-settings-3-line"></i>
<span class="sr-only">Settings</span>
</button>
</div>
</div>
<h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L1" title="View Source" class="icon-action" rel="help">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
<span translate="no">PlausibleWeb.Live.Components.Form</span>
<small class="app-vsn" translate="no">(Plausible v0.0.1)</small>
</h1>
<section id="moduledoc">
<p>Generic components stolen from mix phx.new templates</p>
</section>
<section id="summary" class="details-list">
<h1 class="section-heading">
<a class="hover-link" href="#summary">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Summary</span>
</h1>
<div class="summary-functions summary">
<h2>
<a href="#functions">Functions</a>
</h2>
<div class="summary-row">
<div class="summary-signature">
<a href="#error/1" translate="no">error(assigns)</a>
</div>
<div class="summary-synopsis"><p>Generates a generic error message.</p></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#input/1" translate="no">input(assigns)</a>
</div>
<div class="summary-synopsis"><p>Renders an input with label and error messages.</p></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#input_with_clipboard/1" translate="no">input_with_clipboard(assigns)</a>
</div>
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">id</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">class</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li><code class="inline">name</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">label</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li>Global attributes are accepted.</li></ul></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#label/1" translate="no">label(assigns)</a>
</div>
<div class="summary-synopsis"><p>Renders a label.</p></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#password_input_with_strength/1" translate="no">password_input_with_strength(assigns)</a>
</div>
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">id</code> (<code class="inline">:any</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">label</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">field</code> (<a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a>) (required) - a form field struct retrieved from the form, for example: @form[:password].</li><li><code class="inline">strength</code> (<code class="inline">:any</code>)</li><li>Global attributes are accepted. Supports all globals plus: <code class="inline">[&quot;autocomplete&quot;, &quot;disabled&quot;, &quot;form&quot;, &quot;maxlength&quot;, &quot;minlength&quot;, &quot;readonly&quot;, &quot;required&quot;, &quot;size&quot;]</code>.</li></ul></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#password_length_hint/1" translate="no">password_length_hint(assigns)</a>
</div>
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">minimum</code> (<code class="inline">:integer</code>) (required)</li><li><code class="inline">class</code> (<code class="inline">:any</code>)</li><li><code class="inline">ok_class</code> (<code class="inline">:any</code>)</li><li><code class="inline">error_class</code> (<code class="inline">:any</code>)</li><li><code class="inline">field</code> (<a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a>) (required) - a form field struct retrieved from the form, for example: @form[:password].</li></ul></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#strength_meter/1" translate="no">strength_meter(assigns)</a>
</div>
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">score</code> (<code class="inline">:integer</code>) - Defaults to <code class="inline">0</code>.</li><li><code class="inline">warning</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li><code class="inline">suggestions</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li></ul></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#translate_error/1" translate="no">translate_error(arg)</a>
</div>
</div>
</div>
</section>
<section id="functions" class="details-list">
<h1 class="section-heading">
<a class="hover-link" href="#functions">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Functions</span>
</h1>
<div class="functions-list">
<section class="detail" id="error/1">
<div class="detail-header">
<a href="#error/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">error(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L276" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<p>Generates a generic error message.</p><h2 id="error/1-slots" class="section-heading">
<a href="#error/1-slots" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Slots</span>
</h2>
<ul><li><code class="inline">inner_block</code> (required)</li></ul>
</section>
</section>
<section class="detail" id="input/1">
<div class="detail-header">
<a href="#input/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">input(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L48" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<p>Renders an input with label and error messages.</p><p>A <a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a> may be passed as argument,
which is used to retrieve the input name, id, and values.
Otherwise all attributes may be passed explicitly.</p><h2 id="input/1-examples" class="section-heading">
<a href="#input/1-examples" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Examples</span>
</h2>
<p>&lt;.input field={@form[:email]} type=&quot;email&quot; /&gt;
&lt;.input name=&quot;my-input&quot; errors={[&quot;oh no!&quot;]} /&gt;</p><h2 id="input/1-attributes" class="section-heading">
<a href="#input/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">id</code> (<code class="inline">:any</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">name</code> (<code class="inline">:any</code>)</li><li><code class="inline">label</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">value</code> (<code class="inline">:any</code>)</li><li><code class="inline">type</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;text&quot;</code>.</li><li><code class="inline">field</code> (<a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a>) - a form field struct retrieved from the form, for example: @form[:email].</li><li><code class="inline">errors</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">checked</code> (<code class="inline">:boolean</code>) - the checked flag for checkbox inputs.</li><li><code class="inline">prompt</code> (<code class="inline">:string</code>) - the prompt for select inputs. Defaults to <code class="inline">nil</code>.</li><li><code class="inline">options</code> (<code class="inline">:list</code>) - the options to pass to Phoenix.HTML.Form.options_for_select/2.</li><li><code class="inline">multiple</code> (<code class="inline">:boolean</code>) - the multiple flag for select inputs. Defaults to <code class="inline">false</code>.</li><li>Global attributes are accepted. Supports all globals plus: <code class="inline">[&quot;accept&quot;, &quot;autocomplete&quot;, &quot;capture&quot;, &quot;cols&quot;, &quot;disabled&quot;, &quot;form&quot;, &quot;list&quot;, &quot;max&quot;, &quot;maxlength&quot;, &quot;min&quot;, &quot;minlength&quot;, &quot;multiple&quot;, &quot;pattern&quot;, &quot;placeholder&quot;, &quot;readonly&quot;, &quot;required&quot;, &quot;rows&quot;, &quot;size&quot;, &quot;step&quot;]</code>.</li></ul><h2 id="input/1-slots" class="section-heading">
<a href="#input/1-slots" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Slots</span>
</h2>
<ul><li><code class="inline">inner_block</code></li></ul>
</section>
</section>
<section class="detail" id="input_with_clipboard/1">
<div class="detail-header">
<a href="#input_with_clipboard/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">input_with_clipboard(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L86" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<h2 id="input_with_clipboard/1-attributes" class="section-heading">
<a href="#input_with_clipboard/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">id</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">class</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li><code class="inline">name</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">label</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li>Global attributes are accepted.</li></ul>
</section>
</section>
<section class="detail" id="label/1">
<div class="detail-header">
<a href="#label/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">label(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L263" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<p>Renders a label.</p><h2 id="label/1-attributes" class="section-heading">
<a href="#label/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">for</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">nil</code>.</li></ul><h2 id="label/1-slots" class="section-heading">
<a href="#label/1-slots" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Slots</span>
</h2>
<ul><li><code class="inline">inner_block</code> (required)</li></ul>
</section>
</section>
<section class="detail" id="password_input_with_strength/1">
<div class="detail-header">
<a href="#password_input_with_strength/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">password_input_with_strength(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L133" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<h2 id="password_input_with_strength/1-attributes" class="section-heading">
<a href="#password_input_with_strength/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">id</code> (<code class="inline">:any</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">label</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">nil</code>.</li><li><code class="inline">field</code> (<a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a>) (required) - a form field struct retrieved from the form, for example: @form[:password].</li><li><code class="inline">strength</code> (<code class="inline">:any</code>)</li><li>Global attributes are accepted. Supports all globals plus: <code class="inline">[&quot;autocomplete&quot;, &quot;disabled&quot;, &quot;form&quot;, &quot;maxlength&quot;, &quot;minlength&quot;, &quot;readonly&quot;, &quot;required&quot;, &quot;size&quot;]</code>.</li></ul>
</section>
</section>
<section class="detail" id="password_length_hint/1">
<div class="detail-header">
<a href="#password_length_hint/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">password_length_hint(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L174" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<h2 id="password_length_hint/1-attributes" class="section-heading">
<a href="#password_length_hint/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">minimum</code> (<code class="inline">:integer</code>) (required)</li><li><code class="inline">class</code> (<code class="inline">:any</code>)</li><li><code class="inline">ok_class</code> (<code class="inline">:any</code>)</li><li><code class="inline">error_class</code> (<code class="inline">:any</code>)</li><li><code class="inline">field</code> (<a href="https://hexdocs.pm/phoenix_html/3.3.3/Phoenix.HTML.FormField.html"><code class="inline">Phoenix.HTML.FormField</code></a>) (required) - a form field struct retrieved from the form, for example: @form[:password].</li></ul>
</section>
</section>
<section class="detail" id="strength_meter/1">
<div class="detail-header">
<a href="#strength_meter/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">strength_meter(assigns)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L219" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
<h2 id="strength_meter/1-attributes" class="section-heading">
<a href="#strength_meter/1-attributes" class="hover-link">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Attributes</span>
</h2>
<ul><li><code class="inline">score</code> (<code class="inline">:integer</code>) - Defaults to <code class="inline">0</code>.</li><li><code class="inline">warning</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">&quot;&quot;</code>.</li><li><code class="inline">suggestions</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li></ul>
</section>
</section>
<section class="detail" id="translate_error/1">
<div class="detail-header">
<a href="#translate_error/1" class="detail-link" title="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
<span class="sr-only">Link to this function</span>
</a>
<h1 class="signature" translate="no">translate_error(arg)</h1>
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/form.ex#L284" class="icon-action" rel="help" title="View Source">
<i class="ri-code-s-slash-line" aria-hidden="true"></i>
<span class="sr-only">View Source</span>
</a>
</div>
<section class="docstring">
</section>
</section>
</div>
</section>
<footer class="footer">
<p>
<span class="line">
<button class="a-main footer-button display-quick-switch" title="Search HexDocs packages">
Search HexDocs
</button>
<a href="Plausible.epub" title="ePub version">
Download ePub version
</a>
</span>
</p>
<p class="built-using">
Built using
<a href="https://github.com/elixir-lang/ex_doc" title="ExDoc" target="_blank" rel="help noopener" translate="no">ExDoc</a> (v0.31.1) for the
<a href="https://elixir-lang.org" title="Elixir" target="_blank" translate="no">Elixir programming language</a>
</p>
</footer>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true})</script>
</body>
</html>