Packages
moon
2.90.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/design/table/input.ex
defmodule Moon.Design.Table.Input do
@moduledoc "Input styled to use inside the tables"
use Moon.StatelessComponent
@doc "Data-testid attribute for html tag"
prop(testid, :string)
@doc "Id attribute for html tag"
prop(id, :string)
@doc "Additional CSS classes for the html tag"
prop(class, :css_class)
@doc "Text to be shown when no value given"
prop(placeholder, :string)
@doc "Value to be shown"
prop(value, :string)
@doc "If the item should be marked as disabled"
prop(disabled, :boolean)
@doc "Additional values to be passed"
prop(side_values, :any, default: %{})
@doc "Keyword | Map of additional attributes for the input"
prop(opts, :any, default: %{})
@doc "On change event for the input"
prop(on_change, :event)
@doc "On keyup event for the input"
prop(on_keyup, :event)
@doc "On focus event for the input"
prop(on_focus, :event)
@doc "On blur event for the input"
prop(on_blur, :event)
def render(assigns) do
~F"""
<input
{=@value}
{=@id}
{=@placeholder}
data-testid={@testid}
{=@disabled}
autocomplete="off"
class={merge([
"block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2]",
"bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles",
"focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs",
"rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs",
"rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs",
"ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs",
"ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100",
"placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none",
"read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
"read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err",
"invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err",
@class
])}
:on-change={@on_change}
:on-keyup={@on_keyup}
:on-focus={@on_focus}
:on-blur={@on_blur}
{...@opts}
:values={@side_values}
/>
"""
end
end