Code style fixes - added regions, summary, comments.
This commit is contained in:
parent
2d78796801
commit
60f1a90784
@ -1,9 +1,8 @@
|
|||||||
<button
|
<button type="button"
|
||||||
type="button"
|
|
||||||
href="#"
|
href="#"
|
||||||
@onclick="@OnClick"
|
@onclick="@OnClick"
|
||||||
disabled=@Disabled
|
disabled=@Disabled
|
||||||
style="@Style"
|
style="@StyleList"
|
||||||
class="@ClassList">
|
class="@ClassList">
|
||||||
<div class="@ContentClassList">
|
<div class="@ContentClassList">
|
||||||
@if (!string.IsNullOrEmpty(Glyph))
|
@if (!string.IsNullOrEmpty(Glyph))
|
||||||
@ -13,12 +12,12 @@
|
|||||||
<div style="align-items:center">
|
<div style="align-items:center">
|
||||||
@if (GlyphPosition == Position.Top)
|
@if (GlyphPosition == Position.Top)
|
||||||
{
|
{
|
||||||
<Glyph SVG="@Glyph" Color="@GlyphColor"/>
|
<Glyph SVG="@Glyph" Color="@GlyphColor" />
|
||||||
}
|
}
|
||||||
@ChildContent
|
@ChildContent
|
||||||
@if (GlyphPosition == Position.Bottom)
|
@if (GlyphPosition == Position.Bottom)
|
||||||
{
|
{
|
||||||
<Glyph SVG="@Glyph" Color="@GlyphColor"/>
|
<Glyph SVG="@Glyph" Color="@GlyphColor" />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -36,7 +35,8 @@
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
} else
|
}
|
||||||
|
else
|
||||||
{
|
{
|
||||||
@ChildContent
|
@ChildContent
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
using static Connected.Colors;
|
|
||||||
using System;
|
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Button
|
public partial class Button
|
||||||
@ -65,12 +63,12 @@ public partial class Button
|
|||||||
public Position GlyphPosition { get; set; } = Position.Left;
|
public Position GlyphPosition { get; set; } = Position.Left;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// HEX string of the color for the glyph. If Glyph parameter is empty this parameter is ignored
|
/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
|
||||||
/// Options: any HEX color string
|
/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
|
||||||
/// Default: Black (#000000)
|
/// Default: Color.Dark
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string GlyphColor { get; set; } = "#000000";
|
public Color GlyphColor { get; set; } = Color.Dark;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// User defined custom class added on top of default generated classes
|
/// User defined custom class added on top of default generated classes
|
||||||
@ -90,7 +88,7 @@ public partial class Button
|
|||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// User defined custom style
|
/// User defined custom style
|
||||||
/// Options: any user defined string with valid CSS style
|
/// Options: any valid CSS style
|
||||||
/// Default: string.Empty
|
/// Default: string.Empty
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
@ -115,6 +113,17 @@ public partial class Button
|
|||||||
|
|
||||||
#region Styling
|
#region Styling
|
||||||
|
|
||||||
|
private string StyleList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(Style)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Generated class list for button based on user parameters
|
/// Generated class list for button based on user parameters
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
@ -2,10 +2,22 @@
|
|||||||
|
|
||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
<label class="checkbox-group" for="@Id">
|
<label class="checkbox-group"
|
||||||
<input class="checkbox-input" id="@Id" type="checkbox" @attributes=@InputAttributes checked="@Checked" disabled="@Disabled">
|
for="@Id">
|
||||||
|
<input class="@ClassList"
|
||||||
|
style="@StyleList"
|
||||||
|
id="@Id"
|
||||||
|
type="checkbox"
|
||||||
|
@attributes=@InputAttributes
|
||||||
|
checked="@Checked"
|
||||||
|
readonly="@Readonly"
|
||||||
|
disabled="@Disabled">
|
||||||
<div class="checkbox-fill"></div>
|
<div class="checkbox-fill"></div>
|
||||||
<label for="@Id" class="checkbox-label">@Label</label>
|
<label for="@Id"
|
||||||
|
class="@LabelClassList"
|
||||||
|
style="@LabelStyleList">
|
||||||
|
@Label
|
||||||
|
</label>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,22 +1,100 @@
|
|||||||
using Connected.Models;
|
using Connected.Models;
|
||||||
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class CheckBox : InputBase
|
public partial class CheckBox : InputBase
|
||||||
{
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// State of the CheckBox
|
||||||
|
/// Options: true, false
|
||||||
|
/// Default: false
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Checked { get; set; }
|
public bool Checked { get; set; } = false;
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// ID for the CheckBox
|
||||||
|
/// </summary>
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string? Id { get; set; }
|
public string? Id { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Event when the checked is changed
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<bool> CheckedChanged { get; set; }
|
public EventCallback<bool> CheckedChanged { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// OPTIONAL - Style for the input
|
||||||
|
/// Options: any valid CSS style
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string Style { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// OPTIONAL - Class for the label of input
|
||||||
|
/// Options: any valid Class name or multiple separated with space
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string LabelClass { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// OPTIONAL - Style for the label of input
|
||||||
|
/// Options: any valid CSS style
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string LabelStyle { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// OnChange event when checked is changed
|
||||||
|
/// </summary>
|
||||||
|
/// <returns></returns>
|
||||||
public async Task OnChange()
|
public async Task OnChange()
|
||||||
{
|
{
|
||||||
Checked = !Checked;
|
Checked = !Checked;
|
||||||
|
|
||||||
await CheckedChanged.InvokeAsync(Checked);
|
await CheckedChanged.InvokeAsync(Checked);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private string ClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("checkbox-input")
|
||||||
|
.AddClass(base.Class)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private string StyleList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(Style)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private string LabelClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("checkbox-label")
|
||||||
|
.AddClass(LabelClass)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private string LabelStyleList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(LabelStyle)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
<div style="width:@WidthString; height:@HeightString; overflow:hidden">
|
<div style="@GlyphStyleList">
|
||||||
<svg viewBox="0 0 24 24" style="fill:@Color;" class="@GlyphClassList" @onclick="@OnClick">
|
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
|
||||||
@((MarkupString)SVG)
|
@((MarkupString)SVG)
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
@ -2,37 +2,47 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.Components
|
namespace Connected.Components;
|
||||||
|
|
||||||
|
public partial class Glyph
|
||||||
{
|
{
|
||||||
public partial class Glyph
|
/// <summary>
|
||||||
{
|
/// SVG markup string for glyph
|
||||||
|
/// Options: any valid SVG markup string
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string SVG { get; set; } = string.Empty;
|
public string SVG { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Color of the glyph
|
||||||
|
/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
|
||||||
|
/// Default: Color.Dark
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Color { get; set; } = "#000000";
|
public Color Color { get; set; } = Color.Dark;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Width of the glyph in px
|
||||||
|
/// Options: Any positive integer number
|
||||||
|
/// Default: 24
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int Width { get; set; } = 24;
|
public int Width { get; set; } = 24;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Height of the glyph in px
|
||||||
|
/// Options: Any positive integer number
|
||||||
|
/// Default: 24
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int Height { get; set; } = 24;
|
public int Height { get; set; } = 24;
|
||||||
|
|
||||||
private string WidthString
|
/// <summary>
|
||||||
{
|
/// Class name or multiple classes separated by space
|
||||||
get
|
/// Options: Any valid class name or names separated by space
|
||||||
{
|
/// Default: string.Empty
|
||||||
return Width.ToString() + "px";
|
/// </summary>
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private string HeightString
|
|
||||||
{
|
|
||||||
get
|
|
||||||
{
|
|
||||||
return Width.ToString() + "px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Class { get; set; } = string.Empty;
|
public string Class { get; set; } = string.Empty;
|
||||||
|
|
||||||
@ -41,11 +51,31 @@ namespace Connected.Components
|
|||||||
get
|
get
|
||||||
{
|
{
|
||||||
return new CssBuilder()
|
return new CssBuilder()
|
||||||
|
.AddClass("color-"+Helper.GetEnumDescription<Color>(Color))
|
||||||
.AddClass(Class)
|
.AddClass(Class)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// User defined style for the glyph
|
||||||
|
/// Options: Any valid CSS style
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string Style { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
private string GlyphStyleList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle("width: "+Width.ToString()+"px; height:"+Height.ToString()+"px; overflow: hidden")
|
||||||
|
.AddStyle(Style)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Glyph click event.
|
/// Glyph click event.
|
||||||
@ -55,5 +85,4 @@ namespace Connected.Components
|
|||||||
{
|
{
|
||||||
await Click.InvokeAsync(e);
|
await Click.InvokeAsync(e);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
@ -1,7 +1,6 @@
|
|||||||
<a
|
<a class="@LinkClassList"
|
||||||
class="@LinkClassList"
|
|
||||||
style="@LinkStyleList"
|
style="@LinkStyleList"
|
||||||
href="@Url"
|
href="@Url"
|
||||||
target="@Target" >
|
target="@_target">
|
||||||
@Text
|
@Text
|
||||||
</a>
|
</a>
|
||||||
|
@ -1,18 +1,47 @@
|
|||||||
using Connected.Utilities;
|
using Connected.Enums;
|
||||||
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Link
|
public partial class Link
|
||||||
{
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// URL of the link
|
||||||
|
/// Options: Any valid web page adress
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string Url { get; set; } = string.Empty;
|
public string Url { get; set; } = string.Empty;
|
||||||
|
|
||||||
[Parameter, EditorRequired]
|
/// <summary>
|
||||||
|
/// Text shown for the link. If this is not provided URL is used
|
||||||
|
/// Options: Any valid string
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
public string Text { get; set; } = string.Empty;
|
public string Text { get; set; } = string.Empty;
|
||||||
|
|
||||||
[Parameter, EditorRequired]
|
/// <summary>
|
||||||
public string Target { get; set; } = "_self";
|
/// Target where the link shall open
|
||||||
|
/// Options: Target.[Self,Parent,Top,Blank]
|
||||||
|
/// Default: Target.Self
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Target Target { get; set; } = Target.Self;
|
||||||
|
|
||||||
|
private string _target
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return Helper.GetEnumDescription<Target>(Target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Class name or multiple classes separated by space
|
||||||
|
/// Options: Any valid class name or names separated by space
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Class { get; set; } = string.Empty;
|
public string Class { get; set; } = string.Empty;
|
||||||
|
|
||||||
@ -26,6 +55,11 @@ public partial class Link
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Style string for the link
|
||||||
|
/// Options: Any valid CSS style
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Style { get; set; } = string.Empty;
|
public string Style { get; set; } = string.Empty;
|
||||||
|
|
||||||
@ -39,12 +73,13 @@ public partial class Link
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnParametersSetAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
|
//if Text parameter is not provided we set it to match URL
|
||||||
if (string.IsNullOrEmpty(Text))
|
if (string.IsNullOrEmpty(Text))
|
||||||
Text = Url;
|
Text = Url;
|
||||||
|
|
||||||
await base.OnParametersSetAsync();
|
await base.OnInitializedAsync();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
45
src/Connected.Components/Components/MultilineInput.razor
Normal file
45
src/Connected.Components/Components/MultilineInput.razor
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@using Connected.Models;
|
||||||
|
|
||||||
|
@inherits InputBase;
|
||||||
|
|
||||||
|
<div class="@InputFieldClassList">
|
||||||
|
<textarea value="@Value"
|
||||||
|
placeholder="@Placeholder"
|
||||||
|
disabled="@Disabled"
|
||||||
|
readonly="@Readonly"
|
||||||
|
required="@Required"
|
||||||
|
style="overflow-x: hidden; overflow-y: hidden;"
|
||||||
|
@oninput=@ChangeValueAsync
|
||||||
|
@attributes="@InputAttributes" />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
@if (IsError)
|
||||||
|
{
|
||||||
|
<div class="input-error-text">@ErrorText</div>
|
||||||
|
}
|
||||||
|
<span class="input-glyph-wraper">
|
||||||
|
<span class="input-glyph">
|
||||||
|
@if (Clearable && !string.IsNullOrEmpty(Value))
|
||||||
|
{
|
||||||
|
<span class="input-glyph button" @onclick="Clear">
|
||||||
|
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
@if (IsError)
|
||||||
|
{
|
||||||
|
<span class="input-glyph error">
|
||||||
|
<Glyph SVG="@Icons.Material.Outlined.Error" />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
119
src/Connected.Components/Components/MultilineInput.razor.cs
Normal file
119
src/Connected.Components/Components/MultilineInput.razor.cs
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
using Connected.Models;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
using System.ComponentModel.DataAnnotations;
|
||||||
|
using System.Security.Cryptography;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
public partial class MultilineInput : InputBase
|
||||||
|
{
|
||||||
|
#region Parameters
|
||||||
|
|
||||||
|
private int MinRows { get; set; } = 1;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Number of rows
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public int Rows
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return _numRows;
|
||||||
|
}
|
||||||
|
set
|
||||||
|
{
|
||||||
|
if (value >= MinRows) _numRows= value;
|
||||||
|
else _numRows = MinRows;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private int _numRows = 1;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value of the TextInput. Used for @bind-Value
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string Value { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Events, Methods
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Event triggered when value changes
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<string> ValueChanged { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Method that triggers oninput -> when value inside the component changes
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="args"></param>
|
||||||
|
/// <returns></returns>
|
||||||
|
private async Task ChangeValueAsync(ChangeEventArgs args)
|
||||||
|
{
|
||||||
|
int oldRows = Rows;
|
||||||
|
await ValueChanged.InvokeAsync(args?.Value?.ToString());
|
||||||
|
|
||||||
|
int newRows = GetNumberOfLines(args.Value.ToString());
|
||||||
|
|
||||||
|
if (newRows == MinRows)
|
||||||
|
{
|
||||||
|
Rows = MinRows;
|
||||||
|
ChangeAttribute("rows", Rows);
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
Rows = Math.Max(MinRows, newRows);
|
||||||
|
if (oldRows < Rows)
|
||||||
|
{
|
||||||
|
ChangeAttribute("rows", Rows);
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private int GetNumberOfLines(string s)
|
||||||
|
{
|
||||||
|
int result = Math.Max(s.Split("\r\n").Length, 1);
|
||||||
|
result = Math.Max(s.Split("\r").Length, result);
|
||||||
|
result = Math.Max(s.Split("\n").Length, result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Clear the value of the TextInput
|
||||||
|
/// </summary>
|
||||||
|
/// <returns></returns>
|
||||||
|
private async Task Clear()
|
||||||
|
{
|
||||||
|
await ValueChanged.InvokeAsync(string.Empty);
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Lifecycle
|
||||||
|
|
||||||
|
private void AddAttribute(string key, object value)
|
||||||
|
{
|
||||||
|
if (!InputAttributes.ContainsKey(key))
|
||||||
|
InputAttributes.Add(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ChangeAttribute(string key, object value)
|
||||||
|
{
|
||||||
|
if (InputAttributes.ContainsKey(key)) InputAttributes.Remove(key);
|
||||||
|
InputAttributes.Add(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
base.OnInitialized();
|
||||||
|
MinRows = Rows;
|
||||||
|
AddAttribute("rows", MinRows);
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
}
|
@ -7,13 +7,14 @@
|
|||||||
<div class="@InputFieldClassList">
|
<div class="@InputFieldClassList">
|
||||||
<input type="text"
|
<input type="text"
|
||||||
placeholder="@Placeholder"
|
placeholder="@Placeholder"
|
||||||
step="@_step"
|
step="@Step"
|
||||||
disabled="@Disabled"
|
disabled="@Disabled"
|
||||||
readonly="@Readonly"
|
readonly="@Readonly"
|
||||||
|
required="@Required"
|
||||||
value="@_value"
|
value="@_value"
|
||||||
@onkeydown=@(args => ChangeValue(args))
|
@onkeydown=@(args => ChangeValue(args))
|
||||||
@onkeydown:preventDefault="@_preventDefaultAction"
|
@onkeydown:preventDefault="@_preventDefaultAction"
|
||||||
@oninput=@GetValueAsync
|
@oninput=@SetValueAsync
|
||||||
@onmousewheel=@OnMouseWheel
|
@onmousewheel=@OnMouseWheel
|
||||||
@onchange="@Change"
|
@onchange="@Change"
|
||||||
@onwheel="OnMouseWheel"
|
@onwheel="OnMouseWheel"
|
||||||
@ -39,18 +40,16 @@
|
|||||||
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowUp" Click="StepUp" />
|
<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>
|
<Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowDown" Click="StepDown"></Glyph>
|
||||||
</span>
|
</span>
|
||||||
@if (Clearable && Value.ToString().Length > 0)
|
@if (Clearable && !string.IsNullOrEmpty(Value?.ToString()))
|
||||||
{
|
{
|
||||||
<span class="input-glyph button" @onclick="Clear">
|
<span class="input-glyph button" @onclick="Clear">
|
||||||
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
|
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
|
||||||
<!--<i class='bx bx-x-circle'></i>-->
|
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
@if (IsError)
|
@if (IsError)
|
||||||
{
|
{
|
||||||
<span class="input-glyph error">
|
<span class="input-glyph error">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Error" Color="#D10000" />
|
<Glyph SVG="@Icons.Material.Outlined.Error" />
|
||||||
<!--<i class='bx bx-error-circle'></i>-->
|
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
|
@ -7,24 +7,38 @@ using System.Numerics;
|
|||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class NumberInput<NumberType> : InputBase where NumberType : INumber<NumberType>
|
public partial class NumberInput<NumberType> : InputBase where NumberType : INumber<NumberType>
|
||||||
{
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// Step for up and down on numeric field
|
||||||
|
/// Options: Any double number
|
||||||
|
/// Default: 1
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public double Step { get; set; } = 1;
|
public double Step { get; set; } = 1;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Mouse wheel disable to prevent StepUp/StepDown on number filed
|
||||||
|
/// Options: true, false
|
||||||
|
/// Default: false
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool DisableMouseWheel { get; set; } = false;
|
public bool DisableMouseWheel { get; set; } = false;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Increase 'Value' for the 'Step'
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>'Value' increased for the 'Step' parameter</returns>
|
||||||
private async Task StepUp()
|
private async Task StepUp()
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var num = (double)Convert.ChangeType(Value, typeof(double));
|
var num = Helper.ConvertToType<double>(Value);
|
||||||
|
|
||||||
num += Step;
|
num += Step;
|
||||||
|
|
||||||
if (DecimalPlaces > 0)
|
if (DecimalPlaces > 0)
|
||||||
num = Math.Round(num, DecimalPlaces);
|
num = Math.Round(num, DecimalPlaces);
|
||||||
|
Value = Helper.ConvertToType<NumberType>(num);
|
||||||
|
|
||||||
Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
|
|
||||||
|
|
||||||
if (IsError)
|
if (IsError)
|
||||||
ErrorText = string.Empty;
|
ErrorText = string.Empty;
|
||||||
@ -38,18 +52,22 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
await ValueChanged.InvokeAsync(Value);
|
await ValueChanged.InvokeAsync(Value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Decrease 'Value' for the 'Step'
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>'Value' decreased for the 'Step' parameter</returns>
|
||||||
private async Task StepDown()
|
private async Task StepDown()
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var num = (double)Convert.ChangeType(Value, typeof(double));
|
var num = Helper.ConvertToType<double>(Value);
|
||||||
|
|
||||||
num -= Step;
|
num -= Step;
|
||||||
|
|
||||||
if (DecimalPlaces > 0)
|
if (DecimalPlaces > 0)
|
||||||
num = Math.Round(num, DecimalPlaces);
|
num = Math.Round(num, DecimalPlaces);
|
||||||
|
|
||||||
Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
|
Value = Helper.ConvertToType<NumberType>(num);
|
||||||
|
|
||||||
if (IsError)
|
if (IsError)
|
||||||
ErrorText = string.Empty;
|
ErrorText = string.Empty;
|
||||||
@ -62,6 +80,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
|
|
||||||
await ValueChanged.InvokeAsync(Value);
|
await ValueChanged.InvokeAsync(Value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Event triggered when mouse wheel is activated inside component
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="args">WheelEventArgs argument</param>
|
||||||
|
/// <returns>Doesnt return values just increasing/decreasing values</returns>
|
||||||
protected async Task OnMouseWheel(WheelEventArgs args)
|
protected async Task OnMouseWheel(WheelEventArgs args)
|
||||||
{
|
{
|
||||||
if (DisableMouseWheel)
|
if (DisableMouseWheel)
|
||||||
@ -82,15 +106,30 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
|
|
||||||
private string? _value;
|
private string? _value;
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value of any numeric type
|
||||||
|
/// Options: any numeric type variable
|
||||||
|
/// Default: null
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
|
[EditorRequired]
|
||||||
public NumberType? Value
|
public NumberType? Value
|
||||||
{
|
{
|
||||||
get
|
get
|
||||||
{
|
{
|
||||||
if (string.IsNullOrEmpty(_value))
|
if (string.IsNullOrEmpty(_value))
|
||||||
return default;
|
return default;
|
||||||
|
else
|
||||||
return (NumberType)Convert.ChangeType(_value, typeof(NumberType));
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return Helper.ConvertToType<NumberType>(_value);
|
||||||
|
} catch
|
||||||
|
{
|
||||||
|
return default;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
set
|
set
|
||||||
{
|
{
|
||||||
@ -98,13 +137,22 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Number of decimal places for Value. If set, Value is corrected when input looses focus
|
||||||
|
/// Options: any integer number greater or equal 0
|
||||||
|
/// Default: 0
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int DecimalPlaces { get; set; } = 0;
|
public int DecimalPlaces { get; set; } = 0;
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value change event
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<NumberType> ValueChanged { get; set; }
|
public EventCallback<NumberType> ValueChanged { get; set; }
|
||||||
|
|
||||||
public async Task GetValueAsync(ChangeEventArgs args)
|
public async Task SetValueAsync(ChangeEventArgs args)
|
||||||
{
|
{
|
||||||
if (args.Value is not null)
|
if (args.Value is not null)
|
||||||
{
|
{
|
||||||
@ -123,18 +171,21 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
await ValueChanged.InvokeAsync(default);
|
await ValueChanged.InvokeAsync(default);
|
||||||
|
|
||||||
if (!newVal.Equals(_value))
|
if (!newVal.Equals(_value))
|
||||||
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(newVal, typeof(NumberType)));
|
await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task Change(ChangeEventArgs args)
|
public async Task Change(ChangeEventArgs args)
|
||||||
{
|
{
|
||||||
if (args.Value is not null)
|
if (args.Value is not null)
|
||||||
Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType)));
|
Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
|
||||||
|
|
||||||
await ValueChanged.InvokeAsync(Value);
|
await ValueChanged.InvokeAsync(Value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// On keyboard key press event
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
|
public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
|
||||||
|
|
||||||
@ -186,33 +237,30 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private NumberType AdjustDecimalPlaces(NumberType value)
|
/// <summary>
|
||||||
|
/// Method for adjusting decimal places provided with parameter
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="value">Value whose decimal places we want to change</param>
|
||||||
|
/// <returns>NumberType result with adjusted decimal places</returns>
|
||||||
|
private NumberType? AdjustDecimalPlaces(NumberType? value)
|
||||||
{
|
{
|
||||||
var result = value;
|
var result = value;
|
||||||
if (DecimalPlaces > 0)
|
if (DecimalPlaces > 0)
|
||||||
{
|
{
|
||||||
double converted = Math.Round((double)Convert.ChangeType(result, typeof(double)), DecimalPlaces);
|
double converted = Math.Round(Helper.ConvertToType<double>(result), DecimalPlaces);
|
||||||
return (NumberType)Convert.ChangeType(converted, typeof(NumberType));
|
return Helper.ConvertToType<NumberType>(converted);
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Clear event for user clear icon click. It clears the Value and set it to
|
||||||
|
/// </summary>
|
||||||
|
/// <returns></returns>
|
||||||
private async Task Clear()
|
private async Task Clear()
|
||||||
{
|
{
|
||||||
_value = string.Empty;
|
var val = Helper.ConvertToType<NumberType>(null);
|
||||||
await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(0, typeof(NumberType)));
|
await ValueChanged.InvokeAsync(val);
|
||||||
}
|
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
||||||
{
|
|
||||||
if (firstRender)
|
|
||||||
{
|
|
||||||
if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
|
|
||||||
{
|
|
||||||
Value = AdjustDecimalPlaces(Value);
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#region Lifecycle
|
#region Lifecycle
|
||||||
@ -228,12 +276,18 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
|
|||||||
await base.OnParametersSetAsync();
|
await base.OnParametersSetAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override void OnAfterRender(bool firstRender)
|
||||||
{
|
{
|
||||||
await base.OnInitializedAsync();
|
if (firstRender)
|
||||||
if (Required)
|
|
||||||
{
|
{
|
||||||
if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
|
if (Value is not null)
|
||||||
|
{
|
||||||
|
if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
|
||||||
|
{
|
||||||
|
Value = AdjustDecimalPlaces(Value);
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,8 +2,20 @@
|
|||||||
|
|
||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
<label class="radio-group" for="@Id">
|
<label class="radio-group"
|
||||||
<input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes disabled="@Disabled" checked="@Checked">
|
for="@Id">
|
||||||
|
<input class="@ClassNameList"
|
||||||
|
id="@Id"
|
||||||
|
name="@ParentRadioGroup?.Name"
|
||||||
|
type="radio"
|
||||||
|
@onchange="OnChange"
|
||||||
|
@attributes=@InputAttributes
|
||||||
|
disabled="@Disabled"
|
||||||
|
readonly="@Readonly"
|
||||||
|
checked="@Checked">
|
||||||
|
|
||||||
<div class="radio-fill"></div>
|
<div class="radio-fill"></div>
|
||||||
<label for="@Id" class="radio-label">@Label</label>
|
|
||||||
|
<label for="@Id"
|
||||||
|
class="@LabelClassNameList">@Label</label>
|
||||||
</label>
|
</label>
|
@ -1,18 +1,24 @@
|
|||||||
using Connected.Models;
|
using Connected.Models;
|
||||||
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Radio : InputBase
|
public partial class Radio : InputBase
|
||||||
{
|
{
|
||||||
|
#region Parameters
|
||||||
[CascadingParameter]
|
[CascadingParameter]
|
||||||
public RadioGroup? ParentRadioGroup { get; set; }
|
public RadioGroup? ParentRadioGroup { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Checked { get; set; }
|
public bool Checked { get; set; } = false;
|
||||||
|
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string? Id { get; set; }
|
public string? Id { get; set; }
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Events
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<bool> CheckedChanged { get; set; }
|
public EventCallback<bool> CheckedChanged { get; set; }
|
||||||
|
|
||||||
@ -21,4 +27,37 @@ public partial class Radio : InputBase
|
|||||||
Checked = !Checked;
|
Checked = !Checked;
|
||||||
await CheckedChanged.InvokeAsync(Checked);
|
await CheckedChanged.InvokeAsync(Checked);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Style
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public string ClassName { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
private string ClassNameList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("radio-input")
|
||||||
|
.AddClass(ClassName)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public string LabelClassName { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
private string LabelClassNameList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("radio-label")
|
||||||
|
.AddClass(LabelClassName)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,6 @@
|
|||||||
{
|
{
|
||||||
<h5>@Name</h5>
|
<h5>@Name</h5>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,13 +3,32 @@
|
|||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class RadioGroup
|
public partial class RadioGroup
|
||||||
{
|
{
|
||||||
|
#region Parameters
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Radio group name. Mandatory! Used for proper radio button grouping
|
||||||
|
/// Options: any string will do
|
||||||
|
/// Default: 'radiogroup'
|
||||||
|
/// </summary>
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string? Name { get; set; }
|
public string? Name { get; set; } = "radiogroup";
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Used for globaly disabling radio button group and all the radios within
|
||||||
|
/// Options: true or false
|
||||||
|
/// Default: false
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Disabled { get; set; }
|
public bool Disabled { get; set; } = false;
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// All the radiobuttons and other components inside radio group
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment? ChildContent { get; set; }
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
}
|
}
|
@ -4,19 +4,23 @@
|
|||||||
|
|
||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
@if (Items is not null)
|
@if (component_loaded)
|
||||||
{
|
{
|
||||||
|
@if (Items is not null)
|
||||||
|
{
|
||||||
<div class="@InputFieldClassList">
|
<div class="@InputFieldClassList">
|
||||||
<select type="textarea" style="height:0px;" @attributes=@InputAttributes>
|
<select type="textarea"
|
||||||
</select>
|
style="height:0px;"
|
||||||
|
@attributes=@InputAttributes></select>
|
||||||
@if (IsLabel)
|
@if (IsLabel)
|
||||||
{
|
{
|
||||||
<label class="label-animated">@Label</label>
|
<label class="label-animated">@Label</label>
|
||||||
}
|
}
|
||||||
|
|
||||||
<span class="highlight"></span>
|
<span class="highlight"></span>
|
||||||
<span class="bar">
|
|
||||||
</span>
|
<span class="bar"></span>
|
||||||
|
|
||||||
<span class="input-glyph-wraper">
|
<span class="input-glyph-wraper">
|
||||||
@if (Clearable)
|
@if (Clearable)
|
||||||
{
|
{
|
||||||
@ -35,7 +39,8 @@
|
|||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
<div class="drop-down">
|
<div class="drop-down">
|
||||||
<div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
|
<div class="dropdown-menu p-2"
|
||||||
|
aria-labelledby="dropdownMenuButton">
|
||||||
@if (EnableSearch)
|
@if (EnableSearch)
|
||||||
{
|
{
|
||||||
<input type="text"
|
<input type="text"
|
||||||
@ -43,14 +48,18 @@
|
|||||||
class="dropdown-item"
|
class="dropdown-item"
|
||||||
@bind-value="@SearchText" />
|
@bind-value="@SearchText" />
|
||||||
}
|
}
|
||||||
@foreach (ValueType item in Items)
|
@foreach (ValueType item in FilteredItems)
|
||||||
{
|
{
|
||||||
@if (item is not null)
|
@if (item is not null)
|
||||||
{
|
{
|
||||||
<div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
|
<div class="dropdown-item"
|
||||||
|
@onclick=@(()=>SetSelectedItem(@item))>
|
||||||
|
@item.ToString()
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,22 +1,46 @@
|
|||||||
using Connected.Models;
|
using Connected.Models;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using System.Collections.ObjectModel;
|
using System.Collections.ObjectModel;
|
||||||
|
using System.Collections.Specialized;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class SimpleSelect<ValueType> : InputBase
|
public partial class SimpleSelect<ValueType> : InputBase
|
||||||
{
|
{
|
||||||
|
private bool component_loaded = false;
|
||||||
|
#region Parameters
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value that is currently selected in the dropdown. Used for @bind-Value
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public ValueType Value { get; set; }
|
public ValueType? Value { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
/// <summary>
|
||||||
public IEnumerable<ValueType> Items { get; set; }
|
/// Collection of Items to work on (Filter). Filtered result is then shown in dropdown. If no filter is aplied, all the items are shown
|
||||||
|
/// </summary>
|
||||||
|
[Parameter, EditorRequired]
|
||||||
|
public ObservableCollection<ValueType>? Items { get; set; }
|
||||||
|
|
||||||
public ObservableCollection<ValueType> OriginalItems { get; set; }
|
/// <summary>
|
||||||
|
/// Collection of items from 'Items' filtered with 'SearchText'
|
||||||
|
/// </summary>
|
||||||
|
private List<ValueType>? FilteredItems { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Enable edit text search box for item filtering
|
||||||
|
/// Options: true or false
|
||||||
|
/// Default: true
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool EnableSearch { get; set; } = true;
|
public bool EnableSearch { get; set; } = true;
|
||||||
|
|
||||||
private string _searchText { get; set; } = string.Empty;
|
private string _searchText { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Search string provided by user
|
||||||
|
/// Options: any string
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
public string SearchText
|
public string SearchText
|
||||||
{
|
{
|
||||||
get
|
get
|
||||||
@ -30,50 +54,92 @@ public partial class SimpleSelect<ValueType> : InputBase
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Events, Methods
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Method for setting the item on select
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="item">item that will be set as selected</param>
|
||||||
|
/// <returns>Methot returns nothing</returns>
|
||||||
private async Task SetSelectedItem(ValueType item)
|
private async Task SetSelectedItem(ValueType item)
|
||||||
{
|
{
|
||||||
//DropDownClassToggle();
|
|
||||||
await ValueChanged.InvokeAsync(item);
|
await ValueChanged.InvokeAsync(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Method for filtering items using 'SearchText' as filter
|
||||||
|
/// </summary>
|
||||||
private void FilterItems()
|
private void FilterItems()
|
||||||
|
{
|
||||||
|
if (Items is not null)
|
||||||
{
|
{
|
||||||
if (string.IsNullOrEmpty(_searchText))
|
if (string.IsNullOrEmpty(_searchText))
|
||||||
{
|
{
|
||||||
Items = OriginalItems;
|
SetItems();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
Items = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower()));
|
FilteredItems = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower())).ToList();
|
||||||
}
|
}
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Event triggered when value changes
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<ValueType> ValueChanged { get; set; }
|
public EventCallback<ValueType> ValueChanged { get; set; }
|
||||||
|
|
||||||
private async Task ChangeValueAsync(ChangeEventArgs args)
|
|
||||||
|
/// <summary>
|
||||||
|
/// Method for setting the FilteredItems collection keeping the original Item collection
|
||||||
|
/// </summary>
|
||||||
|
private void SetItems()
|
||||||
{
|
{
|
||||||
await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
|
if (Items is not null)
|
||||||
|
{
|
||||||
|
FilteredItems = Items.ToList();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnParametersSetAsync()
|
/// <summary>
|
||||||
|
/// Event triggered when the provided Items collection changes
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="sender"></param>
|
||||||
|
/// <param name="e"></param>
|
||||||
|
private void OriginalItems_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
|
||||||
{
|
{
|
||||||
|
SetItems();
|
||||||
OriginalItems = new ObservableCollection<ValueType>(Items);
|
|
||||||
|
|
||||||
if (_searchText.Length > 0)
|
|
||||||
FilterItems();
|
FilterItems();
|
||||||
|
|
||||||
await base.OnParametersSetAsync();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Lifecycle
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Initializing Collections and aplying Filters if provided
|
||||||
|
/// </summary>
|
||||||
|
/// <returns>Nothing gets returned</returns>
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
await base.OnInitializedAsync();
|
await base.OnInitializedAsync();
|
||||||
|
if (Items is null)
|
||||||
if (Required && InputAttributes.ContainsKey("required"))
|
{
|
||||||
InputAttributes.Add("required", true);
|
Items= new ObservableCollection<ValueType>();
|
||||||
}
|
}
|
||||||
|
SetItems();
|
||||||
|
if (_searchText.Length > 0)
|
||||||
|
FilterItems();
|
||||||
|
Items.CollectionChanged += OriginalItems_CollectionChanged;
|
||||||
|
|
||||||
|
component_loaded = true;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
}
|
}
|
@ -3,27 +3,15 @@
|
|||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
<div class="@InputFieldClassList">
|
<div class="@InputFieldClassList">
|
||||||
@if (NumOfRows==1)
|
|
||||||
{
|
|
||||||
<input type="@InputType"
|
<input type="@InputType"
|
||||||
value="@Value"
|
value="@Value"
|
||||||
placeholder="@Placeholder"
|
placeholder="@Placeholder"
|
||||||
disabled="@Disabled"
|
disabled="@Disabled"
|
||||||
readonly="@Readonly"
|
readonly="@Readonly"
|
||||||
|
required="@Required"
|
||||||
@oninput=@ChangeValueAsync
|
@oninput=@ChangeValueAsync
|
||||||
@attributes="@InputAttributes" />
|
@attributes="@InputAttributes" />
|
||||||
|
|
||||||
} else
|
|
||||||
{
|
|
||||||
<textarea type="textarea"
|
|
||||||
rows="@NumOfRows"
|
|
||||||
value="@Value"
|
|
||||||
placeholder="@Placeholder"
|
|
||||||
disabled="@Disabled"
|
|
||||||
readonly="@Readonly"
|
|
||||||
@oninput=@ChangeValueAsync
|
|
||||||
@attributes="@InputAttributes" />
|
|
||||||
}
|
|
||||||
|
|
||||||
<span class="highlight"></span>
|
<span class="highlight"></span>
|
||||||
<span class="bar"></span>
|
<span class="bar"></span>
|
||||||
@ -45,16 +33,15 @@
|
|||||||
{
|
{
|
||||||
<span class="input-glyph button" @onclick="Clear">
|
<span class="input-glyph button" @onclick="Clear">
|
||||||
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
|
<Glyph SVG="@Icons.Material.Rounded.Dangerous" />
|
||||||
<!--<i class='bx bx-x-circle'></i>-->
|
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
@if (IsError)
|
@if (IsError)
|
||||||
{
|
{
|
||||||
<span class="input-glyph error">
|
<span class="input-glyph error">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Error" Color="#D10000" />
|
<Glyph SVG="@Icons.Material.Outlined.Error" />
|
||||||
<!--<i class='bx bx-error-circle'></i>-->
|
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -4,10 +4,24 @@ using Microsoft.AspNetCore.Components;
|
|||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class TextInput : InputBase
|
public partial class TextInput : InputBase
|
||||||
{
|
{
|
||||||
|
#region Parameters
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Setter for the TextInput if input is password field (for hiding characters)
|
||||||
|
/// Options: true or false
|
||||||
|
/// Default: false;
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool IsPassword { get; set; } = false;
|
public bool IsPassword { get; set; } = false;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// String for the component to use if TextInput is password field
|
||||||
|
/// </summary>
|
||||||
|
private string InputType => IsPassword ? "password" : "text";
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Number of rows
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int NumOfRows
|
public int NumOfRows
|
||||||
{
|
{
|
||||||
@ -22,30 +36,40 @@ public partial class TextInput : InputBase
|
|||||||
}
|
}
|
||||||
private int _numberOfLines = 1;
|
private int _numberOfLines = 1;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Value of the TextInput. Used for @bind-Value
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Value { get; set; } = string.Empty;
|
public string Value { get; set; } = string.Empty;
|
||||||
|
|
||||||
private string InputType => IsPassword ? "password" : "text";
|
#endregion
|
||||||
|
|
||||||
|
#region Events, Methods
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Event triggered when value changes
|
||||||
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<string> ValueChanged { get; set; }
|
public EventCallback<string> ValueChanged { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Method that triggers oninput -> when value inside the component changes
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="args"></param>
|
||||||
|
/// <returns></returns>
|
||||||
private async Task ChangeValueAsync(ChangeEventArgs args)
|
private async Task ChangeValueAsync(ChangeEventArgs args)
|
||||||
{
|
{
|
||||||
await ValueChanged.InvokeAsync(args?.Value?.ToString());
|
await ValueChanged.InvokeAsync(args?.Value?.ToString());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Clear the value of the TextInput
|
||||||
|
/// </summary>
|
||||||
|
/// <returns></returns>
|
||||||
private async Task Clear()
|
private async Task Clear()
|
||||||
{
|
{
|
||||||
await ValueChanged.InvokeAsync(string.Empty);
|
await ValueChanged.InvokeAsync(string.Empty);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
#endregion
|
||||||
{
|
|
||||||
await base.OnInitializedAsync();
|
|
||||||
|
|
||||||
if (Required && !InputAttributes.ContainsKey("required"))
|
|
||||||
InputAttributes.Add("required", true);
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -22,6 +22,6 @@ public partial class ToggleInput: InputBase
|
|||||||
public async Task OnChange()
|
public async Task OnChange()
|
||||||
{
|
{
|
||||||
Checked = !Checked;
|
Checked = !Checked;
|
||||||
CheckedChanged.InvokeAsync((bool)Checked);
|
await CheckedChanged.InvokeAsync((bool)Checked);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
18
src/Connected.Components/Enums/Target.cs
Normal file
18
src/Connected.Components/Enums/Target.cs
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
using System.ComponentModel;
|
||||||
|
|
||||||
|
namespace Connected.Enums;
|
||||||
|
public enum Target
|
||||||
|
{
|
||||||
|
[Description("_top")]
|
||||||
|
Top,
|
||||||
|
|
||||||
|
[Description("_parent")]
|
||||||
|
Parent,
|
||||||
|
|
||||||
|
[Description("_blank")]
|
||||||
|
Blank,
|
||||||
|
|
||||||
|
[Description("_self")]
|
||||||
|
Self,
|
||||||
|
|
||||||
|
}
|
@ -33,13 +33,17 @@ public class InputBase : ComponentBase
|
|||||||
public Dictionary<string, object> InputAttributes { get; set; } = new();
|
public Dictionary<string, object> InputAttributes { get; set; } = new();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Show clear button.
|
/// Disable input component
|
||||||
|
/// Options: true or false
|
||||||
|
/// Default: false
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Disabled { get; set; } = false;
|
public bool Disabled { get; set; } = false;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Show clear button.
|
/// Make input component readonly
|
||||||
|
/// Options: true or false
|
||||||
|
/// Default: false
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Readonly { get; set; } = false;
|
public bool Readonly { get; set; } = false;
|
||||||
@ -117,7 +121,7 @@ public class InputBase : ComponentBase
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public string Placeholder { get; set; } = string.Empty;
|
public string Placeholder { get; set; } = string.Empty;
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
if (InputAttributes is null) InputAttributes = new();
|
if (InputAttributes is null) InputAttributes = new();
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Connected.Enums;
|
||||||
|
using Connected.Utilities;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.JSInterop;
|
using Microsoft.JSInterop;
|
||||||
|
|
||||||
namespace Connected;
|
namespace Connected;
|
||||||
@ -24,8 +26,9 @@ internal class Navigation
|
|||||||
/// Navigates to the specified url.
|
/// Navigates to the specified url.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
/// <param name="url">The destination url (relative or absolute).</param>
|
/// <param name="url">The destination url (relative or absolute).</param>
|
||||||
public async Task NavigateTo(string url, Target target=Target._self)
|
public async Task NavigateTo(string url, Target t=Target.Self)
|
||||||
{
|
{
|
||||||
|
string target = Helper.GetEnumDescription<Target>(t);
|
||||||
if (!target.Equals("_self"))
|
if (!target.Equals("_self"))
|
||||||
{
|
{
|
||||||
if (!url.Equals(_navigationManager.Uri))
|
if (!url.Equals(_navigationManager.Uri))
|
||||||
@ -110,10 +113,4 @@ internal class Navigation
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
enum Target
|
|
||||||
{
|
|
||||||
_self,
|
|
||||||
_blank,
|
|
||||||
_parent,
|
|
||||||
_top
|
|
||||||
}
|
|
||||||
|
@ -135,12 +135,24 @@ public static class Helper
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static T? ConvertToType<T>(object variable)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
if (variable is not null)
|
||||||
|
return (T)Convert.ChangeType(variable, typeof(T));
|
||||||
|
return default;
|
||||||
|
} catch
|
||||||
|
{
|
||||||
|
return default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public static bool IsNumeric(string input)
|
public static bool IsNumeric(string input)
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var number = Double.Parse(input);
|
return Double.TryParse(input, out var number);
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
catch
|
catch
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user