2023-07-12 11:28:07 +03:00
<!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" >
2023-07-25 10:58:48 +03:00
< meta name = "generator" content = "ExDoc v0.30.3" >
2023-07-12 11:28:07 +03:00
< meta name = "project" content = "Plausible v0.0.1" >
2023-07-19 11:24:25 +03:00
< title > PlausibleWeb.Live.Components.ComboBox — Plausible v0.0.1< / title >
2023-07-25 10:58:48 +03:00
< link rel = "stylesheet" href = "dist/html-elixir-P5GXSCHE.css" / >
2023-07-12 11:28:07 +03:00
< script src = "dist/handlebars.runtime-NWIB6V2M.js" > < / script >
2023-07-25 10:58:48 +03:00
< script src = "dist/handlebars.templates-NBND3S2D.js" > < / script >
2023-07-27 17:47:27 +03:00
< script src = "dist/sidebar_items-18EF995D.js" > < / script >
2023-07-12 11:28:07 +03:00
< script src = "docs_config.js" > < / script >
2023-07-25 10:58:48 +03:00
< script async src = "dist/html-CGDDOCMI.js" > < / script >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-19 11:24:25 +03:00
< 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" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
2023-07-19 11:24:25 +03:00
< span translate = "no" > PlausibleWeb.Live.Components.ComboBox< / span >
2023-07-12 11:28:07 +03:00
< 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
2023-07-19 11:24:25 +03:00
suggestions based on the input.< / p > < p > Any module exposing suggest/2 function can be supplied via < code class = "inline" > suggest_mod< / code >
attribute - see the provided < code class = "inline" > ComboBox.StaticSearch< / code > .< / p >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-25 10:58:48 +03:00
Summary
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-21 16:59:32 +03:00
< 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_mod< / code > (< code class = "inline" > :atom< / 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 >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-21 16:59:32 +03:00
< 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 >
2023-07-12 11:28:07 +03:00
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#render/1" translate = "no" > render(assigns)< / a >
< / div >
2023-07-21 16:59:32 +03:00
< 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 > ) (required)< / 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_mod< / code > (< code class = "inline" > :atom< / 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 > < / ul > < / div >
2023-07-12 11:28:07 +03:00
< / 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
2023-07-25 10:58:48 +03:00
< / a >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-19 11:24:25 +03:00
< 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" >
2023-07-12 11:28:07 +03:00
< 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" >
2023-07-25 10:58:48 +03:00
< a href = "#dropdown/1-attributes" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
Attributes
2023-07-12 11:28:07 +03:00
< / a >
< / h2 >
2023-07-21 16:59:32 +03:00
< 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_mod< / code > (< code class = "inline" > :atom< / 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 >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-19 11:24:25 +03:00
< 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" >
2023-07-12 11:28:07 +03:00
< 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" >
2023-07-25 10:58:48 +03:00
< a href = "#dropdown_anchor/1-attributes" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
Attributes
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-27 17:47:27 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L230" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< 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 >
2023-07-19 11:24:25 +03:00
< 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" >
2023-07-12 11:28:07 +03:00
< 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" >
2023-07-25 10:58:48 +03:00
< a href = "#option/1-attributes" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
Attributes
2023-07-12 11:28:07 +03:00
< / a >
< / h2 >
2023-07-21 16:59:32 +03:00
< 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 >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-19 11:24:25 +03:00
< 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" >
2023-07-12 11:28:07 +03:00
< 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" >
2023-07-25 10:58:48 +03:00
< a href = "#render/1-attributes" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
Attributes
2023-07-12 11:28:07 +03:00
< / a >
< / h2 >
2023-07-21 16:59:32 +03:00
< 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 > ) (required)< / 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_mod< / code > (< code class = "inline" > :atom< / 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 > < / ul >
2023-07-12 11:28:07 +03:00
< / 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 >
2023-07-27 17:47:27 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L223" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< 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 >
2023-07-19 11:24:25 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L25" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< 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
2023-07-25 10:58:48 +03:00
< 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
2023-07-12 11:28:07 +03:00
< 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 >
