Package to build a Form using Prima Assicurazioni's Design System.
In order to keep the configuration as simple as possible we decided to not allow CSS classes to be changed, also forcing consistency in our ecosystem.
Defines a Field component for a generic form. Opaque implementation.
Defines a configuration for a Field component. Opaque implementation.
Validation rules for a FormField.
NotEmpty "This field cannot be empty."
Expression (Regex.regex "^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$") "Insert a valid email."
Custom (\model -> always True) "This error message will never be shown."
textConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Maybe String -> msg) -> msg -> msg -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Input Text configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnInputUsername (Maybe String)
| OnFocusUsername
| OnBlurUsername
...
type alias Model =
{ username : Maybe String
...
}
usernameConfig : FormField Model Msg
usernameConfig =
textConfig
"username"
"Username:"
[ minlength 3, maxlength 12, disabled False ]
.username
OnInputUsername
OnFocusUsername
OnBlurUsername
alwaysShowErrors
Nothing
[ NotEmpty "Empty value is not acceptable."
, Custom ((<=) 3 << String.length << Maybe.withDefault "" << .username) "Value must be between 3 and 12 characters length."
]
passwordConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Maybe String -> msg) -> msg -> msg -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Input password configuration method. See textConfig
for configuration options.
textareaConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Maybe String -> msg) -> msg -> msg -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Textarea configuration method. See textConfig
for configuration options.
checkboxConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Basics.Bool) -> (Basics.Bool -> msg) -> msg -> msg -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Checkbox with single option configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnChangePrivacy Bool
| OnFocusPrivacy
| OnBlurPrivacy
...
type alias Model =
{ privacy : Bool
...
}
...
acceptPrivacyConfig : FormField Model Msg
acceptPrivacyConfig =
Form.checkboxConfig
"privacy"
"Do you accept our Privacy Policy?"
[]
.privacy
OnChangePrivacy
OnFocusPrivacy
OnBlurPrivacy
alwaysShowErrors
Nothing
[]
{ label : String
, slug : String
, isChecked : Basics.Bool
}
Describes an option for a Checkbox
[ CheckboxOption "Italy" "ita" True
, CheckboxOption "France" "fra" False
, CheckboxOption "Spain" "spa" True
]
checkboxWithOptionsConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> List ( String, Basics.Bool )) -> (String -> Basics.Bool -> msg) -> msg -> msg -> List CheckboxOption -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Checkbox with multiple option configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnChangeVisitedCountries String Bool
| OnFocusVisitedCountries
| OnBlurVisitedCountries
...
type alias Model =
{ visitedCountries : List (String, String, Bool)
...
}
...
visitedCountriesConfig : List ( String, String, Bool ) -> FormField Model Msg
visitedCountriesConfig options =
Form.checkboxWithOptionsConfig
"visited_countries"
"Visited countries"
[]
(List.map (\( label, slug, checked ) -> ( slug, checked )) << .visitedCountries)
OnChangeVisitedCountries
OnFocusVisitedCountries
OnBlurVisitedCountries
(List.map (\( label, slug, checked ) -> CheckboxOption label slug checked) options)
alwaysShowErrors
Nothing
[]
{ label : String
, slug : String
}
Describes an option for a Select
[ SelectOption "Italy" "ita"
, SelectOption "France" "fra"
]
selectConfig : String -> Maybe String -> Basics.Bool -> Basics.Bool -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Basics.Bool -> msg) -> (Maybe String -> msg) -> msg -> msg -> List SelectOption -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Select configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnChangeCity (Maybe String)
| OnFocusCity
| OnBlurCity
| ToggleCity
...
type alias Model =
{ city : Maybe String
, isOpenCitySelect : Bool
, isDisabledCity: Bool
...
}
...
cityConfig : Bool -> Bool -> FormField Model Msg
cityConfig isDisabledCity isOpenCitySelect =
Form.selectConfig
"city"
"City"
isDisabledCity
isOpenCitySelect
(Just "Select any option")
[]
.city
ToggleCity
OnChangeCity
OnFocusCity
OnBlurCity
(List.sortBy .label [ SelectOption "Milan" "MI" , SelectOption "Turin" "TO" , SelectOption "Rome" "RO" , SelectOption "Naples" "NA" , SelectOption "Genoa" "GE" ] )
alwaysShowErrors
Nothing
[ NotEmpty "Empty value is not acceptable." ]
{ label : String
, slug : String
}
Describes an option for a Radio
[ RadioOption "Italy" "ita" True
, RadioOption "France" "fra" False
, RadioOption "Spain" "spa" True
]
radioConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Maybe String -> msg) -> msg -> msg -> List RadioOption -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Input Radio configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnChangeGender (Maybe String)
| OnFocusGender
| OnBlurGender
...
type alias Model =
{ gender : Maybe String
...
}
genderConfig : FormField Model Msg
genderConfig =
Form.radioConfig
"gender"
"Gender"
[]
.gender
OnChangeGender
OnFocusGender
OnBlurGender
alwaysShowErrors
[ RadioOption "Male" "male" , RadioOption "Female" "female" ]
Nothing
[ Custom ((==) "female" << Maybe.withDefault "female" << .gender) "You must select `Female` to proceed." ]
{ label : String
, slug : String
}
Describes an option for an Autocomplete
[ AutocompleteOption "Italy" "ita"
, AutocompleteOption "France" "fra"
]
autocompleteConfig : String -> Maybe String -> Basics.Bool -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (model -> Maybe String) -> (Maybe String -> msg) -> (Maybe String -> msg) -> msg -> msg -> List AutocompleteOption -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Autocomplete configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnSelectCountry (Maybe String)
| OnFilterCountry (Maybe String)
| OnFocusCountry
| OnBlurCountry
...
type alias Model =
{ country : Maybe String
, countryFilter : Maybe String
, isOpenCountryAutocomplete: Bool
...
}
...
countryConfig : Bool -> Maybe String -> FormField Model Msg
countryConfig isOpenCountryAutocomplete countryFilter =
let
lowerFilter =
(String.toLower << Maybe.withDefault "") countryFilter
in
Form.autocompleteConfig
"country"
"Country"
isOpenCountry
(Just "No results")
[]
.countryFilter
.country
OnFilterCountry
OnSelectCountry
OnFocusCountry
OnBlurCountry
alwaysShowErrors
(List.filter (String.contains lowerFilter << String.toLower << .label) <| [ AutocompleteOption "Italy" "ITA", AutocompleteOption "Brasil" "BRA", AutocompleteOption "France" "FRA", AutocompleteOption "England" "ENG", AutocompleteOption "USA" "USA", AutocompleteOption "Japan" "JAP" ])
Nothing
[ NotEmpty "Empty value is not acceptable." ]
datepickerConfig : String -> Maybe String -> List (Html.Attribute msg) -> (model -> Maybe String) -> (Maybe String -> msg) -> (Prima.DatePicker.Msg -> msg) -> msg -> msg -> Prima.DatePicker.Model -> Basics.Bool -> Basics.Bool -> Maybe Basics.Int -> List (Validation model) -> FormField model msg
Datepicker configuration method.
import DatePicker
import Date.Format
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
type Msg
= OnInputBirthDate (Maybe String)
| OnFocusBirthDate
| OnBlurBirthDate
| OnChangeBirthDateDatePicker DatePicker.Msg
...
type alias Model =
{ dateOfBirth : Maybe String
, dateOfBirthDP: DatePicker.Model
...
}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
OnChangeBirthDateDatePicker dpMsg ->
let
updatedInstance =
DatePicker.update dpMsg model.dateOfBirthDP
in
{ model | dateOfBirthDP = updatedInstance, dateOfBirth = (Just << Date.Format.format "%d/%m/%Y" << DatePicker.selectedDate) updatedInstance } ! []
...
pureHtmlConfig : List (Html msg) -> FormField model msg
Static Html configuration method.
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...
staticHtmlConfig : List (Html Msg) -> FormField Model Msg
staticHtmlConfig content =
Form.pureHtmlConfig content
render : model -> FormField model msg -> List (Html msg)
Method for rendering a FormField
renderWithGroup : List (Html msg) -> model -> FormField model msg -> List (Html msg)
Method for rendering a FormField
adding a div which wraps the form field.
wrapper : List (Html msg) -> Html msg
Wrapper for a FormField rendered with render
function.
isValid : model -> FormField model msg -> Basics.Bool
Validate a FormField
.
isValid model usernameConfig
isPristine : model -> FormField model msg -> Basics.Bool
Checks the pristine
status of a FormField
.
isPristine model usernameConfig