#60 Add AutoFill Input Variants

src/Internal/Material/List.elm

@@ -5,9 +5,10 @@ module Internal.Material.List exposing
     , row
     , sideSheet
     , toggleRow
+    , cardAttributes
     )
 
-import Element
+import Element exposing (Attribute)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
@@ -78,6 +79,13 @@ toggleRow =
         }
     }
 
+cardAttributes : Palette -> List (Attribute mag)
+cardAttributes palette =
+    let
+        style = cardColumn palette
+    in
+    style.elementColumn ++ style.content.element
+
 
 cardColumn : Palette -> ColumnStyle msg
 cardColumn palette =

src/Internal/Material/TextInput.elm

@@ -1,4 +1,4 @@
-module Internal.Material.TextInput exposing (searchInput, textInput, textInputBase)
+module Internal.Material.TextInput exposing (textInputAttributes,searchInput, textInput, textInputBase)
 
 import Element
 import Element.Border as Border
@@ -8,6 +8,9 @@ import Internal.TextInput exposing (TextInputStyle)
 import Widget.Customize as Customize
 import Widget.Material.Color as MaterialColor
 
+textInputAttributes : Palette ->  List (Attribute msg)
+textInputAttributes palette =
+    (textInput palette).content.text
 
 textInput : Palette -> TextInputStyle msg
 textInput palette =

src/Internal/TextInput.elm

@@ -1,4 +1,5 @@
-module Internal.TextInput exposing (TextInput, TextInputStyle, textInput)
+module Internal.TextInput exposing (TextInput, TextInputStyle, usernameInput,textInput
+    , emailInput,searchInput,spellCheckedInput)
 
 import Element exposing (Attribute, Element)
 import Element.Input as Input exposing (Placeholder)
@@ -28,9 +29,34 @@ type alias TextInput msg =
     , onChange : String -> msg
     }
 
+spellCheckedInput : TextInputStyle msg -> TextInput msg -> Element msg
+spellCheckedInput =
+    internal Input.spellChecked
+
+searchInput : TextInputStyle msg -> TextInput msg -> Element msg
+searchInput =
+    internal Input.search
+
+emailInput : TextInputStyle msg -> TextInput msg -> Element msg
+emailInput =
+    internal Input.email
+
+usernameInput : TextInputStyle msg -> TextInput msg -> Element msg
+usernameInput =
+    internal Input.username
 
 textInput : TextInputStyle msg -> TextInput msg -> Element msg
