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

Progress - Categorizing variables and methods

Browse Source
This commit is contained in:
stm 2023-01-20 11:10:16 +01:00
parent 46c396e33f
commit c3b267dfc4
40 changed files with 3409 additions and 3103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Connected.Components/Annotations/CategoryAttribute.cs
View File

@ -126,7 +126,7 @@ public static class CategoryTypes
public const string Common = "Common";
}
/// <summary>Used in: <see cref="ButtonBase"/>, all components inheriting from it, and <see cref="MudToggleIconButton"/>.</summary>
/// <summary>Used in: <see cref="ButtonBase"/>, all components inheriting from it, and <see cref="ToggleIconButton"/>.</summary>
public static class Button
{
public const string Behavior = "Behavior";

65
src/Connected.Components/Components/AppBar/AppBar.razor.cs
View File

@ -1,12 +1,25 @@
using Connected.Extensions;
using Connected.Utilities;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using System.Security;
namespace Connected.Components;
public partial class AppBar : UIComponent
{
#region Event callbacks
#endregion
#region Content placeholders
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling properties
/// <summary>
/// The classlist determining the toolbar render.
/// </summary>
@ -18,6 +31,12 @@ public partial class AppBar : UIComponent
.AddClass(ToolbarClassList);
}
}
/// <summary>
/// Class names for the nested toolbar. In case of several, separate by spaces.
/// </summary>
[Parameter]
public string? ToolbarClassList { get; set; }
/// <summary>
/// The classlist determining the header render.
@ -32,34 +51,36 @@ public partial class AppBar : UIComponent
.AddClass(HeaderClassList);
}
}
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// If true, appbar will be fixed.
/// </summary>
[Parameter]
public bool Fixed { get; set; } = true;
/// <summary>
/// Class names for the AppBar header. In case of several, separate by spaces.
/// </summary>
[Parameter]
public string? HeaderClassList { get; set; }
/// <summary>
/// Class names for the nested toolbar. In case of several, separate by spaces.
/// </summary>
[Parameter]
public string? ToolbarClassList { get; set; }
/// <summary>
/// Determines the vertical alignment of the AppBar.
/// </summary>
[Parameter]
public VerticalAlignment VerticalAlignment { get; set; }
/// <summary>
/// If true, appbar will be fixed.
/// </summary>
[Parameter]
public bool Fixed { get; set; } = true;
#endregion
#region Lifecycle
#endregion
}

1384
src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs
View File

File diff suppressed because it is too large Load Diff

59
src/Connected.Components/Components/Avatar/Avatar.razor.cs
View File

@ -7,9 +7,43 @@ namespace Connected.Components;
partial class Avatar : UIComponent, IDisposable
{
#region Variables
#endregion
#region Events
internal void ForceRedraw() => StateHasChanged();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// Link to image, if set a image will be displayed instead of text.
/// </summary>
[Parameter]
public string? Image { get; set; }
/// <summary>
/// If set (and Image is also set), will add an alt property to the img element
/// </summary>
[Parameter]
public string? ImageAltText { get; set; }
[CascadingParameter]
protected AvatarGroup? AvatarGroup { get; set; }
#endregion
#region Styling
protected CssBuilder CompiledClassList
{
get
@ -41,18 +75,6 @@ partial class Avatar : UIComponent, IDisposable
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// If set (and Image is also set), will add an alt property to the img element
/// </summary>
[Parameter]
public string? ImageAltText { get; set; }
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
@ -65,12 +87,6 @@ partial class Avatar : UIComponent, IDisposable
[Parameter]
public int Elevation { set; get; } = 0;
/// <summary>
/// Link to image, if set a image will be displayed instead of text.
/// </summary>
[Parameter]
public string? Image { get; set; }
/// <summary>
/// Sets the avatar appearance
/// </summary>
@ -88,6 +104,10 @@ partial class Avatar : UIComponent, IDisposable
[Parameter]
public Variant Variant { get; set; } = Variant.Filled;
#endregion
#region Lifecycle
protected override void OnInitialized()
{
base.OnInitialized();
@ -97,5 +117,6 @@ partial class Avatar : UIComponent, IDisposable
public void Dispose() => AvatarGroup?.RemoveAvatar(this);
internal void ForceRedraw() => StateHasChanged();
#endregion
}

124
src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
View File

@ -7,10 +7,57 @@ namespace Connected.Components;
partial class AvatarGroup : UIComponent
{
#region Variables
private bool _childrenNeedUpdates = false;
private int _spacing = 3;
private List<Avatar> _avatars = new();
#endregion
#region Event callbacks
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
internal void AddAvatar(Avatar avatar)
{
_avatars.Add(avatar);
StateHasChanged();
}
internal void RemoveAvatar(Avatar avatar)
{
_avatars.Remove(avatar);
}
internal bool MaxGroupReached(Avatar avatar)
{
if (_avatars.IndexOf(avatar) < Max)
return true;
else
return false;
}
#endregion
#region Styling properties
internal CssBuilder GetAvatarSpacing() => new CssBuilder()
.AddClass($"ms-n{Spacing}");
internal StyleBuilder GetAvatarZindex(Avatar avatar) => new StyleBuilder()
.AddStyle("z-index", $"{_avatars.Count - _avatars.IndexOf(avatar)}");
private CssBuilder CompiledClassList
{
get
@ -21,6 +68,11 @@ partial class AvatarGroup : UIComponent
.AddClass(ClassList);
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
private CssBuilder CompiledMaxAvatarClassList
{
@ -31,30 +83,12 @@ partial class AvatarGroup : UIComponent
.AddClass(MaxAvatarClass);
}
}
/// <summary>
/// Spacing between avatars where 0 is none and 16 max.
/// Custom class/classes for MaxAvatar
/// </summary>
[Parameter]
public int Spacing
{
get => _spacing;
set
{
if (value != _spacing)
{
_spacing = value;
_childrenNeedUpdates = true;
}
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
[Category(CategoryTypes.AvatarGroup.Appearance)]
public string MaxAvatarClass { get; set; }
/// <summary>
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
/// </summary>
@ -132,44 +166,25 @@ partial class AvatarGroup : UIComponent
}
/// <summary>
/// Custom class/classes for MaxAvatar
/// Spacing between avatars where 0 is none and 16 max.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public string MaxAvatarClass { get; set; }
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
internal void AddAvatar(Avatar avatar)
public int Spacing
{
_avatars.Add(avatar);
StateHasChanged();
get => _spacing;
set
{
if (value != _spacing)
{
_spacing = value;
_childrenNeedUpdates = true;
}
}
}
internal void RemoveAvatar(Avatar avatar)
{
_avatars.Remove(avatar);
}
internal CssBuilder GetAvatarSpacing() => new CssBuilder()
.AddClass($"ms-n{Spacing}");
internal StyleBuilder GetAvatarZindex(Avatar avatar) => new StyleBuilder()
.AddStyle("z-index", $"{_avatars.Count - _avatars.IndexOf(avatar)}");
internal bool MaxGroupReached(Avatar avatar)
{
if (_avatars.IndexOf(avatar) < Max)
return true;
else
return false;
}
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
@ -184,4 +199,7 @@ partial class AvatarGroup : UIComponent
_childrenNeedUpdates = false;
}
}
#endregion
}

8
src/Connected.Components/Components/Avatar/AvatarKind.cs
View File

@ -1,10 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Connected.Components;
namespace Connected.Components;
public enum AvatarKind
{
Undefined = 0,

139
src/Connected.Components/Components/Badge/Badge.razor.cs
View File

@ -9,6 +9,72 @@ namespace Connected.Components;
public partial class Badge : UIComponent
{
#region Variables
#endregion
#region Events
/// <summary>
/// Button click event if set.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
internal Task HandleBadgeClick(MouseEventArgs e)
{
if (OnClick.HasDelegate)
return OnClick.InvokeAsync(e);
return Task.CompletedTask;
}
#endregion
#region Content
private string _content;
/// <summary>
/// Sets the Glyph to use in the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Max value to show when content is integer type.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public int Max { get; set; } = 99;
/// <summary>
/// Content you want inside the badge. Supported types are string and integer.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public object Content { get; set; }
/// <summary>
/// Child content of component, the content that the badge will apply to.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// Badge class names, separated by space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public string BadgeClass { get; set; }
protected string CompiledClassList =>
new CssBuilder("badge-root")
.AddClass(AdditionalClassList)
@ -59,27 +125,6 @@ public partial class Badge : UIComponent
[Category(CategoryTypes.Badge.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// Aligns the badge to bottom.
/// </summary>
[ExcludeFromCodeCoverage]
[Obsolete("Use Origin instead.", true)]
[Parameter] public bool Bottom { get; set; }
/// <summary>
/// Aligns the badge to left.
/// </summary>
[ExcludeFromCodeCoverage]
[Obsolete("Use Origin instead.", true)]
[Parameter] public bool Left { get => Start; set { Start = value; } }
/// <summary>
/// Aligns the badge to the start (Left in LTR and right in RTL).
/// </summary>
[ExcludeFromCodeCoverage]
[Obsolete("Use Origin instead.", true)]
[Parameter] public bool Start { get; set; }
/// <summary>
/// Reduces the size of the badge and hide any of its content.
/// </summary>
@ -101,55 +146,9 @@ public partial class Badge : UIComponent
[Category(CategoryTypes.Badge.Appearance)]
public bool Bordered { get; set; }
/// <summary>
/// Sets the Glyph to use in the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public string Icon { get; set; }
#endregion
/// <summary>
/// Max value to show when content is integer type.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public int Max { get; set; } = 99;
/// <summary>
/// Content you want inside the badge. Supported types are string and integer.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public object Content { get; set; }
/// <summary>
/// Badge class names, separated by space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public string BadgeClass { get; set; }
/// <summary>
/// Child content of component, the content that the badge will apply to.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// Button click event if set.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
private string _content;
internal Task HandleBadgeClick(MouseEventArgs e)
{
if (OnClick.HasDelegate)
return OnClick.InvokeAsync(e);
return Task.CompletedTask;
}
#region Lifecycle
protected override void OnParametersSet()
{
@ -173,4 +172,6 @@ public partial class Badge : UIComponent
_content = null;
}
}
#endregion
}

7
src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs
View File

@ -4,13 +4,20 @@ using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class BreadcrumbLink : UIComponent
{
#region Content
[Parameter]
public BreadcrumbItem Item { get; set; }
[CascadingParameter]
public Breadcrumbs Parent { get; set; }
#endregion
#region Style
private string Classname => new CssBuilder("breadcrumb-item")
.AddClass("disabled", Item?.Disabled)
.Build();
#endregion
}

2
src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor.cs
View File

@ -3,6 +3,8 @@
namespace Connected.Components;
public partial class BreadcrumbSeparator : UIComponent
{
#region Content
[CascadingParameter]
public Breadcrumbs Parent { get; set; }
#endregion
}

70
src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs
View File

@ -6,6 +6,22 @@ namespace Connected.Components;
public partial class Breadcrumbs : UIComponent
{
#region Events
internal void Expand()
{
if (!Collapsed)
return;
Collapsed = false;
StateHasChanged();
}
#endregion
#region Content
/// <summary>
/// A list of breadcrumb items/links.
/// </summary>
@ -20,6 +36,30 @@ public partial class Breadcrumbs : UIComponent
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public string Separator { get; set; } = "/";
/// <summary>
/// Custom expander icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
#endregion
#region Styling
[Parameter]
public string ClassList { get; set; } = string.Empty;
private string Classname => new CssBuilder("breadcrumbs")
.AddClass("typography-body1")
.AddClass(ClassList)
.Build();
internal static string GetItemClassname(BreadcrumbItem item)
{
return new CssBuilder("breadcrumb-item")
.AddClass("disabled", item.Disabled)
.Build();
}
/// <summary>
/// Specifies a RenderFragment to use as the separator.
/// </summary>
@ -34,6 +74,8 @@ public partial class Breadcrumbs : UIComponent
[Category(CategoryTypes.Breadcrumbs.Behavior)]
public RenderFragment<BreadcrumbItem> ItemTemplate { get; set; }
public bool Collapsed { get; private set; } = true;
/// <summary>
/// Controls when (and if) the breadcrumbs will automatically collapse.
/// </summary>
@ -41,32 +83,6 @@ public partial class Breadcrumbs : UIComponent
[Category(CategoryTypes.Breadcrumbs.Behavior)]
public byte? MaxItems { get; set; }
/// <summary>
/// Custom expander icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
#endregion
public bool Collapsed { get; private set; } = true;
private string Classname => new CssBuilder("breadcrumbs")
.AddClass("typography-body1")
.AddClass(AdditionalClassList)
.Build();
internal static string GetItemClassname(BreadcrumbItem item)
{
return new CssBuilder("breadcrumb-item")
.AddClass("disabled", item.Disabled)
.Build();
}
internal void Expand()
{
if (!Collapsed)
return;
Collapsed = false;
StateHasChanged();
}
}

37
src/Connected.Components/Components/BreakpointProvider/BreakpointProvider.razor.cs
View File

@ -6,18 +6,37 @@ namespace Connected.Components;
public partial class BreakpointProvider : UIComponent, IAsyncDisposable
{
#region Variables
private Guid _breakPointListenerSubscriptionId;
public Breakpoint Breakpoint { get; private set; } = Breakpoint.Always;
[Parameter] public EventCallback<Breakpoint> OnBreakpointChanged { get; set; }
[Inject] public IBreakpointService Service { get; set; }
#endregion
#region Events
private void SetBreakpointCallback(Breakpoint breakpoint)
{
InvokeAsync(() =>
{
Breakpoint = breakpoint;
OnBreakpointChanged.InvokeAsync(breakpoint);
StateHasChanged();
}).AndForget();
}
[Parameter] public EventCallback<Breakpoint> OnBreakpointChanged { get; set; }
#endregion
#region Content
[Parameter]
[Category(CategoryTypes.BreakpointProvider.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Lifecycle
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
@ -32,15 +51,9 @@ public partial class BreakpointProvider : UIComponent, IAsyncDisposable
}
}
private void SetBreakpointCallback(Breakpoint breakpoint)
{
InvokeAsync(() =>
{
Breakpoint = breakpoint;
OnBreakpointChanged.InvokeAsync(breakpoint);
StateHasChanged();
}).AndForget();
}
public async ValueTask DisposeAsync() => await Service.Unsubscribe(_breakPointListenerSubscriptionId);
#endregion
}

40
src/Connected.Components/Components/Button/Button.razor.cs
View File

@ -5,6 +5,27 @@ namespace Connected.Components;
public partial class Button : ButtonBase
{
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
@ -17,25 +38,6 @@ public partial class Button : ButtonBase
.AddClass(ClassList);
}
}
#region Styling properties
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
#endregion
}

18
src/Connected.Components/Components/Button/ButtonBase.cs
View File

@ -36,9 +36,13 @@ public abstract class ButtonBase : UIComponent
/// </summary>
[CascadingParameter]
protected IActivatable? Activateable { get; set; }
#endregion
#region Styling properties
/// <summary>
/// The HTML element that will be rendered in the root by the component
/// By default, is a button.
/// </summary>
protected string HtmlTag => ButtonType.ToString().ToLower();
#endregion
#region Behavior properties
@ -65,13 +69,6 @@ public abstract class ButtonBase : UIComponent
/// </summary>
[Parameter]
public bool Disabled { get; set; }
#endregion
/// <summary>
/// The HTML element that will be rendered in the root by the component
/// By default, is a button.
/// </summary>
protected string HtmlTag => ButtonType.ToString().ToLower();
/// <summary>
/// Indicates whether the internal click propagation should be disabled,
@ -79,5 +76,6 @@ public abstract class ButtonBase : UIComponent
/// </summary>
protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
#endregion
}

