Various updates

Add ButtonBase component Add DeleteButton component Add ResetButton component Add SubmitButton component Add IsNavbarItem property to ThemeSelector Add test page for buttons Fix issue where hiding Message component failed Update publishing parameters for improved SourceLink Update several components to improve custom attribute support Update Tab component so IsEnabled property is deprecated Update Navbar to support custom href attribute Update Navbar to support image in burger area
NF-Software-Inc · Mar 28, 2024 · d71b3b1 · d71b3b1
1 parent 646560c
commit d71b3b1
Show file tree

Hide file tree

Showing 39 changed files with 392 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,11 @@ The following components are currently available for use. All of them are docume
 **Elements**
 
 * `<BooleanIcon />`, creates an icon with either a check or 'X'
+* `<ButtonBase />`, allows easily creating standard buttons
+* `<DeleteButton />`, creates a button to delete a record with a confirmation modal
 * `<ProgressBar />`, creates a meter to display completion or loading status
+* `<ResetButton />`, creates a button to reset contents of a form
+* `<SubmitButton />`, creates a button to submit contents of a form
 
 **Errors**
 

diff --git a/easy-blazor-bulma-demo/Components/Layout/NavMenu.razor b/easy-blazor-bulma-demo/Components/Layout/NavMenu.razor
@@ -1,4 +1,4 @@
-<Navbar class="is-dark" DisplayText="Easy Blazor Bulma">
+<Navbar class="is-dark" DisplayText="Easy Blazor Bulma" DisplayImageUrl="favicon.png">
 	<NavbarStart>
 		<NavbarDropdown DisplayText="Components">
 			<NavbarItem href="message">Message</NavbarItem>
@@ -9,6 +9,7 @@
 		</NavbarDropdown>
 		<NavbarDropdown DisplayText="Elements">
 			<NavbarItem href="booleanIcon">Boolean Icon</NavbarItem>
+			<NavbarItem href="buttons">Buttons</NavbarItem>
 			<NavbarItem href="progressBar">Progress Bar</NavbarItem>
 		</NavbarDropdown>
 		<NavbarDropdown DisplayText="Errors" IsFullWidth=true>

diff --git a/easy-blazor-bulma-demo/Components/Pages/Components/TestTabs.razor b/easy-blazor-bulma-demo/Components/Pages/Components/TestTabs.razor
@@ -15,7 +15,7 @@
 			<p class="block">And this one has a count of how many times you clicked it.</p>
 			<p class="block">Tab 3 has been clicked: @Tab3Clicked times.</p>
 		</Tab>
-		<Tab Name="Disabled" Icon="cancel" IsEnabled=false></Tab>
+		<Tab Name="Disabled" Icon="cancel" disabled="disabled"></Tab>
 	</Tabs>
 </div>
 

diff --git a/easy-blazor-bulma-demo/Components/Pages/Elements/TestButtons.razor b/easy-blazor-bulma-demo/Components/Pages/Elements/TestButtons.razor
@@ -0,0 +1,44 @@
+@using System.ComponentModel.DataAnnotations
+
+@page "/buttons"
+@inherits ComponentBase
+
+<TitleBlock Title="Buttons Test" />
+
+<div class="container">
+	<Panel class="m-3" Title="Button Tests" Color="BulmaColors.Turquoise">
+		<div class="block">
+			<EditForm Model="InputModel">
+				<div class="field">
+					<Label For="() => InputModel.Test" TooltipMode="TooltipDisplayMode" />
+					<div class="control has-icons-left">
+						<InputText class="input" @bind-Value=InputModel.Test />
+						<span class="icon material-icons is-left">title</span>
+					</div>
+				</div>
+
+				<div class="field">
+					<div class="control">
+						<SubmitButton />
+						<ResetButton />
+					</div>
+				</div>
+			</EditForm>
+		</div>
+
+		<div class="block">
+			<DeleteButton DisplayText="Test Delete Button" Icon="delete_forever" Color="BulmaColors.Purple" ConfirmationText="Do you really want to delete this?" />
+		</div>
+	</Panel>
+</div>
+
+@code {
+	private PageModel InputModel = new();
+	private readonly TooltipOptions TooltipDisplayMode = TooltipOptions.Right | TooltipOptions.HasArrow | TooltipOptions.Multiline;
+
+	private class PageModel
+	{
+		[Display(Name = "Test", Description = "A value to demonstrate the buttons.")]
+		public string Test { get; set; } = "Hello";
+	}
+}
diff --git a/easy-blazor-bulma-demo/Platforms/Windows/Package.appxmanifest b/easy-blazor-bulma-demo/Platforms/Windows/Package.appxmanifest
@@ -6,7 +6,7 @@
   xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
   IgnorableNamespaces="uap rescap">
 
