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

Bootstrap.Form.Input

This module allows you to create Bootstrap styled HTML 5 inputs.

Input types

text : List (Option msg) -> Html.Html msg

Create an input with type="text"

Input.text
    [ Input.id "myinput"
    , Input.small
    , Input.defaultValue "Hello"
    , Input.onInput MyInputMsg
    ]
password : List (Option msg) -> Html.Html msg

Create an input with type="password"

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

Create an input with type="datetime-local"

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

Create an input with type="date"

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

Create an input with type="month"

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

Create an input with type="time"

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

Create an input with type="week"

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

Create an input with type="number"

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

Create an input with type="email"

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

Create an input with type="url"

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

Create an input with type="search"

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

Create an input with type="tel"

color : List (Option msg) -> Html.Html msg

Create an input with type="color"

Options

id : String -> Option msg

Options/shorthand for setting the id of an input

small : Option msg

Option to make an input shorter (in height)

large : Option msg

Option to make an input taller (in height)

value : String -> Option msg

Shorthand for setting the value attribute of an input

defaultValue : String -> Option msg

Shorthand for setting the defaultValue attribute of an input

disabled : Bool -> Option msg

Shorthand for setting the disabled attribute of an input

readonly : Bool -> Option msg

Shorthand for setting the readonly attribute of an input

onInput : (String -> msg) -> Option msg

Shorthand for assigning an onInput handler for an input

placeholder : String -> Option msg

Shorthand for setting the placeholder attribute of an input

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

Use this function to handle any Html.Attribute option you wish for your input

type Option msg = Size ScreenSize | Id String | Type InputType | Disabled Bool | Value String | DefaultValue String | OnInput (String -> msg) | Validation FormInternal.Validation | Placeholder String | Readonly Bool | Attrs (List (Html.Attribute msg))

Opaque type representing legal input configuration options

Validation

You can indicate success or invalid input using these functions.

success : Option msg

Option to add a success marker icon for your input.

danger : Option msg

Option to add a danger marker icon for your input.

module Bootstrap.Form.Input
    exposing
        ( text
        , password
        , datetimeLocal
        , date
        , month
        , time
        , week
        , number
        , email
        , url
        , search
        , tel
        , color
        , small
        , large
        , id
        , value
        , defaultValue
        , placeholder
        , onInput
        , disabled
        , readonly
        , attrs
        , success
        , danger
        , Option
        )

{-| This module allows you to create Bootstrap styled HTML 5 inputs.


# Input types

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


# Options

@docs id, small, large, value, defaultValue, disabled, readonly, onInput, placeholder, attrs, Option


# Validation

You can indicate success or invalid input using these functions.
@docs success, danger

-}

import Html.Styled as Html
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
import Bootstrap.General.Internal exposing (ScreenSize(..), screenSizeOption)
import Bootstrap.Form.FormInternal as FormInternal


{-| Opaque type representing a composable input
-}
type Input msg
    = Input { options : List (Option msg) }


{-| Opaque type representing legal input configuration options
-}
type Option msg
    = Size ScreenSize
    | Id String
    | Type InputType
    | Disabled Bool
    | Value String
    | DefaultValue String
    | OnInput (String -> msg)
    | Validation FormInternal.Validation
    | Placeholder String
    | Readonly Bool
    | Attrs (List (Html.Attribute msg))


type InputType
    = Text
    | Password
    | DatetimeLocal
    | Date
    | Month
    | Time
    | Week
    | Number
    | Email
    | Url
    | Search
    | Tel
    | Color


type alias Options msg =
    { tipe : InputType
    , id : Maybe String
    , size : Maybe ScreenSize
    , disabled : Bool
    , value : Maybe String
    , defaultValue : Maybe String
    , placeholder : Maybe String
    , onInput : Maybe (String -> msg)
    , validation : Maybe FormInternal.Validation
    , readonly : Bool
    , attributes : List (Html.Attribute msg)
    }


{-| Create an input with type="text"

    Input.text
        [ Input.id "myinput"
        , Input.small
        , Input.defaultValue "Hello"
        , Input.onInput MyInputMsg
        ]

-}
text : List (Option msg) -> Html.Html msg
text =
    input Text


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


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


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


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


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


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


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


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


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


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


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


{-| Create an input with type="color"
-}
color : List (Option msg) -> Html.Html msg
color =
    input Color


