Packages
moon
2.81.2
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/select_page.ex
defmodule MoonWeb.Pages.Components.Select.SelectPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Form
alias Moon.Components.Select
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(gender_options, :any)
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/select",
name: "Select"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"field",
:type => ~c"atom",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Field name for underlying surface select component"
},
%{
:name => ~c"label",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Label title"
},
%{
:name => ~c"prompt",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Placeholder"
},
%{
:name => ~c"disabled",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether the component is disabled"
}
]
)
def mount(_params, _session, socket) do
gender_options = [
[key: "Female", value: "female"],
[key: "Male", value: "male"],
[key: "Invalid choice", value: "invalid"],
[key: "I identify as God and this is not important", value: "god", disabled: true]
]
user_changeset = User.changeset(%User{})
{:ok,
assign(socket,
gender_options: gender_options,
user_changeset: user_changeset
)}
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}>
<DeprecationWarning
name="Select"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.Form.SelectPage,
theme_name: @theme_name,
direction: @direction
)}
/>
<ExampleAndCode title="Example" id="select_1">
<:example>
<Form for={@user_changeset}>
<Select field={:gender} options={@gender_options} prompt="Please select gender" />
</Form>
</:example>
<:code>{select_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="With Label" id="select_2">
<:example>
<Form for={@user_changeset}>
<Select label="Gender" field={:gender} options={@gender_options} prompt="Please select gender" />
</Form>
</:example>
<:code>{select_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Disabled" id="select_3">
<:example>
<Form for={@user_changeset}>
<Select
disabled
label="Gender"
field={:gender}
options={@gender_options}
prompt="Please select gender"
/>
</Form>
</:example>
<:code>{select_3_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def select_1_code do
"""
alias Moon.Components.Select
<Form for={@user_changeset}>
<Select field={:gender} options={@gender_options} prompt="Please select gender" />
</Form>
"""
end
def select_2_code do
"""
alias Moon.Components.Select
<Form for={@user_changeset}>
<Select label="Gender" field={:gender} options={@gender_options} prompt="Please select gender" />
</Form>
"""
end
def select_3_code do
"""
alias Moon.Components.Select
<Select
disabled
label="Gender"
field={:gender}
options={@gender_options}
prompt="Please select gender"
/>
"""
end
end