65
src/Connected.Components/Components/Button/Fab.razor.cs
View File

@ -7,6 +7,38 @@ namespace Connected.Components;
public partial class Fab : ButtonBase
{
#region Content
/// <summary>
/// If applied Glyph will be added at the start of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string StartIcon { get; set; }
/// <summary>
/// If applied Glyph will be added at the end of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string EndIcon { get; set; }
/// <summary>
/// If applied the text will be added to the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Label { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Title { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("button-root mud-fab")
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
@ -28,25 +60,6 @@ public partial class Fab : ButtonBase
[Category(CategoryTypes.Button.Appearance)]
public Size Size { get; set; } = Size.Large;
/// <summary>
/// If applied Glyph will be added at the start of the component.
/// </summary>
[Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; }
/// <summary>
/// If applied Glyph will be added at the start of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string StartIcon { get; set; }
/// <summary>
/// If applied Glyph will be added at the end of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string EndIcon { get; set; }
/// <summary>
/// The color of the icon. It supports the theme colors.
/// </summary>
@ -60,18 +73,6 @@ public partial class Fab : ButtonBase
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Size IconSize { get; set; } = Size.Medium;
#endregion
/// <summary>
/// If applied the text will be added to the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Label { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Title { get; set; }
}

44
src/Connected.Components/Components/Button/IconButton.razor.cs
View File

@ -5,28 +5,7 @@ namespace Connected.Components;
public partial class IconButton : ButtonBase
{
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("button-root glyph-button")
.AddClass(ClassList);
}
}
/// <summary>
/// Child content of component, only shows if Glyph is null or Empty.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#region EventCallbacks
#endregion
#region Content placeholders
#region Content
/// <summary>
/// The Icon that will be used in the component.
/// </summary>
@ -38,9 +17,16 @@ public partial class IconButton : ButtonBase
/// </summary>
[Parameter]
public string? IconTitle { get; set; }
/// <summary>
/// Child content of component, only shows if Glyph is null or Empty.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling properties
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
@ -52,5 +38,17 @@ public partial class IconButton : ButtonBase
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("button-root glyph-button")
.AddClass(ClassList);
}
}
#endregion
}

4
src/Connected.Components/Components/Button/ToggleIconButton.razor
View File

@ -6,8 +6,8 @@
ClassList="@ClassList"
Clicked="Toggle"
Disabled="Disabled"
Icon="@(Toggled ? ToggledGlyph : Glyph)"
IconTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
Icon="@(Toggled ? ToggledIcon : Icon)"
IconTitle="@(Toggled && ToggledIconTitle != null ? ToggledIconTitle : IconTitle)"
Variant="Variant"
@attributes="CustomAttributes"
/>

112
src/Connected.Components/Components/Button/ToggleIconButton.razor.cs
View File

