Packages
moon
2.78.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/switch_page.ex
defmodule MoonWeb.Pages.Components.SwitchPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Switch
alias MoonWeb.Components.ExampleAndCode
alias Moon.Components.Field
alias Moon.Components.Form
alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias Moon.Components.Button
alias Moon.Components.ErrorTag
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/switch",
name: "Switch"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"checked",
:type => ~c"boolean ",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Is switch checked/unchecked"
},
%{
:name => ~c"caption_unchecked",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Displayed text when unchecked"
},
%{
:name => ~c"caption_checked",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Displayed text when checked"
},
%{
:name => ~c"field",
:type => ~c"atom",
:required => ~c"No",
:default => ~c"false",
:description => ~c"If not used in Field component, needs to be specified"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Switch">
<DeprecationWarning
name="Switch"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.SwitchPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Size" class="mt-3" id="switch_2_sample">
<:example>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Switch field={:agrees_to_terms_of_service} size="small" id="switch_2_1" />
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Switch field={:agrees_to_terms_of_service} size="medium" id="switch_2_2" />
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Switch field={:agrees_to_terms_of_service} size="large" id="switch_2_3" />
</Form>
</:example>
<:code>{switch_2_code()}</:code>
<:state>{switch_1_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Icons" class="mt-3" id="switch_3_sample">
<:example>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_1" icons size="small" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_2" icons size="medium" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_3" icons size="large" />
</Field>
</Form>
</:example>
<:code>{switch_3_code()}</:code>
<:state>{switch_1_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Captions" class="mt-3" id="switch_4_sample">
<:example>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch icons={false} size="small" caption_unchecked="AM" caption_checked="PM" id="switch_4_1" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch icons size="medium" caption_unchecked="OFF" caption_checked="ON" id="switch_4_2" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch icons size="large" caption_unchecked="Moon" caption_checked="Sun" id="switch_4_3" />
</Field>
</Form>
</:example>
<:code>{switch_4_code()}</:code>
<:state>{switch_1_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Form example" class="mt-3" id="switch_5_sample">
<:example>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<div class="text-moon-16 mb-3">Agrees to Terms of Service</div>
<Field name={:agrees_to_terms_of_service}>
<Switch icons={false} size="small" id="switch_5_1" />
<ErrorTag />
</Field>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
</:example>
<:code>{switch_5_code()}</:code>
<:state>{switch_1_state(assigns)}</:state>
</ExampleAndCode>
<PropsTable title="Switch props" data={@props_info_array} />
</Page>
"""
end
def mount(_params, _session, socket) do
user = %User{}
user_changeset =
User.changeset(%User{}, %{
agrees_to_terms_of_service: true,
agrees_to_marketing_emails: false
})
socket =
assign(socket,
user_changeset: user_changeset,
small_switch_checked: false,
medium_switch_checked: false,
large_switch_checked: false,
icons_switch_checked: false,
captions_switch_checked: false,
user: user
)
{:ok, socket}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def handle_event(
"register_form_update",
%{
"user" => params
},
socket
) do
user_changeset = User.changeset(socket.assigns.user, params)
{:noreply, assign(socket, user_changeset: user_changeset)}
end
def handle_event("register_form_submit", params, socket) do
user_changeset =
User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})
{:noreply, assign(socket, user_changeset: user_changeset)}
end
def switch_1_state(assigns) do
~F"""
@user_changeset = {inspect(@user_changeset, pretty: true)}
"""
end
def switch_2_code do
"""
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch size="small" id="switch_2_1" checked={@small_switch_checked} />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch
size="medium"
id="switch_2_2"
checked={@medium_switch_checked}
/>
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch
size="large"
id="switch_2_3"
checked={@large_switch_checked}
/>
</Field>
</Form>
"""
end
def switch_3_code do
"""
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_1" icons size="small" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_2" icons size="medium" />
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch id="switch_3_3" icons size="large" />
</Field>
</Form>
"""
end
def switch_4_code do
"""
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch
icons={false}
size="small"
caption_unchecked="AM"
caption_checked="PM"
id="switch_4_1"
/>
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch
icons
size="medium"
caption_unchecked="OFF"
caption_checked="ON"
id="switch_4_2"
/>
</Field>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<Field name={:agrees_to_terms_of_service}>
<Switch
icons
size="large"
caption_unchecked="Moon"
caption_checked="Sun"
id="switch_4_3"
/>
</Field>
</Form>
"""
end
def switch_5_code do
"""
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<div class="text-moon-16 mb-3">Agrees to Terms of Service</div>
<Field name={:agrees_to_terms_of_service}>
<Switch icons={false} size="small" id="switch_5_1" />
<ErrorTag />
</Field>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
"""
end
end