Merge 6.0.4

MudBlazor · Jan 3, 2022 · 4418ac9 · 4418ac9
2 parents 5c505ff + af54875
commit 4418ac9
Show file tree

Hide file tree

Showing 17 changed files with 309 additions and 171 deletions.
diff --git a/src/MudBlazor.Docs/Pages/Components/Charts/Chart Types/Examples/LineExample1.razor b/src/MudBlazor.Docs/Pages/Components/Charts/Chart Types/Examples/LineExample1.razor
@@ -1,14 +1,17 @@
 @namespace MudBlazor.Docs.Examples
 
 <div>
-    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px"></MudChart>
+    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="chartOptions"></MudChart>
     <MudButton @onclick="RandomizeData">Randomize Data</MudButton>
+    <MudButton @onclick="RandomizeLineWidths">Randomize Line Widths</MudButton>
     <MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText>
 </div>
 
 @code {
     private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
 
+    public ChartOptions chartOptions = new ChartOptions();
+
     public List<ChartSeries> Series = new List<ChartSeries>()
     {
         new ChartSeries() { Name = "Series 1", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } },
@@ -32,4 +35,10 @@
         Series = new_series;
         StateHasChanged();
     }
+
+    public void RandomizeLineWidths()
+    {
+        chartOptions.LineStrokeWidth = random.NextInt64(1, 10);
+        StateHasChanged();
+    }
 }
diff --git a/src/MudBlazor.Docs/Pages/Components/Field/Examples/FieldBasicExample.razor b/src/MudBlazor.Docs/Pages/Components/Field/Examples/FieldBasicExample.razor
@@ -22,4 +22,15 @@
     <MudItem xs="12" sm="6" md="4">
         <MudField Label="Outlined" Variant="Variant.Outlined"></MudField>
     </MudItem>
+</MudGrid>
+<MudGrid>
+    <MudItem xs="12" sm="6" md="4">
+        <MudField Label="Standard" Variant="Variant.Text" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.CheckCircle" AdornmentColor="Color.Success"></MudField>
+    </MudItem>
+    <MudItem xs="12" sm="6" md="4">
+        <MudField Label="Filled" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Money"></MudField>
+    </MudItem>
+    <MudItem xs="12" sm="6" md="4">
+        <MudField Label="Outlined" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Warning" AdornmentColor="Color.Warning"></MudField>
+    </MudItem>
 </MudGrid>
diff --git a/...udBlazor.Docs/Pages/Customization/Theming/Examples/OverviewThemesDarkPaletteExample.razor b/...udBlazor.Docs/Pages/Customization/Theming/Examples/OverviewThemesDarkPaletteExample.razor
@@ -2,16 +2,18 @@
 @namespace MudBlazor.Docs.Examples
 @page "/iframe/docs/examples/themeprovider/darkpalette"
 