-  <Identity Name="maui-package-name-placeholder" Publisher="CN=NF Software Inc" Version="1.0.12.0" />
+  <Identity Name="maui-package-name-placeholder" Publisher="CN=NF Software Inc" Version="1.0.13.0" />
 
   <mp:PhoneIdentity PhoneProductId="CCD01537-1637-424D-BA72-B40EB964AEC2" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
 

diff --git a/easy-blazor-bulma-demo/easy-blazor-bulma-demo.appinstaller b/easy-blazor-bulma-demo/easy-blazor-bulma-demo.appinstaller
@@ -7,9 +7,9 @@
     <MainPackage
         Name="6F9296F4-8B2E-4C2B-883E-EF6C933AE2F6"
         Publisher="CN=NF Software Inc, O=NF Software Inc, S=Ontario, C=CA, OID.2.5.4.15=Private Organization, OID.1.3.6.1.4.1.311.60.2.1.2=Ontario, OID.1.3.6.1.4.1.311.60.2.1.3=CA, SERIALNUMBER=1000368489"
-        Version="1.0.12.0"
+        Version="1.0.13.0"
         ProcessorArchitecture="x64"
-        Uri="https://github.com/thirstyape/easy-blazor-bulma/releases/download/v1.0.12/easy-blazor-bulma-demo_1.0.12.0_x64.msix" />
+        Uri="https://github.com/thirstyape/easy-blazor-bulma/releases/download/v1.0.13/easy-blazor-bulma-demo_1.0.13.0_x64.msix" />
 
     <UpdateSettings>
         <OnLaunch HoursBetweenUpdateChecks="3" ShowPrompt="false" />

diff --git a/easy-blazor-bulma-demo/easy-blazor-bulma-demo.csproj b/easy-blazor-bulma-demo/easy-blazor-bulma-demo.csproj
@@ -13,10 +13,10 @@
 		<Company>NF Software Inc.</Company>
 		<Product>Easy Logger Parser</Product>
 		<Copyright>Copyright 2024 $(Company)</Copyright>
-		<AssemblyVersion>1.0.12.0</AssemblyVersion>
-		<FileVersion>1.0.12.0</FileVersion>
-		<Version>1.0.12</Version>
-		<MauiVersion>8.0.10</MauiVersion>
+		<AssemblyVersion>1.0.13.0</AssemblyVersion>
+		<FileVersion>1.0.13.0</FileVersion>
+		<Version>1.0.13</Version>
+		<MauiVersion>8.0.14</MauiVersion>
 
         <!-- Display name -->
         <ApplicationTitle>Easy Blazor Bulma</ApplicationTitle>
@@ -26,7 +26,7 @@
 		<ApplicationIdGuid>033431F0-FF8E-466E-ACE0-C8C426AE0242</ApplicationIdGuid>
 
         <!-- Versions -->
-        <ApplicationDisplayVersion>1.0.12</ApplicationDisplayVersion>
+        <ApplicationDisplayVersion>1.0.13</ApplicationDisplayVersion>
         <ApplicationVersion>1</ApplicationVersion>
 
         <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>