input : InputType -> List (Option msg) -> Html.Html msg
input tipe options =
    create tipe options |> view


create : InputType -> List (Option msg) -> Input msg
create tipe options =
    Input { options = (Type tipe) :: options }


view : Input msg -> Html.Html msg
view (Input { options }) =
    Html.input
        (toAttributes options)
        []


{-| Option to make an input shorter (in height)
-}
small : Option msg
small =
    Size SM


{-| Option to make an input taller (in height)
-}
large : Option msg
large =
    Size LG


{-| Options/shorthand for setting the id of an input
-}
id : String -> Option msg
id id =
    Id id


{-| Use this function to handle any Html.Attribute option you wish for your input
-}
attrs : List (Html.Attribute msg) -> Option msg
attrs attrs =
    Attrs attrs


{-| Shorthand for setting the value attribute of an input
-}
value : String -> Option msg
value value =
    Value value


{-| Shorthand for setting the defaultValue attribute of an input
-}
defaultValue : String -> Option msg
defaultValue value =
    DefaultValue value


{-| Shorthand for setting the placeholder attribute of an input
-}
placeholder : String -> Option msg
placeholder value =
    Placeholder value


{-| Shorthand for assigning an onInput handler for an input
-}
onInput : (String -> msg) -> Option msg
onInput toMsg =
    OnInput toMsg


{-| Shorthand for setting the disabled attribute of an input
-}
disabled : Bool -> Option msg
disabled disabled =
    Disabled disabled


{-| Shorthand for setting the readonly attribute of an input
-}
readonly : Bool -> Option msg
readonly readonly =
    Readonly readonly


{-| Option to add a success marker icon for your input.
-}
success : Option msg
success =
    Validation FormInternal.Success


{-| Option to add a danger marker icon for your input.
-}
danger : Option msg
danger =
    Validation FormInternal.Danger


toAttributes : List (Option msg) -> List (Html.Attribute msg)
toAttributes modifiers =
    let
        options =
            List.foldl applyModifier defaultOptions modifiers
    in
        [ Attributes.class "form-control"
        , Attributes.disabled options.disabled
        , Attributes.readonly options.readonly
        , typeAttribute options.tipe
        ]
            ++ ([ Maybe.map Attributes.id options.id
                , Maybe.andThen sizeAttribute options.size
                , Maybe.map Attributes.value options.value
                , Maybe.map Attributes.defaultValue options.defaultValue
                , Maybe.map Attributes.placeholder options.placeholder
                , Maybe.map Events.onInput options.onInput
                , Maybe.map validationAttribute options.validation
                ]
                    |> List.filterMap identity
               )
            ++ options.attributes


defaultOptions : Options msg
defaultOptions =
    { tipe = Text
    , id = Nothing
    , size = Nothing
    , disabled = False
    , value = Nothing
    , defaultValue = Nothing
    , placeholder = Nothing
    , onInput = Nothing
    , validation = Nothing
    , readonly = False
    , attributes = []
    }


applyModifier : Option msg -> Options msg -> Options msg
applyModifier modifier options =
    case modifier of
        Size size ->
            { options | size = Just size }

        Id id ->
            { options | id = Just id }

        Type tipe ->
            { options | tipe = tipe }

        Disabled val ->
            { options | disabled = val }

        Value value ->
            { options | value = Just value }

        DefaultValue value ->
            { options | defaultValue = Just value }

        Placeholder value ->
            { options | placeholder = Just value }

        OnInput onInput ->
            { options | onInput = Just onInput }

        Validation validation ->
            { options | validation = Just validation }

        Readonly val ->
            { options | readonly = val }

        Attrs attrs ->
            { options | attributes = options.attributes ++ attrs }


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


typeAttribute : InputType -> Html.Attribute msg
typeAttribute inputType =
    Attributes.type_ <|
        case inputType of
            Text ->
                "text"

            Password ->
                "password"

            DatetimeLocal ->
                "datetime-local"

            Date ->
                "date"

            Month ->
                "month"

            Time ->
                "time"

            Week ->
                "week"

            Number ->
                "number"

            Email ->
                "email"

            Url ->
                "url"

            Search ->
                "search"

            Tel ->
                "tel"

            Color ->
                "color"


validationAttribute : FormInternal.Validation -> Html.Attribute msg
validationAttribute validation =
    Attributes.class <| FormInternal.validationToString validation