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

Merge remote-tracking branch 'remotes/origin/features/rewrite/nuberstepper' into features/rewrite/main

Browse Source
This commit is contained in:
Matija Koželj 2023-03-16 14:57:56 +01:00
commit bfdbc38cbb
11 changed files with 360 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,71 @@
@page "/"
@using Connected.Components;
@using Connected.Enums;
@using Connected.Models.Modal;
@using Connected.Models;
@using Connected.Services;
@using Connected.Utilities;
<h1 style="text-align:center;">Component Example page</h1>
<ul>
<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>
</ul>
@using Connected.Components;
<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
</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 {
DateTime date = DateTime.Today;
double dnumber = 0;
int number = 0;
string ErrorText = "";
public void ChangeErrorText()
{
if (string.IsNullOrEmpty(ErrorText))
ErrorText = "Test string: Error has ocurred!";
else
ErrorText = string.Empty;
//StateHasChanged();
}
}

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

@ -5,9 +5,9 @@
<div id="picker">
<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>
<div class="input-helper-text">Some helping Text</div>
<div class="input-error-text">At least 6 characters required</div>
<label class="label-animated">@LabelText</label>
<div class="input-helper-text">@HelperText</div>
<div class="input-error-text">@ErrorText</div>
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button" @onclick="TogglePicker">
@ -20,7 +20,6 @@
</span>
</div>
@if (Shown)
{
<!-- DatePicker header -->
@ -96,6 +95,11 @@
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
@for (int i=0; i<offset; i++)
{
<div></div>
}
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">

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

@ -30,6 +30,15 @@ public partial class DatePicker
private List<DateTime> ShowingDates = new List<DateTime>();
[Parameter]
public string ErrorText { get; set; } = string.Empty;
[Parameter]
public string LabelText { get; set; } = "Select date";
[Parameter]
public string HelperText { get; set; } = string.Empty;
[Parameter]
public bool UseDateRange { get; set; } = false;
@ -39,6 +48,8 @@ public partial class DatePicker
[Parameter]
public string Format { get; set; } = "dd.MM.yyyy";
private int offset = 0;
private bool _readonly = false;
[Parameter]
public bool Editable
@ -84,25 +95,17 @@ public partial class DatePicker
public void SetStartStop()
{
CalendarStart = SelectedDate;
while (CalendarStart.Day != 1)
{
CalendarStart = CalendarStart.AddDays(-1);
}
CalendarStart = new DateTime(SelectedDate.Year,SelectedDate.Month,1);
CalendarEnd = CalendarStart.AddMonths(1).AddMinutes(-1);
offset=0;
DateTime temp = CalendarStart;
while (!CalendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
{
CalendarStart = CalendarStart.AddDays(-1);
offset++;
}
CalendarEnd = SelectedDate;
while (CalendarEnd.Month == SelectedDate.Month)
{
CalendarEnd = CalendarEnd.AddDays(1);
}
while (!CalendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
{
CalendarEnd = CalendarEnd.AddDays(1);
}
DateTime start = CalendarStart;
DateTime start = CalendarStart.AddDays(offset);
if (ShowingDates is null) ShowingDates = new();
ShowingDates.Clear();
while (start.CompareTo(CalendarEnd) < 0)

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

@ -1,13 +1,12 @@
<CascadingValue Value="this">
<section id="@Id" class="@ClassList" style="@StyleList">
<div class="form-outer">
<div class="form-outer ">
@ChildContent
</div>
<div class="btn-box text-right my-5 d-flex justify-space-between">
<div class="btn-content justify-space-between">
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
<div>
<div class="btn-group">
<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>
</div>

1
src/Connected.Components/Components/Grid.razor.cs
View File

@ -37,5 +37,4 @@ public partial class Grid: ComponentBase
.Build();
}
}
}

48
src/Connected.Components/Components/NumberInput.razor
View File

@ -5,53 +5,45 @@
@typeparam NumberType
<div class="@InputFieldClassList">
<input type="text"
placeholder="@Placeholder"
step="@Step"
<input type="number"
disabled="@Disabled"
readonly="@Readonly"
required="@Required"
value="@_value"
@onkeydown=@(args => ChangeValue(args))
@onkeydown:preventDefault="@_preventDefaultAction"
@oninput=@SetValueAsync
placeholder="@Placeholder"
step="@Step"
value="@Value"
@onmousewheel=@OnMouseWheel
@onchange="@Change"
@onwheel="OnMouseWheel"
@attributes="@InputAttributes" />
@oninput=@SetNumberValueAsync
@attributes="@InputAttributes"
@onchange="@Change"
required="@Required" />
<span class="highlight"></span>
<span class="bar"></span>
@if (IsLabel)
{
<label class="label-animated">@Label</label>
}
@if (IsHelperText && !IsError)
{
<div class="input-helper-text">@HelperText</div>
}
<label class="label-animated">@Label</label>
<div class="input-helper-text">@HelperText</div>
@if (IsError)
{
<div class="input-error-text">@ErrorText</div>
}
<span class="input-glyph-wraper">
<span class="input-glyph">
<span style="display:inline-block">
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowUp" Click="StepUp" />
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowDown" Click="StepDown"></Glyph>
</span>
@if (Clearable && !string.IsNullOrEmpty(Value?.ToString()))
@if (!isValueNull || IsError)
{
<span class="input-glyph-wraper">
@if (!isValueNull)
{
<span class="input-glyph button" @onclick="Clear">
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
<Glyph SVG="@Icons.Material.Rounded.Dangerous" Class="icon-root svg-icon" />
</span>
}
@if (IsError)
{
<span class="input-glyph error">
<Glyph SVG="@Icons.Material.Outlined.Error" />
<Glyph SVG="@Icons.Material.Outlined.Error" Class="icon-root svg-icon" />
</span>
}
</span>
</span>
}
</div>

205
src/Connected.Components/Components/NumberInput.razor.cs
View File

@ -42,10 +42,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
if (IsError)
ErrorText = string.Empty;
isValueNull = false;
}
catch
{
ErrorText = "Error with step up!";
isValueNull = true;
Value = default;
}
@ -71,11 +73,13 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
if (IsError)
ErrorText = string.Empty;
isValueNull = false;
}
catch
{
ErrorText = "Error with step down!";
Value = default;
isValueNull = true;
}
await ValueChanged.InvokeAsync(Value);
@ -104,7 +108,19 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
}
}
private string? _value;
private bool isValueNull { get; set; } = true;
private bool IsValueSet()
{
bool result = false;
if (Value is not null)
{
result= true;
}
return result;
}
//private string? _value;
/// <summary>
@ -114,28 +130,28 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
/// </summary>
[Parameter]
[EditorRequired]
public NumberType? Value
{
get
{
if (string.IsNullOrEmpty(_value))
return default;
else
{
try
{
return Helper.ConvertToType<NumberType>(_value);
} catch
{
return default;
}
}
}
set
{
_value = value?.ToString();
}
}
public NumberType? Value { get; set; } = default;
//{
// get
// {
// if (string.IsNullOrEmpty(_value))
// return default;
// else
// {
// try
// {
// return Helper.ConvertToType<NumberType>(_value);
// } catch
// {
// return default;
// }
// }
// }
// set
// {
// Value = value;
// }
//}
/// <summary>
/// Number of decimal places for Value. If set, Value is corrected when input looses focus
@ -145,33 +161,48 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
[Parameter]
public int DecimalPlaces { get; set; } = 0;
/// <summary>
/// Value change event
/// </summary>
[Parameter]
public EventCallback<NumberType> ValueChanged { get; set; }
public EventCallback<NumberType?> ValueChanged { get; set; }
public async Task SetValueAsync(ChangeEventArgs args)
//public async Task SetValueAsync(ChangeEventArgs args)
//{
// if (args.Value is not null)
// {
// var newVal = args.Value.ToString()!;
// if (!newVal.Equals("0"))
// {
// if (newVal.ToString().Contains("-"))
// newVal = "-" + newVal.ToString().Replace("-", "");
// if (newVal.ToString().ToLower().Contains("e"))
// newVal = "e" + newVal.ToString().Replace("e", "");
// }
// if (string.IsNullOrEmpty(newVal))
// await ValueChanged.InvokeAsync(default);
// if (!newVal.Equals(_value))
// await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
// }
//}
public async Task SetNumberValueAsync(ChangeEventArgs args)
{
if (args.Value is not null)
{
var newVal = args.Value.ToString()!;
if (!newVal.Equals("0"))
if (!string.IsNullOrEmpty(args.Value.ToString()))
{
if (newVal.ToString().Contains("-"))
newVal = "-" + newVal.ToString().Replace("-", "");
if (newVal.ToString().ToLower().Contains("e"))
newVal = "e" + newVal.ToString().Replace("e", "");
Value = Helper.ConvertToType<NumberType>(args.Value);
isValueNull = false;
} else
{
isValueNull = true;
}
if (string.IsNullOrEmpty(newVal))
await ValueChanged.InvokeAsync(default);
if (!newVal.Equals(_value))
await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
await ValueChanged.InvokeAsync(Value);
}
}
@ -179,7 +210,7 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
{
if (args.Value is not null)
Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
isValueNull = false;
await ValueChanged.InvokeAsync(Value);
}
@ -189,53 +220,53 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
[Parameter]
public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
private bool CheckKey(string key)
{
bool result;
if (Helper.IsNumeric(key)) return true;
switch (key.ToLower())
{
case "backspace":
case "delete":
case "arrowleft":
case "arrowright":
case "-":
//case "e":
{
result = true;
break;
}
default:
{
result = false;
break;
}
}
//private bool CheckKey(string key)
//{
// bool result;
// if (Helper.IsNumeric(key)) return true;
// switch (key.ToLower())
// {
// case "backspace":
// case "delete":
// case "arrowleft":
// case "arrowright":
// case "-":
// //case "e":
// {
// result = true;
// break;
// }
// default:
// {
// result = false;
// break;
// }
// }
if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
return result;
}
// if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
// return result;
//}
private bool _preventDefaultAction = true;
public async Task ChangeValue(KeyboardEventArgs args)
{
_preventDefaultAction = true;
if (args is not null)
{
var key = args.Key.ToString().ToLower();
//private bool _preventDefaultAction = true;
//public async Task ChangeValue(KeyboardEventArgs args)
//{
// _preventDefaultAction = true;
// if (args is not null)
// {
// var key = args.Key.ToString().ToLower();
if (CheckKey(key))
{
_preventDefaultAction = false;
// if (CheckKey(key))
// {
// _preventDefaultAction = false;
await OnKeyDown.InvokeAsync(args);
}
}
else
{
args.Key = null;
}
}
// await OnKeyDown.InvokeAsync(args);
// }
// }
// else
// {
// args.Key = null;
// }
//}
/// <summary>
/// Method for adjusting decimal places provided with parameter
@ -259,8 +290,10 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
/// <returns></returns>
private async Task Clear()
{
var val = Helper.ConvertToType<NumberType>(null);
await ValueChanged.InvokeAsync(val);
//var val = Helper.ConvertToType<NumberType>(null);
Value = default(NumberType);
isValueNull = true;
await ValueChanged.InvokeAsync(Value);
}
#region Lifecycle