diff --git a/easy-blazor-bulma/Bulma/Components/Message.razor b/easy-blazor-bulma/Bulma/Components/Message.razor
@@ -1,7 +1,7 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<article class='@FullCssClass'>
+<article class='@FullCssClass' @attributes='AdditionalAttributes?.Where(x => x.Key != "class")'>
     @if (Title != null)
     {
         <div class="message-header">

diff --git a/easy-blazor-bulma/Bulma/Components/Message.razor.cs b/easy-blazor-bulma/Bulma/Components/Message.razor.cs
@@ -54,7 +54,7 @@ private string FullCssClass
 			var css = "message";
 
 			if (IsHidden)
-				css += "is-hidden";
+				css += " is-hidden";
 
             if (Color != BulmaColors.Default)
                 css += ' ' + BulmaColorHelper.GetColorCss(Color);
@@ -77,5 +77,6 @@ private string? CssClass
 	private void Delete()
 	{
 		IsHidden = true;
+		StateHasChanged();
 	}
 }
diff --git a/easy-blazor-bulma/Bulma/Components/Modal.razor b/easy-blazor-bulma/Bulma/Components/Modal.razor
@@ -1,7 +1,7 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<div class='@FullCssClass'>
+<div class='@FullCssClass' @attributes='AdditionalAttributes?.Where(x => x.Key != "class")'>
 	@if (UseBackground)
 	{
 		<div class="modal-background" @onclick='() => CloseModal()'></div>

diff --git a/easy-blazor-bulma/Bulma/Components/Navbar.razor b/easy-blazor-bulma/Bulma/Components/Navbar.razor
@@ -3,13 +3,21 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<nav class="@FullCssClass" role="navigation" aria-label="main navigation">
+<nav class="@FullCssClass" role="navigation" aria-label="main navigation" @attributes='FilteredAttributes'>
 	@if (UseBurger || string.IsNullOrWhiteSpace(DisplayText) == false)
 	{
 		<div class="navbar-brand no-select">
-			@if (string.IsNullOrWhiteSpace(DisplayText) == false)
+			@if (string.IsNullOrWhiteSpace(DisplayText) == false || string.IsNullOrWhiteSpace(DisplayImageUrl) == false)
 			{
-				<NavLink href="" ActiveClass="is-active" class="navbar-item" Match="NavLinkMatch.All">@DisplayText</NavLink>
+				<NavLink ActiveClass="is-active" href="@Href" class="navbar-item" Match="NavLinkMatch.All">
+					@if (string.IsNullOrWhiteSpace(DisplayImageUrl) == false)
+					{
+						<span class="mr-2">
+							<img src="@DisplayImageUrl" />
+						</span>
+					}
+					<span>@DisplayText</span>
+				</NavLink>
 			}
 			@if (UseBurger)
 			{

diff --git a/easy-blazor-bulma/Bulma/Components/Navbar.razor.cs b/easy-blazor-bulma/Bulma/Components/Navbar.razor.cs
@@ -17,6 +17,12 @@ public partial class Navbar : ComponentBase
 	[Parameter]
 	public string? DisplayText { get; set; }
 
+	/// <summary>
+	/// The URL of an image to display in the top left of the navbar.
+	/// </summary>
+	[Parameter]
+	public string? DisplayImageUrl { get; set; }
+
 	/// <summary>
 	/// Specifies whether to display the burger icon for mobile devices.
 	/// </summary>
@@ -49,6 +55,7 @@ public partial class Navbar : ComponentBase
 
 	private bool IsActive;
 	private string? Id;
+	private string Href = "";
 
 	private string FullCssClass => string.Join(' ', "navbar", CssClass);
 
@@ -89,6 +96,9 @@ private string? CssClass
 		}
 	}
 
+	private readonly string[] Filter = new[] { "class", "id", "role", "aria-label", "href" };
+	private IReadOnlyDictionary<string, object>? FilteredAttributes => AdditionalAttributes?.Where(x => Filter.Contains(x.Key) == false).ToDictionary(x => x.Key, x => x.Value);
+
 	/// <inheritdoc />
 	protected override void OnInitialized()
 	{
@@ -99,6 +109,12 @@ protected override void OnInitialized()
 			else
 				Id = Guid.NewGuid().ToString();
 		}
+
+		if (string.IsNullOrWhiteSpace(Href))
+		{
+			if (AdditionalAttributes != null && AdditionalAttributes.TryGetValue("href", out var href) && string.IsNullOrWhiteSpace(Convert.ToString(href, CultureInfo.InvariantCulture)) == false)
+				Href = href.ToString() ?? string.Empty;
+		}
 	}
 
 	private void ToggleMenu()