-textInput style { chips, placeholder, label, text, onChange } =
+textInput =
+    internal Input.text
+
+internal : (List (Attribute msg)
+    -> { onChange : String -> msg
+       , text : String
+       , placeholder : Maybe (Placeholder msg)
+       , label : Label msg
+       }
+    -> Element msg) -> TextInputStyle msg -> TextInput msg -> Element msg
+internal fun style { chips, placeholder, label, text, onChange } =
     Element.row style.elementRow
         [ if chips |> List.isEmpty then
             Element.none
@@ -40,7 +66,7 @@ textInput style { chips, placeholder, label, text, onChange } =
                 |> List.map
                     (Button.button style.content.chips.content)
                 |> Element.row style.content.chips.elementRow
-        , Input.text style.content.text.elementTextInput
+        , fun style.content.text.elementTextInput
             { onChange = onChange
             , text = text
             , placeholder = placeholder

src/Widget.elm

@@ -23,6 +23,8 @@ module Widget exposing
     , PasswordInputStyle, PasswordInput, newPasswordInput, currentPasswordInput
     , TabStyle, Tab, tab
     , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
+    , usernameInput
+    , emailInput,searchInput,spellCheckedInput
     )
 
 {-| This module contains different stateless view functions. No wiring required.
@@ -134,8 +136,8 @@ You can create you own widgets by sticking widgets types together.
 
 ![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)
 
-@docs TextInputStyle, TextInput, textInput
-@docs PasswordInputStyle, PasswordInput, newPasswordInput, currentPasswordInput
+@docs TextInputStyle, TextInput, textInput, usernameInput, emailInput,searchInput,spellCheckedInput
+@docs PasswordInputStyle, PasswordInput, newPasswordInputV2, currentPasswordInputV2
 
 
 # Tab
@@ -151,6 +153,10 @@ You can create you own widgets by sticking widgets types together.
 
 @docs ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
 
+# DEPRECATED
+
+@docs newPasswordInput, currentPasswordInput
+
 -}
 
 import Color exposing (Color)
@@ -852,17 +858,80 @@ type alias PasswordInput msg =
 
 {-| An input field that supports auto filling the current password
 -}
-currentPasswordInput : PasswordInputStyle msg -> PasswordInput msg -> Element msg
-currentPasswordInput =
-    PasswordInput.currentPasswordInput
+currentPasswordInputV2 : PasswordInputStyle msg -> { text : String
+    , placeholder : Maybe (Placeholder msg)
+    , label : String
+    , onChange : String -> msg
+    , show : Bool
+    } -> Element msg
+currentPasswordInputV2 =
+    let
+        fun : PasswordInputStyle msg -> PasswordInput msg -> Element msg
+        fun =
+            PasswordInput.currentPasswordInput
+    in
+    fun
 
 
 {-| An input field that supports auto filling the new password
 -}
-newPasswordInput : PasswordInputStyle msg -> PasswordInput msg -> Element msg
-newPasswordInput =
-    PasswordInput.newPasswordInput
+newPasswordInputV2 : PasswordInputStyle msg -> { text : String
+    , placeholder : Maybe (Placeholder msg)
+    , label : String
+    , onChange : String -> msg
+    , show : Bool
+    } -> Element msg
+newPasswordInputV2 =
+    let
+        fun : PasswordInputStyle msg -> PasswordInput msg -> Element msg
+        fun =
+            PasswordInput.newPasswordInput
+    in
+    fun
 
+{-| An input field that supports auto filling the username
+-}
+usernameInput : Palette -> TextInputStyle msg
+usernameInput =
+    let
+        fun : TextInputStyle msg -> TextInput msg -> Element msg
+        fun =
+            TextInput.usernameInput
+    in
+    fun
+    
+{-| An input field that supports auto filling the email
+-}
+emailInput : Palette -> TextInputStyle msg
+emailInput =
+    let
+        fun : TextInputStyle msg -> TextInput msg -> Element msg
+        fun =
+            TextInput.usernameInput
+    in
+    fun
+
+{-| An input field that supports searching
+-}
+searchInput : Palette -> TextInputStyle msg
+searchInput =
+    let
+        fun : TextInputStyle msg -> TextInput msg -> Element msg
+        fun =
+            TextInput.usernameInput
+    in
+    fun
+
+{-| An input field that supports spell checking
+-}
+spellCheckedInput : Palette -> TextInputStyle msg
+spellCheckedInput =
+    let
+        fun : TextInputStyle msg -> TextInput msg -> Element msg
+        fun =
+            TextInput.usernameInput
+    in
+    fun
 
 
 {----------------------------------------------------------
@@ -2057,3 +2126,26 @@ circularProgressIndicator :
     -> Element msg
 circularProgressIndicator =
     ProgressIndicator.circularProgressIndicator
+
+
+
+{----------------------------------------------------------
+- DEPRECATED
+----------------------------------------------------------}
+
+
+
+
+{-| An input field that supports auto filling the current password
+-}
+currentPasswordInput : PasswordInputStyle msg -> PasswordInput msg -> Element msg
+currentPasswordInput =
+    PasswordInput.currentPasswordInput
+
+
+{-| An input field that supports auto filling the new password
+-}
+newPasswordInput : PasswordInputStyle msg -> PasswordInput msg -> Element msg
+newPasswordInput =
+    PasswordInput.newPasswordInput
+

src/Widget/Material.elm

@@ -17,6 +17,7 @@ module Widget.Material exposing
     , snackbar
     , tab, tabButton
     , buttonRow
+    ,cardAttributes, textInputAttributes
     )
 
 {-| This module implements a Material design theme for all widgets.
@@ -57,16 +58,12 @@ Different styles for buttons have different meanings.
 
 # Card
 
-In the material design specification the card is not really specified at all.
-Im practice the List seams more useful then a own card widget.
-Thus for now we only provide a card containing a list.
-
-@docs cardColumn
+@docs cardColumn, cardAttributes
 
 
 # Chip
 
-@docs chip, textInput, passwordInput
+@docs chip,textInputAttributes, textInput, passwordInput
 
 
 # Dialog
@@ -164,7 +161,7 @@ import Internal.Tab exposing (TabStyle)
 import Internal.TextInput exposing (TextInputStyle)
 import Widget.Icon exposing (Icon)
 import Widget.Snackbar exposing (SnackbarStyle)
-
+import Element exposing (Attribute)
 
 
 --------------------------------------------------------------------------------
@@ -552,6 +549,14 @@ cardColumn =
     List.cardColumn
 
 
+{-| A variant of cardColumn designed for a single item.
+
+Use this with a normal `Element.column`, `Element.row` or even a `Element.el`.
+-}
+cardAttributes :  Palette -> List (Attribute msg)
+cardAttributes  =
+    List.cardAttributes
+
 {-| A basic item containing some text, a button. Spans the full width.
 
 ![fullBleedItem](https://orasund.github.io/elm-ui-widgets/assets/material/fullBleedItem.png)
@@ -678,6 +683,11 @@ snackbar =
 -- T E X T   I N P U T
 -------------------------------------------------------------------------------}
 
+{-| A variant of textInput designed for `Input.text`.
+-}
+textInputAttributes : Palette -> List (Attribute msg)
+textInputAttributes =
+    TextInput.textInputAttributes
 
 {-| A text input style that is included only to support input chips.