From b160a7ad468e2740a517fb1f22cc8d00f3d551fb Mon Sep 17 00:00:00 2001 From: Manuel Monteagudo Date: Sat, 5 Oct 2024 00:30:05 -0400 Subject: [PATCH 1/7] Adds Floating label type to MultiSelect --- .../Forms/HxMultiSelect.cs | 7 ++++++- .../Forms/MultiSelectSettings.cs | 5 +++++ .../XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml | 8 ++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 1271cf2f..80c08ab7 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -8,7 +8,7 @@ namespace Havit.Blazor.Components.Web.Bootstrap; /// /// Type of values. /// Type of items. -public class HxMultiSelect : HxInputBase>, IInputWithSize +public class HxMultiSelect : HxInputBase>, IInputWithSize, IInputWithLabelType { /// /// Return defaults. @@ -161,6 +161,11 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public IconBase FilterClearIcon { get; set; } protected IconBase FilterClearIconEffective => FilterClearIcon ?? GetSettings()?.FilterClearIcon ?? GetDefaults().FilterClearIcon; + /// + [Parameter] public LabelType? LabelType { get; set; } + protected LabelType LabelTypeEffective => LabelType ?? GetSettings()?.LabelType ?? GetDefaults()?.LabelType ?? HxSetup.Defaults.LabelType; + LabelType IInputWithLabelType.LabelTypeEffective => LabelTypeEffective; + private List _itemsToRender; private HxMultiSelectInternal _hxMultiSelectInternalComponent; diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs index 27a62131..4bdca09f 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs @@ -12,6 +12,11 @@ public record MultiSelectSettings : InputSettings /// public InputSize? InputSize { get; set; } + /// + /// The label type. + /// + public LabelType? LabelType { get; set; } + /// /// Enables filtering capabilities. /// diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 644d8078..ac38f5b0 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -4681,6 +4681,9 @@ Icon displayed in filter input for clearing the filter. + + + @@ -5395,6 +5398,11 @@ Input size. + + + The label type. + + Enables filtering capabilities. From 2468d138eb0a03fbea420909e8fffd9ba416cc86 Mon Sep 17 00:00:00 2001 From: Manuel Monteagudo Date: Sat, 5 Oct 2024 02:20:25 -0400 Subject: [PATCH 2/7] Adds floating label type to MultiSelect --- .../Forms/HxInputBase.cs | 25 ++++++++++++++++--- .../Forms/HxMultiSelect.cs | 2 ++ .../Internal/HxMultiSelectInternal.razor | 10 +++++--- .../Internal/HxMultiSelectInternal.razor.cs | 4 +++ .../HxMultiSelect_Demo_BasicUsage.razor | 1 + 5 files changed, 35 insertions(+), 7 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs index 267a0e01..0080c88a 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs @@ -145,10 +145,27 @@ public abstract class HxInputBase : InputBase, ICascadeEnabledCo /// /// Elements rendering order. /// - protected virtual LabelValueRenderOrder RenderOrder => - ((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating)) - ? LabelValueRenderOrder.ValueLabel - : LabelValueRenderOrder.LabelValue; + protected virtual LabelValueRenderOrder RenderOrder + { + get + { + if ((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating)) + { + if (this.GetType().IsGenericType && this.GetType().GetGenericTypeDefinition() == typeof(HxMultiSelect<,>)) + { + return LabelValueRenderOrder.ValueOnly; + } + else + { + return LabelValueRenderOrder.ValueLabel; + } + } + else + { + return LabelValueRenderOrder.LabelValue; + } + } + } /// /// Gets or sets the current value of the input. diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 80c08ab7..4045bdd3 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -217,6 +217,8 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(102, nameof(HxMultiSelectInternal.InputCssClass), GetInputCssClassToRender()); builder.AddAttribute(103, nameof(HxMultiSelectInternal.InputText), GetInputText()); builder.AddAttribute(104, nameof(HxMultiSelectInternal.EnabledEffective), EnabledEffective); + builder.AddAttribute(125, nameof(HxMultiSelectInternal.LabelTypeEffective), LabelTypeEffective); + builder.AddAttribute(126, nameof(HxMultiSelectInternal.LabelText), Label); builder.AddAttribute(105, nameof(HxMultiSelectInternal.ItemsToRender), _itemsToRender); builder.AddAttribute(106, nameof(HxMultiSelectInternal.TextSelector), TextSelector); builder.AddAttribute(107, nameof(HxMultiSelectInternal.ValueSelector), ValueSelector); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index c41401a1..50f3c15e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -5,8 +5,7 @@ @{ bool enabled = EnabledEffective && (ItemsToRender != null); } -
@@ -16,7 +15,7 @@ } @InputGroupStartTemplate -
+
+ @if (LabelTypeEffective == LabelType.Floating) + { + + } + @* Must be always rendered otherwise does not work after disable->enabled scenario *@
    @if (enabled) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index b53c7335..f81ae083 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -13,8 +13,12 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public string InputText { get; set; } + [Parameter] public string LabelText { get; set; } + [Parameter] public bool EnabledEffective { get; set; } + [Parameter] public LabelType LabelTypeEffective { get; set; } + [Parameter] public List ItemsToRender { get; set; } [Parameter] public List SelectedValues { get; set; } diff --git a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor index e6f3db65..3ac1a312 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor @@ -4,6 +4,7 @@ TItem="EmployeeDto" TValue="int" Data="@employees" + LabelType="LabelType.Floating" @bind-Value="selectedEmployeeIds" TextSelector="@(p => p.Name)" ValueSelector="@(p => p.Id)" From fa73fcd36e6efc7221fff23dac340b15d8cb9889 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Tue, 26 Nov 2024 00:41:05 +0100 Subject: [PATCH 3/7] reverted basic demo + separate testing page --- .../HxMultiSelect_Demo_BasicUsage.razor | 1 - .../HxMultiSelect_FloatingLabel_Test.razor | 45 +++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor diff --git a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor index 3ac1a312..e6f3db65 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor @@ -4,7 +4,6 @@ TItem="EmployeeDto" TValue="int" Data="@employees" - LabelType="LabelType.Floating" @bind-Value="selectedEmployeeIds" TextSelector="@(p => p.Name)" ValueSelector="@(p => p.Id)" diff --git a/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor b/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor new file mode 100644 index 00000000..49ff2a4d --- /dev/null +++ b/Havit.Blazor.TestApp/Havit.Blazor.TestApp.Client/HxMultiSelectTests/HxMultiSelect_FloatingLabel_Test.razor @@ -0,0 +1,45 @@ +@page "/HxMultiSelect_FloatingLabel" +@rendermode InteractiveServer +@inject IDemoDataService DemoDataService + +
    + + + + For visual reference: + + +
    + + +

    Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

    + +@code { + private IEnumerable employees; + private List selectedEmployeeIds = new(); + private int? selectedEmployeeId; + + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } +} \ No newline at end of file From 49cfb705768057494235e429a311d92f818b0b63 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Tue, 26 Nov 2024 00:49:35 +0100 Subject: [PATCH 4/7] CSS class moved to outermost element, CssClassHelper usage --- .../Internal/HxMultiSelectInternal.razor | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 416744ad..025a5d7b 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -5,7 +5,8 @@ @{ bool enabled = EnabledEffective && (ItemsToRender != null); } -
    @@ -15,25 +16,27 @@ } @InputGroupStartTemplate -
    +
    + type="text" + id="@InputId" + class="@InputCssClass" + value="@(((ItemsToRender == null) && !String.IsNullOrEmpty(NullDataText)) ? NullDataText : InputText)" + disabled="@(!enabled)" + readonly="true" + aria-expanded="@_isShown" + data-bs-toggle="@(enabled ? "dropdown" : null)" + data-bs-auto-close="outside" + @attributes="this.AdditionalAttributes" /> + + @if (LabelTypeEffective == LabelType.Floating) + { + + } - @if (LabelTypeEffective == LabelType.Floating) - { - - } - @* Must be always rendered otherwise does not work after disable->enabled scenario *@
      @if (enabled) @@ -49,7 +52,7 @@ autocomplete="off" value="@_filterText" @oninput="HandleFilterInputChanged" - @onclick:stopPropagation + @onclick:stopPropagation onfocusin="this.select()" />
      From 096dfd55179d7f33d4342015716047197c076787 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Tue, 26 Nov 2024 01:14:43 +0100 Subject: [PATCH 5/7] RenderOrder override consolidation --- .../Forms/HxInputBase.cs | 25 +++---------------- .../Forms/HxMultiSelect.cs | 15 +++++++++++ 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs index bc810029..e4f16d2f 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxInputBase.cs @@ -145,27 +145,10 @@ public abstract class HxInputBase : InputBase, ICascadeEnabledCo /// /// Elements rendering order. /// - protected virtual LabelValueRenderOrder RenderOrder - { - get - { - if ((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating)) - { - if (this.GetType().IsGenericType && this.GetType().GetGenericTypeDefinition() == typeof(HxMultiSelect<,>)) - { - return LabelValueRenderOrder.ValueOnly; - } - else - { - return LabelValueRenderOrder.ValueLabel; - } - } - else - { - return LabelValueRenderOrder.LabelValue; - } - } - } + protected virtual LabelValueRenderOrder RenderOrder => + ((this is IInputWithLabelType inputWithLabelType) && (inputWithLabelType.LabelTypeEffective == LabelType.Floating)) + ? LabelValueRenderOrder.ValueLabel + : LabelValueRenderOrder.LabelValue; /// /// Gets or sets the current value of the input. diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 4045bdd3..757c0645 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -165,6 +165,21 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public LabelType? LabelType { get; set; } protected LabelType LabelTypeEffective => LabelType ?? GetSettings()?.LabelType ?? GetDefaults()?.LabelType ?? HxSetup.Defaults.LabelType; LabelType IInputWithLabelType.LabelTypeEffective => LabelTypeEffective; + protected override LabelValueRenderOrder RenderOrder + { + get + { + if (LabelTypeEffective == Bootstrap.LabelType.Floating) + { + // Floating label type renders the label in HxMultiSelectInternal component. + return LabelValueRenderOrder.ValueOnly; + } + else + { + return LabelValueRenderOrder.LabelValue; + } + } + } private List _itemsToRender; private HxMultiSelectInternal _hxMultiSelectInternalComponent; From e82f5e094f90781d7c178ab6d95c8d131e4dd57e Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Tue, 26 Nov 2024 01:21:56 +0100 Subject: [PATCH 6/7] HxFormValueComponentRenderer_Label usage (instead of direct