@ -4,67 +4,12 @@ namespace Connected.Components;
public partial class ToggleIconButton : UIComponent
{
#region EventCallbacks
#region Events
/// <summary>
/// Fires whenever toggled is changed.
/// </summary>
[Parameter]
public EventCallback<bool> ToggledChanged { get; set; }
#endregion
#region Content placeholders
/// <summary>
/// The glyph that will be used in the untoggled state.
/// </summary>
[Parameter]
public string? Glyph { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
public string? GlyphTitle { get; set; }
/// <summary>
/// The glyph that will be used in the toggled state.
/// </summary>
[Parameter]
public string? ToggledGlyph { get; set; }
/// <summary>
/// GlyphTitle used in toggled state, if different.
/// </summary>
[Parameter]
public string? ToggledGlyphTitle { get; set; }
#endregion
#region Styling properties
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
#endregion
#region Behavior properties
/// <summary>
/// If true, the button will be disabled.
/// </summary>
[Parameter]
public bool Disabled { get; set; }
/// <summary>
/// The button toggled state.
/// </summary>
[Parameter]
public bool Toggled { get; set; }
#endregion
public async Task Toggle()
{
@ -86,4 +31,59 @@ public partial class ToggleIconButton : UIComponent
await ToggledChanged.InvokeAsync(Toggled);
}
}
#endregion
#region Content
/// <summary>
/// The glyph that will be used in the untoggled state.
/// </summary>
[Parameter]
public string? Icon { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
public string? IconTitle { get; set; }
/// <summary>
/// The glyph that will be used in the toggled state.
/// </summary>
[Parameter]
public string? ToggledIcon { get; set; }
/// <summary>
/// GlyphTitle used in toggled state, if different.
/// </summary>
[Parameter]
public string? ToggledIconTitle { get; set; }
#endregion
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// If true, the button will be disabled.
/// </summary>
[Parameter]
public bool Disabled { get; set; }
/// <summary>
/// The button toggled state.
/// </summary>
[Parameter]
public bool Toggled { get; set; }
#endregion
}

128
src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs
View File

@ -7,69 +7,75 @@ namespace Connected.Components;
public partial class ButtonGroup : UIComponent
{
protected string Classname =>
new CssBuilder("button-group-root")
.AddClass($"button-group-override-styles", OverrideStyles)
.AddClass($"button-group-{Variant.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
.AddClass($"button-group-vertical", VerticalAlign)
.AddClass($"button-group-horizontal", !VerticalAlign)
.AddClass($"button-group-disable-elevation", DisableElevation)
.AddClass($"button-group-rtl", RightToLeft)
.AddClass(AdditionalClassList)
.Build();
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// If true, the button group will be displayed vertically.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool VerticalAlign { get; set; } = false;
/// <summary>
/// If true, no drop-shadow will be used.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool DisableElevation { get; set; } = false;
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Variant Variant { get; set; } = Variant.Text;
protected string Classname =>
new CssBuilder("button-group-root")
.AddClass($"button-group-override-styles", OverrideStyles)
.AddClass($"button-group-{Variant.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
.AddClass($"button-group-vertical", VerticalAlign)
.AddClass($"button-group-horizontal", !VerticalAlign)
.AddClass($"button-group-disable-elevation", DisableElevation)
.AddClass($"button-group-rtl", RightToLeft)
.AddClass(AdditionalClassList)
.Build();
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
/// <summary>
/// If true, the button group will override the styles of the individual buttons.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool OverrideStyles { get; set; } = true;
/// <summary>
/// If true, the button group will override the styles of the individual buttons.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool OverrideStyles { get; set; } = true;
#endregion
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// If true, the button group will be displayed vertically.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool VerticalAlign { get; set; } = false;
/// <summary>
/// If true, no drop-shadow will be used.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool DisableElevation { get; set; } = false;
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Variant Variant { get; set; } = Variant.Text;
}

17
src/Connected.Components/Components/Card/Card.razor.cs
View File

@ -6,6 +6,16 @@ namespace Connected.Components;
public partial class Card : UIComponent
{
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("card")
.AddClass(AdditionalClassList)
@ -31,11 +41,6 @@ public partial class Card : UIComponent
[Parameter]
[Category(CategoryTypes.Card.Appearance)]
public bool Outlined { get; set; }
#endregion
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
}

7
src/Connected.Components/Components/Card/CardActions.razor.cs
View File

@ -6,15 +6,22 @@ namespace Connected.Components;
public partial class CardActions : UIComponent
{
#region Style
protected string Classname =>
new CssBuilder("card-actions")
.AddClass(AdditionalClassList)
.Build();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

7
src/Connected.Components/Components/Card/CardContent.razor.cs
View File

@ -6,15 +6,22 @@ namespace Connected.Components;
public partial class CardContent : UIComponent
{
#region Style
protected string Classname =>
new CssBuilder("card-content")
.AddClass(AdditionalClassList)
.Build();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

17
src/Connected.Components/Components/Card/CardHeader.razor.cs
View File

@ -6,7 +6,8 @@ namespace Connected.Components;
public partial class CardHeader : UIComponent
{
protected string Classname =>
#region Style
protected string Classname =>
new CssBuilder("card-header")
.AddClass(AdditionalClassList)
.Build();
@ -32,10 +33,16 @@ public partial class CardHeader : UIComponent
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment CardHeaderActions { get; set; }
/// <summary>
/// Optional child content
/// </summary>
[Parameter]
#endregion
#region Content
/// <summary>
/// Optional child content
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

20
src/Connected.Components/Components/Card/CardMedia.razor.cs
View File

@ -6,6 +6,7 @@ namespace Connected.Components;
public partial class CardMedia : UIComponent
{
#region Style
protected string StyleString =>
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
.Build();
@ -15,6 +16,17 @@ public partial class CardMedia : UIComponent
.AddClass(AdditionalClassList)
.Build();
/// <summary>
/// Specifies the height of the image in px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public int Height { get; set; } = 300;
#endregion
#region Content
/// <summary>
/// GlyphTitle of the image used for accessibility.
/// </summary>
@ -29,10 +41,6 @@ public partial class CardMedia : UIComponent
[Category(CategoryTypes.Card.Behavior)]
public string Image { get; set; }
/// <summary>
/// Specifies the height of the image in px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public int Height { get; set; } = 300;
#endregion
}

274
src/Connected.Components/Components/Carousel/Carousel.razor.cs
View File

@ -8,6 +8,102 @@ namespace Connected.Components;
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
{
#region Variables
private Timer _timer;
private bool _autoCycle = true;
private ThemeColor _currentColor = ThemeColor.Inherit;
private TimeSpan _cycleTimeout = TimeSpan.FromSeconds(5);
private void TimerElapsed(object stateInfo) => InvokeAsync(async () => await TimerTickAsync());
#endregion
#region Events
/// <summary>
/// Called when selected Index changed on base class
/// </summary>
protected override void SelectionChanged()
{
InvokeAsync(async () => await ResetTimerAsync());
_currentColor = SelectedContainer?.Color ?? ThemeColor.Inherit;
}
//When an item is added, it automatically checks the color
public override void AddItem(CarouselItem item)
{
Items.Add(item);
if (Items.Count - 1 == SelectedIndex)
{
_currentColor = item.Color;
StateHasChanged();
}
}
/// <summary>
/// Provides Selection changes by horizontal swipe gesture
/// </summary>
private void OnSwipe(SwipeDirection direction)
{
if (!EnableSwipeGesture)
{
return;
}
switch (direction)
{
case SwipeDirection.LeftToRight:
if (RightToLeft) Next();
else Previous();
break;
case SwipeDirection.RightToLeft:
if (RightToLeft) Previous();
else Next();
break;
}
}
/// <summary>
/// Immediately starts the AutoCycle timer
/// </summary>
private ValueTask StartTimerAsync()
{
if (AutoCycle)
_timer?.Change(AutoCycleTime, TimeSpan.Zero);
return ValueTask.CompletedTask;
}
/// <summary>
/// Immediately stops the AutoCycle timer
/// </summary>
private ValueTask StopTimerAsync()
{
_timer?.Change(Timeout.Infinite, Timeout.Infinite);
return ValueTask.CompletedTask;
}
/// <summary>
/// Stops and restart the AutoCycle timer
/// </summary>
private async ValueTask ResetTimerAsync()
{
await StopTimerAsync();
await StartTimerAsync();
}
/// <summary>
/// Changes the SelectedIndex to a next one (or restart on 0)
/// </summary>
private async ValueTask TimerTickAsync()
{
await InvokeAsync(Next);
}
#endregion
#region Styling
protected string Classname =>
new CssBuilder("carousel")
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
@ -26,12 +122,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
.AddClass(BulletsClass)
.Build();
private Timer _timer;
private bool _autoCycle = true;
private ThemeColor _currentColor = ThemeColor.Inherit;
private TimeSpan _cycleTimeout = TimeSpan.FromSeconds(5);
private void TimerElapsed(object stateInfo) => InvokeAsync(async () => await TimerTickAsync());
private static Position ConvertPosition(Position position)
{
return position switch
@ -61,12 +151,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
[Category(CategoryTypes.Carousel.Appearance)]
public Position ArrowsPosition { get; set; } = Position.Center;
/// <summary>
/// Gets or Sets if bar with Bullets must be visible
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter] public bool ShowBullets { get; set; } = true;
/// <summary>
/// Sets the position of the bullets. By default, the position is the Bottom position
/// </summary>
@ -80,16 +164,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public ThemeColor? BulletsColor { get; set; }
/// <summary>
/// Gets or Sets if bottom bar with Delimiters must be visible.
/// Deprecated, use ShowBullets instead.
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Obsolete($"Use {nameof(ShowBullets)} instead", false)]
[ExcludeFromCodeCoverage]
[Parameter] public bool ShowDelimiters { get => ShowBullets; set => ShowBullets = value; }
/// <summary>
/// Gets or Sets the Delimiters color.
/// If not set, the color is determined based on the <see cref="MudCarouselItem.Color"/> property of the active child.
@ -100,48 +174,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
[ExcludeFromCodeCoverage]
[Parameter] public ThemeColor? DelimitersColor { get => BulletsColor; set => BulletsColor = value; }
/// <summary>
/// Gets or Sets automatic cycle on item collection.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public bool AutoCycle
{
get => _autoCycle;
set
{
_autoCycle = value;
if (_autoCycle)
InvokeAsync(async () => await ResetTimerAsync());
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Gets or Sets the Auto Cycle time
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public TimeSpan AutoCycleTime
{
get => _cycleTimeout;
set
{
_cycleTimeout = value;
if (_autoCycle == true)
InvokeAsync(async () => await ResetTimerAsync());
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Gets or Sets custom class(es) for 'Next' and 'Previous' arrows
/// </summary>
@ -214,13 +246,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public RenderFragment<bool> BulletTemplate { get; set; }
/// <summary>
/// Gets or Sets if swipe gestures are allowed for touch devices.
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter]
public bool EnableSwipeGesture { get; set; } = true;
/// <summary>
/// Gets or Sets the Template for Delimiters.
/// Deprecated, use BulletsTemplate instead.
@ -230,91 +255,78 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
[ExcludeFromCodeCoverage]
[Parameter] public RenderFragment<bool> DelimiterTemplate { get => BulletTemplate; set => BulletTemplate = value; }
#endregion
#region Behavior
/// <summary>
/// Gets or Sets if bar with Bullets must be visible
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter] public bool ShowBullets { get; set; } = true;
/// <summary>
/// Called when selected Index changed on base class
/// Gets or Sets if bottom bar with Delimiters must be visible.
/// Deprecated, use ShowBullets instead.
/// </summary>
protected override void SelectionChanged()
{
InvokeAsync(async () => await ResetTimerAsync());
[Category(CategoryTypes.Carousel.Behavior)]
[Obsolete($"Use {nameof(ShowBullets)} instead", false)]
[ExcludeFromCodeCoverage]
[Parameter] public bool ShowDelimiters { get => ShowBullets; set => ShowBullets = value; }
_currentColor = SelectedContainer?.Color ?? ThemeColor.Inherit;
}
//When an item is added, it automatically checks the color
public override void AddItem(CarouselItem item)
/// <summary>
/// Gets or Sets automatic cycle on item collection.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public bool AutoCycle
{
Items.Add(item);
if (Items.Count - 1 == SelectedIndex)
get => _autoCycle;
set
{
_currentColor = item.Color;
StateHasChanged();
_autoCycle = value;
if (_autoCycle)
InvokeAsync(async () => await ResetTimerAsync());
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Provides Selection changes by horizontal swipe gesture
/// Gets or Sets the Auto Cycle time
/// </summary>
private void OnSwipe(SwipeDirection direction)
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public TimeSpan AutoCycleTime
{
if (!EnableSwipeGesture)
get => _cycleTimeout;
set
{
return;
}
_cycleTimeout = value;
switch (direction)
{
case SwipeDirection.LeftToRight:
if (RightToLeft) Next();
else Previous();
break;
if (_autoCycle == true)
InvokeAsync(async () => await ResetTimerAsync());
case SwipeDirection.RightToLeft:
if (RightToLeft) Previous();
else Next();
break;
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Immediately starts the AutoCycle timer
/// </summary>
private ValueTask StartTimerAsync()
{
if (AutoCycle)
_timer?.Change(AutoCycleTime, TimeSpan.Zero);
return ValueTask.CompletedTask;
}
/// <summary>
/// Immediately stops the AutoCycle timer
/// </summary>
private ValueTask StopTimerAsync()
{
_timer?.Change(Timeout.Infinite, Timeout.Infinite);
return ValueTask.CompletedTask;
}
/// <summary>
/// Stops and restart the AutoCycle timer
/// </summary>
private async ValueTask ResetTimerAsync()
{
await StopTimerAsync();
await StartTimerAsync();
}
/// <summary>
/// Changes the SelectedIndex to a next one (or restart on 0)
/// Gets or Sets if swipe gestures are allowed for touch devices.
/// </summary>
private async ValueTask TimerTickAsync()
{
await InvokeAsync(Next);
}
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter]
public bool EnableSwipeGesture { get; set; } = true;
#endregion
#region Lifecycle
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
@ -346,4 +358,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
}
}
}
#endregion
}

28
src/Connected.Components/Components/Carousel/CarouselItem.razor.cs
View File

@ -7,6 +7,19 @@ namespace Connected.Components;
public partial class CarouselItem : UIComponent, IDisposable
{
#region Variables
private bool _disposed = false;
#endregion
#region Content
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public RenderFragment ChildContent { get; set; }
[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("carousel-item")
.AddClass($"carousel-item-{Color.ToDescription()}")
@ -35,14 +48,6 @@ public partial class CarouselItem : UIComponent, IDisposable
.AddClass(AdditionalClassList)
.Build();
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public RenderFragment ChildContent { get; set; }
[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
@ -71,21 +76,24 @@ public partial class CarouselItem : UIComponent, IDisposable
[Category(CategoryTypes.Carousel.Appearance)]
public string CustomTransitionExit { get; set; }
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
public bool IsVisible => Parent != null && (Parent.LastContainer == this || Parent.SelectedIndex == Parent.Items.IndexOf(this));
#endregion
#region Lifecycle
protected override Task OnInitializedAsync()
{
Parent?.AddItem(this);
return Task.CompletedTask;
}
private bool _disposed = false;
public void Dispose()
{
_disposed = true;
Parent?.Items.Remove(this);
}
#endregion
}

189
src/Connected.Components/Components/Chart/Chart.razor.cs
View File

@ -8,99 +8,12 @@ namespace Connected.Components;
public partial class Chart : UIComponent
{
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public double[] InputData { get; set; } = Array.Empty<double>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] InputLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] XAxisLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public List<ChartSeries> ChartSeries { get; set; } = new();
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public ChartOptions ChartOptions { get; set; } = new();
/// <summary>
/// RenderFragment for costumization inside the chart's svg.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public RenderFragment CustomGraphics { get; set; }
protected string Classname =>
new CssBuilder("chart")
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
.AddClass(AdditionalClassList)
.Build();
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
/// <summary>
/// The Type of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public ChartType ChartType { get; set; }
/// <summary>
/// The Width of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Width { get; set; } = "80%";
/// <summary>
/// The Height of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Height { get; set; } = "80%";
/// <summary>
/// The placement direction of the legend if used.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public Position LegendPosition { get; set; } = Position.Bottom;
private Position ConvertLegendPosition(Position position)
{
return position switch
{
Position.Start => RightToLeft ? Position.Right : Position.Left,
Position.End => RightToLeft ? Position.Left : Position.Right,
_ => position
};
}
#region Variables
private int _selectedIndex;
#endregion
/// <summary>
/// Selected index of a portion of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public int SelectedIndex
{
get => _selectedIndex;
set
{
if (value != _selectedIndex)
{
_selectedIndex = value;
SelectedIndexChanged.InvokeAsync(value);
}
}
}
#region Events
/// <summary>
/// Selected index of a portion of the chart.
/// </summary>
@ -124,6 +37,102 @@ public partial class Chart : UIComponent
return d.ToString(format);
}
private Position ConvertLegendPosition(Position position)
{
return position switch
{
Position.Start => RightToLeft ? Position.Right : Position.Left,
Position.End => RightToLeft ? Position.Left : Position.Right,
_ => position
};
}
#endregion
#region Styling
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public ChartOptions ChartOptions { get; set; } = new();
/// <summary>
/// RenderFragment for costumization inside the chart's svg.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public RenderFragment CustomGraphics { get; set; }
protected string Classname =>
new CssBuilder("chart")
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
.AddClass(AdditionalClassList)
.Build();
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
/// <summary>
/// The Width of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Width { get; set; } = "80%";
/// <summary>
/// The Height of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Height { get; set; } = "80%";
/// <summary>
/// The placement direction of the legend if used.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public Position LegendPosition { get; set; } = Position.Bottom;
#endregion
#region Behavior
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public double[] InputData { get; set; } = Array.Empty<double>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] InputLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] XAxisLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public List<ChartSeries> ChartSeries { get; set; } = new();
/// <summary>
/// The Type of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public ChartType ChartType { get; set; }
/// <summary>
/// Selected index of a portion of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public int SelectedIndex
{
get => _selectedIndex;
set
{
if (value != _selectedIndex)
{
_selectedIndex = value;
SelectedIndexChanged.InvokeAsync(value);
}
}
}
#endregion
}

5
src/Connected.Components/Components/Chart/Charts/Bar.razor.cs
View File

@ -4,6 +4,7 @@ namespace Connected.Components;
partial class Bar : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgPath> _horizontalLines = new();
@ -16,7 +17,9 @@ partial class Bar : Chart
private List<ChartSeries> _series = new();
private List<SvgPath> _bars = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
@ -147,4 +150,6 @@ partial class Bar : Chart
_legends.Add(legend);
}
}
#endregion
}

7
src/Connected.Components/Components/Chart/Charts/Donut.razor.cs
View File

@ -4,6 +4,7 @@ namespace Connected.Components;
partial class Donut : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgCircle> _circles = new();
@ -12,6 +13,10 @@ partial class Donut : Chart
protected string ParentWidth => ChartParent?.Width;
protected string ParentHeight => ChartParent?.Height;
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
_circles.Clear();
@ -57,4 +62,6 @@ partial class Donut : Chart
}
}
#endregion
}

