mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-09-11 14:35:37 +03:00
#60 Add AutoFill Input Variants
This commit is contained in:
parent
f19ba8ff45
commit
a1fc9147d7
@ -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 =
|
||||
|
@ -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 =
|
||||
|
@ -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
|
||||
|
108
src/Widget.elm
108
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
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user