Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

features/rewrite/grid #13

Merged
koma merged 14 commits from features/rewrite/grid into features/rewrite/main 2023-03-10 09:13:32 +00:00
Conversation 0 Commits 14 Files Changed 42 +463 -253
42 changed files with 463 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -431,3 +431,8 @@ FodyWeavers.xsd
**.Runner/**
**.DS_Store
/src/Connected.Components/Models/Alert/AlertOptions.cs
/src/Connected.Components/Components/DatePicker.razor.cs
/src/Connected.Components/Components/FormWizard.razor
/src/Connected.Components/Components/FormWizard.razor.cs
/src/Connected.Components.Showcase.Runner/Program.cs

5
src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj
View File

@ -22,4 +22,9 @@
<Watch Remove="..\..\src\**\bin\**" />
</ItemGroup>
<ItemGroup>
<Watch Remove="Program.cs" />
</ItemGroup>
</Project>

11
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
View File

@ -944,7 +944,7 @@
<!-- TO DO when modal is open add class to body .scroll-disabled-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
Launch backdrop modal
</button>
@ -960,7 +960,7 @@
ssss
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
<button type="button" class="btn btn-core">Understood</button>
</div>
</div>
@ -1168,6 +1168,13 @@
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
}
private string ModalShown { get; set; } = "";
private void ToggleModal()
{
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
}
private string NextSlide { get; set; } = "";

17
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -5,6 +5,23 @@
<h1 style="text-align:center;">Component Sandbox</h1>
<Grid>
@for (int i = 0; i < 5; i++)
{
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

223
src/Connected.Components/Components/DatePicker.razor
View File

@ -1,15 +1,8 @@
@using System.Globalization;
@if (loaded)
{
<div id="picker">
<!-- DatePicker input !can be edited manualy -->
@* <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div> *@
<div class="form-group">
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Select date</label>
@ -17,7 +10,7 @@
<div class="input-error-text">At least 6 characters required</div>
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button" @onclick="(() => Shown = !Shown)">
<span class="input-glyph button" @onclick="TogglePicker">
<Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
</span>
<span class="input-glyph error">
@ -32,146 +25,98 @@
{
<!-- DatePicker header -->
<div class="picker-container">
<div id="picker-header">
@* <div class="text-medium">
@SelectedDate.Year.ToString()
</div> *@
<div class="picker-header-label">Select date</div>
<div class="picker-header-title">
@SelectedDate.ToString("ddd, " + Format)
<div id="picker-header">
<div class="picker-header-label">Select date</div>
<div class="picker-header-title">
@SelectedDate.ToString("ddd, " + Format)
</div>
</div>
</div>
<div class="picker-divider"></div>
<!-- DatePicker body -->
<div id="picker-body">
@switch (Selecting)
{
case Selecting.Years:
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
{
int y = i;
@* <a href="#" @onclick="@(()=>SetYear(y))">
<div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
<div class="chip-leading-icon"></div>
<div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (SelectedDate.Year - i % 3 == 0)
{
<br />
} *@
<button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
}
</div>
break;
}
case Selecting.Months:
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
int m = i;
@* <a href="#" @onclick="@(()=>SetMonth(m))">
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
<div class="chip-leading-icon"></div>
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (i % 3 == 0)
{
<br />
} *@
<button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
}
</div>
break;
}
case (Selecting.Days):
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
</div>
<div class="picker-grid-col-7 gap-3">
@for (int i = 0; i < 7; i++)
{
@* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))">
@* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
@Date.Day.ToString()
</div> *@
@Date.Day.ToString()
<div class="picker-divider"></div>
<!-- DatePicker body -->
<div id="picker-body">
@switch (Selecting)
{
case Selecting.Years:
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
{
@* <br /> *@
int y = i;
<button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
}
</div>
break;
}
case Selecting.Months:
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
int m = i;
<button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
}
</div>
break;
}
case (Selecting.Days):
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</div>
<div class="picker-grid-col-7 gap-3">
@for (int i = 0; i < 7; i++)
{
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
CalendarStart = CalendarStart.AddDays(1);
}
</div>
break;
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
@Date.Day.ToString()
</button>
CalendarStart = CalendarStart.AddDays(1);
}
</div>
break;
}
}
</div>
<!-- Bottom bar -->
<div class="btn-content justify-flex-end my-0">
<button type="button" class="btn btn-sm btn-secondary">Cancel</button>
<button type="button" class="btn btn-sm btn-core">OK</button>
}
}
</div>
<!-- Bottom bar -->
<div class="btn-content justify-flex-end my-0">
<button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
<button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
</div>
<div>
</div>
<div>
</div>
</div>
}
</div>
}

104
src/Connected.Components/Components/DatePicker.razor.cs
View File

@ -1,5 +1,4 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class DatePicker
@ -18,6 +17,8 @@ public partial class DatePicker
[Parameter]
public DateTime SelectedDate { get; set; } = DateTime.Today;
private DateTime _InitialDate { get; set; }
[Parameter]
public DateTime? SelectedEndDate { get; set; } = null;
@ -32,6 +33,9 @@ public partial class DatePicker
[Parameter]
public bool UseDateRange { get; set; } = false;
[Parameter]
public bool ShowBottomBar { get; set; } = false;
[Parameter]
public string Format { get; set; } = "dd.MM.yyyy";
@ -78,48 +82,6 @@ public partial class DatePicker
StateHasChanged();
}
private string DayNamesRowClass
{
get
{
return new CssBuilder()
.AddClass("chip-leading-icon")
.AddClass("d-inline-block")
.AddClass("m-1")
.AddClass("bg-danger")
.AddClass("text-small")
.AddClass("text-white")
.Build();
}
}
private string ChipFirstRowStyle
{
get
{
return new StyleBuilder()
.AddStyle("width", "30px")
.AddStyle("height", "30px")
.AddStyle("text-align", "center")
.Build();
}
}
/*
@for (int i=0;i<7; i++)
{
<div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
@while (calendarStart.CompareTo(calendarEnd) < 0)
{
<a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
@if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
{
<br />
}
calendarStart = calendarStart.AddDays(1);
}
*/
public void SetStartStop()
{
CalendarStart = SelectedDate;
@ -150,7 +112,7 @@ public partial class DatePicker
}
}
public string DateChipStyle(DateTime date)
public string DateChipClass(DateTime date)
{
string result = "";
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
@ -168,38 +130,66 @@ public partial class DatePicker
public string MonthChipClass(int month)
{
if (month.CompareTo(SelectedDate.Month) == 0)
return "bg-info text-light";
return "active";
else
return "bg-core text-dark";
return "";
}
public string YearChipClass(int year)
{
if (year.CompareTo(SelectedDate.Year) == 0)
return "bg-info text-light";
return "active";
else
return "bg-core text-dark";
return "";
}
protected override async Task OnInitializedAsync()
{
SelectedDate = DateTime.Today;
_InitialDate=SelectedDate;
SetStartStop();
loaded = true;
await base.OnInitializedAsync();
}
private string NavBarClass
private async Task ClosePicker(bool resetDate=true)
{
get
if (resetDate)
SelectedDate=_InitialDate;
Shown = false;
await SelectedDateChanged.InvokeAsync(SelectedDate);
}
private void TogglePicker()
{
_InitialDate=SelectedDate;
Shown = !Shown;
}
private async Task NavBarClick(bool forward = true)
{
int multiplier = 1;
if (!forward) multiplier = -1;
switch (Selecting)
{
return new CssBuilder("text-justify")
.AddClass("text-md-justify")
//.AddClass("bg-warning")
.AddClass("text-small")
.AddClass("text-dark")
.Build();
case Selecting.Years:
{
SelectedDate=SelectedDate.AddYears(8 * multiplier);
break;
}
case Selecting.Months:
{
SelectedDate = SelectedDate.AddYears(1 * multiplier);
break;
}
case Selecting.Days:
{
SelectedDate = SelectedDate.AddMonths(1*multiplier);
break;
}
}
SetStartStop();
await InvokeAsync(StateHasChanged);
}
}

