src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj

@@ -22,10 +22,4 @@
 		<Watch Remove="..\..\src\**\bin\**" />
 	</ItemGroup>
 
-
-	<ItemGroup>
-	  <Watch Remove="Pages\ComponentsExamples\DataGridExample.razor" />
-	  <Watch Remove="Pages\ComponentsExamples\DatePickerExample.razor" />
-	</ItemGroup>
-
 </Project>

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DataGridExample.razor

@@ -1,88 +0,0 @@
-@page "/datagrid"
-@using Connected.Classes.Grid;
-@using Connected.Components;
-@using Connected.Enums;
-@using Connected.Models.Modal;
-@using Connected.Models;
-@using Connected.Services;
-@using Connected.Utilities;
-@using System.Collections.ObjectModel;
-
-@if (loaded)
-{
-    <h1 style="text-align:center;">DATA GRID EXAMPLE</h1>
-
-    <Grid Items="Data" Context="number" Options="dataGridOptions">
-        <RowTemplate>
-            @number
-        </RowTemplate>
-        <RowDetailTemplate>
-            @(number * 2)
-        </RowDetailTemplate>
-    </Grid>
-
-    <Grid Items="DData" Context="dummy" Options="dataGridOptions">
-        <RowTemplate>
-            @dummy.Value
-        </RowTemplate>
-        <RowDetailTemplate>
-            @dummy.Value
-        </RowDetailTemplate>
-    </Grid>
-
-}
-else
-{
-    <h4>Data filling...</h4>
-}
-
-@code {
-    bool loaded = false;
-
-    DataGridOptions dataGridOptions = new DataGridOptions()
-        {
-            ImagePosition = SmScrn_GridImgPos.Top,
-            ShowImage = true,
-            Dense = true,
-            ShowSelect = true,
-            ItemsPerPage = 10,
-            SelectedPage = 1,
-            DataSet_ImgColName = "Img",
-        };
-
-    ObservableCollection<int> Data = new();
-    ObservableCollection<DummyData> DData = new();
-
-
-    protected override void OnInitialized()
-    {
-        if (Data is null) Data = new();
-        if (DData is null) DData = new();
-        Random r = new Random();
-        for (int i = 0; i < 20; i++)
-        {
-            //int l = r.Next(50);
-            Data.Add(r.Next(50));
-            DData.Add(new DummyData() { Value = r.Next(50) });
-        }
-        loaded = true;
-        StateHasChanged();
-    }
-
-    public string RandomString(int length)
-    {
-        
-        Random random = new Random(DateTime.Now.Millisecond);
-        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-        string result = new string(Enumerable.Repeat(chars, length)
-            .Select(s => s[random.Next(s.Length)]).ToArray());
-        return result;
-    }
-
-    public class DummyData
-    {
-        public object Value { get; set; } = null;
-        public string Img { get; set; } = "https://source.unsplash.com/random?face";
-    }
-}
-

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DatePickerExample.razor

@@ -1,23 +0,0 @@
-@page "/datepicker"
-@using Connected.Components;
-@using Connected.Enums;
-@using Connected.Models.Modal;
-@using Connected.Models;
-@using Connected.Services;
-@using Connected.Utilities;
-
-@inject ModalDialogService modalDialog;
-
-
-<h1 style="text-align:center;">DATE PICKER EXAMPLE</h1>
-
-
-<DatePicker @bind-SelectedDate=@date></DatePicker>
-
-
-<h4>Selected date: @date.ToString("dd. MM. yyyy")</h4>
-
-
-@code {
-    DateTime date = DateTime.Now;
-}

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor

@@ -6,16 +6,19 @@
 @using Connected.Services;
 @using Connected.Utilities;
 
-@inject ModalDialogService modalDialog
+@inject ModalDialogService modalDialog;
+
 
 <h1 style="text-align:center;">MODAL DIALOG EXAMPLE</h1>
 
+
 <Button OnClick="OpenModalDialog">Open dialog</Button>
 
 <p>Modal result: @test_modal_result</p>
 
 <h4>Value: @value.ToString()</h4>
 