diff --git a/easy-blazor-bulma/Bulma/Components/NavbarDropdown.razor b/easy-blazor-bulma/Bulma/Components/NavbarDropdown.razor
@@ -1,7 +1,7 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<div class="@FullCssClass">
+<div class="@FullCssClass" @attributes='FilteredAttributes'>
 	<div class="navbar-link" @onclick="ToggleMenu">
 		@if (string.IsNullOrWhiteSpace(Icon) == false)
 		{

diff --git a/easy-blazor-bulma/Bulma/Components/NavbarDropdown.razor.cs b/easy-blazor-bulma/Bulma/Components/NavbarDropdown.razor.cs
@@ -106,6 +106,9 @@ private string? CssClass
 		}
 	}
 
+	private readonly string[] Filter = new[] { "class", "dropdown-class" };
+	private IReadOnlyDictionary<string, object>? FilteredAttributes => AdditionalAttributes?.Where(x => Filter.Contains(x.Key) == false).ToDictionary(x => x.Key, x => x.Value);
+
 	private void ToggleMenu()
 	{
 		IsActive = !IsActive;

diff --git a/easy-blazor-bulma/Bulma/Components/Panel.razor b/easy-blazor-bulma/Bulma/Components/Panel.razor
@@ -1,7 +1,7 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<div class='@FullCssClass'>
+<div class='@FullCssClass' @attributes='FilteredAttributes'>
     <p class='@HeaderCssClass' @onclick="() => TitleClicked()">
         <span>@Title</span>
         @if (ShowCollapseIcons || string.IsNullOrWhiteSpace(Icon) == false)

diff --git a/easy-blazor-bulma/Bulma/Components/Panel.razor.cs b/easy-blazor-bulma/Bulma/Components/Panel.razor.cs
@@ -146,7 +146,10 @@ private string? CssClass
         }
     }
 
