Packages
moon
2.83.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/text_input/text_input_page.ex
defmodule MoonWeb.Pages.Components.TextInputPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.TopToDown
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias Moon.Components.TextInput
alias Moon.Components.Heading
alias MoonWeb.Components.ComponentPageDescription
alias Moon.Autolayouts.LeftToRight
alias Moon.Components.ErrorTag
alias Moon.Components.Field
alias Moon.Components.Form
alias Moon.Components.Button
alias Moon.Icon
alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
alias MoonWeb.Components.Table.Table
alias MoonWeb.Components.Table.Column
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/text_input",
name: "Text Input"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"type",
:type =>
~c"date | datetime-local | email | number | password | search | tel | text | url | time | url",
:required => ~c"No",
:default => ~c"text",
:description => ~c"Different types of input"
},
%{
:name => ~c"size",
:type => ~c"medium | large | xlarge",
:required => ~c"-",
:default => ~c"medium",
:description => ~c"Size variant (currently only medium | large, with large as default)"
},
%{
:name => ~c"label",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Required for medium size only"
},
%{
:name => ~c"placeholder",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Placeholder for input"
},
%{
:name => ~c"field",
:type => ~c"atom",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Field value for underlying pheonix text input component"
},
%{
:name => ~c"hint_text",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Informative or error message under input"
},
%{
:name => ~c"error",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Set error state for input"
},
%{
:name => ~c"show_password_text",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description =>
~c"Only for input type password. Text for toggle button: show/hide password"
},
%{
:name => ~c"background_color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Background color"
},
%{
:name => ~c"id",
:type => ~c"string",
:required => ~c"No | required (for password type)",
:default => ~c"-",
:description => ~c"Unique id"
},
%{
:name => ~c"use_error_tag",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description =>
~c"Whether to use ErrorTag in place of the Hint text to show error messages. Requires the component to be inside Form and Field components"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<ComponentPageDescription title="Text Input">
<DeprecationWarning
name="TextInput"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.Form.InputPage,
theme_name: @theme_name,
direction: @direction
)}
/>
</ComponentPageDescription>
<ExampleAndCode id="input_020" title="Sizes">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder" />
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_020_code()}</:code>
</ExampleAndCode>
<Heading size={32} class="mt-16 mb-4">Text Input Icons</Heading>
<ExampleAndCode id="input_023" title="Icons">
<:example>
<TopToDown class="w-full">
<LeftToRight class="justify-between w-full items-end">
<TextInput
label="Medium (Default: md)"
placeholder="Placeholder"
type="password"
id="txt_password_0_1"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput
size="lg"
label="Large (lg)"
placeholder="Placeholder"
type="password"
id="txt_password_0_2"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput
size="xl"
label="Xlarge (xl)"
placeholder="Placeholder"
type="password"
id="txt_password_0_3"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
</LeftToRight>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
</LeftToRight>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
</LeftToRight>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot>
<Button size="xs">xsmall<Icon name="controls-plus" /></Button>
</:right_icon_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot>
<Button size="sm">small<Icon name="controls-plus" /></Button>
</:right_icon_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot>
<Button>medium<Icon name="controls-plus" /></Button>
</:right_icon_slot>
</TextInput>
</LeftToRight>
</TopToDown>
</:example>
<:code>{text_input_023_code()}</:code>
</ExampleAndCode>
<Heading size={32} class="mt-16 mb-4">Text Input Types</Heading>
<ExampleAndCode id="input_010" title="Number">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput type="number" size="md" label="Medium (Default: md)" placeholder="e.g. 1234" />
<TextInput type="number" size="lg" label="Large (lg)" placeholder="e.g. 1234" />
<TextInput type="number" size="xl" label="Xlarge (xl)" placeholder="e.g. 1234" />
</LeftToRight>
</:example>
<:code>{text_input_010_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_009" title="Date">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput type="date" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
<TextInput type="date" size="lg" label="Large (lg)" placeholder="Placeholder" />
<TextInput type="date" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_009_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_008" title="Time">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput type="time" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
<TextInput type="time" size="lg" label="Large (lg)" placeholder="Placeholder" />
<TextInput type="time" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_008_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_007" title="Date Time">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput
type="datetime-local"
size="md"
label="Medium (Default: md)"
placeholder="Placeholder"
/>
<TextInput type="datetime-local" size="lg" label="Large (lg)" placeholder="Placeholder" />
<TextInput type="datetime-local" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_007_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_006" title="Email">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput
type="email"
size="md"
label="Medium (Default: md)"
placeholder="e.g. jake.weary@sportsbet.io"
/>
<TextInput type="email" size="lg" label="Large (lg)" placeholder="e.g. jake.weary@sportsbet.io" />
<TextInput
type="email"
size="xl"
label="Xlarge (xl)"
placeholder="e.g. jake.weary@sportsbet.io"
/>
</LeftToRight>
</:example>
<:code>{text_input_006_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_005" title="Password">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput
id="txt_password_1"
type="password"
size="md"
label="Medium (Default: md)"
placeholder="Password"
/>
<TextInput
id="txt_password_2"
type="password"
size="lg"
label="Large (lg)"
placeholder="Password"
/>
<TextInput
id="txt_password_3"
type="password"
size="xl"
label="Xlarge (xl)"
placeholder="Password"
/>
</LeftToRight>
</:example>
<:code>{text_input_005_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_004" title="Search">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput type="search" size="md" label="Medium (Default: md)" placeholder="e.g. happiness" />
<TextInput type="search" size="lg" label="Large (lg)" placeholder="e.g. health" />
<TextInput type="search" size="xl" label="Xlarge (xl)" placeholder="e.g. money" />
</LeftToRight>
</:example>
<:code>{text_input_004_code()}</:code>
</ExampleAndCode>
<Heading size={32} class="mt-16 mb-4">Text input attributes</Heading>
<ExampleAndCode id="input_20" title="Disabled">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled />
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled />
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled />
</LeftToRight>
</:example>
<:code>{text_input_20_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_30" title="Error">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
</LeftToRight>
</:example>
<:code>{text_input_30_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_40" title="Readonly">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput
label="Medium (Default: md)"
value="Read only text"
placeholder="Placeholder"
readonly
/>
<TextInput
size="lg"
label="Large (lg)"
value="Read only text"
placeholder="Placeholder"
readonly
/>
<TextInput
size="xl"
label="Xlarge (xl)"
value="Read only text"
placeholder="Placeholder"
readonly
/>
</LeftToRight>
</:example>
<:code>{text_input_40_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_50" title="Size RTL">
<:example>
<LeftToRight class="justify-between w-full items-end" dir="rtl">
<TextInput label="Medium (Default: md)" placeholder="Placeholder" />
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_50_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_60" title="Without label">
<:example>
<LeftToRight class="justify-between w-full items-end" dir="rtl">
<TextInput placeholder="Placeholder" />
<TextInput size="lg" placeholder="Placeholder" />
<TextInput size="xl" placeholder="Placeholder" />
</LeftToRight>
</:example>
<:code>{text_input_60_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_70" title="Hint Text">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput placeholder="Placeholder" label="Medium (Default: md)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
</LeftToRight>
</:example>
<:code>{text_input_70_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_80" title="Input with background color">
<:example>
<LeftToRight class="justify-between w-full items-end">
<TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
</LeftToRight>
</:example>
<:code>{text_input_70_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="input_90" title="Form example">
<:example>
<Form
for={@user_changeset}
change="register_form_update"
submit="register_form_submit"
autocomplete="off"
>
<TopToDown>
<Field name={:username}>
<TextInput label="Username" placeholder="Username" />
<ErrorTag />
</Field>
<Field name={:email}>
<TextInput
label="Email"
placeholder="Email"
type="email"
disabled={!get_has_valid_username(@user_changeset)}
/>
<ErrorTag />
</Field>
<Field name={:password}>
<TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag />
</Field>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</TopToDown>
</Form>
</:example>
<:code>{text_input_90_code()}</:code>
<:state>{text_input_90_state(assigns)}</:state>
</ExampleAndCode>
<div>
<div class="text-bulma items-center text-moon-20 font-normal my-4">Text Input Props</div>
<Table items={item <- @props_info_array}>
<Column name="name" label="Name" is_row_header>
{item.name}
</Column>
<Column name="type" label="Type">
{item.type}
</Column>
<Column name="required" label="Required">
{item.required}
</Column>
<Column name="default" label="Default">
{item.default}
</Column>
<Column name="description" label="Description">
{item.description}
</Column>
</Table>
</div>
</TopToDown>
</Page>
"""
end
def text_input_020_code do
"""
<TextInput label="Medium (Default: md)" />
<TextInput size="lg" label="Large (lg)" />
<TextInput size="xl" label="Xlarge (xl)" />
"""
end
def text_input_023_code do
"""
<TopToDown class="w-full">
<LeftToRight class="justify-between w-full items-end">
<TextInput
label="Medium (Default: md)"
placeholder="Placeholder"
type="password"
id="txt_password_0_1"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput
size="lg"
label="Large (lg)"
placeholder="Placeholder"
type="password"
id="txt_password_0_2"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput
size="xl"
label="Xlarge (xl)"
placeholder="Placeholder"
type="password"
id="txt_password_0_3"
>
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
</LeftToRight>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
</TextInput>
</LeftToRight>
<LeftToRight class="justify-between w-full items-end">
<TextInput label="Medium (Default: md)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
<:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
<:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
</LeftToRight>
</TopToDown>
"""
end
def text_input_010_code do
"""
<TextInput
type="number"
size="md"
label="Medium (Default: md)"
placeholder="e.g. 1234"
/>
<TextInput
type="number"
size="lg"
label="Large (lg)"
placeholder="e.g. 1234"
/>
<TextInput
type="number"
size="xl"
label="Xlarge (xl)"
placeholder="e.g. 1234"
/>
"""
end
def text_input_009_code do
"""
<TextInput
type="date"
size="md"
label="Medium (Default: md)"
placeholder="Placeholder"
/>
<TextInput
type="date"
size="lg"
label="Large (lg)"
placeholder="Placeholder"
/>
<TextInput
type="date"
size="xl"
label="Xlarge (xl)"
placeholder="Placeholder"
/>
"""
end
def text_input_008_code do
"""
<TextInput
type="time"
size="md"
label="Medium (Default: md)"
placeholder="Placeholder"
/>
<TextInput
type="time"
size="lg"
label="Large (lg)"
placeholder="Placeholder"
/>
<TextInput
type="time"
size="xl"
label="Xlarge (xl)"
placeholder="Placeholder"
/>
"""
end
def text_input_007_code do
"""
<TextInput
type="datetime-local"
size="md"
label="Medium (Default: md)"
placeholder="Placeholder"
/>
<TextInput
type="datetime-local"
size="lg"
label="Large (lg)"
placeholder="Placeholder"
/>
<TextInput
type="datetime-local"
size="xl"
label="Xlarge (xl)"
placeholder="Placeholder"
/>
"""
end
def text_input_006_code do
"""
<TextInput
type="email"
size="md"
label="Medium (Default: md)"
placeholder="e.g. jake.weary@sportsbet.io"
/>
<TextInput
type="email"
size="lg"
label="Large (lg)"
placeholder="e.g. jake.weary@sportsbet.io"
/>
<TextInput
type="email"
size="xl"
label="Xlarge (xl)"
placeholder="e.g. jake.weary@sportsbet.io"
/>
"""
end
def text_input_005_code do
"""
<TextInput
id="txt_password_1"
type="password"
size="md"
label="Medium (Default: md)"
placeholder="Password"
/>
<TextInput
id="txt_password_2"
type="password"
size="lg"
label="Large (lg)"
placeholder="Password"
/>
<TextInput
id="txt_password_3"
type="password"
size="xl"
label="Xlarge (xl)"
placeholder="Password"
/>
"""
end
def text_input_004_code do
"""
<TextInput
type="search"
size="md"
label="Medium (Default: md)"
placeholder="e.g. happiness"
/>
<TextInput
type="search"
size="lg"
label="Large (lg)"
placeholder="e.g. health"
/>
<TextInput
type="search"
size="xl"
label="Xlarge (xl)"
placeholder="e.g. money"
/>
"""
end
def text_input_20_code do
"""
<TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled/>
"""
end
def text_input_30_code do
"""
<TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
"""
end
def text_input_40_code do
"""
<TextInput label="Medium (Default: md)" placeholder="Placeholder" readonly/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" readonly/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" readonly/>
"""
end
def text_input_50_code do
"""
<TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl"/>
"""
end
def text_input_60_code do
"""
<TextInput (Default: md)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="lg" placeholder="Placeholder" dir="rtl"/>
<TextInput size="xl" placeholder="Placeholder" dir="rtl"/>
"""
end
def text_input_70_code do
"""
<TextInput placeholder="Placeholder" label="Medium (Default: md)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
"""
end
def text_input_80_code do
"""
<TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku">
<:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
"""
end
def text_input_90_code do
"""
<Form
for={@user_changeset}
change="register_form_update"
submit="register_form_submit"
autocomplete="off"
>
<TopToDown>
<Field name={:username}>
<TextInput label="Username" placeholder="Username" />
<ErrorTag />
</Field>
<Field name={:email}>
<TextInput
label="Email"
placeholder="Email"
type="email"
disabled={!get_has_valid_username(@user_changeset)}
/>
<ErrorTag />
</Field>
<Field name={:password}>
<TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag/>
</Field>
<div class="pt-4">
<Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
</div>
</TopToDown>
</Form>
"""
end
def text_input_90_state(assigns) do
~F"""
@user_changeset = {inspect(@user_changeset, pretty: true)}
@user = {inspect(@user, pretty: true)}
"""
end
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 get_has_valid_username(user_changeset) do
!Keyword.has_key?(user_changeset.errors, :username)
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
end