Packages
moon
2.85.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/select/single_select_page.ex
defmodule MoonWeb.Pages.Components.Select.SingleSelectPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Form
alias Moon.Components.Field
alias Moon.Components.Select.SingleSelect
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias Moon.Components.Button
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/select/single-select",
name: "Single Select"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"id",
:type => ~c"string ",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c""
},
%{
:name => ~c"label",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c""
},
%{
:name => ~c"options",
:type => ~c"list",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Options for the select"
},
%{
:name => ~c"value",
:type => ~c"any",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Default selected value"
},
%{
:name => ~c"disabled",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether the component is disabled"
},
%{
:name => ~c"size",
:type => ~c"sm | md | lg | xl",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size variant"
},
%{
:name => ~c"popover_placement",
:type =>
~c"top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end",
:required => ~c"-",
:default => ~c"bottom-start",
:description => ~c"Location of where the dropdown appears"
},
%{
:name => ~c"popover_class",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Css class for the dropdown"
},
%{
:name => ~c"placeholder",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"String to display when there is no value selected"
},
%{
:name => ~c"background_color",
:type => ~c"string ",
:required => ~c"No",
:default => ~c"gohan",
:description => ~c""
},
%{
:name => ~c"hint_text_slot",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Inform message under select"
},
%{
:name => ~c"has_error",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"-",
:description => ~c"If the component is in error mode"
},
%{
:name => ~c"use_error_tag",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Whether to use the built in ErrorTag in place of the hint slot"
},
%{
:name => ~c"selected_value_class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Css class for the displayed selected value"
}
]
)
data(latest_params, :any, default: nil)
data(latest_params2, :any, default: nil)
data(search_string, :string, default: "")
def mount(_params, _session, socket) do
initial_params = %{permissions: [1, 2], role: 1}
user = %User{}
user_changeset = User.changeset(user, initial_params)
{:ok,
assign(socket,
user: user,
user_changeset: user_changeset,
user_changeset2: user_changeset,
options: User.available_roles(),
searched_options: User.available_roles(),
options_with_left_icon: User.available_roles_with_left_icon_flag(),
searched_options_with_left_icon: User.available_roles_with_left_icon_flag(),
options_with_right_icon: User.available_roles_with_right_icon(),
searched_options_with_right_icon: User.available_roles_with_right_icon(),
options_with_both_icons: User.available_roles_with_left_icon_flag_and_right_icon(),
searched_options_with_both_icons:
User.available_roles_with_left_icon_flag_and_right_icon(),
gender_options: User.gender_options(),
search_string: ""
)}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Single Select" />
<ExampleAndCode title="Default" id="single_select_default">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect id="user-roles-example-1" {=@options} placeholder="Select a role" />
</Field>
</Form>
</:example>
<:code>{code_for_single_select_default()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Sizes" id="single_select_sizes">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-0"
{=@options}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect id="user-roles-example-10-1" {=@options} label="Role" placeholder="Select a role" />
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-2"
{=@options}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-3"
{=@options}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
</:example>
<:code>{code_for_single_select_sizes()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Left Icon" id="single_select_with_options_as_prop_and_left_icon_flag">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-0"
options={@options_with_left_icon}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-1"
options={@options_with_left_icon}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-2"
options={@options_with_left_icon}
label="Role"
size="lg"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-3"
options={@options_with_left_icon}
label="Role"
size="xl"
placeholder="Select a role"
/>
</Field>
</Form>
</:example>
<:code>{code_for_single_select_with_options_as_prop_and_left_icon_flag()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Right icon" id="single_select_with_options_as_prop_and_right_icon">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-0"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-1"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-2"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-3"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
</:example>
<:code>{code_for_single_select_with_options_as_prop_and_right_icon()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Both icons" id="single_select_with_options_as_prop_and_both_icons">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-0"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-1"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-2"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-3"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
</:example>
<:code>{code_for_single_select_with_options_as_prop_and_both_icons()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Disabled" id="single_select_disabled">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-0"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-1"
{=@options}
disabled
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-2"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-3"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
</:example>
<:code>{code_for_disabled()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Hint text" id="single_select_hint_text">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-0"
{=@options}
label="Role"
placeholder="Select a role"
size="sm"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-1"
{=@options}
label="Role"
placeholder="Select a role"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-2"
{=@options}
label="Role"
placeholder="Select a role"
size="lg"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-3"
{=@options}
label="Role"
placeholder="Select a role"
size="xl"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
</:example>
<:code>{code_for_hint()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Error" id="single_select_error">
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-0"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="sm"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-1"
{=@options}
label="Role"
has_error
placeholder="Select a role"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-2"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="lg"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-3"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="xl"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
</:example>
<:code>{code_for_error()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Use Error Tag" id="single_select_error_tag">
<:example>
<Form for={@user_changeset2} change="form_update2" submit="form_submit2">
<Field name={:gender}>
<SingleSelect
popover_class="pt-2"
id="user-gender-example-error-tag-3"
options={@gender_options}
label="Gender"
use_error_tag
placeholder="Select gender"
/>
</Field>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
</:example>
<:code>{code_for_error_tag()}</:code>
<:state>{select_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode
title="With search (data + changeset form)"
id="single_select_with_options_as_prop_and_search"
>
<:example>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-search-0"
{=@options}
{=@searched_options}
{=@search_string}
on_search_change="update_search"
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
</:example>
<:code>{code_for_single_select_with_options_as_prop_and_search()}</:code>
<:state>@user_changeset = {inspect(@user_changeset, pretty: true)}<br><br>@latest_params = {inspect(@latest_params, pretty: true)}</:state>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def handle_event(
"form_update",
%{
"user" => user_params
},
socket
) do
user_changeset = User.changeset(%User{}, user_params)
{:noreply, assign(socket, user_changeset: user_changeset, latest_params: user_params)}
end
def handle_event(
"form_update2",
%{
"user" => user_params
},
socket
) do
user_changeset2 = User.changeset(%User{}, user_params)
{:noreply, assign(socket, user_changeset2: user_changeset2, latest_params2: user_params)}
end
def handle_event(
"form_submit",
%{
"user" => user_params
},
socket
) do
user_changeset = User.changeset(%User{}, user_params)
{:noreply, assign(socket, user_changeset: user_changeset)}
end
def handle_event(
"form_submit2",
%{
"user" => user_params
},
socket
) do
user_changeset2 = User.changeset(%User{}, user_params) |> Map.merge(%{action: :insert})
{:noreply, assign(socket, user_changeset2: user_changeset2)}
end
def handle_event("update_search", %{"value" => search_string}, socket) do
options = socket.assigns.options
options_with_left_icon = socket.assigns.options_with_left_icon
options_with_right_icon = socket.assigns.searched_options_with_right_icon
options_with_both_icons = socket.assigns.options_with_both_icons
{:noreply,
assign(socket,
options: options,
searched_options: filtered_options(options, search_string),
options_with_left_icon: options_with_left_icon,
searched_options_with_left_icon: filtered_options(options_with_left_icon, search_string),
options_with_right_icon: options_with_right_icon,
searched_options_with_right_icon: filtered_options(options_with_right_icon, search_string),
options_with_both_icons: options_with_both_icons,
searched_options_with_both_icons: filtered_options(options_with_both_icons, search_string),
search_string: search_string
)}
end
def select_state(assigns) do
~F"""
@user_changeset2 = {inspect(@user_changeset2, pretty: true)}
@user = {inspect(@user, pretty: true)}
"""
end
def filtered_options(options, search_string) do
Enum.filter(
options,
&String.contains?(String.downcase(&1.label), String.downcase(search_string))
)
end
def code_for_single_select_default do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect id="user-roles-example-1" {=@options} placeholder="Select a role" />
</Field>
</Form>
"""
end
def code_for_single_select_sizes do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-0"
{=@options}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-1"
{=@options}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-2"
{=@options}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-10-3"
{=@options}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
"""
end
def code_for_single_select_with_options_as_prop_and_left_icon_flag do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-0"
options={@options_with_left_icon}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-1"
options={@options_with_left_icon}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-2"
options={@options_with_left_icon}
label="Role"
size="lg"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-5-3"
options={@options_with_left_icon}
label="Role"
size="xl"
placeholder="Select a role"
/>
</Field>
</Form>
"""
end
def code_for_single_select_with_options_as_prop_and_right_icon do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-0"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-1"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-2"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-4-3"
options={@options_with_right_icon}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
"""
end
defp code_for_single_select_with_options_as_prop_and_both_icons do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-0"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-1"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-2"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
id="user-roles-example-6-3"
options={@options_with_both_icons}
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
"""
end
def code_for_disabled do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-0"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-1"
{=@options}
disabled
label="Role"
placeholder="Select a role"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-2"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="lg"
/>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-disabled-3"
{=@options}
disabled
label="Role"
placeholder="Select a role"
size="xl"
/>
</Field>
</Form>
"""
end
def code_for_hint do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-0"
{=@options}
label="Role"
placeholder="Select a role"
size="sm"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-1"
{=@options}
label="Role"
placeholder="Select a role"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-2"
{=@options}
label="Role"
placeholder="Select a role"
size="lg"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-hint-3"
{=@options}
label="Role"
placeholder="Select a role"
size="xl"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
"""
end
def code_for_error do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-0"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="sm"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-1"
{=@options}
label="Role"
has_error
placeholder="Select a role"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-2"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="lg"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-3"
{=@options}
label="Role"
has_error
placeholder="Select a role"
size="xl"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
"""
end
def code_for_error_tag do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-1"
{=@options}
label="Role"
is_error
placeholder="Select a role"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-2"
{=@options}
label="Role"
is_error
placeholder="Select a role"
size="lg"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-error-3"
{=@options}
label="Role"
is_error
placeholder="Select a role"
size="xl"
>
<:hint_text_slot>Informative Message Handler</:hint_text_slot>
</SingleSelect>
</Field>
</Form>
"""
end
def code_for_single_select_with_options_as_prop_and_search do
"""
alias Moon.Components.Select.SingleSelect
<Form for={@user_changeset} change="form_update" submit="form_submit">
<Field name={:role}>
<SingleSelect
popover_class="pt-2"
id="user-roles-example-search-0"
{=@options}
{=@searched_options}
{=@search_string}
on_search_change="update_search"
label="Role"
placeholder="Select a role"
size="sm"
/>
</Field>
</Form>
"""
end
end