Main form controls merge (isosphere#10)

* Add all target directories to .gitignore

* Readme: link for form components and examples

* forms: several fixes

Fix paths for documentation, component::form instead of form.
Add missing validation fields in some component types.

* Update form validation example

Use a single range component, but add callbacks to automatically perform
validation for the component, and report feedback based on it.

* Minor clippy adjustments

---------

.gitignore

@@ -1,6 +1,6 @@
 # Generated by Cargo
 # will have compiled files and executables
-/target/
+**/target/
 
 # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
@@ -10,4 +10,4 @@ Cargo.lock
 **/*.rs.bk
 
 # Trunk build output
-**/dist/
+**/dist/

README.md

@@ -58,7 +58,7 @@ There is currently no indication of which version of Bootstrap is targeted, howe
 - [ ] Blockquote
 - [ ] Image/Figure
 - [ ] Table
-- [x] Forms
+- [x] Forms ([component::form::FormControl])
 
 ### Components
 
@@ -95,3 +95,17 @@ There is currently no indication of which version of Bootstrap is targeted, howe
 - [x] Stretched ([component::Link] with `stretched={true}>`)
 - [ ] Text truncation
 - [X] Vertical/Horizontal rule/line ([component::Line])
+
+## Examples
+
+Several examples are provided:
+
+- `examples/basics`: Components
+- `examples/forms`: Form fields
+
+To run an example:
+
+```bash
+cd examples/<directory>
+trunk --serve
+```

examples/forms/Cargo.toml

@@ -9,4 +9,5 @@ license = "MIT"
 wasm-bindgen = "0.2.*"
 web-sys = { version = "0.3.*", features = ["HtmlTextAreaElement", "HtmlSelectElement"] }
 yew = { version = "0.20", features = ["csr"] }
-yew-bootstrap = { path = "../../packages/yew-bootstrap" }
+yew-bootstrap = { path = "../../packages/yew-bootstrap" }
+gloo-console = "0.2"

packages/yew-bootstrap/src/component/form/form_control.rs

@@ -273,17 +273,17 @@ pub fn FormControl(props: &FormControlProps) -> Html {
             html! {
                 <div class={ classes }>
                     { label_before }
-                    <textarea 
-                        class={ input_classes } 
+                    <textarea
+                        class={ input_classes }
                         id={ props.id.clone() }
-                        name={ props.name.clone() } 
-                        cols={ cols_str } 
+                        name={ props.name.clone() }
+                        cols={ cols_str }
                         rows={ rows_str }
-                        placeholder={ placeholder } 
+                        placeholder={ placeholder }
                         value={ props.value.clone() }
-                        disabled={ props.disabled } 
+                        disabled={ props.disabled }
                         oninput={props.oninput.clone() }
-                        onchange={ props.onchange.clone() } 
+                        onchange={ props.onchange.clone() }
                         onclick={ props.onclick.clone() }
                     />
                     { label_after }
@@ -325,19 +325,20 @@ pub fn FormControl(props: &FormControlProps) -> Html {
 
             html! {
                 <div class={ classes }>
-                    <input 
-                        type={ props.ctype.to_str() } 
-                        class={ input_classes } 
+                    <input
+                        type={ props.ctype.to_str() }
+                        class={ input_classes }
                         id={ props.id.clone() }
-                        name={ props.name.clone() } 
-                        checked={ props.checked } 
+                        name={ props.name.clone() }
+                        checked={ props.checked }
                         disabled={ props.disabled }
                         value={ props.value.clone() }
-                        onchange={ props.onchange.clone() } 
+                        onchange={ props.onchange.clone() }
                         onclick={ props.onclick.clone() }
                     />
                     { label }
                     { help }
+                    { validation}
                 </div>
             }
         },
@@ -384,25 +385,26 @@ pub fn FormControl(props: &FormControlProps) -> Html {
             html! {
                 <div class={ classes }>
                     { label_before }
-                    <input 
-                        type={ props.ctype.to_str() } 
-                        class={ input_classes } 
+                    <input
+                        type={ props.ctype.to_str() }
+                        class={ input_classes }
                         id={ props.id.clone() }
-                        name={ props.name.clone() } 
+                        name={ props.name.clone() }
                         value={ props.value.clone() }
-                        pattern={ pattern } 
-                        accept={ accept_str } 
+                        pattern={ pattern }
+                        accept={ accept_str }
                         placeholder={ placeholder }
-                        min={ min_str } 
-                        max={ max_str } 
-                        step={ step_str } 
+                        min={ min_str }
+                        max={ max_str }
+                        step={ step_str }
                         disabled={ props.disabled }
-                        onchange={ props.onchange.clone() } 
+                        onchange={ props.onchange.clone() }
                         onclick={ props.onclick.clone() }
-                        oninput={ props.oninput.clone() } 
+                        oninput={ props.oninput.clone() }
                     />
                     { label_after }
                     { help }
+                    { validation }
                 </div>
             }
         }

packages/yew-bootstrap/src/component/form/form_type.rs

@@ -1,7 +1,7 @@
 use yew::prelude::*;
 
 
-/// # Type of form control, to be used with [crate::form::FormControl].
+/// # Type of form control, to be used with [crate::component::form::FormControl].
 #[derive(Clone, PartialEq)]
 
 pub enum FormControlType {
@@ -20,8 +20,8 @@ pub enum FormControlType {
     /// Range selection from min to max, with optional step
     Range { min: i32, max: i32, step: Option<u32> },
 
-    /// Select to select one of more options. It typically contains [crate::form::SelectOption]
-    /// or [crate::form::SelectOptgroup] children
+    /// Select to select one of more options. It typically contains [crate::component::form::SelectOption]
+    /// or [crate::component::form::SelectOptgroup] children
     Select,
     /// Checkbox
     Checkbox,

packages/yew-bootstrap/src/component/form/select_option.rs

@@ -36,8 +36,8 @@ pub struct SelectOptionProps {
 /// Use to separate options inside a select. See [SelectOptgroupProps]
 /// for a list of properties.
 ///
-/// It can typically be used inside a [crate::form::FormControl] with
-/// [crate::form::FormControlType::Select] type
+/// It can typically be used inside a [crate::component::form::FormControl] with
+/// [crate::component::form::FormControlType::Select] type
 #[function_component]
 pub fn SelectOptgroup(props: &SelectOptgroupProps) -> Html {
     html! {
@@ -51,8 +51,8 @@ pub fn SelectOptgroup(props: &SelectOptgroupProps) -> Html {
 ///
 /// Options inside a select. See [SelectOptionProps] for a list of properties.
 ///
-/// It can typically be used inside a [crate::form::FormControl] with
-/// [crate::form::FormControlType::Select] type, or grouped inside a [SelectOptgroup]
+/// It can typically be used inside a [crate::component::form::FormControl] with
+/// [crate::component::form::FormControlType::Select] type, or grouped inside a [SelectOptgroup]
 #[function_component]
 pub fn SelectOption(props: &SelectOptionProps) -> Html {
     html! {