17
src/Connected.Components/Components/NumberStepper.razor Normal file
View File

@ -0,0 +1,17 @@
@typeparam NumberType
<div class="form-group-alt">
<div class="input-group-content">
<div class="input-cta-icon" @onclick="StepDown">
<svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><!--!--><g><rect fill="none" fill-rule="evenodd" height="24" width="24"></rect><rect fill-rule="evenodd" height="2" width="16" x="4" y="11"></rect></g></svg>
</div>
<div class="input-area">
<form>
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="@_value" @onchange="Change">
</form>
</div>
<div class="input-cta-icon" @onclick="StepUp">
<svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
</div>
</div>
</div>

98
src/Connected.Components/Components/NumberStepper.razor.cs Normal file
View File

@ -0,0 +1,98 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using System.Numerics;
namespace Connected.Components
{
public partial class NumberStepper<NumberType> where NumberType : INumber<NumberType>
{
[Parameter]
public string Class { get; set; } = string.Empty;
/// <summary>
/// Increase 'Value' for the 'Step'
/// </summary>
/// <returns>'Value' increased for the 'Step' parameter</returns>
private async Task StepUp()
{
try
{
var num = Helper.ConvertToType<double>(Value);
num += Step;
Value=Helper.ConvertToType<NumberType>(num);
}
catch
{
Value = default;
}
await ValueChanged.InvokeAsync(Value);
}
/// <summary>
/// Decrease 'Value' for the 'Step'
/// </summary>
/// <returns>'Value' decreased for the 'Step' parameter</returns>
private async Task StepDown()
{
try
{
var num = Helper.ConvertToType<double>(Value);
num -= Step;
Value = Helper.ConvertToType<NumberType>(num);
}
catch
{
Value = default;
}
await ValueChanged.InvokeAsync(Value);
}
[Parameter]
public NumberType? Value
{
get
{
try
{
return Helper.ConvertToType<NumberType>(_value);
}
catch
{
return default;
}
}
set
{
_value = Helper.ConvertToType<double>(value);
}
}
private double _value { get; set; } = 0;
/// <summary>
/// Value change event
/// </summary>
[Parameter]
public EventCallback<NumberType> ValueChanged { get; set; }
[Parameter]
public double Step { get; set; } = 1;
public async Task Change(ChangeEventArgs args)
{
if (args.Value is not null)
Value = (Helper.ConvertToType<NumberType>(args.Value));
await ValueChanged.InvokeAsync(Value);
}
}
}

4
src/Connected.Components/Components/ToggleGlyphButton.razor
View File

@ -9,12 +9,12 @@
<div style="align-items:center">
@if (GlyphPosition == Position.Top)
{
<Glyph SVG="@Glyph" Color="@GlyphColor" />
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
}
@ChildContent
@if (GlyphPosition == Position.Bottom)
{
<Glyph SVG="@Glyph" Color="@GlyphColor" />
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
}
</div>
</div>

10
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
View File

@ -55,6 +55,16 @@ public partial class ToggleGlyphButton: Button
[Parameter]
public Color ToggledGlyphColor { get; set; } = Color.Dark;
private string _ShownGlyph
{
get
{
if (Toggled)
return ToggledGlyph;
return Glyph;
}
}
#endregion
#region Events