Packages

mbta_metro

0.1.5
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

HexDocs

Current section

Files

Jump to
Readme
85 Versions
8 Dependencies
Dependants
Files
Activity
mbta_metro lib mbta_metro components input_group.ex
Raw

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 :legend, :string

  attr :options, :list

  attr :type, :string, values: ~W(checkbox checkbox-button radio radio-button)

  attr :id, :string

  attr :name, :string

  attr :field, :atom

  attr :form, Phoenix.HTML.Form

  attr :class, :string, default: ""

  attr :rest, :global



  def input_group(assigns) do

    ~H"""

    <.fieldset legend={@legend} id={@id} class={@class}>

      <ul class="p-0 flex list-none">

        <li

          :for={{label, value} <- @options}

          class={[

            "border border-solid border-cobalt-30 p-0 md:p-1 text-cobalt-30 cursor-pointer",

            "has-[:checked]:bg-cobalt-90 has-[:checked]:font-bold",

            "[&:not(:last-child)]:border-r-0",

            "first:rounded-l-md last:rounded-r-md",

            "w-full"

          ]}

        >

          <.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>

    </.fieldset>

    """

  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={"my-2 w-full #{@class}"}>

      <legend class="font-bold text-base text-charcoal-20"><%= @legend %></legend>

      <%= render_slot(@inner_block) %>

    </fieldset>

    """

  end

end