features/rewrite/grid #13
5
.gitignore
vendored
5
.gitignore
vendored
@ -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
|
||||
|
@ -22,4 +22,9 @@
|
||||
<Watch Remove="..\..\src\**\bin\**" />
|
||||
</ItemGroup>
|
||||
|
||||
|
||||
<ItemGroup>
|
||||
<Watch Remove="Program.cs" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
@ -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; } = "";
|
||||
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
}
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
{
|
||||
|
@ -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
5
src/Connected.Components/Components/Grid.razor
Normal file
@ -0,0 +1,5 @@
|
||||
<CascadingValue Value="this">
|
||||
<div class="@GridClass">
|
||||
@ChildContent
|
||||
</div>
|
||||
</CascadingValue>
|
41
src/Connected.Components/Components/Grid.razor.cs
Normal file
41
src/Connected.Components/Components/Grid.razor.cs
Normal 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
23
src/Connected.Components/Components/GridRow.razor
Normal 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
58
src/Connected.Components/Components/GridRow.razor.cs
Normal 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
3
src/Connected.Components/Components/GridRowContent.razor
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="@GeneratedRowContentClass">
|
||||
@ChildContent
|
||||
</div>
|
53
src/Connected.Components/Components/GridRowContent.razor.cs
Normal file
53
src/Connected.Components/Components/GridRowContent.razor.cs
Normal 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();
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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
23
src/Connected.Components/Enums/ThemeProvider.cs
Normal 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
5
src/Connected.Components/Utilities/GridRowTemplate.cs
Normal file
@ -0,0 +1,5 @@
|
||||
namespace Connected.Utilities;
|
||||
public class GridRowTemplate
|
||||
{
|
||||
public Position ImagePosition { get; set; } = Position.Left;
|
||||
}
|
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Bold.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Bold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-BoldItalic.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-BoldItalic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBold.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-ExtraBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Italic.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Italic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Light.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Light.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Regular.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBold.woff2
Normal file
BIN
src/Connected.Components/wwwroot/Fonts/OpenSans-SemiBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
21
src/connected.components/Models/Alert/AlertOptions.cs
Normal file
21
src/connected.components/Models/Alert/AlertOptions.cs
Normal 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;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user