bump version to 0.4.0

- Updating Documentation
- Refactoring Redundant components
- clean up demo

Demo/FormGeneratorDemo.csproj

@@ -1,11 +1,20 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net5.0</TargetFramework>
   </PropertyGroup>
 
   <PropertyGroup Condition=" '$(RunConfiguration)' == 'Watch' " />
 
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DefineConstants>TRACE</DefineConstants>
+  </PropertyGroup>
+
+  <PropertyGroup Condition="'$(Configuration)'=='Bootstrap'">
+    <DefineConstants>TRACE; BOOTSTRAP;</DefineConstants>
+  </PropertyGroup>
+
+
   <ItemGroup>
     <Compile Remove="Components\**" />
     <Content Remove="Components\**" />

Demo/Pages/FormDefinitionForm.razor

@@ -8,8 +8,10 @@
 <h1>Model Based Form Demo</h1>
 
 <div class="card">
+    <div class="card-header">
+        Change form options
+    </div>
     <div class="card-body">
-        <h5 class="card-title">Generated by dynamic ExpandoObject</h5>
 
         <EditForm Model="Options"
                   OnSubmit="ChangeLayoutOptions">
@@ -23,8 +25,11 @@
 <br />
 
 <div class="card">
+    <div class="card-header">
+        Generated by POCO
+    </div>
     <div class="card-body">
-        <h5 class="card-title">Generated by POCO</h5>
+
         <EditForm Model="Model"
                   OnValidSubmit="HandleValidSubmit"
                   OnInvalidSubmit="HandleInValidSubmit">
@@ -35,15 +40,23 @@
     </div>
 </div>
 
+<br />
+
 @code{
 
     /// <summary>
     /// Model that is used for the form
     /// </summary>
-    private OrderViewModel Model = new OrderViewModel();
+    private object Model = new FeedingSession();
     private VxFormLayoutOptionsAnnotated Options = new VxFormLayoutOptionsAnnotated();
     private VxFormLayoutOptions OptionsForForm = new VxFormLayoutOptions();
 
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        ChangeLayoutOptions(new EditContext(Options));
+    }
 
     /// <summary>
     /// Will handle the submit action of the form
@@ -62,7 +75,21 @@
 
     private void ChangeLayoutOptions(EditContext context)
     {
-        OptionsForForm = ((VxFormLayoutOptionsAnnotated)context.Model).ToFormLayoutOptions();
+        var options = ((VxFormLayoutOptionsAnnotated)context.Model);
+        OptionsForForm = options.ToFormLayoutOptions();
+
+        switch (options.FormRenderKind)
+        {
+            case TypeOfForm.SIMPLE:
+                Model = new FeedingSession();
+                break;
+            case TypeOfForm.ADVANCED:
+                Model = new AddressViewModel();
+                break;
+            case TypeOfForm.COMPLEX:
+                Model = new OrderViewModel();
+                break;
+        }
 
     }
 

Demo/Pages/Index.razor

@@ -11,8 +11,8 @@
         <div class="card">
             <div class="card-body">
                 <h5 class="card-title">Model based form</h5>
-                <p class="card-text">Render a form with validation based on a POCO</p>
-                <a href="model-form" class="btn btn-primary">Go to demo</a>
+                <p class="card-text">Render a form with layout information</p>
+                <a href="definition-form" class="btn btn-primary">Go to demo</a>
             </div>
         </div>
     </div>
@@ -25,14 +25,5 @@
             </div>
         </div>
     </div>
-    <div class="col-sm-4">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Form Definition based form</h5>
-                <p class="card-text">Render a form with layout information</p>
-                <a href="definition-form" class="btn btn-primary">Go to demo</a>
-            </div>
-        </div>
-    </div>
 </div>
 

Demo/Shared/NavMenu.razor

@@ -13,7 +13,7 @@
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="model-form" Match="NavLinkMatch.All">
+            <NavLink class="nav-link" href="definition-form" Match="NavLinkMatch.All">
                 <span class="oi oi-task" aria-hidden="true"></span> Model based form
             </NavLink>
         </li>

Demo/Startup.cs