8
src/Connected.Components/Components/Chart/Charts/Line.razor.cs
View File

@ -4,6 +4,8 @@ namespace Connected.Components;
partial class Line : Chart
{
#region Variables
private const int MaxHorizontalGridLines = 100;
[CascadingParameter] public Chart ChartParent { get; set; }
@ -19,6 +21,10 @@ partial class Line : Chart
private List<SvgPath> _chartLines = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
@ -228,4 +234,6 @@ partial class Line : Chart
_legends.Add(legend);
}
}
#endregion
}

6
src/Connected.Components/Components/Chart/Charts/Pie.razor.cs
View File

@ -4,11 +4,16 @@ namespace Connected.Components;
partial class Pie : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgPath> _paths = new();
private List<SvgLegend> _legends = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
_paths.Clear();
@ -52,4 +57,5 @@ partial class Pie : Chart
counter += 1;
}
}
#endregion
}

273
src/Connected.Components/Components/CheckBox/CheckBox.razor.cs
View File

@ -9,134 +9,13 @@ namespace Connected.Components;
public partial class CheckBox<T> : BooleanInput<T>
{
protected string Classname =>
new CssBuilder("input-control-boolean-input")
.AddClass(AdditionalClassList)
.Build();
protected string LabelClassname =>
new CssBuilder("checkbox")
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
.Build();
protected string CheckBoxClassname =>
new CssBuilder("button-root mud-icon-button")
.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
.AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
.AddClass($"checkbox-dense", Dense)
.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.Build();
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The base color of the component in its none active/unchecked state. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Radio.Appearance)]
public ThemeColor? UnCheckedColor { get; set; } = null;
/// <summary>
/// The text/label will be displayed next to the checkbox if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string Label { get; set; }
/// <summary>
/// The position of the text/label.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
/// <summary>
/// If true, the checkbox can be controlled with the keyboard.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool KeyboardEnabled { get; set; } = true;
/// <summary>
/// If true, disables ripple effect.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool DisableRipple { get; set; }
/// <summary>
/// If true, compact padding will be applied.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool Dense { get; set; }
/// <summary>
/// The Size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// Custom checked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string CheckedIcon { get; set; } = Icons.Material.Filled.CheckBox;
/// <summary>
/// Custom unchecked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string UncheckedIcon { get; set; } = Icons.Material.Filled.CheckBoxOutlineBlank;
/// <summary>
/// Custom indeterminate icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;
/// <summary>
/// Define if the checkbox can cycle again through indeterminate status.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public bool TriState { get; set; }
private string GetIcon()
{
if (BoolValue == true)
{
return CheckedIcon;
}
if (BoolValue == false)
{
return UncheckedIcon;
}
return IndeterminateIcon;
}
#region Variables
private IKeyInterceptor _keyInterceptor;
[Inject] private IKeyInterceptorFactory _keyInterceptorFactory { get; set; }
private string _elementId = "checkbox" + Guid.NewGuid().ToString().Substring(0, 8);
#endregion
#region Events
protected override Task OnChange(ChangeEventArgs args)
{
Modified = true;
@ -202,12 +81,144 @@ public partial class CheckBox<T> : BooleanInput<T>
break;
}
}
#endregion
private IKeyInterceptor _keyInterceptor;
[Inject] private IKeyInterceptorFactory _keyInterceptorFactory { get; set; }
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
private string _elementId = "checkbox" + Guid.NewGuid().ToString().Substring(0, 8);
#region Styling
protected string Classname =>
new CssBuilder("input-control-boolean-input")
.AddClass(AdditionalClassList)
.Build();
protected string LabelClassname =>
new CssBuilder("checkbox")
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
.Build();
protected string CheckBoxClassname =>
new CssBuilder("button-root mud-icon-button")
.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
.AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
.AddClass($"checkbox-dense", Dense)
.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.Build();
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The base color of the component in its none active/unchecked state. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Radio.Appearance)]
public ThemeColor? UnCheckedColor { get; set; } = null;
/// <summary>
/// If true, disables ripple effect.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool DisableRipple { get; set; }
/// <summary>
/// If true, compact padding will be applied.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool Dense { get; set; }
/// <summary>
/// The Size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// Custom checked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string CheckedIcon { get; set; } = Icons.Material.Filled.CheckBox;
/// <summary>
/// Custom unchecked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string UncheckedIcon { get; set; } = Icons.Material.Filled.CheckBoxOutlineBlank;
/// <summary>
/// Custom indeterminate icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;
private string GetIcon()
{
if (BoolValue == true)
{
return CheckedIcon;
}
if (BoolValue == false)
{
return UncheckedIcon;
}
return IndeterminateIcon;
}
#endregion
#region Behavior
/// <summary>
/// The text/label will be displayed next to the checkbox if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string Label { get; set; }
/// <summary>
/// The position of the text/label.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
/// <summary>
/// If true, the checkbox can be controlled with the keyboard.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool KeyboardEnabled { get; set; } = true;
/// <summary>
/// Define if the checkbox can cycle again through indeterminate status.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public bool TriState { get; set; }
#endregion
#region Lifecycle
protected override void OnInitialized()
{
base.OnInitialized();
@ -251,4 +262,6 @@ public partial class CheckBox<T> : BooleanInput<T>
}
}
}
#endregion
}

338
src/Connected.Components/Components/Chip/Chip.razor.cs
View File

@ -10,11 +10,101 @@ namespace Connected.Components;
public partial class Chip : UIComponent, IDisposable
{
#region Variables
private bool _isSelected;
[Inject] public NavigationManager UriHelper { get; set; }
[Inject] public IJsApiService JsApiService { get; set; }
#endregion
#region Events
internal void ForceRerender() => StateHasChanged();
protected internal async Task OnClickHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
if (ChipSet != null)
{
_ = ChipSet.OnChipClicked(this);
}
if (Href != null)
{
// TODO: use MudElement to render <a> and this code can be removed. we know that it has potential problems on iOS
if (string.IsNullOrWhiteSpace(Target))
UriHelper.NavigateTo(Href, ForceLoad);
else
await JsApiService.Open(Href, Target);
}
else
{
await OnClick.InvokeAsync(ev);
if (Command?.CanExecute(CommandParameter) ?? false)
{
Command.Execute(CommandParameter);
}
}
}
protected async Task OnCloseHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
await OnClose.InvokeAsync(this);
ChipSet?.OnChipDeleted(this);
StateHasChanged();
}
/// <summary>
/// Chip click event, if set the chip focus, hover and click effects are applied.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
/// <summary>
/// Chip delete event, if set the delete icon will be visible.
/// </summary>
[Parameter] public EventCallback<Chip> OnClose { get; set; }
#endregion
#region Content
[CascadingParameter] ChipSet ChipSet { get; set; }
/// <summary>
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Href { get; set; }
/// <summary>
/// The target attribute specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Target { get; set; }
/// <summary>
/// Command executed when the user clicks on an element.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public ICommand Command { get; set; }
/// <summary>
/// Command parameter.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public object CommandParameter { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("chip")
.AddClass($"chip-{GetVariant().ToDescription()}")
@ -57,8 +147,6 @@ public partial class Chip : UIComponent, IDisposable
}
}
[CascadingParameter] ChipSet ChipSet { get; set; }
/// <summary>
/// The color of the component.
/// </summary>
@ -87,13 +175,6 @@ public partial class Chip : UIComponent, IDisposable
[Category(CategoryTypes.Chip.Appearance)]
public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
/// <summary>
/// Avatar Glyph, Overrides the regular Glyph if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Avatar { get; set; }
/// <summary>
/// Avatar CSS Class, appends to Chips default avatar classes.
/// </summary>
@ -108,20 +189,6 @@ public partial class Chip : UIComponent, IDisposable
[Category(CategoryTypes.Chip.Appearance)]
public bool Label { get; set; }
/// <summary>
/// If true, the chip will be displayed in disabled state and no events possible.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool Disabled { get; set; }
/// <summary>
/// Sets the Glyph to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Custom checked icon.
/// </summary>
@ -150,6 +217,92 @@ public partial class Chip : UIComponent, IDisposable
[Category(CategoryTypes.Chip.Appearance)]
public bool DisableRipple { get; set; }
#endregion
#region Behavior
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsSelected
{
get => _isSelected;
set
{
if (_isSelected == value)
return;
_isSelected = value;
StateHasChanged();
}
}
/// <summary>
/// If false, this chip has not been seen before
/// </summary>
public bool DefaultProcessed { get; set; }
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsChecked
{
get => _isSelected && ChipSet?.Filter == true;
}
/// <summary>
/// If true, force browser to redirect outside component router-space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public bool ForceLoad { get; set; }
/// <summary>
/// If true, this chip is selected by default if used in a ChipSet.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool? Default { get; set; }
/// <summary>
/// A string you want to associate with the chip. If the ChildContent is not set this will be shown as chip text.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Text { get; set; }
/// <summary>
/// A value that should be managed in the SelectedValues collection.
/// Note: do not change the value during the chip's lifetime
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public object Value { get; set; }
/// <summary>
/// Avatar Glyph, Overrides the regular Glyph if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Avatar { get; set; }
/// <summary>
/// If true, the chip will be displayed in disabled state and no events possible.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool Disabled { get; set; }
/// <summary>
/// Sets the Glyph to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
@ -168,101 +321,9 @@ public partial class Chip : UIComponent, IDisposable
get => Href;
set => Href = value;
}
#endregion
/// <summary>
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Href { get; set; }
/// <summary>
/// The target attribute specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Target { get; set; }
/// <summary>
/// A string you want to associate with the chip. If the ChildContent is not set this will be shown as chip text.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Text { get; set; }
/// <summary>
/// A value that should be managed in the SelectedValues collection.
/// Note: do not change the value during the chip's lifetime
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public object Value { get; set; }
/// <summary>
/// If true, force browser to redirect outside component router-space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public bool ForceLoad { get; set; }
/// <summary>
/// If true, this chip is selected by default if used in a ChipSet.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool? Default { get; set; }
/// <summary>
/// Command executed when the user clicks on an element.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public ICommand Command { get; set; }
/// <summary>
/// Command parameter.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public object CommandParameter { get; set; }
/// <summary>
/// Chip click event, if set the chip focus, hover and click effects are applied.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
/// <summary>
/// Chip delete event, if set the delete icon will be visible.
/// </summary>
[Parameter] public EventCallback<Chip> OnClose { get; set; }
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsChecked
{
get => _isSelected && ChipSet?.Filter == true;
}
/// <summary>
/// If false, this chip has not been seen before
/// </summary>
public bool DefaultProcessed { get; set; }
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsSelected
{
get => _isSelected;
set
{
if (_isSelected == value)
return;
_isSelected = value;
StateHasChanged();
}
}
#region Lifecycle
protected override void OnInitialized()
{
@ -271,53 +332,12 @@ public partial class Chip : UIComponent, IDisposable
Value = this;
}
protected internal async Task OnClickHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
if (ChipSet != null)
{
_ = ChipSet.OnChipClicked(this);
}
if (Href != null)
{
// TODO: use MudElement to render <a> and this code can be removed. we know that it has potential problems on iOS
if (string.IsNullOrWhiteSpace(Target))
UriHelper.NavigateTo(Href, ForceLoad);
else
await JsApiService.Open(Href, Target);
}
else
{
await OnClick.InvokeAsync(ev);
if (Command?.CanExecute(CommandParameter) ?? false)
{
Command.Execute(CommandParameter);
}
}
}
protected async Task OnCloseHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
await OnClose.InvokeAsync(this);
ChipSet?.OnChipDeleted(this);
StateHasChanged();
}
protected override Task OnInitializedAsync()
{
ChipSet?.Add(this);
return base.OnInitializedAsync();
}
internal void ForceRerender() => StateHasChanged();
//Exclude because we don't test to catching exception yet
[ExcludeFromCodeCoverage]
public void Dispose()
@ -331,5 +351,5 @@ public partial class Chip : UIComponent, IDisposable
/* ignore! */
}
}
#endregion
}

