diff --git a/.gitignore b/.gitignore
index 9606eee..7ae34d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -412,5 +412,22 @@ FodyWeavers.xsd
# Built Visual Studio Code Extensions
*.vsix
+# Css files
+**.css
+
# 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/**
+
+**.DS_Store
diff --git a/Connected.Components.sln b/Connected.Components.sln
index ce7562c..6507c50 100644
--- a/Connected.Components.sln
+++ b/Connected.Components.sln
@@ -5,7 +5,9 @@ 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}"
EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -21,6 +23,10 @@ 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
diff --git a/build/startWatch.ps1 b/build/startWatch.ps1
new file mode 100644
index 0000000..914aada
--- /dev/null
+++ b/build/startWatch.ps1
@@ -0,0 +1 @@
+dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj
\ No newline at end of file
diff --git a/build/startWatch.sh b/build/startWatch.sh
new file mode 100644
index 0000000..914aada
--- /dev/null
+++ b/build/startWatch.sh
@@ -0,0 +1 @@
+dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj
\ No newline at end of file
diff --git a/nuget.config b/nuget.config
index cf4c076..1da1b53 100644
--- a/nuget.config
+++ b/nuget.config
@@ -9,9 +9,11 @@
+
+
+
-
-
\ No newline at end of file
+
diff --git a/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj b/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj
index 73def2f..0ccdf36 100644
--- a/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj
+++ b/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj
@@ -41,4 +41,8 @@
+
+
+
+
diff --git a/src/Connected.Components.Showcase/MainLayout.razor b/src/Connected.Components.Showcase/MainLayout.razor
deleted file mode 100644
index de2be6c..0000000
--- a/src/Connected.Components.Showcase/MainLayout.razor
+++ /dev/null
@@ -1,5 +0,0 @@
-@inherits LayoutComponentBase
-
-
- @Body
-
diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
new file mode 100644
index 0000000..bd9e724
--- /dev/null
+++ b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
@@ -0,0 +1,381 @@
+@page "/components/alert"
+
+@using Connected.Components;
+
+
+
+
+
+@code {
+ Theme MyCustomTheme = new Theme()
+ {
+ Palette = new Palette()
+ {
+ Error = "#ffd8e4",
+ ErrorContrastText = "#31111d",
+ //ErrorDarken = Colors.Green.Accent4,
+ },
+ LayoutProperties = new LayoutProperties()
+ {
+ DefaultBorderRadius = "1rem",
+ }
+ };
+}
+
+
+ Alert
+ An alert is used to notify the user about an important message without interrupting the ongoing task.
+
+
+
+
+
+ Simple alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <AlertSeverity="Severity.Normal"GlyphVisible="true"ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<AlertSeverity="Severity.Info"GlyphVisible="true"ClassList="my-2">The reactor was fired up successfully</Alert>
+<AlertSeverity="Severity.Success"GlyphVisible="true"ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<AlertSeverity="Severity.Warning"GlyphVisible="true"ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<AlertSeverity="Severity.Error"GlyphVisible="true"ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <AlertSeverity="Severity.Normal"Variant="Variant.Outlined"GlyphVisible="true"ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<AlertSeverity="Severity.Info"Variant="Variant.Outlined"GlyphVisible="true"ClassList="my-2">The reactor was fired up successfully</Alert>
+<AlertSeverity="Severity.Success"Variant="Variant.Outlined"GlyphVisible="true"ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<AlertSeverity="Severity.Warning"Variant="Variant.Outlined"GlyphVisible="true"ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<AlertSeverity="Severity.Error"Variant="Variant.Outlined"GlyphVisible="true"ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <AlertSeverity="Severity.Normal"Variant="Variant.Filled"GlyphVisible="true"ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<AlertSeverity="Severity.Info"Variant="Variant.Filled"GlyphVisible="true"ClassList="my-2">The reactor was fired up successfully</Alert>
+<AlertSeverity="Severity.Success"Variant="Variant.Filled"GlyphVisible="true"ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<AlertSeverity="Severity.Warning"Variant="Variant.Filled"GlyphVisible="true"ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<AlertSeverity="Severity.Error"Variant="Variant.Filled"GlyphVisible="true"ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+
+ Dense
+ Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
+
+
+ No Icons
+ You can disable the alert icons with the bool GlyphVisible set to false.
+
+
+
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+
+
+
+
+
+ Rounded and Square
+ By default, the alert is set to rounded corners by your theme's
+ default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in
+ ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl.
+
+ Close Icon and Event
+ Set the CloseGlyphVisible property to True to display a Close icon.
+ CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert
+
+
+
+ Time to leave. Please close me!
+
+
+ Time to leave. Please close me!
+
+
+ RTime to leave. Please close me!
+
+
+
+
+
+
+ <Grid>
+ <Itemmd="4"xs="12">
+ <AlertSeverity="Severity.Normal"GlyphVisible="true"CloseGlyphVisible="true"ClassList="my-2">Time to leave. Please close me!</Alert>
+ </Item>
+ <Itemmd="4"xs="12">
+ <AlertSeverity="Severity.Info"GlyphVisible="true"CloseGlyphVisible="true"ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
+ </Item>
+ <Itemmd="4"xs="12">
+ <AlertSeverity="Severity.Success"GlyphVisible="true"CloseGlyphVisible="true"ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
+ </Item>
+</Grid>
+
diff --git a/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor b/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor
new file mode 100644
index 0000000..68aff84
--- /dev/null
+++ b/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor
@@ -0,0 +1,7 @@
+@page "/components/app-bar"
+
+@using Connected.Components;
+
+
+
+This is an alert
diff --git a/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor b/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor
new file mode 100644
index 0000000..445bff2
--- /dev/null
+++ b/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor
@@ -0,0 +1,36 @@
+@page "/components/drawer"
+
+@using Connected.Components;
+
+
+
+
+
+
+
+
+
+
+ Application
+
+
+ Production
+ Production
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam fuga necessitatibus illum non earum aperiam consequuntur odit odio a laborum!
+
+
+
+
+@code {
+ bool _drawerOpen = true;
+
+ void DrawerToggle()
+ {
+ _drawerOpen = !_drawerOpen;
+ }
+}
diff --git a/src/Connected.Components.Showcase/Pages/Index.razor b/src/Connected.Components.Showcase/Pages/Index.razor
deleted file mode 100644
index cba3252..0000000
--- a/src/Connected.Components.Showcase/Pages/Index.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-@page "/"
-
-
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Alert/Alert.razor.cs b/src/Connected.Components/Components/Alert/Alert.razor.cs
index 2146b93..6c77eee 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor.cs
+++ b/src/Connected.Components/Components/Alert/Alert.razor.cs
@@ -1,143 +1,122 @@
-using System.Diagnostics.CodeAnalysis;
-using Connected.Extensions;
-using Connected.Utilities;
+using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
-public partial class Alert : UIComponent
-{
- [CascadingParameter(Name = "RightToLeft")]
- public bool RightToLeft { get; set; }
- ///
- /// Sets the position of the text to the start (Left in LTR and right in RTL).
- ///
- [Parameter]
- public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Left;
+public partial class Alert : UIComponent{
///
- /// The callback, when the close button has been clicked.
+ /// Contains the default container classlist and the user defined classes.
///
- [Parameter] public EventCallback CloseGlyphClicked { get; set; }
+ private CssBuilder CompiledClassList
+ {
+ get
+ {
+ return new CssBuilder("alert")
+ .AddClass($"alert-{Variant}-{Severity}")
+ .AddClass(ClassList);
+ }
+ }
+
///
- /// Define the icon used for the close button.
+ /// Child content of the component.
///
[Parameter]
- public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
+ public RenderFragment? ChildContent { get; set; }
+
+ #region EventCallbacks
///
- /// Sets if the alert shows a close icon.
+ /// Raised when the alert is clicked.
///
[Parameter]
- public bool CloseGlyphVisible { get; set; }
+ public EventCallback Clicked { get; set; }
+
///
- /// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+ /// The callback, when the close glyph has been clicked.
///
- [Parameter]
- public int Elevation { set; get; } = 0;
+ [Parameter] public EventCallback CloseClicked { get; set; }
+
+ #endregion
+
+ #region Content placeholders
///
- /// If true, rounded corners are disabled.
+ /// Define the glyph used for the close button.
///
[Parameter]
- public bool Square { get; set; }
+ public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
+
///
- /// If true, compact padding will be used.
+ /// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
///
[Parameter]
- public bool Dense { get; set; }
+ public string Glyph { get; set; } = default!;
+ #endregion
+
+ #region Styling properties
///
- /// If true, no alert icon will be used.
+ /// A space separated list of class names, added on top of the default class list.
///
[Parameter]
- public bool GlyphVisible { get; set; }
+ public string? ClassList { get; set; }
+
///
- /// The severity of the alert. This defines the color and icon used.
+ /// Sets if the alert shows a close glyph.
///
[Parameter]
- public Severity Severity { get; set; } = Severity.Normal;
+ public bool CloseGlyphVisible { get; set; }
+
///
- /// The variant to use.
+ /// If true, no alert glyph will be used.
///
[Parameter]
- public Variant Variant { get; set; } = Variant.Text;
+ public bool GlyphVisible { get; set; }
+
///
- /// Child content of the component.
+ /// Specifies the control's display style
///
- [Parameter]
- public RenderFragment? ChildContent { get; set; }
+ //TODO: Implement in DOM
+ [CascadingParameter(Name = "RightToLeft")]
+ public bool RightToLeft { get; set; }
+
///
- /// Custom icon, leave unset to use the standard icon which depends on the Severity
+ /// The severity of the alert. This defines the color and glyph used.
///
[Parameter]
- public string Glyph { get; set; } = default!;
+ public Severity Severity { get; set; } = Severity.Normal;
+
///
- /// Raised when the alert is clicked
+ /// The variant to use.
///
[Parameter]
- public EventCallback OnClick { get; set; }
-
- protected string ClassList
- {
- get
- {
- return new CssBuilder("alert")
- .AddClass($"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}")
- .AddClass($"dense", Dense)
- .AddClass($"square", Square)
- .AddClass($"elevation-{Elevation}")
- .AddClass(Class)
- .Build();
- }
- }
-
- protected string ClassPosition
- {
- get
- {
- return new CssBuilder("alert-position")
- .AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
- .Build();
- }
- }
-
- private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
- {
- return contentAlignment switch
- {
- HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
- HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
- _ => contentAlignment
- };
- }
-
+ public Variant Variant { get; set; } = Variant.Text;
+ #endregion
- internal async Task OnCloseGlyphClick()
+ protected override void OnParametersSet()
{
- if (CloseGlyphClicked.HasDelegate)
- {
- await CloseGlyphClicked.InvokeAsync(this);
+ if (!string.IsNullOrEmpty(Glyph))
return;
- }
- await Task.CompletedTask;
+ Glyph = GetGlyphForSeverity(Severity);
}
- //If we can check this exception can include the coverage again
- [ExcludeFromCodeCoverage]
- protected override void OnParametersSet()
+ private string GetGlyphForSeverity(Severity severity)
{
- if (!string.IsNullOrEmpty(Glyph))
- return;
-
- Glyph = Severity switch
+ return 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)),
};
}
-}
+ internal async Task OnCloseGlyphClick()
+ {
+ if (!CloseClicked.HasDelegate)
+ return;
+ await CloseClicked.InvokeAsync(this);
+ }
+}
\ No newline at end of file
diff --git a/src/Connected.Components/Components/AppBar/AppBar.razor b/src/Connected.Components/Components/AppBar/AppBar.razor
index fb13ed1..2626b3a 100644
--- a/src/Connected.Components/Components/AppBar/AppBar.razor
+++ b/src/Connected.Components/Components/AppBar/AppBar.razor
@@ -1,10 +1,10 @@
@namespace Connected.Components
@inherits UIComponent
-
-
- @ChildContent
-
+
+
+ @ChildContent
+
diff --git a/src/Connected.Components/Components/AppBar/AppBar.razor.cs b/src/Connected.Components/Components/AppBar/AppBar.razor.cs
index 41ac692..416b35a 100644
--- a/src/Connected.Components/Components/AppBar/AppBar.razor.cs
+++ b/src/Connected.Components/Components/AppBar/AppBar.razor.cs
@@ -1,75 +1,65 @@
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
+using System.Security;
namespace Connected.Components;
public partial class AppBar : UIComponent
{
///
- /// If true, Appbar will be placed at the bottom of the screen.
+ /// The classlist determining the toolbar render.
///
- [Parameter]
- public bool Bottom { get; set; }
-
- ///
- /// The higher the number, the heavier the drop-shadow. 0 for no shadow.
- ///
- [Parameter]
- public int Elevation { set; get; } = 4;
+ private CssBuilder CompiledToolbarClassList
+ {
+ get
+ {
+ return new CssBuilder("toolbar-appbar")
+ .AddClass(ToolbarClassList);
+ }
+ }
///
- /// If true, compact padding will be used.
+ /// The classlist determining the header render.
///
- [Parameter]
- public bool Dense { get; set; }
+ private CssBuilder CompiledHeaderClassList
+ {
+ get
+ {
+ return new CssBuilder("app-bar")
+ .AddClass($"appbar-fixed-top", Fixed && VerticalAlignment == VerticalAlignment.Top)
+ .AddClass($"appbar-fixed-bottom", Fixed && VerticalAlignment == VerticalAlignment.Bottom)
+ .AddClass(HeaderClassList);
+ }
+ }
///
- /// If true, the left and right padding is removed from from the appbar.
+ /// Child content of the component.
///
[Parameter]
- public bool DisableGutters { get; set; }
+ public RenderFragment? ChildContent { get; set; }
///
- /// The color of the component. It supports the theme colors.
+ /// If true, appbar will be fixed.
///
[Parameter]
- public ThemeColor Color { get; set; } = ThemeColor.Default;
+ public bool Fixed { get; set; } = true;
///
- /// If true, appbar will be Fixed.
+ /// Class names for the AppBar header. In case of several, separate by spaces.
///
[Parameter]
- public bool Fixed { get; set; } = true;
+ public string? HeaderClassList { get; set; }
///
- /// User class names, separated by spaces for the nested toolbar.
+ /// Class names for the nested toolbar. In case of several, separate by spaces.
///
[Parameter]
- public string? ToolBarClass { get; set; }
+ public string? ToolbarClassList { get; set; }
///
- /// Child content of the component.
+ /// Determines the vertical alignment of the AppBar.
///
[Parameter]
- public RenderFragment? ChildContent { get; set; }
-
- protected string ClassList()
- {
- return new CssBuilder("appbar")
- .AddClass($"appbar-dense", Dense)
- .AddClass($"appbar-fixed-top", Fixed && !Bottom)
- .AddClass($"appbar-fixed-bottom", Fixed && Bottom)
- .AddClass($"elevation-{Elevation}")
- .AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
- .AddClass(Class)
- .Build();
- }
-
- protected string ToolBarClassList()
- {
- return new CssBuilder("toolbar-appbar")
- .AddClass(ToolBarClass)
- .Build();
- }
+ public VerticalAlignment VerticalAlignment { get; set; }
}
diff --git a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor b/src/Connected.Components/Components/Autocomplete/Autocomplete.razor
index c0dd9c6..627c8ea 100644
--- a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor
+++ b/src/Connected.Components/Components/Autocomplete/Autocomplete.razor
@@ -4,7 +4,7 @@
-
: InputBase, IDisposable
[Parameter]
public bool Dense { get; set; }
///
- /// The Open Autocomplete Icon
+ /// The Open Autocomplete Glyph
///
[Parameter]
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
///
- /// The Close Autocomplete Icon
+ /// The Close Autocomplete Glyph
///
[Parameter]
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
@@ -231,7 +231,6 @@ public partial class Autocomplete : InputBase, IDisposable
protected string ClassList()
{
return new CssBuilder("select")
- .AddClass(Class)
.Build();
}
diff --git a/src/Connected.Components/Components/Avatar/Avatar.razor b/src/Connected.Components/Components/Avatar/Avatar.razor
index 601b64d..975dc26 100644
--- a/src/Connected.Components/Components/Avatar/Avatar.razor
+++ b/src/Connected.Components/Components/Avatar/Avatar.razor
@@ -1,18 +1,18 @@
@namespace Connected.Components
@inherits UIComponent
-@if(AvatarGroup == null || AvatarGroup.MaxGroupReached(this))
+@if(AvatarGroup is null || AvatarGroup.MaxGroupReached(this))
{
-
+
@if (!String.IsNullOrEmpty(Image))
{
- if (!String.IsNullOrEmpty(Alt))
+ if (!String.IsNullOrEmpty(ImageAltText))
{
-
+
}
else
{
-
+
}
}
else
diff --git a/src/Connected.Components/Components/Avatar/Avatar.razor.cs b/src/Connected.Components/Components/Avatar/Avatar.razor.cs
index 90564dc..d42775c 100644
--- a/src/Connected.Components/Components/Avatar/Avatar.razor.cs
+++ b/src/Connected.Components/Components/Avatar/Avatar.razor.cs
@@ -7,88 +7,87 @@ namespace Connected.Components;
partial class Avatar : UIComponent, IDisposable
{
- [CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
- protected string Classname =>
- 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();
-
- protected string Stylesname =>
- new StyleBuilder()
- .AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null)
- .AddStyle(Style)
- .Build();
+ [CascadingParameter]
+ protected AvatarGroup? AvatarGroup { get; set; }
+
+ protected CssBuilder CompiledClassList
+ {
+ get
+ {
+ return new CssBuilder("avatar")
+ .AddClass($"avatar-{Size}")
+ .AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
+ .AddClass($"avatar-square", Kind == AvatarKind.Square)
+ .AddClass($"avatar-{Variant}")
+ .AddClass($"avatar-{Variant}-{Color}")
+ .AddClass($"elevation-{Elevation}")
+ .AddClass(ClassList)
+ .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
+ }
+ }
+
+ protected StyleBuilder CompiledStyles
+ {
+ get
+ {
+ return new StyleBuilder()
+ .AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
+ }
+ }
///
- /// The higher the number, the heavier the drop-shadow.
+ /// A space separated list of class names, added on top of the default class list.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
- public int Elevation { set; get; } = 0;
+ public string? ClassList { get; set; }
///
- /// If true, border-radius is set to 0.
+ /// If set (and Image is also set), will add an alt property to the img element
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
- public bool Square { get; set; }
+ public string? ImageAltText { get; set; }
///
- /// If true, border-radius is set to the themes default value.
+ /// Child content of the component.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
- public bool Rounded { get; set; }
+ public RenderFragment? ChildContent { get; set; }
///
- /// Link to image, if set a image will be displayed instead of text.
+ /// The color of the component. It supports the theme colors.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Behavior)]
- public string Image { get; set; }
+ public ThemeColor Color { get; set; } = ThemeColor.Default;
///
- /// If set (and Image is also set), will add an alt property to the img element
+ /// The higher the number, the heavier the drop-shadow.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Behavior)]
- public string Alt { get; set; }
+ public int Elevation { set; get; } = 0;
///
- /// The color of the component. It supports the theme colors.
+ /// Link to image, if set a image will be displayed instead of text.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
- public ThemeColor Color { get; set; } = ThemeColor.Default;
+ public string? Image { get; set; }
+
+ ///
+ /// Sets the avatar appearance
+ ///
+ public AvatarKind Kind { get; set; }
///
/// The Size of the MudAvatar.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
public Size Size { get; set; } = Size.Medium;
///
/// The variant to use.
///
[Parameter]
- [Category(CategoryTypes.Avatar.Appearance)]
public Variant Variant { get; set; } = Variant.Filled;
- ///
- /// Child content of the component.
- ///
- [Parameter]
- [Category(CategoryTypes.Avatar.Behavior)]
- public RenderFragment ChildContent { get; set; }
-
protected override void OnInitialized()
{
base.OnInitialized();
@@ -96,13 +95,7 @@ partial class Avatar : UIComponent, IDisposable
AvatarGroup?.AddAvatar(this);
}
- public void Dispose()
- {
- AvatarGroup?.RemoveAvatar(this);
- }
+ public void Dispose() => AvatarGroup?.RemoveAvatar(this);
- internal void ForceRedraw()
- {
- StateHasChanged();
- }
+ internal void ForceRedraw() => StateHasChanged();
}
diff --git a/src/Connected.Components/Components/Avatar/AvatarGroup.razor b/src/Connected.Components/Components/Avatar/AvatarGroup.razor
index b373864..b667de4 100644
--- a/src/Connected.Components/Components/Avatar/AvatarGroup.razor
+++ b/src/Connected.Components/Components/Avatar/AvatarGroup.razor
@@ -1,13 +1,13 @@
@namespace Connected.Components
@inherits UIComponent
-
+
@ChildContent
@if(_avatars.Count > Max)
{
-
+
@($"+{_avatars.Count - Max}")
}
diff --git a/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs b/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
index b608c95..48e1fd4 100644
--- a/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
+++ b/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
@@ -8,27 +8,34 @@ namespace Connected.Components;
partial class AvatarGroup : UIComponent
{
private bool _childrenNeedUpdates = false;
-
- protected string Classname =>
- 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("mud-avatar-group-max-avatar")
- .AddClass($"ms-n{Spacing}")
- .AddClass(MaxAvatarClass)
- .Build();
-
private int _spacing = 3;
+ private List _avatars = new();
+ private CssBuilder CompiledClassList
+ {
+ get
+ {
+ return new CssBuilder("avatar-group")
+ .AddClass($"avatar-group-outlined", Outlined)
+ .AddClass($"avatar-group-outlined-{OutlineColor.ToDescription()}", Outlined)
+ .AddClass(ClassList);
+ }
+ }
+
+ private CssBuilder CompiledMaxAvatarClassList
+ {
+ get
+ {
+ return new CssBuilder("avatar-group-max-avatar")
+ .AddClass($"ms-n{Spacing}")
+ .AddClass(MaxAvatarClass);
+ }
+ }
+
///
/// Spacing between avatars where 0 is none and 16 max.
///
[Parameter]
- [Category(CategoryTypes.AvatarGroup.Behavior)]
public int Spacing
{
get => _spacing;
@@ -42,6 +49,12 @@ partial class AvatarGroup : UIComponent
}
}
+ ///
+ /// A space separated list of class names, added on top of the default class list.
+ ///
+ [Parameter]
+ public string? ClassList { get; set; }
+
///
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
///
@@ -132,8 +145,6 @@ partial class AvatarGroup : UIComponent
[Category(CategoryTypes.AvatarGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
- internal List _avatars = new();
-
internal void AddAvatar(Avatar avatar)
{
_avatars.Add(avatar);
diff --git a/src/Connected.Components/Components/Avatar/AvatarKind.cs b/src/Connected.Components/Components/Avatar/AvatarKind.cs
new file mode 100644
index 0000000..e0d3195
--- /dev/null
+++ b/src/Connected.Components/Components/Avatar/AvatarKind.cs
@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Connected.Components;
+public enum AvatarKind
+{
+ Undefined = 0,
+ Unadorned = 1,
+ Rounded = 2,
+ Square = 3
+}
diff --git a/src/Connected.Components/Components/Badge/Badge.razor b/src/Connected.Components/Components/Badge/Badge.razor
index ec26682..a43da56 100644
--- a/src/Connected.Components/Components/Badge/Badge.razor
+++ b/src/Connected.Components/Components/Badge/Badge.razor
@@ -1,8 +1,8 @@
@namespace Connected.Components
@inherits UIComponent
-
- @ChildContent
+
+ @ChildContent
@if (Visible)
{
@@ -11,7 +11,7 @@
{
@if (!String.IsNullOrEmpty(Icon))
{
-
+
}
else
{
diff --git a/src/Connected.Components/Components/Badge/Badge.razor.cs b/src/Connected.Components/Components/Badge/Badge.razor.cs
index 9e2822c..7ee9c51 100644
--- a/src/Connected.Components/Components/Badge/Badge.razor.cs
+++ b/src/Connected.Components/Components/Badge/Badge.razor.cs
@@ -9,25 +9,25 @@ namespace Connected.Components;
public partial class Badge : UIComponent
{
- protected string Classname =>
- new CssBuilder("mud-badge-root")
- .AddClass(Class)
+ protected string CompiledClassList =>
+ new CssBuilder("badge-root")
+ .AddClass(AdditionalClassList)
.Build();
protected string WrapperClass =>
- new CssBuilder("mud-badge-wrapper")
- .AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
+ new CssBuilder("badge-wrapper")
+ .AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
.Build();
protected string BadgeClassName =>
- 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)
+ new CssBuilder("badge")
+ .AddClass("badge-dot", Dot)
+ .AddClass("badge-bordered", Bordered)
+ .AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
+ .AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
+ .AddClass($"elevation-{Elevation.ToString()}")
+ .AddClass("theme-" + Color.ToDescription(), Color != ThemeColor.Default)
+ .AddClass("badge-default", Color == ThemeColor.Default)
+ .AddClass("badge-overlap", Overlap)
.AddClass(BadgeClass)
.Build();
@@ -102,7 +102,7 @@ public partial class Badge : UIComponent
public bool Bordered { get; set; }
///
- /// Sets the Icon to use in the badge.
+ /// Sets the Glyph to use in the badge.
///
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
diff --git a/src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs b/src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs
index 1b5e762..0f1bb03 100644
--- a/src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs
+++ b/src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs
@@ -10,7 +10,7 @@ public partial class BreadcrumbLink : UIComponent
[CascadingParameter]
public Breadcrumbs Parent { get; set; }
- private string Classname => new CssBuilder("mud-breadcrumb-item")
- .AddClass("mud-disabled", Item?.Disabled)
+ private string Classname => new CssBuilder("breadcrumb-item")
+ .AddClass("disabled", Item?.Disabled)
.Build();
}
diff --git a/src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor b/src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor
index 6b3cbdb..0814832 100644
--- a/src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor
+++ b/src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor
@@ -1,7 +1,7 @@
@namespace Connected.Components
@inherits UIComponent
-
+