Packages

moon

2.89.4
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

HexDocs

Current section

Files

Jump to
Readme
89 Versions
17 Dependencies
0 Dependants
Files
Activity
moon lib moon components deprecated text_input.ex
Raw

lib/moon/components/deprecated/text_input.ex 

defmodule Moon.Components.Deprecated.TextInput do

  @moduledoc false



  use Moon.StatelessComponent

  alias Moon.Components.FieldLabel



  prop(field, :atom)

  prop(label, :string)



  prop(type, :string,

    default: "text",

    values: [

      "date",

      "datetime-local",

      "email",

      "number",

      "password",

      "search",

      "tel",

      "text",

      "url",

      "time",

      "url"

    ]

  )



  prop(value, :string)

  prop(placeholder, :string)

  prop(error, :string)

  prop(rounded, :boolean)

  prop(disabled, :boolean)

  prop(required, :boolean)

  prop(class, :css_class)

  prop(focus, :event)

  prop(keydown, :event)

  prop(keyup, :event)

  prop(blur, :event)

  prop(step, :string, default: "1")

  prop(background_color, :string, values: Moon.colors(), default: "goku")

  prop(size, :string, values: ["medium", "large"], default: "large")

  prop(border_color_class, :string)

  prop(states_class, :string)



  data(text_input, :any)



  slot(left_icon)

  slot(right_icon)

  slot(hint_text)



  def render(assigns) do

    text_input = ~F"""

    <div class="relative">

      {#if slot_assigned?(:left_icon)}

        <div class="absolute inset-y-0 left-0 pl-4 flex items-center text-trunks">

          <#slot {@left_icon} />

        </div>

      {/if}

      {#if slot_assigned?(:right_icon)}

        <div class="absolute inset-y-0 right-0 pr-4 flex items-center text-trunks">

          <#slot {@right_icon} />

        </div>

      {/if}



      <Surface.Components.Form.TextInput

        class={

          Moon.Components.FieldBorder.get_default_class(),

          @border_color_class || Moon.Components.FieldBorder.get_default_border_color_class(),

          @states_class || Moon.Components.FieldBorder.get_default_states_class(),

          "h-10 text-moon-14 px-3": @size == "medium",

          "h-12 text-moon-16 px-4": @size == "large",

          "pl-11": slot_assigned?(:left_icon),

          "pr-11": slot_assigned?(:right_icon),

          "border-chichi": @error,

          "#{@class}": true,

          "bg-#{@background_color}": true

        }

        field={@field}

        opts={

          placeholder: @placeholder,

          disabled: @disabled,

          required: @required && !@disabled,

          type: @type,

          "data-lpignore": "true",

          step: @step

        }

        value={@value}

        focus={@focus}

        blur={@blur}

        keydown={@keydown}

        keyup={@keyup}

      />



      {#if slot_assigned?(:hint_text)}

        <div class="mt-2 ml-2 relative text-trunks">

          <#slot {@hint_text} />

        </div>

      {/if}

    </div>

    """



    assigns = assign(assigns, text_input: text_input)



    ~F"""

    {#if @label}

      <FieldLabel text={@label}>

        <div class="mt-2 relative">

          {@text_input}

        </div>

      </FieldLabel>

    {#else}

      {@text_input}

    {/if}

    """

  end

end