621
src/Connected.Components/Components/ChipSet/ChipSet.razor.cs
View File

@ -6,337 +6,344 @@ namespace Connected.Components;
public partial class ChipSet : UIComponent, IDisposable
{
#region Variables
private IEqualityComparer<object> _comparer;
private HashSet<object> _selectedValues;
private HashSet<object> _initialSelectedValues;
private HashSet<Chip> _chips = new();
private bool _filter;
private bool _disposed;
#endregion
protected string Classname =>
new CssBuilder("chipset")
.AddClass(AdditionalClassList)
.Build();
#region Events
/// <summary>
/// Called when the selected chip changes, in Choice mode
/// </summary>
[Parameter]
public EventCallback<Chip> SelectedChipChanged { get; set; }
/// <summary>
/// Called when the selection changed, in Filter mode
/// </summary>
[Parameter]
public EventCallback<Chip[]> SelectedChipsChanged { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// The current selected value.
/// Note: make the list Clickable for item selection to work.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public ICollection<object> SelectedValues
{
get => _selectedValues;
set
{
if (value == null)
SetSelectedValues(new object[0]);
else
SetSelectedValues(value.ToArray()).AndForget();
}
}
/// <summary>
/// Allows to select more than one chip.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool MultiSelection { get; set; } = false;
/// <summary>
/// Called whenever the selection changed
/// </summary>
[Parameter] public EventCallback<ICollection<object>> SelectedValuesChanged { get; set; }
internal Task SetSelectedValues(object[] values)
{
HashSet<object> newValues = null;
if (values == null)
values = new object[0];
if (MultiSelection)
newValues = new HashSet<object>(values, _comparer);
else
{
newValues = new HashSet<object>(_comparer);
if (values.Length > 0)
newValues.Add(values.First());
}
// avoid update with same values
if (_selectedValues.IsEqualTo(newValues))
return Task.CompletedTask;
_selectedValues = newValues;
foreach (var chip in _chips.ToArray())
{
var isSelected = _selectedValues.Contains(chip.Value);
chip.IsSelected = isSelected;
}
return NotifySelection();
}
/// <summary>
/// Will not allow to deselect the selected chip in single selection mode.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool Mandatory { get; set; } = false;
/// <summary>
/// Called when a Chip was deleted (by click on the close icon)
/// </summary>
[Parameter]
public EventCallback<Chip> OnClose { get; set; }
internal Task Add(Chip chip)
{
_chips.Add(chip);
if (_selectedValues.Contains(chip.Value))
chip.IsSelected = true;
return CheckDefault(chip);
}
/// <summary>
/// Will make all chips closable.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool AllClosable { get; set; } = false;
internal void Remove(Chip chip)
{
_chips.Remove(chip);
if (chip.IsSelected)
{
_selectedValues.Remove(chip.Value);
NotifySelection().AndForget();
}
}
/// <summary>
/// Will show a check-mark for the selected components.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Appearance)]
public bool Filter
{
get => _filter;
set
{
if (_filter == value)
return;
_filter = value;
StateHasChanged();
foreach (var chip in _chips)
chip.ForceRerender();
}
}
private async Task CheckDefault(Chip chip)
{
if (!MultiSelection)
return;
if (chip.DefaultProcessed)
return;
chip.DefaultProcessed = true;
if (chip.Default == null)
return;
var oldSelected = chip.IsSelected;
chip.IsSelected = chip.Default == true;
if (chip.IsSelected != oldSelected)
{
if (chip.IsSelected)
_selectedValues.Add(chip.Value);
else
_selectedValues.Remove(chip.Value);
await NotifySelection();
}
}
/// <summary>
/// Will make all chips read only.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool ReadOnly { get; set; } = false;
internal Task OnChipClicked(Chip chip)
{
var wasSelected = chip.IsSelected;
if (MultiSelection)
{
chip.IsSelected = !chip.IsSelected;
}
else
{
foreach (var ch in _chips)
{
ch.IsSelected = (ch == chip); // <-- exclusively select the one chip only, thus all others must be deselected
}
if (!Mandatory)
chip.IsSelected = !wasSelected;
}
UpdateSelectedValues();
return NotifySelection();
}
/// <summary>
/// The currently selected chip in Choice mode
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public Chip SelectedChip
{
get { return _chips.OfType<Chip>().FirstOrDefault(x => x.IsSelected); }
set
{
if (value == null)
{
foreach (var chip in _chips)
{
chip.IsSelected = false;
}
}
else
{
foreach (var chip in _chips)
{
chip.IsSelected = (chip == value);
}
}
this.InvokeAsync(StateHasChanged);
}
}
private void UpdateSelectedValues()
{
_selectedValues = new HashSet<object>(_chips.Where(x => x.IsSelected).Select(x => x.Value), _comparer);
}
/// <summary>
/// Called when the selected chip changes, in Choice mode
/// </summary>
[Parameter]
public EventCallback<Chip> SelectedChipChanged { get; set; }
private object[] _lastSelectedValues = null;
/// <summary>
/// The currently selected chips in Filter mode
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public Chip[] SelectedChips
{
get { return _chips.OfType<Chip>().Where(x => x.IsSelected).ToArray(); }
set
{
if (value == null || value.Length == 0)
{
foreach (var chip in _chips)
{
chip.IsSelected = false;
}
}
else
{
var selected = new HashSet<Chip>(value);
foreach (var chip in _chips)
{
chip.IsSelected = selected.Contains(chip);
}
}
StateHasChanged();
}
}
private async Task NotifySelection()
{
if (_disposed)
return;
// to avoid endless notification loops we check if selection has really changed
if (_selectedValues.IsEqualTo(_lastSelectedValues))
return;
_lastSelectedValues = _selectedValues.ToArray();
await SelectedChipChanged.InvokeAsync(SelectedChip);
await SelectedChipsChanged.InvokeAsync(SelectedChips);
await SelectedValuesChanged.InvokeAsync(SelectedValues);
StateHasChanged();
}
protected override void OnInitialized()
{
base.OnInitialized();
if (_selectedValues == null)
_selectedValues = new HashSet<object>(_comparer);
_initialSelectedValues = new HashSet<object>(_selectedValues, _comparer);
}
public void OnChipDeleted(Chip chip)
{
Remove(chip);
OnClose.InvokeAsync(chip);
}
private IEqualityComparer<object> _comparer;
private HashSet<object> _selectedValues;
private HashSet<object> _initialSelectedValues;
/// <summary>
/// The Comparer to use for comparing selected values internally.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public IEqualityComparer<object> Comparer
{
get => _comparer;
set
{
_comparer = value;
// Apply comparer and refresh selected values
_selectedValues = new HashSet<object>(_selectedValues, _comparer);
SelectedValues = _selectedValues;
}
}
/// <summary>
/// Called when the selection changed, in Filter mode
/// </summary>
[Parameter]
public EventCallback<Chip[]> SelectedChipsChanged { get; set; }
private async Task SelectDefaultChips()
{
if (!MultiSelection)
{
var anySelected = false;
var defaultChip = _chips.LastOrDefault(chip => chip.Default == true);
if (defaultChip != null)
{
defaultChip.IsSelected = true;
anySelected = true;
}
if (anySelected)
{
UpdateSelectedValues();
await NotifySelection();
}
}
}
#endregion
/// <summary>
/// The current selected value.
/// Note: make the list Clickable for item selection to work.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public ICollection<object> SelectedValues
{
get => _selectedValues;
set
{
if (value == null)
SetSelectedValues(new object[0]);
else
SetSelectedValues(value.ToArray()).AndForget();
}
}
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// Called whenever the selection changed
/// </summary>
[Parameter] public EventCallback<ICollection<object>> SelectedValuesChanged { get; set; }
/// <summary>
/// The currently selected chip in Choice mode
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public Chip SelectedChip
{
get { return _chips.OfType<Chip>().FirstOrDefault(x => x.IsSelected); }
set
{
if (value == null)
{
foreach (var chip in _chips)
{
chip.IsSelected = false;
}
}
else
{
foreach (var chip in _chips)
{
chip.IsSelected = (chip == value);
}
}
this.InvokeAsync(StateHasChanged);
}
}
internal Task SetSelectedValues(object[] values)
{
HashSet<object> newValues = null;
if (values == null)
values = new object[0];
if (MultiSelection)
newValues = new HashSet<object>(values, _comparer);
else
{
newValues = new HashSet<object>(_comparer);
if (values.Length > 0)
newValues.Add(values.First());
}
// avoid update with same values
if (_selectedValues.IsEqualTo(newValues))
return Task.CompletedTask;
_selectedValues = newValues;
foreach (var chip in _chips.ToArray())
{
var isSelected = _selectedValues.Contains(chip.Value);
chip.IsSelected = isSelected;
}
return NotifySelection();
}
/// <summary>
/// The currently selected chips in Filter mode
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public Chip[] SelectedChips
{
get { return _chips.OfType<Chip>().Where(x => x.IsSelected).ToArray(); }
set
{
if (value == null || value.Length == 0)
{
foreach (var chip in _chips)
{
chip.IsSelected = false;
}
}
else
{
var selected = new HashSet<Chip>(value);
foreach (var chip in _chips)
{
chip.IsSelected = selected.Contains(chip);
}
}
StateHasChanged();
}
}
/// <summary>
/// Called when a Chip was deleted (by click on the close icon)
/// </summary>
[Parameter]
public EventCallback<Chip> OnClose { get; set; }
#endregion
internal Task Add(Chip chip)
{
_chips.Add(chip);
if (_selectedValues.Contains(chip.Value))
chip.IsSelected = true;
return CheckDefault(chip);
}
#region Styling
protected string Classname =>
new CssBuilder("chipset")
.AddClass(AdditionalClassList)
.Build();
#endregion
internal void Remove(Chip chip)
{
_chips.Remove(chip);
if (chip.IsSelected)
{
_selectedValues.Remove(chip.Value);
NotifySelection().AndForget();
}
}
#region Behavior
/// <summary>
/// The Comparer to use for comparing selected values internally.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public IEqualityComparer<object> Comparer
{
get => _comparer;
set
{
_comparer = value;
// Apply comparer and refresh selected values
_selectedValues = new HashSet<object>(_selectedValues, _comparer);
SelectedValues = _selectedValues;
}
}
/// <summary>
/// Will make all chips read only.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool ReadOnly { get; set; } = false;
private async Task CheckDefault(Chip chip)
{
if (!MultiSelection)
return;
if (chip.DefaultProcessed)
return;
chip.DefaultProcessed = true;
if (chip.Default == null)
return;
var oldSelected = chip.IsSelected;
chip.IsSelected = chip.Default == true;
if (chip.IsSelected != oldSelected)
{
if (chip.IsSelected)
_selectedValues.Add(chip.Value);
else
_selectedValues.Remove(chip.Value);
await NotifySelection();
}
}
/// <summary>
/// Allows to select more than one chip.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool MultiSelection { get; set; } = false;
private HashSet<Chip> _chips = new();
private bool _filter;
/// <summary>
/// Will not allow to deselect the selected chip in single selection mode.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool Mandatory { get; set; } = false;
internal Task OnChipClicked(Chip chip)
{
var wasSelected = chip.IsSelected;
if (MultiSelection)
{
chip.IsSelected = !chip.IsSelected;
}
else
{
foreach (var ch in _chips)
{
ch.IsSelected = (ch == chip); // <-- exclusively select the one chip only, thus all others must be deselected
}
if (!Mandatory)
chip.IsSelected = !wasSelected;
}
UpdateSelectedValues();
return NotifySelection();
}
/// <summary>
/// Will make all chips closable.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Behavior)]
public bool AllClosable { get; set; } = false;
private void UpdateSelectedValues()
{
_selectedValues = new HashSet<object>(_chips.Where(x => x.IsSelected).Select(x => x.Value), _comparer);
}
/// <summary>
/// Will show a check-mark for the selected components.
/// </summary>
[Parameter]
[Category(CategoryTypes.ChipSet.Appearance)]
public bool Filter
{
get => _filter;
set
{
if (_filter == value)
return;
_filter = value;
StateHasChanged();
foreach (var chip in _chips)
chip.ForceRerender();
}
}
#endregion
private object[] _lastSelectedValues = null;
#region Lifecycle
public void Dispose()
{
_disposed = true;
}
protected override void OnInitialized()
{
base.OnInitialized();
if (_selectedValues == null)
_selectedValues = new HashSet<object>(_comparer);
_initialSelectedValues = new HashSet<object>(_selectedValues, _comparer);
}
protected override async void OnAfterRender(bool firstRender)
{
if (firstRender)
await SelectDefaultChips();
base.OnAfterRender(firstRender);
}
#endregion
private async Task NotifySelection()
{
if (_disposed)
return;
// to avoid endless notification loops we check if selection has really changed
if (_selectedValues.IsEqualTo(_lastSelectedValues))
return;
_lastSelectedValues = _selectedValues.ToArray();
await SelectedChipChanged.InvokeAsync(SelectedChip);
await SelectedChipsChanged.InvokeAsync(SelectedChips);
await SelectedValuesChanged.InvokeAsync(SelectedValues);
StateHasChanged();
}
public void OnChipDeleted(Chip chip)
{
Remove(chip);
OnClose.InvokeAsync(chip);
}
protected override async void OnAfterRender(bool firstRender)
{
if (firstRender)
await SelectDefaultChips();
base.OnAfterRender(firstRender);
}
private async Task SelectDefaultChips()
{
if (!MultiSelection)
{
var anySelected = false;
var defaultChip = _chips.LastOrDefault(chip => chip.Default == true);
if (defaultChip != null)
{
defaultChip.IsSelected = true;
anySelected = true;
}
if (anySelected)
{
UpdateSelectedValues();
await NotifySelection();
}
}
}
private bool _disposed;
public void Dispose()
{
_disposed = true;
}
}

96
src/Connected.Components/Components/Collapse/Collapse.razor.cs
View File

@ -7,6 +7,7 @@ namespace Connected.Components;
public partial class Collapse : UIComponent
{
#region Variables
internal enum CollapseState
{
Entering, Entered, Exiting, Exited
@ -16,7 +17,58 @@ public partial class Collapse : UIComponent
private bool _expanded, _isRendered, _updateHeight;
private ElementReference _wrapper;
internal CollapseState _state = CollapseState.Exited;
#endregion
#region Events
[Parameter] public EventCallback OnAnimationEnd { get; set; }
[Parameter] public EventCallback<bool> ExpandedChanged { get; set; }
internal async Task UpdateHeight()
{
try
{
_height = (await _wrapper.MudGetBoundingClientRectAsync())?.Height ?? 0;
}
catch (Exception ex) when (ex is JSDisconnectedException || ex is TaskCanceledException)
{
_height = 0;
}
if (MaxHeight != null && _height > MaxHeight)
{
_height = MaxHeight.Value;
}
}
public void AnimationEnd()
{
if (_state == CollapseState.Entering)
{
_state = CollapseState.Entered;
StateHasChanged();
}
else if (_state == CollapseState.Exiting)
{
_state = CollapseState.Exited;
StateHasChanged();
}
OnAnimationEnd.InvokeAsync(Expanded);
}
#endregion
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter] public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
protected string Stylename =>
new StyleBuilder()
.AddStyle("max-height", MaxHeight.ToPx(), MaxHeight != null)
@ -66,15 +118,6 @@ public partial class Collapse : UIComponent
/// </summary>
[Parameter] public int? MaxHeight { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public EventCallback OnAnimationEnd { get; set; }
[Parameter] public EventCallback<bool> ExpandedChanged { get; set; }
/// <summary>
/// Modified Animation duration that scales with height parameter.
/// Basic implementation for now but should be a math formula to allow it to scale between 0.1s and 1s for the effect to be consistently smooth.
@ -95,23 +138,9 @@ public partial class Collapse : UIComponent
set { }
}
internal async Task UpdateHeight()
{
try
{
_height = (await _wrapper.MudGetBoundingClientRectAsync())?.Height ?? 0;
}
catch (Exception ex) when (ex is JSDisconnectedException || ex is TaskCanceledException)
{
_height = 0;
}
if (MaxHeight != null && _height > MaxHeight)
{
_height = MaxHeight.Value;
}
}
#endregion
#region Lifecycle
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
@ -127,19 +156,6 @@ public partial class Collapse : UIComponent
}
await base.OnAfterRenderAsync(firstRender);
}
#endregion
public void AnimationEnd()
{
if (_state == CollapseState.Entering)
{
_state = CollapseState.Entered;
StateHasChanged();
}
else if (_state == CollapseState.Exiting)
{
_state = CollapseState.Exited;
StateHasChanged();
}
OnAnimationEnd.InvokeAsync(Expanded);
}
}
}