-<MudThemeProvider Theme="_theme" />
+<MudThemeProvider Theme="_theme" @bind-IsDarkMode="_isDarkMode"/>
 <MudSwitch Color="Color.Primary" Class="ma-4" T="bool" CheckedChanged="DarkMode" Label="Toggle Light/Dark Mode"/>
 
 <MudText Class="ma-4">This is an example text!</MudText>
 
 @code{
 
     private MudTheme _theme = new();
+    private bool _isDarkMode = false;
 
-    void DarkMode(bool value) {
-        _theme.IsDarkMode = value;
+    void DarkMode(bool value)
+    {
+        _isDarkMode = value;
     }
 }
diff --git a/src/MudBlazor.Docs/Shared/MainLayout.razor b/src/MudBlazor.Docs/Shared/MainLayout.razor
@@ -4,7 +4,7 @@
 <PageTitle>MudBlazor - Blazor Component Library</PageTitle>
 
 <MudRTLProvider RightToLeft="@_rightToLeft">
-    <MudThemeProvider Theme="_theme"/>
+    <MudThemeProvider Theme="_theme" @bind-IsDarkMode="_isDarkMode"/>
     <MudDialogProvider FullWidth="true" MaxWidth="MaxWidth.ExtraSmall" />
     <MudSnackbarProvider />
 

diff --git a/src/MudBlazor.Docs/Shared/MainLayout.razor.cs b/src/MudBlazor.Docs/Shared/MainLayout.razor.cs
@@ -11,6 +11,7 @@ public partial class MainLayout : LayoutComponentBase
     {
         private bool _drawerOpen = false;
         private bool _rightToLeft = false;
+        private bool _isDarkMode = false;
         private NavMenu _navMenuRef;
 
         [Inject] private NavigationManager NavigationManager { get; set; }
@@ -90,7 +91,7 @@ private void OnSwipe(SwipeDirection direction)
         #region Theme   
         private void DarkMode()
         {
-            _theme.IsDarkMode = !_theme.IsDarkMode;
+            _isDarkMode = !_isDarkMode;
         }
 
         private MudTheme _theme = new();

diff --git a/src/MudBlazor/Components/Chart/Charts/Line.razor b/src/MudBlazor/Components/Chart/Charts/Line.razor
@@ -35,7 +35,7 @@
     <g class="mud-charts-line-series">
         @foreach (var chartLine in _chartLines)
         {
-            <path class="mud-chart-line" @onclick="() => SelectedIndex = chartLine.Index"  fill="none" stroke="@(MudChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="3" d="@chartLine.Data"></path>
+            <path class="mud-chart-line" @onclick="() => SelectedIndex = chartLine.Index"  fill="none" stroke="@(MudChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(MudChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
         }
     </g>
 

diff --git a/src/MudBlazor/Components/Chart/Models/ChartOptions.cs b/src/MudBlazor/Components/Chart/Models/ChartOptions.cs
@@ -22,6 +22,11 @@ public class ChartOptions
         public bool DisableLegend { get; set; }
         public string[] ChartPalette { get; set; } = { Colors.Blue.Accent3, Colors.Teal.Accent3, Colors.Amber.Accent3, Colors.Orange.Accent3, Colors.Red.Accent3, Colors.DeepPurple.Accent3, Colors.Green.Accent3, Colors.LightBlue.Accent3, Colors.Teal.Lighten1, Colors.Amber.Lighten1, Colors.Orange.Lighten1, Colors.Red.Lighten1, Colors.DeepPurple.Lighten1, Colors.Green.Lighten1, Colors.LightBlue.Lighten1, Colors.Amber.Darken2, Colors.Orange.Darken2, Colors.Red.Darken2, Colors.DeepPurple.Darken2, Colors.Grey.Darken2 };
         public InterpolationOption InterpolationOption { get; set; } = InterpolationOption.Straight;
+
+        /// <summary>
+        /// Line width of series in px
+        /// </summary>
+        public double LineStrokeWidth { get; set; } = 3;
     }
     public enum InterpolationOption
     {

diff --git a/src/MudBlazor/Components/Field/MudField.razor b/src/MudBlazor/Components/Field/MudField.razor
@@ -8,14 +8,14 @@
         <div class="@Classname">
             @if (Adornment == Adornment.Start)
             {
-                <MudInputAdornment Class="@AdornmentClassname" Icon="@AdornmentIcon" Size="@IconSize" Text="@AdornmentText" Edge="@Edge.Start" AdornmentClick="@OnAdornmentClick" />
+                <MudInputAdornment Class="@AdornmentClassname" Icon="@AdornmentIcon" Size="@IconSize" Text="@AdornmentText" Edge="@Edge.Start" AdornmentClick="@OnAdornmentClick" Color="@AdornmentColor" />
             }
             <div class="@InnerClassname">
                 @ChildContent
             </div>
             @if (Adornment == Adornment.End)
             {
-                <MudInputAdornment Class="@AdornmentClassname" Icon="@AdornmentIcon" Size="@IconSize" Text="@AdornmentText" Edge="@Edge.End" AdornmentClick="@OnAdornmentClick" />
+                <MudInputAdornment Class="@AdornmentClassname" Icon="@AdornmentIcon" Size="@IconSize" Text="@AdornmentText" Edge="@Edge.End" AdornmentClick="@OnAdornmentClick"  Color="@AdornmentColor" />
             }
             @if (Variant == Variant.Outlined)
             {

diff --git a/src/MudBlazor/Components/Field/MudField.razor.cs b/src/MudBlazor/Components/Field/MudField.razor.cs
@@ -124,6 +124,13 @@ public partial class MudField : MudComponentBase
         [Category(CategoryTypes.Field.Behavior)]
         public Adornment Adornment { get; set; } = Adornment.None;
 
+        /// <summary>
+        /// The color of the adornment if used. It supports the theme colors.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public Color AdornmentColor { get; set; } = Color.Default;
+
         /// <summary>
         /// Sets the Icon Size.
         /// </summary>

diff --git a/src/MudBlazor/Components/NumericField/MudNumericField.razor.cs b/src/MudBlazor/Components/NumericField/MudNumericField.razor.cs
@@ -154,7 +154,8 @@ protected override Task SetValueAsync(T value, bool updateText = true)
         protected override async void OnBlurred(FocusEventArgs obj)
         {
             base.OnBlurred(obj);
-            await UpdateTextPropertyAsync(false);
+            await UpdateValuePropertyAsync(true); //Required to set the value after a blur before the debounce period has elapsed
+            await UpdateTextPropertyAsync(false); //Required to update the string formatting after a blur before the debouce period has elapsed
         }
 
         protected async Task<bool> ValidateInput(T value)