Add urlField (#1885)

* Add UrlField * Re-order code * Add docs * Update IHP/View/Form.hs
digitallyinduced · Jan 3, 2024 · 2a109ec · 2a109ec
1 parent 33df9f4
commit 2a109ec
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/Guide/form.markdown b/Guide/form.markdown
@@ -59,6 +59,7 @@ IHP has the most commonly-used form controls built in. In general the form contr
 - [`{passwordField #password}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:passwordField)
 - [`{dateTimeField #createdAt}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:dateTimeField)
 - [`{numberField #quantity}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:numberField)
+- [`{urlField #url}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:urlField)
 - [`{hiddenField #projectId}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:hiddenField)
 - [`{checkboxField #termsAccepted}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:checkboxField)
 - [`{selectField #projectId allProjects}`](https://ihp.digitallyinduced.com/api-docs/IHP-View-Form.html#v:selectField)

diff --git a/IHP/View/CSSFramework.hs b/IHP/View/CSSFramework.hs
@@ -63,6 +63,7 @@ instance Default CSSFramework where
                     renderInner = case formField.fieldType of
                         TextInput -> styledTextFormField cssFramework "text" formField validationResult
                         NumberInput -> styledTextFormField cssFramework "number" formField validationResult
+                        UrlInput -> styledTextFormField cssFramework "url" formField validationResult
                         PasswordInput -> styledTextFormField cssFramework "password" formField validationResult
                         ColorInput -> styledTextFormField cssFramework "color" formField validationResult
                         EmailInput -> styledTextFormField cssFramework "email" formField validationResult

diff --git a/IHP/View/Form.hs b/IHP/View/Form.hs
@@ -504,6 +504,26 @@ numberField :: forall fieldName model value.
 numberField field = (textField field) { fieldType = NumberInput }
 {-# INLINE numberField #-}
 
+-- | Renders a URL input field
+--
+-- >>> {urlField #url}
+-- <div class="form-group" id="form-group-company_url">
+--     <label for="company_url">Url</label>
+--     <input type="url" name="url" id="company_url" class="form-control" />
+-- </div>
+--
+-- See 'textField' for examples of possible form control options.
+urlField :: forall fieldName model value.
+    ( ?formContext :: FormContext model
+    , HasField fieldName model value
+    , HasField "meta" model MetaBag
+    , KnownSymbol fieldName
+    , InputValue value
+    , KnownSymbol (GetModelName model)
+    ) => Proxy fieldName -> FormField
+urlField field = (textField field) { fieldType = UrlInput }
+{-# INLINE urlField #-}
+
 -- | Renders a textarea
 --
 -- >>> {textareaField #body}

diff --git a/IHP/View/Types.hs b/IHP/View/Types.hs
@@ -93,6 +93,7 @@ instance SetField "customFormAttributes" (FormContext record) [(Text, Text)] whe
 data InputType
     = TextInput
     | NumberInput
+    | UrlInput
     | CheckboxInput
     | ColorInput
     | EmailInput