1158
src/Connected.Components/Components/ColorPicker/ColorPicker.razor.cs
View File

File diff suppressed because it is too large Load Diff

3
src/Connected.Components/Components/Container/Container.razor.cs
View File

@ -5,9 +5,6 @@ namespace Connected.Components;
public partial class Container : UIComponent
{
#region Event callbacks
#endregion
#region Content placeholders
/// <summary>

587
src/Connected.Components/Components/DatePicker/DatePickerBase.razor.cs
View File

@ -8,223 +8,100 @@ namespace Connected.Components;
public abstract partial class DatePickerBase : Picker<DateTime?>
{
#region Variables
private bool _dateFormatTouched;
protected DatePickerBase() : base(new DefaultConverter<DateTime?>
{
Format = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern,
Culture = CultureInfo.CurrentCulture
})
{
AdornmentAriaLabel = "Open Date Picker";
}
[Inject] protected IScrollManager ScrollManager { get; set; }
/// <summary>
/// Max selectable date.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public DateTime? MaxDate { get; set; }
/// <summary>
/// Min selectable date.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public DateTime? MinDate { get; set; }
/// <summary>
/// First view to show in the MudDatePicker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public OpenTo OpenTo { get; set; } = OpenTo.Date;
/// <summary>
/// String Format for selected date view
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string DateFormat
{
get
{
return (Converter as DefaultConverter<DateTime?>)?.Format;
}
set
{
if (Converter is DefaultConverter<DateTime?> defaultConverter)
{
defaultConverter.Format = value;
_dateFormatTouched = true;
}
DateFormatChanged(value);
}
}
/// <summary>
/// Date format value change hook for descendants.
/// </summary>
protected virtual Task DateFormatChanged(string newFormat)
{
return Task.CompletedTask;
}
protected override bool SetCulture(CultureInfo value)
{
if (!base.SetCulture(value))
return false;
if (!_dateFormatTouched && Converter is DefaultConverter<DateTime?> defaultConverter)
defaultConverter.Format = value.DateTimeFormat.ShortDatePattern;
return true;
}
/// <summary>
/// Defines on which day the week starts. Depends on the value of Culture.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DayOfWeek? FirstDayOfWeek { get; set; } = null;
/// <summary>
/// The current month of the date picker (two-way bindable). This changes when the user browses through the calender.
/// The month is represented as a DateTime which is always the first day of that month. You can also set this to define which month is initially shown. If not set, the current month is shown.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DateTime? PickerMonth
{
get => _picker_month;
set
{
if (value == _picker_month)
return;
_picker_month = value;
InvokeAsync(StateHasChanged);
PickerMonthChanged.InvokeAsync(value);
}
}
private DateTime? _picker_month;
/// <summary>
/// Fired when the date changes.
/// </summary>
[Parameter] public EventCallback<DateTime?> PickerMonthChanged { get; set; }
/// <summary>
/// Sets the amount of time in milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int ClosingDelay { get; set; } = 100;
/// <summary>
/// Number of months to display in the calendar
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int DisplayMonths { get; set; } = 1;
/// <summary>
/// Maximum number of months in one row
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public int? MaxMonthColumns { get; set; }
/// <summary>
/// Start month when opening the picker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DateTime? StartMonth { get; set; }
/// <summary>
/// Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public bool ShowWeekNumbers { get; set; }
/// <summary>
/// Format of the selected date in the title. By default, this is "ddd, dd MMM" which abbreviates day and month names.
/// For instance, display the long names like this "dddd, dd. MMMM".
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public string TitleDateFormat { get; set; } = "ddd, dd MMM";
/// <summary>
/// If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public bool AutoClose { get; set; }
/// <summary>
/// Function to determine whether a date is disabled
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public Func<DateTime, bool> IsDateDisabledFunc
{
get => _isDateDisabledFunc;
set
{
_isDateDisabledFunc = value ?? (_ => false);
}
}
private Func<DateTime, bool> _isDateDisabledFunc = _ => false;
/// <summary>
/// Function to conditionally apply new classes to specific days
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public Func<DateTime, string> AdditionalDateClassesFunc { get; set; }
/// <summary>
/// Custom previous icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public string PreviousIcon { get; set; } = Icons.Material.Filled.ChevronLeft;
/// <summary>
/// Custom next icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public string NextIcon { get; set; } = Icons.Material.Filled.ChevronRight;
/// <summary>
/// Set a predefined fix year - no year can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixYear { get; set; }
/// <summary>
/// Set a predefined fix month - no month can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixMonth { get; set; }
/// <summary>
/// Set a predefined fix day - no day can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixDay { get; set; }
protected virtual bool IsRange { get; } = false;
protected OpenTo CurrentView;
/// <summary>
/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
/// </summary>
private string _componentId = Guid.NewGuid().ToString();
/// <summary>
/// Is set to true to scroll to the actual year after the next render
/// </summary>
private bool _scrollToYearAfterRender = false;
#endregion
#region Events
private Typo GetMonthTypo(DateTime month)
{
if (GetMonthStart(0) == month)
return Typo.h5;
return Typo.subtitle1;
}
protected abstract DateTime GetCalendarStartOfMonth();
private int GetCalendarDayOfMonth(DateTime date)
{
return Culture.Calendar.GetDayOfMonth(date);
}
/// <summary>
/// Converts gregorian year into whatever year it is in the provided culture
/// </summary>
/// <param name="year">Gregorian year</param>
/// <returns>Year according to culture</returns>
protected abstract int GetCalendarYear(int year);
public async void ScrollToYear()
{
_scrollToYearAfterRender = false;
var id = $"{_componentId}{GetMonthStart(0).Year}";
await ScrollManager.ScrollToYearAsync(id);
StateHasChanged();
}
private int GetMinYear()
{
if (MinDate.HasValue)
return MinDate.Value.Year;
return DateTime.Today.Year - 100;
}
private int GetMaxYear()
{
if (MaxDate.HasValue)
return MaxDate.Value.Year;
return DateTime.Today.Year + 100;
}
private Typo GetYearTypo(int year)
{
if (year == GetMonthStart(0).Year)
return Typo.h5;
return Typo.subtitle1;
}
private void OnFormattedDateClick()
{
// todo: raise an event the user can handle
}
private IEnumerable<DateTime> GetAllMonths()
{
var current = GetMonthStart(0);
var calendarYear = Culture.Calendar.GetYear(current);
var firstOfCalendarYear = Culture.Calendar.ToDateTime(calendarYear, 1, 1, 0, 0, 0, 0);
for (var i = 0; i < Culture.Calendar.GetMonthsInYear(calendarYear); i++)
yield return Culture.Calendar.AddMonths(firstOfCalendarYear, i);
}
private string GetAbbreviatedMonthName(DateTime month)
{
var calendarMonth = Culture.Calendar.GetMonth(month);
return Culture.DateTimeFormat.AbbreviatedMonthNames[calendarMonth - 1];
}
private string GetMonthName(DateTime month)
{
var calendarMonth = Culture.Calendar.GetMonth(month);
return Culture.DateTimeFormat.MonthNames[calendarMonth - 1];
}
protected override void OnPickerOpened()
{
base.OnPickerOpened();
@ -461,39 +338,73 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
_scrollToYearAfterRender = true;
}
}
/// <summary>
/// Date format value change hook for descendants.
/// </summary>
protected virtual Task DateFormatChanged(string newFormat)
{
return Task.CompletedTask;
}
protected override bool SetCulture(CultureInfo value)
{
if (!base.SetCulture(value))
return false;
if (!_dateFormatTouched && Converter is DefaultConverter<DateTime?> defaultConverter)
defaultConverter.Format = value.DateTimeFormat.ShortDatePattern;
return true;
}
/// <summary>
/// Fired when the date changes.
/// </summary>
[Parameter] public EventCallback<DateTime?> PickerMonthChanged { get; set; }
#endregion
#region Content
[Inject] protected IScrollManager ScrollManager { get; set; }
/// <summary>
/// Defines on which day the week starts. Depends on the value of Culture.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DayOfWeek? FirstDayOfWeek { get; set; } = null;
/// <summary>
/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
/// The current month of the date picker (two-way bindable). This changes when the user browses through the calender.
/// The month is represented as a DateTime which is always the first day of that month. You can also set this to define which month is initially shown. If not set, the current month is shown.
/// </summary>
private string _componentId = Guid.NewGuid().ToString();
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DateTime? PickerMonth
{
get => _picker_month;
set
{
if (value == _picker_month)
return;
_picker_month = value;
InvokeAsync(StateHasChanged);
PickerMonthChanged.InvokeAsync(value);
}
}
#endregion
#region Styling
private string GetMonthClasses(DateTime month)
{
if (GetMonthStart(0) == month)
return $"picker-month-selected mud-{Color.ToDescription()}-text";
return null;
}
/// <summary>
/// Is set to true to scroll to the actual year after the next render
/// Function to conditionally apply new classes to specific days
/// </summary>
private bool _scrollToYearAfterRender = false;
public async void ScrollToYear()
{
_scrollToYearAfterRender = false;
var id = $"{_componentId}{GetMonthStart(0).Year}";
await ScrollManager.ScrollToYearAsync(id);
StateHasChanged();
}
private int GetMinYear()
{
if (MinDate.HasValue)
return MinDate.Value.Year;
return DateTime.Today.Year - 100;
}
private int GetMaxYear()
{
if (MaxDate.HasValue)
return MaxDate.Value.Year;
return DateTime.Today.Year + 100;
}
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public Func<DateTime, string> AdditionalDateClassesFunc { get; set; }
private string GetYearClasses(int year)
{
if (year == GetMonthStart(0).Year)
@ -508,57 +419,162 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
.AddClass($"picker-calendar-header-last", month == DisplayMonths - 1)
.Build();
}
/// <summary>
/// Custom previous icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public string PreviousIcon { get; set; } = Icons.Material.Filled.ChevronLeft;
private Typo GetYearTypo(int year)
/// <summary>
/// Custom next icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public string NextIcon { get; set; } = Icons.Material.Filled.ChevronRight;
/// <summary>
/// String Format for selected date view
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string DateFormat
{
if (year == GetMonthStart(0).Year)
return Typo.h5;
return Typo.subtitle1;
get
{
return (Converter as DefaultConverter<DateTime?>)?.Format;
}
set
{
if (Converter is DefaultConverter<DateTime?> defaultConverter)
{
defaultConverter.Format = value;
_dateFormatTouched = true;
}
DateFormatChanged(value);
}
}
#endregion
private void OnFormattedDateClick()
#region Behavior
/// <summary>
/// Max selectable date.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public DateTime? MaxDate { get; set; }
/// <summary>
/// Min selectable date.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public DateTime? MinDate { get; set; }
/// <summary>
/// First view to show in the DatePicker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public OpenTo OpenTo { get; set; } = OpenTo.Date;
/// <summary>
/// Set a predefined fix year - no year can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixYear { get; set; }
/// <summary>
/// Set a predefined fix month - no month can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixMonth { get; set; }
/// <summary>
/// Set a predefined fix day - no day can be selected
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int? FixDay { get; set; }
/// <summary>
/// Sets the amount of time in milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int ClosingDelay { get; set; } = 100;
/// <summary>
/// Number of months to display in the calendar
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public int DisplayMonths { get; set; } = 1;
/// <summary>
/// Maximum number of months in one row
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerAppearance)]
public int? MaxMonthColumns { get; set; }
/// <summary>
/// Start month when opening the picker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public DateTime? StartMonth { get; set; }
/// <summary>
/// Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public bool ShowWeekNumbers { get; set; }
/// <summary>
/// Format of the selected date in the title. By default, this is "ddd, dd MMM" which abbreviates day and month names.
/// For instance, display the long names like this "dddd, dd. MMMM".
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public string TitleDateFormat { get; set; } = "ddd, dd MMM";
/// <summary>
/// If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.PickerBehavior)]
public bool AutoClose { get; set; }
/// <summary>
/// Function to determine whether a date is disabled
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public Func<DateTime, bool> IsDateDisabledFunc
{
// todo: raise an event the user can handle
get => _isDateDisabledFunc;
set
{
_isDateDisabledFunc = value ?? (_ => false);
}
}
private Func<DateTime, bool> _isDateDisabledFunc = _ => false;
#endregion
#region Lifecycle
private IEnumerable<DateTime> GetAllMonths()
protected DatePickerBase() : base(new DefaultConverter<DateTime?>
{
var current = GetMonthStart(0);
var calendarYear = Culture.Calendar.GetYear(current);
var firstOfCalendarYear = Culture.Calendar.ToDateTime(calendarYear, 1, 1, 0, 0, 0, 0);
for (var i = 0; i < Culture.Calendar.GetMonthsInYear(calendarYear); i++)
yield return Culture.Calendar.AddMonths(firstOfCalendarYear, i);
}
private string GetAbbreviatedMonthName(DateTime month)
Format = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern,
Culture = CultureInfo.CurrentCulture
})
{
var calendarMonth = Culture.Calendar.GetMonth(month);
return Culture.DateTimeFormat.AbbreviatedMonthNames[calendarMonth - 1];
AdornmentAriaLabel = "Open Date Picker";
}
private string GetMonthName(DateTime month)
{
var calendarMonth = Culture.Calendar.GetMonth(month);
return Culture.DateTimeFormat.MonthNames[calendarMonth - 1];
}
private string GetMonthClasses(DateTime month)
{
if (GetMonthStart(0) == month)
return $"picker-month-selected mud-{Color.ToDescription()}-text";
return null;
}
private Typo GetMonthTypo(DateTime month)
{
if (GetMonthStart(0) == month)
return Typo.h5;
return Typo.subtitle1;
}
protected override void OnInitialized()
{
base.OnInitialized();
@ -584,17 +600,6 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
ScrollToYear();
}
protected abstract DateTime GetCalendarStartOfMonth();
private int GetCalendarDayOfMonth(DateTime date)
{
return Culture.Calendar.GetDayOfMonth(date);
}
/// <summary>
/// Converts gregorian year into whatever year it is in the provided culture
/// </summary>
/// <param name="year">Gregorian year</param>
/// <returns>Year according to culture</returns>
protected abstract int GetCalendarYear(int year);
#endregion
}