2
src/Connected.Components/Components/FormWizard.razor
View File

@ -6,7 +6,7 @@
</div>
<div class="btn-box text-right my-5 d-flex justify-space-between">
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished">Cancel</button>
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
<div>
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>

75
src/Connected.Components/Components/FormWizard.razor.cs
View File

@ -1,8 +1,7 @@
using Connected.Enums;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using System.ComponentModel.DataAnnotations;
using System.Text;
using System.Reflection.Metadata;
namespace Connected.Components;
public partial class FormWizard
@ -16,11 +15,26 @@ public partial class FormWizard
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// Steps of type FormWizardStep
/// </summary>
[Parameter]
public List<FormWizardStep> Steps { get; set; } = new();
[Parameter, EditorRequired]
public string Id { get; set; }
/// <summary>
/// EventCallback for 'Finish' button click
/// </summary>
[Parameter]
public EventCallback OnFinishedClick { get; set; }
/// <summary>
/// EventCallback for 'Cancel' button click
/// </summary>
[Parameter]
public EventCallback OnCancelClick { get; set; }
[Parameter]
public string Id { get; set; } = Guid.NewGuid().ToString();
private string NextBtnText = "Next";
private string PreviousBtnText = "Previous";
@ -50,7 +64,7 @@ public partial class FormWizard
{
get
{
if (ActiveIndex>0)
if (ActiveIndex > 0)
return ActiveIndex - 1;
return ActiveIndex;
}
@ -62,10 +76,11 @@ public partial class FormWizard
{
try
{
if (ActiveIndex < StepCount-1)
if (ActiveIndex < StepCount - 1)
return ActiveIndex + 1;
return ActiveIndex;
} catch
}
catch
{
return ActiveIndex;
}
@ -80,38 +95,17 @@ public partial class FormWizard
}
}
private void NextSlide()
private async Task NextSlide()
{
if (NextBtnText.ToLower().Equals("finish"))
{
FinishedState = FinishedState.Finished;
Steps[ActiveIndex].Completed = true;
WizardFinished = true;
await OnFinishedClick.InvokeAsync();
}
if (FinishedState.Equals(FinishedState.Unfinished))
{
/*if (ActiveIndex < StepCount)
{
Steps[ActiveIndex].Completed = true;
ResetValuesForChild(ActiveIndex);
if (ActiveIndex < StepCount)
ResetValuesForChild(NextIndex);
if (ActiveIndex > 0)
ResetValuesForChild(PreviousIndex);
ActiveIndex = NextIndex;
Steps[ActiveIndex].Active = true;
Steps[PreviousIndex].IsPrevious = true;
if (ActiveIndex != NextIndex)
Steps[NextIndex].IsNext = true;
else Steps[NextIndex].IsNext = false;
if (ActiveIndex == NextIndex)
NextBtnText = "Finish";
else
NextBtnText = "Next";
StateHasChanged();
}*/
Steps[ActiveIndex].Completed = true;
Steps[ActiveIndex].Active = false;
Steps[PreviousIndex].IsPrevious = false;
@ -132,7 +126,6 @@ public partial class FormWizard
{
if (ActiveIndex > 0)
{
//Steps[ActiveIndex].Completed = true;
Steps[ActiveIndex].Active = false;
Steps[PreviousIndex].IsPrevious = false;
Steps[ActiveIndex].IsNext = false;
@ -146,13 +139,18 @@ public partial class FormWizard
else
NextBtnText = "Next";
}
if (ActiveIndex==0)
if (ActiveIndex == 0)
{
ResetAllChildren();
Steps[ActiveIndex].Active = true;
}
}
private async Task CancelClick()
{
await OnCancelClick.InvokeAsync();
}
[Parameter]
public string Class { get; set; } = string.Empty;
@ -201,21 +199,22 @@ public partial class FormWizard
ResetAllChildren();
Steps[ActiveIndex].Active = true;
if (ActiveIndex!=0)
if (ActiveIndex != 0)
{
Steps[ActiveIndex].IsNext = true;
Steps[PreviousIndex].IsPrevious= true;
Steps[PreviousIndex].IsPrevious = true;
}
StateHasChanged();
}
protected override async Task OnParametersSetAsync()
/*protected override async Task OnParametersSetAsync()
{
if (Steps is not null)
Steps.Clear();
if (Steps is null) Steps = new();
Steps.Clear();
InitializeSteps();
await base.OnParametersSetAsync();
}
}*/
protected override async Task OnAfterRenderAsync(bool firstRender)
{

24
src/Connected.Components/Components/FormWizardStep.razor.cs
View File

@ -9,8 +9,11 @@ public partial class FormWizardStep
[CascadingParameter]
public FormWizard Parent { get; set; }
[Parameter, EditorRequired]
public string Name { get; set; }
/// <summary>
/// Unique name of the step (used for properly identifying steps)
/// </summary>
[Parameter]
public string? Id { get; set; } = Guid.NewGuid().ToString();
/// <summary>
/// Text shown inside the button
@ -46,7 +49,7 @@ public partial class FormWizardStep
get
{
return new CssBuilder("dot")
.AddClass("completed",Completed)
.AddClass("completed", Completed)
.AddClass("next", Active)
.Build();
}
@ -62,7 +65,7 @@ public partial class FormWizardStep
get
{
return new StyleBuilder()
.AddStyle("display","none", (!Active && !IsNext && !IsPrevious)) //Workarround for more than 2 steps where steps didnt hide after
.AddStyle("display", "none", (!Active && !IsNext && !IsPrevious)) //Workarround for more than 2 steps where steps didnt hide after
.AddStyle(Style)
.Build();
}
@ -88,10 +91,17 @@ public partial class FormWizardStep
#region Lifecycle
protected override async Task OnInitializedAsync()
private bool ItemExists()
{
Parent.Steps.Add(this);
if (Parent.Steps.Where(step => step.Id.Equals(this.Id)).Count() > 0) return true;
return false;
}
protected override async Task OnParametersSetAsync()
{
if (!ItemExists())
Parent.Steps.Add(this);
await base.OnInitializedAsync();
}

5
src/Connected.Components/Components/Grid.razor Normal file
View File

@ -0,0 +1,5 @@
<CascadingValue Value="this">
<div class="@GridClass">
@ChildContent
</div>
</CascadingValue>

41
src/Connected.Components/Components/Grid.razor.cs Normal file
View File

@ -0,0 +1,41 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Grid: ComponentBase
{
public List<GridRow> Rows { get; set; } = new();
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public bool Dense { get; set; } = true;
[Parameter]
public bool ContainsImage { get; set; } = true;
[Parameter]
public bool ShowSelect { get; set; } = true;
[Parameter]
public bool Collapsable { get; set; } = true;
[Parameter]
public string Class { get; set; } = string.Empty;
private string GridClass
{
get
{
return new CssBuilder("data-grid")
.AddClass("dense", Dense)
.AddClass("image", ContainsImage)
.AddClass("select", ShowSelect)
.AddClass("collapse", Collapsable)
.AddClass(Class)
.Build();
}
}
}

23
src/Connected.Components/Components/GridRow.razor Normal file
View File

@ -0,0 +1,23 @@
<CascadingValue Value="this">
<div class="@GridRowClass" 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))">
<div class="toggle-fill"></div>
</label>
</div>
<div class="data-grid-img">
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
</div>
<!-- Row content -->
<div class="data-grid-container">
@ChildContent
</div>
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
</div>
</div>
</CascadingValue>