@@ -5,7 +5,14 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
-using VxFormGenerator.Settings.Bootstrap;
+
+#if BOOTSTRAP
+ using VxFormGenerator.Settings.Bootstrap;
+#else
+ using VxFormGenerator.Settings.Plain;
+#endif
+
+
 
 namespace FormGeneratorDemo
 {

Demo/wwwroot/css/site.css

@@ -117,9 +117,9 @@ app {
 
 /*Added bootstrap override, so the hardcoded field statuses will work with bootstrap validation message
     otherwise we needed to patch all the form elements*/
-.form-control.invalid ~ .invalid-feedback, 
-.form-control.invalid ~ .invalid-tooltip, 
-.was-validated .form-control:invalid ~ .invalid-feedback, 
+.form-control.invalid ~ .invalid-feedback,
+.form-control.invalid ~ .invalid-tooltip,
+.was-validated .form-control:invalid ~ .invalid-feedback,
 .was-validated .form-control:invalid ~ .invalid-tooltip {
     display: block;
 }
@@ -197,3 +197,17 @@ app {
 .line-height-checkbox {
     line-height: 1.5em;
 }
+
+
+fieldset:not(:last-child) {
+    margin-bottom: 16px;
+}
+
+.form-control-plain {
+    width: 100%;
+    display: block;
+}
+
+.form-group-plain {
+
+}

README.md

@@ -195,6 +195,128 @@ You can render a form that is based on a dynamic `ExpandoObject`. The developer
 
 
 
+### Layout 
+
+The form generator supports layout structuring based on meta-data defined at model level.
+
+````C#
+        // Add label to row 2
+    [VxFormRowLayout(Id = 2, Label = "Adress")]
+    public class AddressViewModel
+    {
+        [Display(Name = "Firstname")]
+        // Add element to row 1 with automatic width based on number of items in a row
+        [VxFormElementLayout(RowId = 1)]
+        public string SurName { get; set; }
+        // Add element to row 1 with automatic width based on number of items in a row and define a placeholder
+        [VxFormElementLayout(RowId = 1, Placeholder = "Your Lastname")]
+        [Display(Name = "Lastname")]
+        public string LastName { get; set; }
+
+        [Display(Name = "Street")]
+        // Add element to row 2 and set the width to 9 of 12 columns
+        [VxFormElementLayout(RowId = 2, ColSpan = 9)]
+        [MinLength(5)]
+        public string Street { get; set; }
+
+        [Display(Name = "Number")]
+        // Add element to row 2 and set the width to 3 of 12 columns
+        [VxFormElementLayout(RowId = 2, ColSpan = 3)]
+        public string Number { get; set; }
+
+        [Display(Name = "Country"),
+         // Show Placeholder
+         VxFormElementLayout(Placeholder = "The country you live")]
+        public string Country { get; set; }
+
+        [Display(Name = "State")]
+        [MinLength(5)]
+        public string State { get; set; }
+
+    }
+````
+![Another nice form!](https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/Advanced_sample_form.png)
+
+There is also support for nested models. 
+
+```C#
+  public class OrderViewModel
+    {
+         // Indicate that this property type should be rendered as a separate elements in the form and give it a label
+        [VxFormGroup(Label = "Delivery")]
+        // Use this to valdidate a complex object
+        [ValidateComplexType]
+        public AddressViewModel Address { get; set; } = new AddressViewModel();
+
+        // Indicate that this property type should be rendered as a separate elements in the form and give it a label
+        [VxFormGroup(Label = "Invoice")]
+        // Use this to valdidate a complex object
+        [ValidateComplexType]
+        public AddressViewModel BillingAddress { get; set; } = new AddressViewModel();
+
+        [Display(Name = "Send insured")]
+        public bool Valid { get; set; } = true;
+
+        [Display(Name = "What color box")]
+        public VxColor Color { get; set; }
+    }
+    }
+```
+![Another Another nice form!](https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/complex_sample_form.png)
+
+
+#### Layout options
+
+The form support multiple rendering options:
+
+Set options **Global**
+
+```
+  public void ConfigureServices(IServiceCollection services)
+        {
+            services.AddRazorPages();
+            services.AddServerSideBlazor();
+            services.AddVxFormGenerator(new VxFormLayoutOptions() { LabelOrientation = LabelOrientation.TOP });
+        }
+```
+
+Set options at **Component** level, these options override the global one.
+
+```html
+ <RenderFormElements FormLayoutOptions="@OptionsForForm"></RenderFormElements>
+
+@code{
+    private VxFormLayoutOptions OptionsForForm = new VxFormLayoutOptions();
+}
+```
+
+#### Possible options
+
+*Set the label position for the form*
+
+**Label position**:          Top | Left | None
+
+*Set the placeholder policy for the form*
+
+**Placeholder Policy**: Explicit | Implicit | None | ExplicitFallbackToLabels | ImplicitFallbackToLabels
+
+*Set the trigger for showing validation state*
+
+**Validation Policy**:     OnlyValid | OnlyInvalid | BothValidAndInvalid
+
+
+
+### Run demo
+
+Run the demo so you can see the options and effects interactively:
+
+1. `git clone https://github.com/Aaltuj/VxFormGenerator.git`
+2. `cd VxFormGenerator ` 
+3. `run.cmd` on Windows or `bash run.sh` on Linux/Mac
+4. navigate to `http://localhost:5000/definition-form`
+
+
+
 ### Apply your own styling
 
 > This is a work in progress
@@ -203,5 +325,5 @@ You can render a form that is based on a dynamic `ExpandoObject`. The developer
 
 ### Contact
 
-<img src="https://i.pinimg.com/564x/1a/9a/f1/1a9af177bdcd0bd93568e59bb7600cbe.jpg" alt="Discord" style="zoom:5%;" /> [Server](https://discord.gg/pyCtvFdTdV)
+<img src="https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/discord-logo.png" alt="Discord" /> [Server](https://discord.gg/pyCtvFdTdV)