mirror of
https://github.com/plausible/analytics.git
synced 2024-11-24 12:42:30 +03:00
448 lines
20 KiB
HTML
448 lines
20 KiB
HTML
<!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.30.3">
|
|
<meta name="project" content="Plausible v0.0.1">
|
|
|
|
<title>PlausibleWeb.Live.Components.ComboBox — Plausible v0.0.1</title>
|
|
<link rel="stylesheet" href="dist/html-elixir-P5GXSCHE.css" />
|
|
|
|
|
|
<script src="dist/handlebars.runtime-NWIB6V2M.js"></script>
|
|
<script src="dist/handlebars.templates-NBND3S2D.js"></script>
|
|
<script src="dist/sidebar_items-02F80779.js"></script>
|
|
|
|
<script src="docs_config.js"></script>
|
|
|
|
<script async src="dist/html-CGDDOCMI.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 class="sidebar-button sidebar-toggle" aria-label="toggle sidebar">
|
|
<i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
|
|
</button>
|
|
|
|
<section class="sidebar">
|
|
<form class="sidebar-search" action="search.html">
|
|
<button type="submit" class="search-button" aria-label="Submit Search">
|
|
<i class="ri-search-2-line" aria-hidden="true" title="Submit search"></i>
|
|
</button>
|
|
<button type="button" tabindex="-1" class="search-close-button" aria-label="Cancel Search">
|
|
<i class="ri-close-line ri-lg" aria-hidden="true" title="Cancel search"></i>
|
|
</button>
|
|
<label class="search-label">
|
|
<p class="sr-only">Search</p>
|
|
<input name="q" type="text" class="search-input" placeholder="Search..." aria-label="Input your search terms" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
|
|
</label>
|
|
</form>
|
|
|
|
<div class="autocomplete">
|
|
<div class="autocomplete-results">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-header">
|
|
|
|
<a href="readme.html">
|
|
<img src="assets/logo.png" alt="Plausible" class="sidebar-projectImage">
|
|
</a>
|
|
|
|
<div class="sidebar-projectDetails">
|
|
<a href="readme.html" class="sidebar-projectName" translate="no">
|
|
Plausible
|
|
</a>
|
|
<div class="sidebar-projectVersion" translate="no">
|
|
v0.0.1
|
|
</div>
|
|
</div>
|
|
<ul class="sidebar-listNav">
|
|
<li><a id="extras-list-link" href="#full-list">Pages</a></li>
|
|
|
|
<li><a id="modules-list-link" href="#full-list">Modules</a></li>
|
|
|
|
|
|
<li><a id="tasks-list-link" href="#full-list"><span translate="no">Mix</span> Tasks</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="gradient"></div>
|
|
<ul id="full-list"></ul>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<output role="status" id="toast"></output>
|
|
<div class="content-outer">
|
|
<div id="content" class="content-inner">
|
|
|
|
<h1>
|
|
<button class="icon-action display-settings">
|
|
<i class="ri-settings-3-line"></i>
|
|
<span class="sr-only">Settings</span>
|
|
</button>
|
|
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.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.ComboBox</span>
|
|
<small class="app-vsn" translate="no">(Plausible v0.0.1)</small>
|
|
|
|
</h1>
|
|
|
|
|
|
<section id="moduledoc">
|
|
<p>Phoenix LiveComponent for a combobox UI element with search and selection
|
|
functionality.</p><p>The component allows users to select an option from a list of options,
|
|
which can be searched by typing in the input field.</p><p>The component renders an input field with a dropdown anchor and a
|
|
hidden input field for submitting the selected value.</p><p>The number of options displayed in the dropdown is limited to 15
|
|
by default but can be customized. When a user types into the input
|
|
field, the component searches the available options and provides
|
|
suggestions based on the input.</p><p>Any function can be supplied via <code class="inline">suggest_fun</code> attribute</p><ul><li>see the provided <code class="inline">ComboBox.StaticSearch</code>.</li></ul><p>In most cases the <code class="inline">suggest_fun</code> runs an operation that could be deferred,
|
|
so by default, the <code class="inline">async={true}</code> attr calls it in a background Task
|
|
and updates the suggestions asynchronously. This way, you can render
|
|
the component without having to wait for suggestions to load.</p><p>If you explicitly need to make the operation sychronous, you may
|
|
pass <code class="inline">async={false}</code> option.</p><p>If your initial <code class="inline">options</code> are not provided up-front at initial render,
|
|
lack of <code class="inline">options</code> attr value combined with <code class="inline">async=true</code> calls the
|
|
<code class="inline">suggest_fun.("", [])</code> asynchronously - that special clause can be used
|
|
to provide the initial set of suggestions updated right after the initial render.</p><p>To simplify integration testing, suggestions load up synchronously during
|
|
tests. This lets you skip waiting for suggestions messages
|
|
to arrive. The asynchronous behaviour alone is already tested in
|
|
ComboBox own test suite, so there is no need for additional
|
|
verification.</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>
|
|
Summary
|
|
</a>
|
|
</h1>
|
|
<div class="summary-functions summary">
|
|
<h2>
|
|
<a href="#functions">Functions</a>
|
|
</h2>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#dropdown/1" translate="no">dropdown(assigns)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">ref</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">suggestions</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">suggest_fun</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">target</code> (<code class="inline">:any</code>)</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) (required)</li><li><code class="inline">display_value</code> (<code class="inline">:string</code>) (required)</li></ul></div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#dropdown_anchor/1" translate="no">dropdown_anchor(assigns)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">id</code> (<code class="inline">:any</code>) (required)</li></ul></div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#handle_event/3" translate="no">handle_event(binary, params, socket)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><p>Callback implementation for <a href="https://hexdocs.pm/phoenix_live_view/0.19.4/Phoenix.LiveComponent.html#c:handle_event/3"><code class="inline">Phoenix.LiveComponent.handle_event/3</code></a>.</p></div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#option/1" translate="no">option(assigns)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">display_value</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">submit_value</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">ref</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">target</code> (<code class="inline">:any</code>)</li><li><code class="inline">idx</code> (<code class="inline">:integer</code>) (required)</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li></ul></div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#render/1" translate="no">render(assigns)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><h2>Attributes</h2><ul><li><code class="inline">placeholder</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">"Select option or search by typing"</code>.</li><li><code class="inline">id</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">options</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">submit_name</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">display_value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">submit_value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">suggest_fun</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">suggestions_limit</code> (<code class="inline">:integer</code>)</li><li><code class="inline">class</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">required</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li><li><code class="inline">errors</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">async</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">true</code>.</li></ul></div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#select_option/4" translate="no">select_option(js \\ %JS{}, id, submit_value, display_value)</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-signature">
|
|
<a href="#update/2" translate="no">update(assigns, socket)</a>
|
|
|
|
</div>
|
|
|
|
<div class="summary-synopsis"><p>Callback implementation for <a href="https://hexdocs.pm/phoenix_live_view/0.19.4/Phoenix.LiveComponent.html#c:update/2"><code class="inline">Phoenix.LiveComponent.update/2</code></a>.</p></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>
|
|
Functions
|
|
</a>
|
|
</h1>
|
|
<div class="functions-list">
|
|
<section class="detail" id="dropdown/1">
|
|
|
|
<div class="detail-header">
|
|
<a href="#dropdown/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">dropdown(assigns)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L1" 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="dropdown/1-attributes" class="section-heading">
|
|
<a href="#dropdown/1-attributes">
|
|
<i class="ri-link-m" aria-hidden="true"></i>
|
|
Attributes
|
|
</a>
|
|
</h2>
|
|
<ul><li><code class="inline">ref</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">suggestions</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">suggest_fun</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">target</code> (<code class="inline">:any</code>)</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) (required)</li><li><code class="inline">display_value</code> (<code class="inline">:string</code>) (required)</li></ul>
|
|
</section>
|
|
</section>
|
|
<section class="detail" id="dropdown_anchor/1">
|
|
|
|
<div class="detail-header">
|
|
<a href="#dropdown_anchor/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">dropdown_anchor(assigns)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L1" 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="dropdown_anchor/1-attributes" class="section-heading">
|
|
<a href="#dropdown_anchor/1-attributes">
|
|
<i class="ri-link-m" aria-hidden="true"></i>
|
|
Attributes
|
|
</a>
|
|
</h2>
|
|
<ul><li><code class="inline">id</code> (<code class="inline">:any</code>) (required)</li></ul>
|
|
</section>
|
|
</section>
|
|
<section class="detail" id="handle_event/3">
|
|
|
|
<div class="detail-header">
|
|
<a href="#handle_event/3" 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">handle_event(binary, params, socket)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.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>Callback implementation for <a href="https://hexdocs.pm/phoenix_live_view/0.19.4/Phoenix.LiveComponent.html#c:handle_event/3"><code class="inline">Phoenix.LiveComponent.handle_event/3</code></a>.</p>
|
|
</section>
|
|
</section>
|
|
<section class="detail" id="option/1">
|
|
|
|
<div class="detail-header">
|
|
<a href="#option/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">option(assigns)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L1" 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="option/1-attributes" class="section-heading">
|
|
<a href="#option/1-attributes">
|
|
<i class="ri-link-m" aria-hidden="true"></i>
|
|
Attributes
|
|
</a>
|
|
</h2>
|
|
<ul><li><code class="inline">display_value</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">submit_value</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">ref</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">target</code> (<code class="inline">:any</code>)</li><li><code class="inline">idx</code> (<code class="inline">:integer</code>) (required)</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li></ul>
|
|
</section>
|
|
</section>
|
|
<section class="detail" id="render/1">
|
|
|
|
<div class="detail-header">
|
|
<a href="#render/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">render(assigns)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L1" 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="render/1-attributes" class="section-heading">
|
|
<a href="#render/1-attributes">
|
|
<i class="ri-link-m" aria-hidden="true"></i>
|
|
Attributes
|
|
</a>
|
|
</h2>
|
|
<ul><li><code class="inline">placeholder</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">"Select option or search by typing"</code>.</li><li><code class="inline">id</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">options</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">submit_name</code> (<code class="inline">:string</code>) (required)</li><li><code class="inline">display_value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">submit_value</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">suggest_fun</code> (<code class="inline">:any</code>) (required)</li><li><code class="inline">suggestions_limit</code> (<code class="inline">:integer</code>)</li><li><code class="inline">class</code> (<code class="inline">:string</code>) - Defaults to <code class="inline">""</code>.</li><li><code class="inline">required</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li><li><code class="inline">creatable</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">false</code>.</li><li><code class="inline">errors</code> (<code class="inline">:list</code>) - Defaults to <code class="inline">[]</code>.</li><li><code class="inline">async</code> (<code class="inline">:boolean</code>) - Defaults to <code class="inline">true</code>.</li></ul>
|
|
</section>
|
|
</section>
|
|
<section class="detail" id="select_option/4">
|
|
|
|
<span id="select_option/3"></span>
|
|
|
|
<div class="detail-header">
|
|
<a href="#select_option/4" 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">select_option(js \\ %JS{}, id, submit_value, display_value)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L256" 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>
|
|
<section class="detail" id="update/2">
|
|
|
|
<div class="detail-header">
|
|
<a href="#update/2" 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">update(assigns, socket)</h1>
|
|
|
|
<a href="https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L44" 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>Callback implementation for <a href="https://hexdocs.pm/phoenix_live_view/0.19.4/Phoenix.LiveComponent.html#c:update/2"><code class="inline">Phoenix.LiveComponent.update/2</code></a>.</p>
|
|
</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.30.3) for the
|
|
|
|
<a href="https://elixir-lang.org" title="Elixir" target="_blank" translate="no">Elixir programming language</a>
|
|
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
<script>mermaid.initialize({startOnLoad: true})</script>
|
|
|
|
</body>
|
|
</html>
|