+
 @code {
     int value = 0;
 

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -1,31 +1,71 @@
 @page "/"
-@using Connected.Enums;
 @using Connected.Models;
 @using Connected.Components;
-@using Connected.Services;
-@using Connected.Utilities;
 
-@if (loaded)
-{
-    <h1 style="text-align:center;">Component Example page</h1>
 
-    <ul>
+<h1 style="text-align:center;">Component Sandbox</h1>
-        <li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self"  /></li>
+
-        <li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
+<Grid>
-        <li><Link Class="m-1" Url="datepicker" Text="Date picker" Target="Target.Self" /></li>
+    @for (int i = 0; i < 5; i++)
-       <li><Link Class="m-1" Url="datagrid" Text="Data Grid" Target="Target.Self" /></li>
-    </ul>
-} else
     {
-    <h3>Loading...</h3>
+        int num = i;
+        <GridRow>
+            <GridRowContent>
+                Fixed content @num.ToString()
+            </GridRowContent>
+            <GridRowContent Collapsable=true>
+                Collapsable content @num.ToString()
+            </GridRowContent>
+        </GridRow>
     }
+</Grid>
+
+<p>Izbran datum je: @date</p>
+
+<FormWizard Id="Wizard1">
+    <FormWizardStep Name="Step1">
+        Step1
+    </FormWizardStep>
+    <FormWizardStep Name="Step2">
+        Step2
+    </FormWizardStep>
+    <FormWizardStep Name="Step3">
+        Step3
+    </FormWizardStep>
+    <FormWizardStep Name="Step4">
+        Step4
+    </FormWizardStep>
+</FormWizard>
+<DatePicker @bind-SelectedDate=@date>
+ 
+</DatePicker>
+
+<NumberStepper @bind-Value=number ></NumberStepper>
+
+<Button OnClick="ChangeErrorText" >Error text</Button>
+
+<NumberInput @bind-Value=@dnumber Step=0.03 DecimalPlaces=2 HelperText="Helper text" ErrorText="@ErrorText" Clearable=true></NumberInput>
+
+<p>Selected date is @date.ToString()</p>
+
+<p>Number is: @number.ToString()</p>
+<p>DNumber is: @dnumber.ToString()</p>
 
 @code {
-    bool loaded = false;
+    DateTime date = DateTime.Today;
 
-    protected override void OnInitialized()
+    double dnumber = 0;
+
+    int number = 0;
+
+    string ErrorText = "";
+
+    public void ChangeErrorText()
     {
-        loaded=true;
+        if (string.IsNullOrEmpty(ErrorText))
-        StateHasChanged();
+            ErrorText = "Test string: Error has ocurred!";
+        else
+            ErrorText = string.Empty;
+        //StateHasChanged();
     }
 }

src/Connected.Components/Classes/Grid/DataGridOptions.cs

@@ -1,67 +0,0 @@
-namespace Connected.Classes.Grid;
-public class DataGridOptions
-{
-	/// <summary>
-	/// Determine if images will be shown inside the row. If row has no image then it is ignored
-	/// </summary>
-	public bool ShowImage = true;
-	public SmScrn_GridImgPos ImagePosition = SmScrn_GridImgPos.Left;
-	public bool Collapsible = true;
-	public bool Dense = true;
-	public bool ShowSelect = true;
-	public int ItemsPerPage = 10;
-	public int SelectedPage = 1;
-	public string DataSet_ImgColName = string.Empty;
-
-	public int Offset
-	{
-		get
-		{
-			return (SelectedPage - 1) * ItemsPerPage;
-		}
-	}
-
-	public DataGridOptions()
-	{
-		ShowImage = false;
-		ImagePosition = SmScrn_GridImgPos.Left;
-		Collapsible = true;
-		Dense = true;
-		ShowSelect = true;
-		ItemsPerPage = 10;
-		SelectedPage = 1;
-		DataSet_ImgColName = string.Empty;
-	}
-	public DataGridOptions(DataGridOptions options)
-	{
-		ShowImage = options.ShowImage;
-		ImagePosition = options.ImagePosition;
-		Collapsible = options.Collapsible;
-		Dense = options.Dense;
-		ShowSelect = options.ShowSelect;
-		ItemsPerPage = options.ItemsPerPage;
-		SelectedPage = options.SelectedPage;
-		DataSet_ImgColName = options.DataSet_ImgColName;
-	}
-
-	public DataGridOptions(
-		bool ShowImage = false,
-		SmScrn_GridImgPos ImagePosition = SmScrn_GridImgPos.Left,
-		bool Collapsible = true,
-		bool Dense = true,
-		bool ShowSelect = true,
-		int ItemsPerPage = 10,
-		int SelectedPage = 1,
-		string DataSet_ImgColName = "")
-	{
-		this.ShowImage = ShowImage;
-		this.ImagePosition = ImagePosition;
-		this.Collapsible = Collapsible;
-		this.Dense = Dense;
-		this.ShowSelect = ShowSelect;
-		this.ItemsPerPage = ItemsPerPage;
-		this.SelectedPage = SelectedPage;
-		this.DataSet_ImgColName = DataSet_ImgColName;
-
-	}
-}

src/Connected.Components/Components/Grid.razor

@@ -1,18 +1,5 @@
-@attribute [CascadingTypeParameter(nameof(DataType))]
+<CascadingValue Value="this">
-@typeparam DataType
+    <div class="@GridClass">
-
+        @ChildContent
-<CascadingValue Value="this">
-    <div class="@GridClassList.ToString()">
-        @foreach (var Item in ItemsToShow)
-        {
-            <GridRow DataType="DataType" Item="@Item" ImgSrc="" >
-                <FixedContent>
-                    @RowTemplate(Item) 
-                </FixedContent>
-                <CollapsibleContent>
-                    @RowDetailTemplate(Item)
-                </CollapsibleContent>
-            </GridRow>
-        }
     </div>
 </CascadingValue>

src/Connected.Components/Components/Grid.razor.cs

@@ -1,78 +1,40 @@
-using Connected.Classes.Grid;
+using Connected.Utilities;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
-using Microsoft.Extensions.Options;
-using System.Collections.ObjectModel;
 
 namespace Connected.Components;
-public partial class Grid<DataType> : ComponentBase
+public partial class Grid: ComponentBase
 {
+	public List<GridRow> Rows { get; set; } = new();
 	
 	[Parameter]
-	public ObservableCollection<DataType>? Items { get; set; }
+	public RenderFragment? ChildContent { get; set; }
-
-	private List<DataType>? ItemsToShow { get; set; }
 
 	[Parameter]
-	public RenderFragment<DataType>? RowTemplate { get; set; }
+	public bool Dense { get; set; } = true;
 
 	[Parameter]
-	public RenderFragment<DataType>? RowDetailTemplate { get; set; }
+	public bool ContainsImage { get; set; } = true;
-	[Parameter]
-	public RenderFragment? Img { get; set; }
 
 	[Parameter]
-	public DataGridOptions? Options { get; set; } = null;
+	public bool ShowSelect { get; set; } = true;
 
 	[Parameter]
-	public List<string>? SearchFilters { get; set; } = null;
+	public bool Collapsable { get; set; } = true;
-
-	public int Count
-	{
-		get
-		{
-			return Items?.Count ?? 0;
-		}
-	}
 
 	[Parameter]
-	public string GridClass { get; set; } = string.Empty;
+	public string Class { get; set; } = string.Empty;
-	private CssBuilder GridClassList
+
+	private string GridClass
 	{
 		get
 		{
 			return new CssBuilder("data-grid")
-				.AddClass("dense", Options?.Dense ?? true)
+				.AddClass("dense", Dense)
-				.AddClass("image", Options?.ShowImage ?? true)
+				.AddClass("image", ContainsImage)
-				.AddClass("select", Options?.ShowSelect ?? true)
+				.AddClass("select", ShowSelect)
-				.AddClass("collapse", Options?.Collapsible ?? true)
+				.AddClass("collapse", Collapsable)
-				.AddClass(GridClass);
+				.AddClass(Class)
+				.Build();
 		}
 	}
-
-	public void GetItems()
-	{
-		/*
-		 Web API call for item fetch include SearchFilters
-		 */
-		SetItemsToShow();
-	}
-
-	private void OnPageChange(int page)
-	{
-		Options.SelectedPage=page;
-		
-		//SetItemsToShow();
-	}
-
-	private void SetItemsToShow()
-	{
-		ItemsToShow=  Items?.Skip(Options.Offset).Take(Options.ItemsPerPage).ToList() ?? new();
-	}
-
-	protected override async Task OnInitializedAsync()
-	{
-		SetItemsToShow();
-		await base.OnInitializedAsync();
-	}
 }

src/Connected.Components/Components/GridRow.razor

@@ -1,7 +1,5 @@
-@typeparam DataType
+<CascadingValue Value="this">
-
+    <div class="@GridRowClass" id="@Guid.NewGuid()">
-<CascadingValue Value="this">
-    <div class="@GridRowClass.ToString()" id="@Guid.NewGuid()">
         <div class="data-grid-select" >
             <label class="toggle-group m-0" for="@SwitchButtonId">
                 <input class="toggle-input" id="@SwitchButtonId" name="toggle" type="checkbox" @onchange="(args=>SwitchButtonChange(args))">
@@ -9,24 +7,13 @@
             </label>
         </div>
 
-        <div class="data-grid-container @ImageClass.ToString()">
+        <div class="data-grid-img">
-            @if (ShowImageBlock())
+            <img class="img-fluid" src="https://source.unsplash.com/random?face" />
-            {
-                <div class="data-grid-img"><img class="img-fluid" src="@ImgSrc" /></div>
-            }
-
-            <div class="data-grid-wrapper">
-
-                <!-- Nova verzija-->
-                <div class="row">
-                    <!-- Fiksna vsebina --> 
-                    @FixedContent(Item)
-                </div>
-                <div class="row collapsed @CollapsedClass.ToString()">
-                    @CollapsibleContent(Item)
         </div>
 
-            </div>
+        <!-- Row content -->
+        <div class="data-grid-container">
+            @ChildContent
         </div>
 
         <div class="data-grid-collapse-cta" @onclick="ToggleNav">

src/Connected.Components/Components/GridRow.razor.cs

@@ -2,23 +2,16 @@
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
-public partial class GridRow<DataType> : ComponentBase
+public partial class GridRow : ComponentBase
 {
 
 	[CascadingParameter]
-	public Grid<DataType> Parent { get; set; }
+	public Grid Parent { get; set; }
+
+	public List<GridRowContent> Children { get; set; }
 
 	[Parameter]
-	public RenderFragment<DataType>? FixedContent { get; set; }
+	public RenderFragment? ChildContent { get; set; }
-
-	[Parameter]
-	public RenderFragment<DataType>? CollapsibleContent { get; set; }
-
-	[Parameter]
-	public string? ImgSrc { get; set; } = null;
-
-	[Parameter]
-	public DataType? Item { get; set; }
 
 	[Parameter]
 	public bool CollapsedItemShown { get; set; } = false;
@@ -29,43 +22,19 @@ public partial class GridRow<DataType> : ComponentBase
 	}
 
 	[Parameter]
-	public string RowClass { get; set; } = string.Empty;
+	public string Class { get; set; } = string.Empty;
-	private CssBuilder GridRowClass
+
+	[Parameter]
+	public GridRowTemplate? Template { get; set; } = null;
+
+	private string GridRowClass
 	{
 		get
 		{
 			return new CssBuilder("data-grid-row-content")
 				.AddClass("show",CollapsedItemShown)
-				.AddClass(RowClass);
+				.AddClass(Class)
-		}
+				.Build();
-	}
-
-	private CssBuilder CollapsedClass
-	{
-		get
-		{
-			return new CssBuilder()
-				.AddClass("show", CollapsedItemShown)
-				.AddClass(RowClass);
-		}
-	}
-
-	private bool ShowImageBlock()
-	{
-		if (string.IsNullOrEmpty(ImgSrc)) return false;
-		bool result = Parent.Options?.ShowImage ?? true;
-		return result;
-	}
-
-	private CssBuilder ImageClass
-	{
-		get
-		{
-			return new CssBuilder()
-				.AddClass("show-image-vertical", Parent.Options.ImagePosition==SmScrn_GridImgPos.Top)
-				.AddClass("show-image", Parent.Options.ImagePosition == SmScrn_GridImgPos.Left)
-
-				.AddClass(RowClass);
 		}
 	}
 
@@ -77,19 +46,13 @@ public partial class GridRow<DataType> : ComponentBase
 		await SwitchButtonChangeEvent.InvokeAsync(args);
 	}
 
