Packages
mbta_metro
0.1.13
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
lib/mbta_metro/components/input_group.ex
defmodule MbtaMetro.Components.InputGroup do
@moduledoc false
use Phoenix.Component
import MbtaMetro.Components.Input, only: [input: 1]
import Phoenix.HTML.Form, only: [input_id: 2, input_name: 2, input_value: 2]
attr :options, :list
attr :type, :string, values: ~W(checkbox checkbox-button radio radio-button)
attr :name, :string
attr :field, :atom
attr :form, Phoenix.HTML.Form
attr :class, :string, default: ""
attr :rest, :global
def input_group(assigns) when assigns.type in ~W(checkbox-button radio-button) do
~H"""
<ul class={"inline-flex p-0 list-none rounded border border-solid border-cobalt-30 text-cobalt-30 divide-x divide-solid divide-cobalt-30 overflow-hidden #{@class}"}>
<li
:for={{label, value} <- @options}
class={[
"flex-auto",
"has-[:checked]:bg-cobalt-80 has-[:checked]:font-bold"
]}
>
<.input
id={input_id(@form, @field) <> "_#{value}"}
label={label}
type={@type}
name={input_name(@form, @field)}
value={value}
field={@form[@field]}
checked={input_value(@form, @field) == value}
{@rest}
/>
</li>
</ul>
"""
end
def input_group(assigns) do
~H"""
<ul class={"p-0 list-none #{@class}"}>
<li :for={{label, value} <- @options} style="height: var(--minimum-tap-target-size)">
<.input
id={input_id(@form, @field) <> "_#{value}"}
label={label}
type={@type}
name={input_name(@form, @field)}
value={value}
field={@form[@field]}
checked={input_value(@form, @field) == value}
{@rest}
/>
</li>
</ul>
"""
end
@doc """
Renders a simple fieldset for grouping radio and checkbox inputs.
"""
attr :id, :string
attr :class, :string, default: ""
attr :legend, :string, required: true, doc: "A concise label for the fieldset."
slot :inner_block,
required: true,
doc: "The fieldset content, containing multiple options for a radio input or checkbox input."
def fieldset(assigns) do
~H"""
<fieldset class={"w-full #{@class}"}>
<legend class="font-bold m-0 py-sm inline-flex items-center"><%= @legend %></legend>
<%= render_slot(@inner_block) %>
</fieldset>
"""
end
end