This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Bootstrap.Form.InputGroup

Easily extend form input controls by adding text and buttons.

import Bootstrap.Form.InputGroup as InputGroup
import Bootstrap.Form.Input as Input
import Bootstrap.Button as Button


InputGroup.config
    ( InputGroup.text [] )
    |> InputGroup.large
    |> InputGroup.predecessors
        [ InputGroup.span [] [ text "Stuff" ] ]
    |> InputGroup.successors
        [ InputGroup.button [] [ text "DoIt!"] ]
    |> InputGroup.view

General

view : Config msg -> Html.Html msg

Create the view representation for an Input group based on a [┬┤configuration`](#Config)

config : Input msg -> Config msg

Create initial view configuration for an input group.

  • input - The input for the input group
predecessors : List (Addon msg) -> Config msg -> Config msg

Specify a list of add-ons to display before the input.

  • addons List of add-ons
  • config View configuration for Input group (so far)
successors : List (Addon msg) -> Config msg -> Config msg

Specify a list of add-ons to display after the input.

  • addons List of add-ons
  • config View configuration for Input group (so far)
text : List (Input.Option msg) -> Input msg

Create an input add-on with type="text"

button : List (Button.Option msg) -> List (Html.Html msg) -> Addon msg

Create a button add-on.

  • options List of button options
  • children LIst of child elements
dropdown : Dropdown.State -> { toggleMsg : Dropdown.State -> msg , toggleButton : Dropdown.DropdownToggle msg , options : List (Dropdown.DropdownOption msg) , items : List (Dropdown.DropdownItem msg) } -> Addon msg

Create a dropdown add-on.

For details see the Bootstrap.Dropdown module.

splitDropdown : Dropdown.State -> { toggleMsg : Dropdown.State -> msg , toggleButton : Dropdown.SplitDropdownToggle msg , options : List (Dropdown.DropdownOption msg) , items : List (Dropdown.DropdownItem msg) } -> Addon msg

Create a split dropdown add-on.

For details see the Bootstrap.Dropdown module.

span : List (Html.Attribute msg) -> List (Html.Html msg) -> Addon msg

Create a simple span add-on. Great for simple texts or font icons

  • attributes - List of attributes
  • children - List of child elements
type Config msg = Config { input : Input msg , predecessors : List (Addon msg) , successors : List (Addon msg) , size : Maybe ScreenSize , attributes : List (Html.Attribute msg) }

Opaque representation of the view configuration for an input group.

type Input msg = Input (Html.Html msg)

Opaque representation of an input element.

type Addon msg = Addon (Html.Html msg)

Opaque representation of an input-group add-on element.

Additional input flavors

password : List (Input.Option msg) -> Input msg

Create an input add-on with type="password"

datetimeLocal : List (Input.Option msg) -> Input msg

Create an input add-on with type="datetime-local"

date : List (Input.Option msg) -> Input msg

Create an input add-on with type="date"

month : List (Input.Option msg) -> Input msg

Create an input add-on with type="month"

time : List (Input.Option msg) -> Input msg

Create an input add-on with type="time"

week : List (Input.Option msg) -> Input msg

Create an input add-on with type="week"

number : List (Input.Option msg) -> Input msg

Create an input add-on with type="number"

email : List (Input.Option msg) -> Input msg

Create an input add-on with type="email"

url : List (Input.Option msg) -> Input msg

Create an input add-on with type="url"

search : List (Input.Option msg) -> Input msg

Create an input add-on with type="search"

tel : List (Input.Option msg) -> Input msg

Create an input add-on with type="tel"

Sizing

large : Config msg -> Config msg

Make all controls in an input group large

small : Config msg -> Config msg

Make all controls in an input group small

Further customization

attrs : List (Html.Attribute msg) -> Config msg -> Config msg

When you need to customize the input group container, use this function to provide customization attributes.

module Bootstrap.Form.InputGroup
    exposing
        ( view
        , config
        , predecessors
        , successors
        , text
        , password
        , datetimeLocal
        , date
        , month
        , time
        , week
        , number
        , email
        , url
        , search
        , tel
        , button
        , dropdown
        , splitDropdown
        , span
        , large
        , small
        , attrs
        , Config
        , Input
        , Addon
        )

{-| Easily extend form input controls by adding text and buttons.

    import Bootstrap.Form.InputGroup as InputGroup
    import Bootstrap.Form.Input as Input
    import Bootstrap.Button as Button


    InputGroup.config
        ( InputGroup.text [] )
        |> InputGroup.large
        |> InputGroup.predecessors
            [ InputGroup.span [] [ text "Stuff" ] ]
        |> InputGroup.successors
            [ InputGroup.button [] [ text "DoIt!"] ]
        |> InputGroup.view


# General

@docs view, config, predecessors, successors, text, button, dropdown, splitDropdown, span, Config, Input, Addon


# Additional input flavors

@docs password, datetimeLocal, date, month, time, week, number, email, url, search, tel


# Sizing

@docs large, small


# Further customization

@docs attrs

-}

import Html.Styled as Html
import Html.Styled.Attributes as Attributes
import Bootstrap.General.Internal exposing (ScreenSize(..), screenSizeOption)
import Bootstrap.Button as Button
import Bootstrap.Form.Input as Input
import Bootstrap.Dropdown as Dropdown


{-| Opaque representation of the view configuration for an input group.
-}
type Config msg
    = Config
        { input : Input msg
        , predecessors : List (Addon msg)
        , successors : List (Addon msg)
        , size : Maybe ScreenSize
        , attributes : List (Html.Attribute msg)
        }


{-| Opaque representation of an input element.
-}
type Input msg
    = Input (Html.Html msg)


{-| Opaque representation of an input-group add-on element.
-}
type Addon msg
    = Addon (Html.Html msg)


{-| Create initial view configuration for an input group.

  - `input` - The input for the input group

-}
config : Input msg -> Config msg
config input =
    Config
        { input = input
        , predecessors = []
        , successors = []
        , size = Nothing
        , attributes = []
        }


{-| Create the view representation for an Input group based on
a [┬┤configuration`](#Config)
-}
view : Config msg -> Html.Html msg
view (Config config) =
    let
        (Input input) =
            config.input
    in
        Html.div
            ([ Attributes.class "input-group" ]
                ++ ([ Maybe.andThen sizeAttribute config.size ]
                        |> List.filterMap identity
                   )
                ++ config.attributes
            )
            (List.map
                (\(Addon e) -> Html.div [ Attributes.class "input-group-prepend" ] [ e ])
                config.predecessors
                ++ [ input ]
                ++ List.map
                    (\(Addon e) -> Html.div [ Attributes.class "input-group-append" ] [ e ])
                    config.successors
            )