518
src/Connected.Components/Components/DatePicker/DateRangePicker.razor.cs
View File

@ -7,297 +7,305 @@ namespace Connected.Components;
public partial class DateRangePicker : DatePickerBase
{
private DateTime? _firstDate = null, _secondDate;
private DateRange _dateRange;
private Range<string> _rangeText;
#region Variables
private DateTime? _firstDate = null, _secondDate;
private DateRange _dateRange;
private Range<string> _rangeText;
protected override bool IsRange => true;
private RangeInput<string> _rangeInput;
/// <summary>
/// The currently selected range (two-way bindable). If null, then nothing was selected.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Data)]
public DateRange DateRange
{
get => _dateRange;
set => SetDateRangeAsync(value, true).AndForget();
}
#endregion
protected override bool IsRange => true;
#region Events
public DateRangePicker()
{
DisplayMonths = 2;
AdornmentAriaLabel = "Open Date Range Picker";
}
protected override async void OnDayClicked(DateTime dateTime)
{
if (_firstDate == null || _firstDate > dateTime || _secondDate != null)
{
_secondDate = null;
_firstDate = dateTime;
return;
}
/// <summary>
/// Fired when the DateFormat changes.
/// </summary>
[Parameter] public EventCallback<DateRange> DateRangeChanged { get; set; }
_secondDate = dateTime;
if (PickerActions == null || AutoClose)
{
Submit();
/// <summary>
/// The currently selected range (two-way bindable). If null, then nothing was selected.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Data)]
public DateRange DateRange
{
get => _dateRange;
set => SetDateRangeAsync(value, true).AndForget();
}
if (PickerVariant != PickerVariant.Static)
{
await Task.Delay(ClosingDelay);
Close(false);
}
}
}
protected async Task SetDateRangeAsync(DateRange range, bool updateValue)
{
if (_dateRange != range)
{
var doesRangeContainDisabledDates = range?.Start != null && range?.End != null && Enumerable
.Range(0, int.MaxValue)
.Select(index => range.Start.Value.AddDays(index))
.TakeWhile(date => date <= range.End.Value)
.Any(date => IsDateDisabledFunc(date.Date));
protected override void OnOpened()
{
_secondDate = null;
base.OnOpened();
}
if (doesRangeContainDisabledDates)
{
_rangeText = null;
await SetTextAsync(null, false);
return;
}
protected internal override async void Submit()
{
if (ReadOnly)
return;
if (_firstDate == null || _secondDate == null)
return;
_dateRange = range;
_value = range?.End;
await SetDateRangeAsync(new DateRange(_firstDate, _secondDate), true);
if (updateValue)
{
if (_dateRange == null)
{
_rangeText = null;
await SetTextAsync(null, false);
}
else
{
_rangeText = new Range<string>(
Converter.Convert(_dateRange.Start),
Converter.Convert(_dateRange.End));
await SetTextAsync(_dateRange.ToString(Converter), false);
}
}
_firstDate = null;
_secondDate = null;
}
await DateRangeChanged.InvokeAsync(_dateRange);
BeginValidate();
}
}
public override void Clear(bool close = true)
{
DateRange = null;
_firstDate = _secondDate = null;
base.Clear();
}
protected override Task DateFormatChanged(string newFormat)
{
Modified = true;
return SetTextAsync(_dateRange?.ToString(Converter), false);
}
private Range<string> RangeText
{
get => _rangeText;
set
{
if (_rangeText?.Equals(value) ?? value == null)
return;
protected override Task StringValueChanged(string value)
{
Modified = true;
// Update the daterange property (without updating back the Value property)
return SetDateRangeAsync(ParseDateRangeValue(value), false);
}
/// <summary>
/// Fired when the DateFormat changes.
/// </summary>
[Parameter] public EventCallback<DateRange> DateRangeChanged { get; set; }
protected async Task SetDateRangeAsync(DateRange range, bool updateValue)
{
if (_dateRange != range)
{
var doesRangeContainDisabledDates = range?.Start != null && range?.End != null && Enumerable
.Range(0, int.MaxValue)
.Select(index => range.Start.Value.AddDays(index))
.TakeWhile(date => date <= range.End.Value)
.Any(date => IsDateDisabledFunc(date.Date));
Modified = true;
_rangeText = value;
SetDateRangeAsync(ParseDateRangeValue(value?.Start, value?.End), false).AndForget();
}
}
if (doesRangeContainDisabledDates)
{
_rangeText = null;
await SetTextAsync(null, false);
return;
}
private RangeInput<string> _rangeInput;
_dateRange = range;
_value = range?.End;
/// <summary>
/// Focuses the start date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask FocusStartAsync() => _rangeInput.FocusStartAsync();
if (updateValue)
{
if (_dateRange == null)
{
_rangeText = null;
await SetTextAsync(null, false);
}
else
{
_rangeText = new Range<string>(
Converter.Convert(_dateRange.Start),
Converter.Convert(_dateRange.End));
await SetTextAsync(_dateRange.ToString(Converter), false);
}
}
/// <summary>
/// Selects the start date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask SelectStartAsync() => _rangeInput.SelectStartAsync();
await DateRangeChanged.InvokeAsync(_dateRange);
BeginValidate();
}
}
#endregion
/// <summary>
/// Selects the specified range of the start date text
/// </summary>
/// <param name="pos1">Start position of the selection</param>
/// <param name="pos2">End position of the selection</param>
/// <returns></returns>
public ValueTask SelectRangeStartAsync(int pos1, int pos2) => _rangeInput.SelectRangeStartAsync(pos1, pos2);
#region Content
/// <summary>
/// Focuses the end date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask FocusEndAsync() => _rangeInput.FocusEndAsync();
private Range<string> RangeText
{
get => _rangeText;
set
{
if (_rangeText?.Equals(value) ?? value == null)
return;
/// <summary>
/// Selects the end date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask SelectEndAsync() => _rangeInput.SelectEndAsync();
Modified = true;
_rangeText = value;
SetDateRangeAsync(ParseDateRangeValue(value?.Start, value?.End), false).AndForget();
}
}
/// <summary>
/// Selects the specified range of the end date text
/// </summary>
/// <param name="pos1">Start position of the selection</param>
/// <param name="pos2">End position of the selection</param>
/// <returns></returns>
public ValueTask SelectRangeEndAsync(int pos1, int pos2) => _rangeInput.SelectRangeEndAsync(pos1, pos2);
#endregion
protected override Task DateFormatChanged(string newFormat)
{
Modified = true;
return SetTextAsync(_dateRange?.ToString(Converter), false);
}
#region Styling
protected override string GetDayClasses(int month, DateTime day)
{
var b = new CssBuilder("day");
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
{
return b.AddClass("hidden").Build();
}
protected override Task StringValueChanged(string value)
{
Modified = true;
// Update the daterange property (without updating back the Value property)
return SetDateRangeAsync(ParseDateRangeValue(value), false);
}
if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
(_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
{
return b
.AddClass("range")
.AddClass("range-between")
.Build();
}
protected override bool HasValue(DateTime? value)
{
return null != value && value.HasValue;
}
if ((_firstDate != null && day == _firstDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
{
return b.AddClass("selected")
.AddClass("range")
.AddClass("range-start-selected")
.AddClass("range-selection", _firstDate != null)
.AddClass($"theme-{Color.ToDescription()}")
.Build();
}
private DateRange ParseDateRangeValue(string value)
{
return DateRange.TryParse(value, Converter, out var dateRange) ? dateRange : null;
}
if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
{
return b.AddClass("selected")
.AddClass("range")
.AddClass("range-end-selected")
.AddClass($"theme-{Color.ToDescription()}")
.Build();
}
private DateRange ParseDateRangeValue(string start, string end)
{
return DateRange.TryParse(start, end, Converter, out var dateRange) ? dateRange : null;
}
if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
{
return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
}
else if (_firstDate != null && day > _firstDate)
{
return b.AddClass("range")
.AddClass("range-selection", _secondDate == null)
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
.Build();
}
protected override void OnPickerClosed()
{
_firstDate = null;
base.OnPickerClosed();
}
if (day == DateTime.Today)
{
return b.AddClass("current")
.AddClass("range", _firstDate != null && day > _firstDate)
.AddClass("range-selection", _firstDate != null && day > _firstDate)
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
.AddClass($"{Color.ToDescription()}-text")
.Build();
}
protected override string GetDayClasses(int month, DateTime day)
{
var b = new CssBuilder("day");
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
{
return b.AddClass("hidden").Build();
}
return b.Build();
}
#endregion
if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
(_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
{
return b
.AddClass("range")
.AddClass("range-between")
.Build();
}
#region Behavior
if ((_firstDate != null && day == _firstDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
{
return b.AddClass("selected")
.AddClass("range")
.AddClass("range-start-selected")
.AddClass("range-selection", _firstDate != null)
.AddClass($"theme-{Color.ToDescription()}")
.Build();
}
protected override string GetTitleDateString()
{
if (_firstDate != null)
return $"{FormatTitleDate(_firstDate)} - {FormatTitleDate(_secondDate)}";
if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
{
return b.AddClass("selected")
.AddClass("range")
.AddClass("range-end-selected")
.AddClass($"theme-{Color.ToDescription()}")
.Build();
}
return DateRange?.Start != null
? $"{FormatTitleDate(DateRange.Start)} - {FormatTitleDate(DateRange.End)}"
: "";
}
if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
{
return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
}
else if (_firstDate != null && day > _firstDate)
{
return b.AddClass("range")
.AddClass("range-selection", _secondDate == null)
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
.Build();
}
protected override DateTime GetCalendarStartOfMonth()
{
var date = StartMonth ?? DateRange?.Start ?? DateTime.Today;
return date.StartOfMonth(Culture);
}
if (day == DateTime.Today)
{
return b.AddClass("current")
.AddClass("range", _firstDate != null && day > _firstDate)
.AddClass("range-selection", _firstDate != null && day > _firstDate)
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
.AddClass($"{Color.ToDescription()}-text")
.Build();
}
protected override int GetCalendarYear(int year)
{
var date = DateRange?.Start ?? DateTime.Today;
var diff = date.Year - year;
var calenderYear = Culture.Calendar.GetYear(date);
return calenderYear - diff;
}
protected override bool HasValue(DateTime? value)
{
return null != value && value.HasValue;
}
return b.Build();
}
private DateRange ParseDateRangeValue(string value)
{
return DateRange.TryParse(value, Converter, out var dateRange) ? dateRange : null;
}
protected override async void OnDayClicked(DateTime dateTime)
{
if (_firstDate == null || _firstDate > dateTime || _secondDate != null)
{
_secondDate = null;
_firstDate = dateTime;
return;
}
private DateRange ParseDateRangeValue(string start, string end)
{
return DateRange.TryParse(start, end, Converter, out var dateRange) ? dateRange : null;
}
/// <summary>
/// Focuses the start date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask FocusStartAsync() => _rangeInput.FocusStartAsync();
_secondDate = dateTime;
if (PickerActions == null || AutoClose)
{
Submit();
/// <summary>
/// Selects the start date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask SelectStartAsync() => _rangeInput.SelectStartAsync();
if (PickerVariant != PickerVariant.Static)
{
await Task.Delay(ClosingDelay);
Close(false);
}
}
}
/// <summary>
/// Selects the specified range of the start date text
/// </summary>
/// <param name="pos1">Start position of the selection</param>
/// <param name="pos2">End position of the selection</param>
/// <returns></returns>
public ValueTask SelectRangeStartAsync(int pos1, int pos2) => _rangeInput.SelectRangeStartAsync(pos1, pos2);
protected override void OnOpened()
{
_secondDate = null;
base.OnOpened();
}
/// <summary>
/// Focuses the end date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask FocusEndAsync() => _rangeInput.FocusEndAsync();
protected internal override async void Submit()
{
if (ReadOnly)
return;
if (_firstDate == null || _secondDate == null)
return;
/// <summary>
/// Selects the end date of MudDateRangePicker
/// </summary>
/// <returns></returns>
public ValueTask SelectEndAsync() => _rangeInput.SelectEndAsync();
await SetDateRangeAsync(new DateRange(_firstDate, _secondDate), true);
/// <summary>
/// Selects the specified range of the end date text
/// </summary>
/// <param name="pos1">Start position of the selection</param>
/// <param name="pos2">End position of the selection</param>
/// <returns></returns>
public ValueTask SelectRangeEndAsync(int pos1, int pos2) => _rangeInput.SelectRangeEndAsync(pos1, pos2);
#endregion
_firstDate = null;
_secondDate = null;
}
public override void Clear(bool close = true)
{
DateRange = null;
_firstDate = _secondDate = null;
base.Clear();
}
protected override string GetTitleDateString()
{
if (_firstDate != null)
return $"{FormatTitleDate(_firstDate)} - {FormatTitleDate(_secondDate)}";
return DateRange?.Start != null
? $"{FormatTitleDate(DateRange.Start)} - {FormatTitleDate(DateRange.End)}"
: "";
}
protected override DateTime GetCalendarStartOfMonth()
{
var date = StartMonth ?? DateRange?.Start ?? DateTime.Today;
return date.StartOfMonth(Culture);
}
protected override int GetCalendarYear(int year)
{
var date = DateRange?.Start ?? DateTime.Today;
var diff = date.Year - year;
var calenderYear = Culture.Calendar.GetYear(date);
return calenderYear - diff;
}
#region Lifecycle
public DateRangePicker()
{
DisplayMonths = 2;
AdornmentAriaLabel = "Open Date Range Picker";
}
protected override void OnPickerClosed()
{
_firstDate = null;
base.OnPickerClosed();
}
#endregion
}

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

@ -8,7 +8,7 @@
Variant="@Variant"
HelperText="@HelperText"
HelperTextOnFocus="@HelperTextOnFocus"
CounterText="@CounterText"
CounterText="@GetCounterText()"
FullWidth="@FullWidth"
class="@CompiledHelperContainerClassList.Build()"
Error="@HasErrors"

23
src/Connected.Components/Components/Input/Input.razor.cs
View File

@ -198,6 +198,11 @@ public partial class Input<T> : InputBase<T>
/// </summary>
[Parameter] public bool HideSpinButtons { get; set; } = true;
internal override InputType GetInputType()
{
return InputType;
}
/// <summary>
/// Show clear button.
/// </summary>
@ -230,7 +235,7 @@ public partial class Input<T> : InputBase<T>
#region Input field class
[Parameter]
public string InputClass { get; set; } = string.Empty;
public string Class { get; set; } = string.Empty;
protected CssBuilder CompiledInputClass
{
get
@ -240,7 +245,7 @@ public partial class Input<T> : InputBase<T>
.AddClass($"input-root-{Variant.ToDescription()}")
.AddClass($"input-root-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
.AddClass($"input-root-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
.AddClass(InputClass);
.AddClass(Class);
}
}
#endregion
@ -315,7 +320,17 @@ public partial class Input<T> : InputBase<T>
/// <summary>
/// The current character counter, displayed below the text field.
/// </summary>
[Parameter] public string CounterText { get; set; }
[Parameter] public bool ShowCharacterCounter { get; set; }
/// <summary>
/// The current character counter, displayed below the text field.
/// </summary>
public string GetCounterText()
{
if (ShowCharacterCounter)
return Text.Length.ToString();
return string.Empty;
}
private System.Timers.Timer _timer;
@ -381,7 +396,7 @@ public partial class Input<T> : InputBase<T>
[Parameter]
public double Step { get; set; } = 1;
internal override InputType GetInputType() => InputType;
//internal override InputType GetInputType() => InputType;
protected string InputTypeString => InputType.ToDescription();
public ElementReference ElementReference { get; private set; }
private ElementReference _elementReference1;