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""" <:example> <:code>{text_input_020_code()} Text Input Icons <:example> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:code>{text_input_023_code()} Text Input Types <:example> <:code>{text_input_010_code()} <:example> <:code>{text_input_009_code()} <:example> <:code>{text_input_008_code()} <:example> <:code>{text_input_007_code()} <:example> <:code>{text_input_006_code()} <:example> <:code>{text_input_005_code()} <:example> <:code>{text_input_004_code()} Text input attributes <:example> <:code>{text_input_20_code()} <:example> <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:code>{text_input_30_code()} <:example> <:code>{text_input_40_code()} <:example> <:code>{text_input_50_code()} <:example> <:code>{text_input_60_code()} <:example> <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:code>{text_input_70_code()} <:example> <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:code>{text_input_70_code()} <:example>
<:code>{text_input_90_code()} <:state>{text_input_90_state(assigns)}
Text Input Props
{item.name} {item.type} {item.required} {item.default} {item.description}
""" end def text_input_020_code do """ """ end def text_input_023_code do """ <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder <:left_icon_slot> <:right_icon_slot> <:hint_text_slot>Informative message holder """ end def text_input_010_code do """ """ end def text_input_009_code do """ """ end def text_input_008_code do """ """ end def text_input_007_code do """ """ end def text_input_006_code do """ """ end def text_input_005_code do """ """ end def text_input_004_code do """ """ end def text_input_20_code do """ """ end def text_input_30_code do """ <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder """ end def text_input_40_code do """ """ end def text_input_50_code do """ """ end def text_input_60_code do """ """ end def text_input_70_code do """ <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder """ end def text_input_80_code do """ <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder <:hint_text_slot>Informative message holder """ end def text_input_90_code do """
""" 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