{-| Specify a list of add-ons to display before the input.

  - `addons` List of add-ons
  - `config` View configuration for Input group (so far)

-}
predecessors :
    List (Addon msg)
    -> Config msg
    -> Config msg
predecessors addons (Config config) =
    Config
        { config | predecessors = addons }


{-| Specify a list of add-ons to display after the input.

  - `addons` List of add-ons
  - `config` View configuration for Input group (so far)

-}
successors :
    List (Addon msg)
    -> Config msg
    -> Config msg
successors addons (Config config) =
    Config
        { config | successors = addons }


{-| Create a simple span add-on. Great for simple texts or font icons

  - `attributes` - List of attributes
  - `children` - List of child elements

-}
span : List (Html.Attribute msg) -> List (Html.Html msg) -> Addon msg
span attributes children =
    Html.span
        (Attributes.class "input-group-text" :: attributes)
        children
        |> Addon


{-| Create a button add-on.

  - `options` List of button options
  - `children` LIst of child elements

-}
button :
    List (Button.Option msg)
    -> List (Html.Html msg)
    -> Addon msg
button options children =
    Button.button options children
        |> Addon


{-| Create a dropdown add-on.

For details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.

-}
dropdown :
    Dropdown.State
    ->
        { toggleMsg : Dropdown.State -> msg
        , toggleButton : Dropdown.DropdownToggle msg
        , options : List (Dropdown.DropdownOption msg)
        , items : List (Dropdown.DropdownItem msg)
        }
    -> Addon msg
dropdown state config =
    Dropdown.dropdown state config
        |> Addon


{-| Create a split dropdown add-on.

For details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.

-}
splitDropdown :
    Dropdown.State
    ->
        { toggleMsg : Dropdown.State -> msg
        , toggleButton : Dropdown.SplitDropdownToggle msg
        , options : List (Dropdown.DropdownOption msg)
        , items : List (Dropdown.DropdownItem msg)
        }
    -> Addon msg
splitDropdown state config =
    Dropdown.splitDropdown state config
        |> Addon


{-| Create an input add-on with type="text"
-}
text : List (Input.Option msg) -> Input msg
text =
    input Input.text


{-| Create an input add-on with type="password"
-}
password : List (Input.Option msg) -> Input msg
password =
    input Input.password


{-| Create an input add-on with type="datetime-local"
-}
datetimeLocal : List (Input.Option msg) -> Input msg
datetimeLocal =
    input Input.datetimeLocal


{-| Create an input add-on with type="date"
-}
date : List (Input.Option msg) -> Input msg
date =
    input Input.date


{-| Create an input add-on with type="month"
-}
month : List (Input.Option msg) -> Input msg
month =
    input Input.month


{-| Create an input add-on with type="time"
-}
time : List (Input.Option msg) -> Input msg
time =
    input Input.time


{-| Create an input add-on with type="week"
-}
week : List (Input.Option msg) -> Input msg
week =
    input Input.week


{-| Create an input add-on with type="number"
-}
number : List (Input.Option msg) -> Input msg
number =
    input Input.number


{-| Create an input add-on with type="email"
-}
email : List (Input.Option msg) -> Input msg
email =
    input Input.email


{-| Create an input add-on with type="url"
-}
url : List (Input.Option msg) -> Input msg
url =
    input Input.url


{-| Create an input add-on with type="search"
-}
search : List (Input.Option msg) -> Input msg
search =
    input Input.search


{-| Create an input add-on with type="tel"
-}
tel : List (Input.Option msg) -> Input msg
tel =
    input Input.tel


input :
    (List (Input.Option msg) -> Html.Html msg)
    -> List (Input.Option msg)
    -> Input msg
input inputFn options =
    inputFn options |> Input


{-| Make all controls in an input group large
-}
large : Config msg -> Config msg
large (Config config) =
    Config
        { config | size = Just LG }


{-| Make all controls in an input group small
-}
small : Config msg -> Config msg
small (Config config) =
    Config
        { config | size = Just SM }


{-| When you need to customize the input group container, use this function to provide customization attributes.
-}
attrs : List (Html.Attribute msg) -> Config msg -> Config msg
attrs attributes (Config config) =
    Config
        { config | attributes = attributes }


sizeAttribute : ScreenSize -> Maybe (Html.Attribute msg)
sizeAttribute size =
    Maybe.map
        (\s -> Attributes.class <| "input-group-" ++ s)
        (screenSizeOption size)