Packages
moon
2.77.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/input_group_page.ex
defmodule MoonWeb.Pages.Components.InputGroupPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias Moon.Autolayouts.LeftToRight
alias Moon.Components.InputGroup
alias Moon.Components.TextInput
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
alias Moon.Components.Form
alias MoonWeb.Components.PropsTable
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Button
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/input-group",
name: "Input Group"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"orientation",
:type => ~c"vertical | horizontal",
:required => ~c"No",
:default => ~c"horizontal",
:description => ~c""
},
%{
:name => ~c"slot",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Default slot"
}
]
)
def mount(_params, _session, socket) do
user = %User{}
user_changeset = User.changeset(user, %{})
{:ok,
assign(socket,
user: user,
user_changeset: user_changeset
)}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def handle_event("register_form_update", params, socket) do
user_changeset = User.changeset(socket.assigns.user, params["user"])
{: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 input_group_1000_state(assigns) do
~F"""
{inspect(@user_changeset.changes, pretty: true)}
"""
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<ComponentPageDescription title="Input Group">
<DeprecationWarning
name="Group"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.Form.GroupPage,
theme_name: @theme_name,
direction: @direction
)}
/>
</ComponentPageDescription>
<ExampleAndCode id="group_1" title="Default">
<:example>
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup included_fields={[:country, :phone]}>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical" included_fields={[:country, :phone]}>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
</LeftToRight>
</:example>
<:code>{input_group_1_code()}</:code>
<:state>{input_group_1000_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode id="group_10" title="RTL">
<:example>
<LeftToRight class="items-center justify-around w-full items-end" dir="rtl">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup included_fields={[:country, :phone]}>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical" included_fields={[:country, :phone]}>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
</LeftToRight>
</:example>
<:code>{input_group_10_code()}</:code>
<:state>{input_group_1000_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode id="group_100" title="Text type variants">
<:example>
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password1" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical" included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password2" />
</InputGroup>
</Form>
</LeftToRight>
</:example>
<:code>{input_group_100_code()}</:code>
<:state>{input_group_1000_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode id="group_130" title="Form submission example">
<:example>
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password3_1" />
</InputGroup>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical" included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password3_2" />
</InputGroup>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
</LeftToRight>
</:example>
<:code>{input_group_120_code()}</:code>
<:state>{input_group_1000_state(assigns)}</:state>
</ExampleAndCode>
<PropsTable title="TextInpoutGroup props" data={@props_info_array} />
</TopToDown>
</Page>
"""
end
defp input_group_1_code() do
"""
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical">
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
</LeftToRight>
"""
end
defp input_group_10_code() do
"""
<LeftToRight class="items-center justify-around w-full items-end" dir="rtl">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup>
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical">
<TextInput field={:country} size="xl" placeholder="Country" />
<TextInput field={:phone} size="xl" placeholder="Phone" />
</InputGroup>
</Form>
</LeftToRight>
"""
end
defp input_group_100_code() do
"""
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password1" />
</InputGroup>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical">
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password2" />
</InputGroup>
</Form>
</LeftToRight>
"""
end
defp input_group_120_code() do
"""
<LeftToRight class="items-center justify-around w-full items-end">
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password3_1" />
</InputGroup>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
<InputGroup orientation="vertical" included_fields={[:email, :password]}>
<TextInput field={:email} size="xl" placeholder="Email" type="email" />
<TextInput field={:password} size="xl" placeholder="Password" type="password" id="password3_2" />
</InputGroup>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</Form>
</LeftToRight>
"""
end
end