diff --git a/examples/pokedex/src/Page/TailwindForm.elm b/examples/pokedex/src/Page/TailwindForm.elm index d0747bce..f6ea15c4 100644 --- a/examples/pokedex/src/Page/TailwindForm.elm +++ b/examples/pokedex/src/Page/TailwindForm.elm @@ -42,6 +42,7 @@ type alias User = , username : String , email : String , birthDay : Date + , rating : Int , notificationPreferences : NotificationPreferences } @@ -61,6 +62,7 @@ defaultUser = , username = "janedoe" , email = "janedoe@example.com" , birthDay = Date.fromCalendarDate 1969 Time.Jul 20 + , rating = 5 , notificationPreferences = { comments = False , candidates = False @@ -253,6 +255,14 @@ form user = DataSource.succeed [] ) ) + |> Form.with + (Form.requiredNumber + "rating" + (textInput "Rating") + |> Form.withMin 1 + |> Form.withMax 5 + |> Form.range + ) |> Form.wrap wrapSection |> Form.appendForm (|>) ((Form.succeed NotificationPreferences diff --git a/src/Form.elm b/src/Form.elm index c8e86c74..1e577bc3 100644 --- a/src/Form.elm +++ b/src/Form.elm @@ -377,6 +377,38 @@ number name toHtmlFn = } +requiredNumber : + String + -> + ({ toInput : List (Html.Attribute Never) + , toLabel : List (Html.Attribute Never) + , errors : List String + } + -> view + ) + -> Field Int view +requiredNumber name toHtmlFn = + Field + { name = name + , initialValue = Nothing + , type_ = "number" + , min = Nothing + , max = Nothing + , required = False + , serverValidation = \_ -> DataSource.succeed [] + , toHtml = + \fieldInfo info -> + toHtmlFn (toInputRecord name Nothing info fieldInfo) + , decode = + \rawString -> + rawString + |> Maybe.andThen String.toInt + -- TODO this needs to be a Result that can be decoded + |> Maybe.withDefault -1000 + , properties = [] + } + + date : String -> @@ -493,6 +525,21 @@ telephone (Field field) = Field { field | type_ = "tel" } +range : Field value view -> Field value view +range (Field field) = + Field { field | type_ = "range" } + + +search : Field value view -> Field value view +search (Field field) = + Field { field | type_ = "search" } + + +password : Field value view -> Field value view +password (Field field) = + Field { field | type_ = "password" } + + email : Field value view -> Field value view email (Field field) = Field { field | type_ = "email" }