-	private void SetImgSrc()
+	private string SwitchButtonId = Guid.NewGuid().ToString();
-	{
-		var colname = Parent.Options.DataSet_ImgColName;
-		var property = typeof(DataType).GetProperty(colname);
-		ImgSrc = property?.GetValue(Item)?.ToString() ?? "";
-	}
 
 	protected override async Task OnInitializedAsync()
 	{
-		SetImgSrc();
+		if (Parent.Rows is null) Parent.Rows = new();
+		Parent.Rows.Add(this);
 		await base.OnInitializedAsync();
 	}
 
-	private string SwitchButtonId = Guid.NewGuid().ToString();
-
 }

src/Connected.Components/Components/GridRowContent.razor

@@ -0,0 +1,3 @@
+<div class="@GeneratedRowContentClass">
+    @ChildContent
+</div>

src/Connected.Components/Components/GridRowContent.razor.cs

@@ -0,0 +1,53 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class GridRowContent : ComponentBase
+{
+	[CascadingParameter]
+	public GridRow? Parent { get; set; }
+
+	/// <summary>
+	/// Text shown inside the button
+	/// Options: any string variable
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	/// <summary>
+	/// Disabled or enabled.
+	/// Default: false
+	/// </summary>
+	[Parameter]
+	public bool Collapsable { get; set; } = false;
+
+	private string GeneratedRowContentClass
+	{
+		get
+		{
+			CssBuilder cssBuilder = new CssBuilder("row");
+
+			cssBuilder.AddClass("collapsed", Collapsable);
+
+			if (Parent is not null)
+			{
+				cssBuilder.AddClass("show", (Collapsable ? Parent.CollapsedItemShown : false));
+			}
+
+			return cssBuilder.Build();
+		}
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+
+		if (Parent is not null)
+		{
+			if (Parent.Children is null) Parent.Children = new();
+			Parent.Children.Add(this);
+		}
+		await base.OnInitializedAsync();
+	}
+}
+

src/Connected.Components/Enums/Position.cs

@@ -15,9 +15,3 @@ public enum Position
 	Start,
 	End
 }
-
-public enum SmScrn_GridImgPos
-{
-	Top,
-	Left,
-}