58
src/Connected.Components/Components/GridRow.razor.cs Normal file
View File

@ -0,0 +1,58 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class GridRow : ComponentBase
{
[CascadingParameter]
public Grid Parent { get; set; }
public List<GridRowContent> Children { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public bool CollapsedItemShown { get; set; } = false;
private void ToggleNav()
{
CollapsedItemShown = !CollapsedItemShown;
}
[Parameter]
public string Class { get; set; } = string.Empty;
[Parameter]
public GridRowTemplate? Template { get; set; } = null;
private string GridRowClass
{
get
{
return new CssBuilder("data-grid-row-content")
.AddClass("show",CollapsedItemShown)
.AddClass(Class)
.Build();
}
}
[Parameter]
public EventCallback<ChangeEventArgs> SwitchButtonChangeEvent { get; set; }
private async Task SwitchButtonChange(ChangeEventArgs args)
{
await SwitchButtonChangeEvent.InvokeAsync(args);
}
private string SwitchButtonId = Guid.NewGuid().ToString();
protected override async Task OnInitializedAsync()
{
if (Parent.Rows is null) Parent.Rows = new();
Parent.Rows.Add(this);
await base.OnInitializedAsync();
}
}

3
src/Connected.Components/Components/GridRowContent.razor Normal file
View File

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

53
src/Connected.Components/Components/GridRowContent.razor.cs Normal file
View File

@ -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();
}
}