-    private async Task TitleClicked()
+	private readonly string[] Filter = new[] { "class", "content-class", "header-class" };
+	private IReadOnlyDictionary<string, object>? FilteredAttributes => AdditionalAttributes?.Where(x => Filter.Contains(x.Key) == false).ToDictionary(x => x.Key, x => x.Value);
+
+	private async Task TitleClicked()
     {
         if (OnTitleClicked.HasDelegate)
             await OnTitleClicked.InvokeAsync();

diff --git a/easy-blazor-bulma/Bulma/Components/Steps.razor b/easy-blazor-bulma/Bulma/Components/Steps.razor
@@ -1,10 +1,10 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<ul class='@FullCssClass'>
+<ul class='@FullCssClass' @attributes='AdditionalAttributes?.Where(x => x.Key != "class")'>
 	@foreach (var step in Children)
 	{
-		<li class='@GetChildCssClass(step)' @onclick="() => OnSelectionChanged(step)">
+		<li class='@GetChildCssClass(step)' @onclick="() => OnSelectionChanged(step)" @attributes='step.AdditionalAttributes?.Where(x => x.Key != "class")'>
 			<span class='@GetMarkerCssClass(step)'>
 				@if (string.IsNullOrWhiteSpace(step.Icon) == false)
 				{

diff --git a/easy-blazor-bulma/Bulma/Components/Steps.razor.cs b/easy-blazor-bulma/Bulma/Components/Steps.razor.cs
@@ -195,13 +195,18 @@ private async Task OnSelectionChanged(Step step)
     private string? GetChildCssClass(Step step)
     {
         var active = Children.Single(x => x.Name == Active);
+        var css = "steps-segment";
 
-        if (step.Index < active.Index)
-            return "steps-segment";
-        else if (step.Index == active.Index)
-            return "steps-segment is-active is-dashed";
-        else
-            return "steps-segment is-dashed";
+		if (step.Index == active.Index)
+			css += " is-active";
+
+		if (step.Index >= active.Index)
+			css += " is-dashed";
+
+		if (step.AdditionalAttributes != null && step.AdditionalAttributes.TryGetValue("class", out var stepCss) && string.IsNullOrWhiteSpace(Convert.ToString(stepCss, CultureInfo.InvariantCulture)) == false)
+			css += $" {stepCss}";
+
+		return css;
     }
 
     private string GetMarkerCssClass(Step step)

diff --git a/easy-blazor-bulma/Bulma/Components/Tab.razor b/easy-blazor-bulma/Bulma/Components/Tab.razor
@@ -1,7 +1,7 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-@if (IsActive && IsEnabled && ChildContent != null)
+@if (IsActive && ChildContent != null)
 {
     @ChildContent
 }
diff --git a/easy-blazor-bulma/Bulma/Components/Tab.razor.cs b/easy-blazor-bulma/Bulma/Components/Tab.razor.cs
@@ -23,18 +23,25 @@ public partial class Tab : ComponentBase, IAsyncDisposable
 	public string? Icon { get; set; }
 
 	/// <summary>
-	/// Specifies whether this tab is selectable within the tab bar.
+	/// Obsolete, will be removed.
 	/// </summary>
 	[Parameter]
-	public bool IsEnabled { get; set; } = true;
+	[Obsolete("This parameter is no longer used, add a disabled attribute for the same effect.")]
+	public bool IsEnabled { get; set; }
 
 	/// <summary>
 	/// The content to display within the tab.
 	/// </summary>
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
 
-	[CascadingParameter]
+    /// <summary>
+    /// Any additional attributes applied directly to the component.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [CascadingParameter]
 	private Tabs Parent { get; set; }
 
     internal bool IsActive => Name != null && Parent.Active == Name;

diff --git a/easy-blazor-bulma/Bulma/Components/Tabs.razor b/easy-blazor-bulma/Bulma/Components/Tabs.razor
@@ -1,11 +1,11 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<div class='@FullCssClass'>
+<div class='@FullCssClass' @attributes='AdditionalAttributes?.Where(x => x.Key != "class")'>
     <ul>
         @foreach (var tab in Children)
         {
-            <li class="@GetChildCssClass(tab)" @onclick="() => OnSelectionChanged(tab)" disabled='@(tab.IsEnabled == false)'>
+			<li class="@GetChildCssClass(tab)" @onclick="() => OnSelectionChanged(tab)" @attributes='tab.AdditionalAttributes?.Where(x => x.Key != "class")'>
                 <a>
                     @if (string.IsNullOrWhiteSpace(tab.Icon) == false)
                     {

diff --git a/easy-blazor-bulma/Bulma/Components/Tabs.razor.cs b/easy-blazor-bulma/Bulma/Components/Tabs.razor.cs
@@ -177,7 +177,7 @@ internal async Task RemoveChild(Tab tab)
 
 	private async Task OnSelectionChanged(Tab tab)
 	{
-		if (tab.IsEnabled == false) 
+		if (tab.AdditionalAttributes != null && tab.AdditionalAttributes.Any(x => x.Key == "disabled" && (x.Value.ToString() == "disabled" || x.Value.ToString() == "true"))) 
 			return;
 
         if (OnItemClicked != null)
@@ -206,6 +206,9 @@ private async Task OnSelectionChanged(Tab tab)
 		if (Active == tab.Name)
 			css += "is-active";
 
+		if (tab.AdditionalAttributes != null && tab.AdditionalAttributes.TryGetValue("class", out var tabCss) && string.IsNullOrWhiteSpace(Convert.ToString(tabCss, CultureInfo.InvariantCulture)) == false)
+			css += $" {tabCss}";
+
 		return css.TrimEnd();
 	}
 }
diff --git a/easy-blazor-bulma/Bulma/Elements/BooleanIcon.razor b/easy-blazor-bulma/Bulma/Elements/BooleanIcon.razor
@@ -1,4 +1,4 @@
 @namespace easy_blazor_bulma
 @inherits ComponentBase
 
-<span class='@FullCssClass'>@Icon</span>
+<span class='@FullCssClass' @attributes='AdditionalAttributes?.Where(x => x.Key != "class")'>@Icon</span>