Compare commits
No commits in common. "53dd3bec33ca88f9bd3601e3e8ebcd288ed49d2e" and "c4ece6e9b7b005e492ed0baa7d751183ae0bbde7" have entirely different histories.
53dd3bec33
...
c4ece6e9b7
12
.gitignore
vendored
12
.gitignore
vendored
@ -414,15 +414,3 @@ FodyWeavers.xsd
|
||||
|
||||
# Minified css files
|
||||
**.min.css
|
||||
|
||||
# css files directly in the wwwroot folder
|
||||
**/wwwroot/**.css
|
||||
|
||||
# Minified js files
|
||||
**.min.js
|
||||
|
||||
# js files directly in the wwwroot folder
|
||||
**/wwwroot/**.js
|
||||
|
||||
# any project with runner in its name
|
||||
**.Runner/**
|
||||
|
||||
12
Connected.Components.Showcase/App.razor
Normal file
12
Connected.Components.Showcase/App.razor
Normal file
@ -0,0 +1,12 @@
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
</Found>
|
||||
<NotFound>
|
||||
<PageTitle>Not found</PageTitle>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<p role="alert">Sorry, there's nothing at this address.</p>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
@ -1,4 +1,4 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net7.0</TargetFramework>
|
||||
@ -7,12 +7,8 @@
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\connected.components\Connected.Components.csproj" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-rc.2.22476.2" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-rc.2.22476.2" PrivateAssets="all" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
5
Connected.Components.Showcase/MainLayout.razor
Normal file
5
Connected.Components.Showcase/MainLayout.razor
Normal file
@ -0,0 +1,5 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<main>
|
||||
@Body
|
||||
</main>
|
||||
3
Connected.Components.Showcase/Pages/Index.razor
Normal file
3
Connected.Components.Showcase/Pages/Index.razor
Normal file
@ -0,0 +1,3 @@
|
||||
@page "/"
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
11
Connected.Components.Showcase/Program.cs
Normal file
11
Connected.Components.Showcase/Program.cs
Normal file
@ -0,0 +1,11 @@
|
||||
using Connected.Components.Showcase;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
@ -3,11 +3,9 @@ Microsoft Visual Studio Solution File, Format Version 12.00
|
||||
# Visual Studio Version 17
|
||||
VisualStudioVersion = 17.4.33020.496
|
||||
MinimumVisualStudioVersion = 10.0.40219.1
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
|
||||
EndProject
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}"
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
@ -23,10 +21,6 @@ Global
|
||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
||||
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
EndGlobalSection
|
||||
GlobalSection(SolutionProperties) = preSolution
|
||||
HideSolutionNode = FALSE
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@inherits UIComponent
|
||||
|
||||
<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="Clicked">
|
||||
<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="OnClick">
|
||||
<div class="@ClassPosition">
|
||||
|
||||
@if (!GlyphVisible)
|
||||
@ -1,4 +1,5 @@
|
||||
using Connected.Extensions;
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using Connected.Extensions;
|
||||
using Connected.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
@ -10,21 +11,21 @@ public partial class Alert : UIComponent
|
||||
[CascadingParameter(Name = "RightToLeft")]
|
||||
public bool RightToLeft { get; set; }
|
||||
/// <summary>
|
||||
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
|
||||
/// Sets the position of the text to the start (Left in LTR and right in RTL).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Start;
|
||||
public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Left;
|
||||
/// <summary>
|
||||
/// The callback, when the close glyph has been clicked.
|
||||
/// The callback, when the close button has been clicked.
|
||||
/// </summary>
|
||||
[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
|
||||
[Parameter] public EventCallback<Alert> CloseGlyphClicked { get; set; }
|
||||
/// <summary>
|
||||
/// Define the glyph used for the close button.
|
||||
/// Define the icon used for the close button.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
|
||||
/// <summary>
|
||||
/// Sets if the alert shows a close glyph.
|
||||
/// Sets if the alert shows a close icon.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool CloseGlyphVisible { get; set; }
|
||||
@ -44,12 +45,12 @@ public partial class Alert : UIComponent
|
||||
[Parameter]
|
||||
public bool Dense { get; set; }
|
||||
/// <summary>
|
||||
/// If true, no alert glyph will be used.
|
||||
/// If true, no alert icon will be used.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool GlyphVisible { get; set; }
|
||||
/// <summary>
|
||||
/// The severity of the alert. This defines the color and glyph used.
|
||||
/// The severity of the alert. This defines the color and icon used.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public Severity Severity { get; set; } = Severity.Normal;
|
||||
@ -64,7 +65,7 @@ public partial class Alert : UIComponent
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
/// <summary>
|
||||
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
||||
/// Custom icon, leave unset to use the standard icon which depends on the Severity
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string Glyph { get; set; } = default!;
|
||||
@ -72,7 +73,7 @@ public partial class Alert : UIComponent
|
||||
/// Raised when the alert is clicked
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<MouseEventArgs> Clicked { get; set; }
|
||||
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
||||
|
||||
protected string ClassList
|
||||
{
|
||||
@ -111,30 +112,32 @@ public partial class Alert : UIComponent
|
||||
|
||||
internal async Task OnCloseGlyphClick()
|
||||
{
|
||||
if (!CloseClicked.HasDelegate)
|
||||
if (CloseGlyphClicked.HasDelegate)
|
||||
{
|
||||
await CloseGlyphClicked.InvokeAsync(this);
|
||||
return;
|
||||
}
|
||||
|
||||
await CloseClicked.InvokeAsync(this);
|
||||
await Task.CompletedTask;
|
||||
}
|
||||
|
||||
//If we can check this exception can include the coverage again
|
||||
[ExcludeFromCodeCoverage]
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
if (!string.IsNullOrEmpty(Glyph))
|
||||
return;
|
||||
|
||||
Glyph = GetGlyphForSeverity(Severity);
|
||||
}
|
||||
|
||||
private string GetGlyphForSeverity(Severity severity)
|
||||
{
|
||||
return Severity switch
|
||||
Glyph = Severity switch
|
||||
{
|
||||
Severity.Normal => Icons.Material.Outlined.EventNote,
|
||||
Severity.Info => Icons.Material.Outlined.Info,
|
||||
Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
|
||||
Severity.Warning => Icons.Material.Outlined.ReportProblem,
|
||||
Severity.Error => Icons.Material.Filled.ErrorOutline,
|
||||
_ => throw new ArgumentOutOfRangeException(nameof(severity)),
|
||||
_ => throw new ArgumentOutOfRangeException(nameof(Severity)),
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
{
|
||||
if (!String.IsNullOrEmpty(Alt))
|
||||
{
|
||||
<img src="@Image" alt="@Alt" class="avatar-img" />
|
||||
<img src="@Image" alt="@Alt" class="mud-avatar-img" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<img src="@Image" class="avatar-img" />
|
||||
<img src="@Image" class="mud-avatar-img" />
|
||||
}
|
||||
}
|
||||
else
|
||||
@ -9,13 +9,13 @@ partial class Avatar : UIComponent, IDisposable
|
||||
{
|
||||
[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
|
||||
protected string Classname =>
|
||||
new CssBuilder("avatar")
|
||||
.AddClass($"avatar-{Size.ToDescriptionString()}")
|
||||
.AddClass($"avatar-rounded", Rounded)
|
||||
.AddClass($"avatar-square", Square)
|
||||
.AddClass($"avatar-{Variant.ToDescriptionString()}")
|
||||
.AddClass($"avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"elevation-{Elevation.ToString()}")
|
||||
new CssBuilder("mud-avatar")
|
||||
.AddClass($"mud-avatar-{Size.ToDescriptionString()}")
|
||||
.AddClass($"mud-avatar-rounded", Rounded)
|
||||
.AddClass($"mud-avatar-square", Square)
|
||||
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}")
|
||||
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"mud-elevation-{Elevation.ToString()}")
|
||||
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
@ -10,14 +10,14 @@ partial class AvatarGroup : UIComponent
|
||||
private bool _childrenNeedUpdates = false;
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("avatar-group")
|
||||
.AddClass($"avatar-group-outlined", Outlined)
|
||||
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
|
||||
new CssBuilder("mud-avatar-group")
|
||||
.AddClass($"mud-avatar-group-outlined", Outlined)
|
||||
.AddClass($"mud-avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
protected string MaxAvatarClassname =>
|
||||
new CssBuilder("avatar-group-max-avatar")
|
||||
new CssBuilder("mud-avatar-group-max-avatar")
|
||||
.AddClass($"ms-n{Spacing}")
|
||||
.AddClass(MaxAvatarClass)
|
||||
.Build();
|
||||
@ -11,7 +11,7 @@
|
||||
{
|
||||
@if (!String.IsNullOrEmpty(Icon))
|
||||
{
|
||||
<Icon Icon="@Icon" Class="icon-badge" />
|
||||
<Icon Icon="@Icon" Class="mud-icon-badge" />
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -10,24 +10,24 @@ namespace Connected.Components;
|
||||
public partial class Badge : UIComponent
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("badge-root")
|
||||
new CssBuilder("mud-badge-root")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
protected string WrapperClass =>
|
||||
new CssBuilder("badge-wrapper")
|
||||
.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
||||
new CssBuilder("mud-badge-wrapper")
|
||||
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
||||
.Build();
|
||||
|
||||
protected string BadgeClassName =>
|
||||
new CssBuilder("badge")
|
||||
.AddClass("badge-dot", Dot)
|
||||
.AddClass("badge-bordered", Bordered)
|
||||
.AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
|
||||
.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
||||
.AddClass($"elevation-{Elevation.ToString()}")
|
||||
.AddClass("theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
|
||||
.AddClass("badge-default", Color == ThemeColor.Default)
|
||||
.AddClass("badge-overlap", Overlap)
|
||||
new CssBuilder("mud-badge")
|
||||
.AddClass("mud-badge-dot", Dot)
|
||||
.AddClass("mud-badge-bordered", Bordered)
|
||||
.AddClass("mud-badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
|
||||
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
||||
.AddClass($"mud-elevation-{Elevation.ToString()}")
|
||||
.AddClass("mud-theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
|
||||
.AddClass("mud-badge-default", Color == ThemeColor.Default)
|
||||
.AddClass("mud-badge-overlap", Overlap)
|
||||
.AddClass(BadgeClass)
|
||||
.Build();
|
||||
|
||||
@ -10,7 +10,7 @@ public partial class BreadcrumbLink : UIComponent
|
||||
[CascadingParameter]
|
||||
public Breadcrumbs Parent { get; set; }
|
||||
|
||||
private string Classname => new CssBuilder("breadcrumb-item")
|
||||
.AddClass("disabled", Item?.Disabled)
|
||||
private string Classname => new CssBuilder("mud-breadcrumb-item")
|
||||
.AddClass("mud-disabled", Item?.Disabled)
|
||||
.Build();
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
@namespace Connected.Components
|
||||
@inherits UIComponent
|
||||
|
||||
<li aria-hidden="true" class="breadcrumb-separator mud-ltr mud-flip-x-rtl">
|
||||
<li aria-hidden="true" class="mud-breadcrumb-separator mud-ltr mud-flip-x-rtl">
|
||||
@if (Parent?.SeparatorTemplate is null)
|
||||
{
|
||||
<span>@Parent?.Separator</span>
|
||||
@ -12,7 +12,7 @@
|
||||
{
|
||||
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
|
||||
<BreadcrumbSeparator></BreadcrumbSeparator>
|
||||
<li class="breadcrumbs-expander" @onclick="Expand">
|
||||
<li class="mud-breadcrumbs-expander" @onclick="Expand">
|
||||
<Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon>
|
||||
</li>
|
||||
<BreadcrumbSeparator></BreadcrumbSeparator>
|
||||
@ -49,15 +49,15 @@ public partial class Breadcrumbs : UIComponent
|
||||
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
|
||||
|
||||
public bool Collapsed { get; private set; } = true;
|
||||
private string Classname => new CssBuilder("breadcrumbs")
|
||||
.AddClass("typography-body1")
|
||||
private string Classname => new CssBuilder("mud-breadcrumbs")
|
||||
.AddClass("mud-typography-body1")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
internal static string GetItemClassname(BreadcrumbItem item)
|
||||
{
|
||||
return new CssBuilder("breadcrumb-item")
|
||||
.AddClass("disabled", item.Disabled)
|
||||
return new CssBuilder("mud-breadcrumb-item")
|
||||
.AddClass("mud-disabled", item.Disabled)
|
||||
.Build();
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
target="@Target"
|
||||
rel="@(Target=="_blank"?"noopener":null)"
|
||||
disabled="@Disabled">
|
||||
<span class="button-label">
|
||||
<span class="mud-button-label">
|
||||
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
||||
{
|
||||
<span class="@StartIconClass">
|
||||
@ -8,25 +8,25 @@ namespace Connected.Components;
|
||||
public partial class Button : ButtonBase
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("button-root mud-button")
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}")
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"width-full", FullWidth)
|
||||
.AddClass($"ripple", !DisableRipple)
|
||||
.AddClass($"button-disable-elevation", DisableElevation)
|
||||
new CssBuilder("mud-button-root mud-button")
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}")
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"mud-width-full", FullWidth)
|
||||
.AddClass($"mud-ripple", !DisableRipple)
|
||||
.AddClass($"mud-button-disable-elevation", DisableElevation)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
protected string StartIconClass =>
|
||||
new CssBuilder("button-icon-start")
|
||||
.AddClass($"button-icon-size-{Size.ToDescriptionString()}")
|
||||
new CssBuilder("mud-button-icon-start")
|
||||
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
|
||||
.AddClass(IconClass)
|
||||
.Build();
|
||||
|
||||
protected string EndIconClass =>
|
||||
new CssBuilder("button-icon-end")
|
||||
.AddClass($"button-icon-size-{Size.ToDescriptionString()}")
|
||||
new CssBuilder("mud-button-icon-end")
|
||||
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
|
||||
.AddClass(IconClass)
|
||||
.Build();
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
rel="@(Target=="_blank"?"noopener":null)"
|
||||
disabled="@Disabled"
|
||||
title="@Title">
|
||||
<span class="fab-label">
|
||||
<span class="mud-fab-label">
|
||||
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
||||
{
|
||||
<Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" />
|
||||
@ -8,12 +8,12 @@ namespace Connected.Components;
|
||||
public partial class Fab : ButtonBase
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("button-root mud-fab")
|
||||
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
|
||||
.AddClass($"fab-{Color.ToDescriptionString()}")
|
||||
.AddClass($"fab-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"ripple", !DisableRipple && !Disabled)
|
||||
.AddClass($"fab-disable-elevation", DisableElevation)
|
||||
new CssBuilder("mud-button-root mud-fab")
|
||||
.AddClass($"mud-fab-extended", !string.IsNullOrEmpty(Label))
|
||||
.AddClass($"mud-fab-{Color.ToDescriptionString()}")
|
||||
.AddClass($"mud-fab-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"mud-ripple", !DisableRipple && !Disabled)
|
||||
.AddClass($"mud-fab-disable-elevation", DisableElevation)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
title="@Title">
|
||||
@if (!String.IsNullOrEmpty(Icon))
|
||||
{
|
||||
<span class="icon-button-label">
|
||||
<span class="mud-icon-button-label">
|
||||
<Icon Glyph="@Icon" Size="@Size" />
|
||||
</span>
|
||||
}
|
||||
@ -8,17 +8,17 @@ namespace Connected.Components;
|
||||
public partial class IconButton : ButtonBase
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("button-root mud-icon-button")
|
||||
.AddClass("button", when: AsButton)
|
||||
.AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"ripple", !DisableRipple)
|
||||
.AddClass($"ripple-icon", !DisableRipple && !AsButton)
|
||||
.AddClass($"icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
|
||||
.AddClass($"icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
|
||||
.AddClass($"button-disable-elevation", DisableElevation)
|
||||
new CssBuilder("mud-button-root mud-icon-button")
|
||||
.AddClass("mud-button", when: AsButton)
|
||||
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
|
||||
.AddClass($"mud-ripple", !DisableRipple)
|
||||
.AddClass($"mud-ripple-icon", !DisableRipple && !AsButton)
|
||||
.AddClass($"mud-icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
|
||||
.AddClass($"mud-icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
|
||||
.AddClass($"mud-button-disable-elevation", DisableElevation)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -8,15 +8,15 @@ 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.ToDescriptionString()}")
|
||||
.AddClass($"button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"button-group-vertical", VerticalAlign)
|
||||
.AddClass($"button-group-horizontal", !VerticalAlign)
|
||||
.AddClass($"button-group-disable-elevation", DisableElevation)
|
||||
.AddClass($"button-group-rtl", RightToLeft)
|
||||
new CssBuilder("mud-button-group-root")
|
||||
.AddClass($"mud-button-group-override-styles", OverrideStyles)
|
||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}")
|
||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"mud-button-group-vertical", VerticalAlign)
|
||||
.AddClass($"mud-button-group-horizontal", !VerticalAlign)
|
||||
.AddClass($"mud-button-group-disable-elevation", DisableElevation)
|
||||
.AddClass($"mud-button-group-rtl", RightToLeft)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -7,7 +7,7 @@ namespace Connected.Components;
|
||||
public partial class Card : UIComponent
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("card")
|
||||
new CssBuilder("mud-card")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -7,7 +7,7 @@ namespace Connected.Components;
|
||||
public partial class CardActions : UIComponent
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("card-actions")
|
||||
new CssBuilder("mud-card-actions")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -7,7 +7,7 @@ namespace Connected.Components;
|
||||
public partial class CardContent : UIComponent
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("card-content")
|
||||
new CssBuilder("mud-card-content")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
||||
@if (CardHeaderAvatar is not null)
|
||||
{
|
||||
<div class="card-header-avatar">@CardHeaderAvatar</div>
|
||||
<div class="mud-card-header-avatar">@CardHeaderAvatar</div>
|
||||
}
|
||||
@if (CardHeaderContent is not null)
|
||||
{
|
||||
<div class="card-header-content">@CardHeaderContent</div>
|
||||
<div class="mud-card-header-content">@CardHeaderContent</div>
|
||||
}
|
||||
@if (CardHeaderActions is not null)
|
||||
{
|
||||
<div class="card-header-actions">@CardHeaderActions</div>
|
||||
<div class="mud-card-header-actions">@CardHeaderActions</div>
|
||||
}
|
||||
@if (ChildContent is not null)
|
||||
{
|
||||
@ -7,7 +7,7 @@ namespace Connected.Components;
|
||||
public partial class CardHeader : UIComponent
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("card-header")
|
||||
new CssBuilder("mud-card-header")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -12,7 +12,7 @@ public partial class CardMedia : UIComponent
|
||||
.Build();
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("card-media")
|
||||
new CssBuilder("mud-card-media")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
|
||||
<CascadingValue Value="this">
|
||||
|
||||
<SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
|
||||
<SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe">
|
||||
@*Selected Content*@
|
||||
@if (ItemsSource == null)
|
||||
{
|
||||
@ -9,15 +9,15 @@ namespace Connected.Components;
|
||||
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("carousel")
|
||||
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
|
||||
new CssBuilder("mud-carousel")
|
||||
.AddClass($"mud-carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
protected string NavigationButtonsClassName =>
|
||||
new CssBuilder()
|
||||
.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
|
||||
.AddClass("carousel-elements-rtl", RightToLeft)
|
||||
.AddClass("mud-carousel-elements-rtl", RightToLeft)
|
||||
.AddClass(NavigationButtonsClass)
|
||||
.Build();
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
using Connected.Annotations;
|
||||
using Connected.Extensions;
|
||||
using Connected.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
|
||||
public partial class CarouselItem : UIComponent, IDisposable
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("mud-carousel-item")
|
||||
.AddClass($"mud-carousel-item-{Color.ToDescriptionString()}")
|
||||
.AddClass("mud-carousel-item-exit", !_disposed && Parent.LastContainer == this)
|
||||
|
||||
.AddClass("mud-carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
|
||||
.AddClass("mud-carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
|
||||
|
||||
.AddClass("mud-carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
|
||||
.AddClass("mud-carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
|
||||
|
||||
.AddClass("mud-carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
|
||||
.AddClass("mud-carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
|
||||
|
||||
.AddClass("mud-carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
|
||||
.AddClass("mud-carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
|
||||
|
||||
.AddClass("mud-carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
|
||||
.AddClass("mud-carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
|
||||
|
||||
.AddClass("mud-carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
|
||||
|
||||
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
|
||||
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
|
||||
|
||||
.AddClass(Class)
|
||||
.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>
|
||||
[Parameter]
|
||||
[Category(CategoryTypes.Carousel.Appearance)]
|
||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
||||
|
||||
/// <summary>
|
||||
/// The transition effect of the component.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
[Category(CategoryTypes.Carousel.Appearance)]
|
||||
public Transition Transition { get; set; } = Transition.Slide;
|
||||
|
||||
/// <summary>
|
||||
/// The name of custom transition on entrance time
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
[Category(CategoryTypes.Carousel.Appearance)]
|
||||
public string CustomTransitionEnter { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// The name of custom transition on exiting time
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
[Category(CategoryTypes.Carousel.Appearance)]
|
||||
public string CustomTransitionExit { get; set; }
|
||||
|
||||
|
||||
public bool IsVisible => Parent != null && (Parent.LastContainer == this || Parent.SelectedIndex == Parent.Items.IndexOf(this));
|
||||
|
||||
|
||||
protected override Task OnInitializedAsync()
|
||||
{
|
||||
Parent?.AddItem(this);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private bool _disposed = false;
|
||||
public void Dispose()
|
||||
{
|
||||
_disposed = true;
|
||||
Parent?.Items.Remove(this);
|
||||
}
|
||||
|
||||
}
|
||||
@ -36,8 +36,8 @@ public partial class Chart : UIComponent
|
||||
public RenderFragment CustomGraphics { get; set; }
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("chart")
|
||||
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
|
||||
new CssBuilder("mud-chart")
|
||||
.AddClass($"mud-chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
@using System.Globalization;
|
||||
@inherits Chart
|
||||
|
||||
<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||
<g class="charts-grid">
|
||||
<g class="charts-gridlines-yaxis">
|
||||
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||
<g class="mud-charts-grid">
|
||||
<g class="mud-charts-gridlines-yaxis">
|
||||
@foreach (var horizontalLine in _horizontalLines)
|
||||
{
|
||||
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
||||
@ -12,7 +12,7 @@
|
||||
</g>
|
||||
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
||||
{
|
||||
<g class="charts-gridlines-xaxis-lines">
|
||||
<g class="mud-charts-gridlines-xaxis-lines">
|
||||
@foreach (var verticalLine in _verticalLines)
|
||||
{
|
||||
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
||||
@ -20,22 +20,22 @@
|
||||
</g>
|
||||
}
|
||||
</g>
|
||||
<g class="charts-yaxis">
|
||||
<g class="mud-charts-yaxis">
|
||||
@foreach (var horizontalLineValue in _horizontalValues)
|
||||
{
|
||||
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||
}
|
||||
</g>
|
||||
<g class="charts-xaxis">
|
||||
<g class="mud-charts-xaxis">
|
||||
@foreach (var verticalLineValue in _verticalValues)
|
||||
{
|
||||
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||
}
|
||||
</g>
|
||||
<g class="charts-bar-series">
|
||||
<g class="mud-charts-bar-series">
|
||||
@foreach (var bar in _bars)
|
||||
{
|
||||
<path class="chart-bar" @onclick="() => SelectedIndex = bar.Index" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
|
||||
<path class="mud-chart-bar" @onclick="() => SelectedIndex = bar.Index" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
|
||||
}
|
||||
</g>
|
||||
|
||||
22
Connected.Components/Components/Chart/Charts/Donut.razor
Normal file
22
Connected.Components/Components/Chart/Charts/Donut.razor
Normal file
@ -0,0 +1,22 @@
|
||||
@namespace Connected.Components
|
||||
@using System.Globalization
|
||||
@inherits Chart
|
||||
|
||||
<svg @attributes="UserAttributes" class="mud-chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
|
||||
<Filters />
|
||||
<circle class="mud-donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
|
||||
@foreach (var item in _circles.ToList())
|
||||
{
|
||||
<circle class="mud-chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))"
|
||||
cx="@ToS(item.CX)"
|
||||
cy="@ToS(item.CY)"
|
||||
r="@ToS(item.Radius)"
|
||||
stroke-dasharray="@item.StrokeDashArray"
|
||||
stroke-dashoffset="@ToS(item.StrokeDashOffset)">
|
||||
</circle>
|
||||
}
|
||||
<circle class="mud-donut-hole" cx="21" cy="21" r="13.4"></circle>
|
||||
|
||||
@ChartParent?.CustomGraphics
|
||||
</svg>
|
||||
<Legend Data="@_legends" />
|
||||
@ -2,9 +2,9 @@
|
||||
@using System.Globalization;
|
||||
@inherits Chart
|
||||
|
||||
<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||
<g class="charts-grid">
|
||||
<g class="charts-gridlines-yaxis">
|
||||
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||
<g class="mud-charts-grid">
|
||||
<g class="mud-charts-gridlines-yaxis">
|
||||
@foreach (var horizontalLine in _horizontalLines)
|
||||
{
|
||||
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
||||
@ -12,7 +12,7 @@
|
||||
</g>
|
||||
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
||||
{
|
||||
<g class="charts-gridlines-xaxis-lines">
|
||||
<g class="mud-charts-gridlines-xaxis-lines">
|
||||
@foreach (var verticalLine in _verticalLines)
|
||||
{
|
||||
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
||||
@ -20,22 +20,22 @@
|
||||
</g>
|
||||
}
|
||||
</g>
|
||||
<g class="charts-yaxis">
|
||||
<g class="mud-charts-yaxis">
|
||||
@foreach (var horizontalLineValue in _horizontalValues)
|
||||
{
|
||||
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||
}
|
||||
</g>
|
||||
<g class="charts-xaxis">
|
||||
<g class="mud-charts-xaxis">
|
||||
@foreach (var verticalLineValue in _verticalValues)
|
||||
{
|
||||
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||
}
|
||||
</g>
|
||||
<g class="charts-line-series">
|
||||
<g class="mud-charts-line-series">
|
||||
@foreach (var chartLine in _chartLines)
|
||||
{
|
||||
<path class="chart-line" @onclick="() => SelectedIndex = chartLine.Index" fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
|
||||
<path class="mud-chart-line" @onclick="() => SelectedIndex = chartLine.Index" fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
|
||||
}
|
||||
</g>
|
||||
|
||||
14
Connected.Components/Components/Chart/Charts/Pie.razor
Normal file
14
Connected.Components/Components/Chart/Charts/Pie.razor
Normal file
@ -0,0 +1,14 @@
|
||||
@namespace Connected.Components
|
||||
@using System.Globalization
|
||||
@inherits Chart
|
||||
|
||||
<svg @attributes="UserAttributes" class="mud-chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
|
||||
<Filters />
|
||||
@foreach (var item in _paths.ToList())
|
||||
{
|
||||
<path @onclick="() => SelectedIndex = item.Index" class="mud-chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
|
||||
}
|
||||
|
||||
@ChartParent?.CustomGraphics
|
||||
</svg>
|
||||
<Legend Data="@_legends" />
|
||||
15
Connected.Components/Components/Chart/Parts/Legend.razor
Normal file
15
Connected.Components/Components/Chart/Parts/Legend.razor
Normal file
@ -0,0 +1,15 @@
|
||||
@namespace Connected.Components
|
||||
@inherits Chart
|
||||
|
||||
@if (ChartParent?.ChartOptions.DisableLegend != true)
|
||||
{
|
||||
<div @attributes="UserAttributes" class="mud-chart-legend">
|
||||
@foreach (var item in Data)
|
||||
{
|
||||
<div class="mud-chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
|
||||
<span class="mud-chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span>
|
||||
<TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
|
||||
<span tabindex="0" class="@CheckBoxClassname">
|
||||
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
|
||||
<input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
||||
<input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="mud-checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
||||
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
|
||||
</span>
|
||||
@if (!String.IsNullOrEmpty(Label))
|
||||
@ -10,25 +10,25 @@ namespace Connected.Components;
|
||||
public partial class CheckBox<T> : BooleanInput<T>
|
||||
{
|
||||
protected string Classname =>
|
||||
new CssBuilder("input-control-boolean-input")
|
||||
new CssBuilder("mud-input-control-boolean-input")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
protected string LabelClassname =>
|
||||
new CssBuilder("checkbox")
|
||||
.AddClass($"disabled", Disabled)
|
||||
.AddClass($"readonly", ReadOnly)
|
||||
.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
|
||||
new CssBuilder("mud-checkbox")
|
||||
.AddClass($"mud-disabled", Disabled)
|
||||
.AddClass($"mud-readonly", ReadOnly)
|
||||
.AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true)
|
||||
.Build();
|
||||
|
||||
protected string CheckBoxClassname =>
|
||||
new CssBuilder("button-root mud-icon-button")
|
||||
.AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
|
||||
.AddClass($"{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
|
||||
.AddClass($"checkbox-dense", Dense)
|
||||
.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
|
||||
.AddClass($"disabled", Disabled)
|
||||
.AddClass($"readonly", ReadOnly)
|
||||
new CssBuilder("mud-button-root mud-icon-button")
|
||||
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
|
||||
.AddClass($"mud-{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
|
||||
.AddClass($"mud-checkbox-dense", Dense)
|
||||
.AddClass($"mud-ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
|
||||
.AddClass($"mud-disabled", Disabled)
|
||||
.AddClass($"mud-readonly", ReadOnly)
|
||||
.Build();
|
||||
|
||||
/// <summary>
|
||||
@ -225,7 +225,7 @@ public partial class CheckBox<T> : BooleanInput<T>
|
||||
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
|
||||
{
|
||||
//EnableLogging = true,
|
||||
TargetClass = "button-root",
|
||||
TargetClass = "mud-button-root",
|
||||
Keys = {
|
||||
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
|
||||
new KeyOptions { Key="Enter", PreventDown = "key+none" },
|
||||
@ -10,13 +10,13 @@
|
||||
}
|
||||
else if (!String.IsNullOrEmpty(Icon) && !IsChecked)
|
||||
{
|
||||
<Icon Icon="@Icon" Class="chip-icon" Size="Size.Small" Color="@IconColor" />
|
||||
<Icon Icon="@Icon" Class="mud-chip-icon" Size="Size.Small" Color="@IconColor" />
|
||||
}
|
||||
else if (IsChecked)
|
||||
{
|
||||
<Icon Icon="@CheckedIcon" Class="chip-icon" Size="Size.Small" />
|
||||
<Icon Icon="@CheckedIcon" Class="mud-chip-icon" Size="Size.Small" />
|
||||
}
|
||||
<span class="chip-content">
|
||||
<span class="mud-chip-content">
|
||||
@if (ChildContent == null)
|
||||
{
|
||||
@Text
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
@if (OnClose.HasDelegate || ChipSet?.AllClosable==true)
|
||||
{
|
||||
<IconButton Class="chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
|
||||
<IconButton Class="mud-chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@ -16,15 +16,15 @@ public partial class Chip : UIComponent, IDisposable
|
||||
[Inject] public IJsApiService JsApiService { get; set; }
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("chip")
|
||||
.AddClass($"chip-{GetVariant().ToDescriptionString()}")
|
||||
.AddClass($"chip-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"chip-color-{GetColor().ToDescriptionString()}")
|
||||
.AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
|
||||
.AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
|
||||
.AddClass("chip-label", Label)
|
||||
.AddClass("disabled", Disabled)
|
||||
.AddClass("chip-selected", IsSelected)
|
||||
new CssBuilder("mud-chip")
|
||||
.AddClass($"mud-chip-{GetVariant().ToDescriptionString()}")
|
||||
.AddClass($"mud-chip-size-{Size.ToDescriptionString()}")
|
||||
.AddClass($"mud-chip-color-{GetColor().ToDescriptionString()}")
|
||||
.AddClass("mud-clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
|
||||
.AddClass("mud-ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
|
||||
.AddClass("mud-chip-label", Label)
|
||||
.AddClass("mud-disabled", Disabled)
|
||||
.AddClass("mud-chip-selected", IsSelected)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -8,7 +8,7 @@ public partial class ChipSet : UIComponent, IDisposable
|
||||
{
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("chipset")
|
||||
new CssBuilder("mud-chipset")
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@using System.Globalization;
|
||||
|
||||
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename">
|
||||
<div @ref="_wrapper" class="collapse-wrapper">
|
||||
<div class="collapse-wrapper-inner">
|
||||
<div @ref="_wrapper" class="mud-collapse-wrapper">
|
||||
<div class="mud-collapse-wrapper-inner">
|
||||
@ChildContent
|
||||
</div>
|
||||
</div>
|
||||
@ -27,10 +27,10 @@ public partial class Collapse : UIComponent
|
||||
.Build();
|
||||
|
||||
protected string Classname =>
|
||||
new CssBuilder("collapse-container")
|
||||
.AddClass($"collapse-entering", _state == CollapseState.Entering)
|
||||
.AddClass($"collapse-entered", _state == CollapseState.Entered)
|
||||
.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
|
||||
new CssBuilder("mud-collapse-container")
|
||||
.AddClass($"mud-collapse-entering", _state == CollapseState.Entering)
|
||||
.AddClass($"mud-collapse-entered", _state == CollapseState.Entered)
|
||||
.AddClass($"mud-collapse-exiting", _state == CollapseState.Exiting)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
protected override RenderFragment PickerContent =>
|
||||
@<CascadingValue Value="@this" IsFixed="true">
|
||||
<PickerToolbar DisableToolbar="@DisableToolbar" Class="picker-color-toolbar">
|
||||
<PickerToolbar DisableToolbar="@DisableToolbar" Class="mud-picker-color-toolbar">
|
||||
@if (PickerVariant != PickerVariant.Static)
|
||||
{
|
||||
<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
|
||||
@ -19,19 +19,19 @@
|
||||
<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
|
||||
<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
|
||||
</PickerToolbar>
|
||||
<PickerContent Class="picker-color-content">
|
||||
<PickerContent Class="mud-picker-color-content">
|
||||
@if (!DisableColorField)
|
||||
{
|
||||
<div class="picker-color-picker">
|
||||
<div class="mud-picker-color-picker">
|
||||
@if (_activeColorPickerView == ColorPickerView.Spectrum)
|
||||
{
|
||||
<div class="picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
|
||||
<div class="picker-color-overlay mud-picker-color-overlay-white">
|
||||
<div class="picker-color-overlay mud-picker-color-overlay-black">
|
||||
<div class="picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
|
||||
<svg class="picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
|
||||
<div class="mud-picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
|
||||
<div class="mud-picker-color-overlay mud-picker-color-overlay-white">
|
||||
<div class="mud-picker-color-overlay mud-picker-color-overlay-black">
|
||||
<div class="mud-picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
|
||||
<svg class="mud-picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
|
||||
<defs>
|
||||
<filter id="picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<filter id="mud-picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
|
||||
<feOffset dx="0" dy="5" result="offsetblur" />
|
||||
<feOffset dx="0" dy="-5" result="offsetblur" />
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
|
||||
{
|
||||
<div class="picker-color-grid">
|
||||
<div class="mud-picker-color-grid">
|
||||
@foreach (var item in _gridList)
|
||||
{
|
||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||
@ -61,32 +61,32 @@
|
||||
{
|
||||
@if (!DisableSliders || !DisableInputs || !DisablePreview)
|
||||
{
|
||||
<div class="picker-color-controls">
|
||||
<div class="mud-picker-color-controls">
|
||||
@if (!DisableSliders || !DisablePreview)
|
||||
{
|
||||
<div class="picker-color-controls-row">
|
||||
<div class="mud-picker-color-controls-row">
|
||||
@if (!DisablePreview)
|
||||
{
|
||||
<div class="picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
|
||||
<div class="picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
|
||||
<div class="mud-picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
|
||||
<div class="mud-picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
|
||||
</div>
|
||||
}
|
||||
@if (!DisableSliders && !_collectionOpen)
|
||||
{
|
||||
<div class="picker-color-sliders">
|
||||
<div class="mud-picker-color-sliders">
|
||||
@if (_activeColorPickerView != ColorPickerView.Grid)
|
||||
{
|
||||
<Slider Class="picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
|
||||
<Slider Class="mud-picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
|
||||
}
|
||||
@if (!DisableAlpha)
|
||||
{
|
||||
<Slider Class="picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
|
||||
<Slider Class="mud-picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (_collectionOpen)
|
||||
{
|
||||
<div class="picker-color-collection">
|
||||
<div class="mud-picker-color-collection">
|
||||
@foreach (var item in Palette.Take(5))
|
||||
{
|
||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||
@ -97,22 +97,22 @@
|
||||
}
|
||||
@if (!DisableInputs)
|
||||
{
|
||||
<div class="picker-color-controls-row">
|
||||
<div class="picker-color-inputs">
|
||||
<div class="mud-picker-color-controls-row">
|
||||
<div class="mud-picker-color-inputs">
|
||||
@switch (ColorPickerMode)
|
||||
{
|
||||
case ColorPickerMode.RGB:
|
||||
<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="mud-picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="mud-picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="mud-picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
break;
|
||||
case ColorPickerMode.HSL:
|
||||
<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="mud-picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="mud-picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="mud-picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
break;
|
||||
case ColorPickerMode.HEX:
|
||||
<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
|
||||
<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="mud-picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -120,12 +120,12 @@
|
||||
|
||||
@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
|
||||
{
|
||||
<NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
<NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="mud-picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||
}
|
||||
</div>
|
||||
@if (!DisableModeSwitch)
|
||||
{
|
||||
<div class="picker-control-switch">
|
||||
<div class="mud-picker-control-switch">
|
||||
<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
|
||||
</div>
|
||||
}
|
||||
@ -135,8 +135,8 @@
|
||||
}
|
||||
@if (_activeColorPickerView == ColorPickerView.Palette)
|
||||
{
|
||||
<div class="picker-color-view">
|
||||
<div class="picker-color-view-collection">
|
||||
<div class="mud-picker-color-view">
|
||||
<div class="mud-picker-color-view-collection">
|
||||
@foreach (var item in Palette)
|
||||
{
|
||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||
@ -535,7 +535,7 @@ public partial class ColorPicker : Picker<Color>, IAsyncDisposable
|
||||
private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color));
|
||||
|
||||
private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit;
|
||||
private string GetColorDotClass(Color color) => new CssBuilder("picker-color-dot").AddClass("selected", color == Value).ToString();
|
||||
private string GetColorDotClass(Color color) => new CssBuilder("mud-picker-color-dot").AddClass("selected", color == Value).ToString();
|
||||
private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build();
|
||||
|
||||
#endregion
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user