2
src/Connected.Components/Connected.Components.csproj
View File

@ -68,7 +68,7 @@
<Error Condition="!Exists('$(MSBuildProjectDirectory)/wwwroot/Fonts/')" Text="Missing Fonts folder in wwwroot" />
<ItemGroup>
<!--Include without duplication-->
<_OpenSansFont Include="wwwroot\Fonts\OpenSans-*.ttf" Exclude="@(Content)" />
<_OpenSansFont Include="wwwroot\Fonts\OpenSans-*.woff2" Exclude="@(Content)" />
<Content Include="@(_OpenSansFont)" />
</ItemGroup>
</Target>

2
src/Connected.Components/Enums/Color.cs
View File

@ -5,7 +5,7 @@ namespace Connected;
public enum Color
{
[Description("core")]
Core,
Core,
[Description("primary")]
Primary,

23
src/Connected.Components/Enums/ThemeProvider.cs Normal file
View File

@ -0,0 +1,23 @@
using System.ComponentModel;
namespace Connected;
public enum Theme
{
[Description("")]
Default,
[Description("dark")]
Dark,
[Description("light")]
Light,
[Description("pink")]
Pink
}
public static class ThemeProvider
{
public static Theme theme { get; set; } = Theme.Default;
}

5
src/Connected.Components/Utilities/GridRowTemplate.cs Normal file
View File

@ -0,0 +1,5 @@
namespace Connected.Utilities;
public class GridRowTemplate
{
public Position ImagePosition { get; set; } = Position.Left;
}

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Bold.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-BoldItalic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBold.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBoldItalic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Italic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Light.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Light.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-LightItalic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Medium.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-MediumItalic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Regular.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBold.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBoldItalic.ttf
View File

Binary file not shown.

BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBoldItalic.woff2 Normal file
View File

Binary file not shown.

21
src/connected.components/Models/Alert/AlertOptions.cs Normal file
View File

@ -0,0 +1,21 @@
namespace Connected.Models.Alert;
public class AlertOptions
{
Severity Severity { get; set; } = Severity.Info;
public bool ShowHeader { get; set; } = true;
public bool Cancelable { get; set; } = true;
public AlertOptions()
{
Severity = Severity.Info;
ShowHeader = true;
Cancelable = true;
}
public AlertOptions(Severity severity, bool showHeader, bool cancelable)
{
Severity = severity;
ShowHeader = showHeader;
Cancelable = cancelable;
}
}