Adds floating label type to MultiSelect

havit · Oct 5, 2024 · 2468d13 · 2468d13
1 parent b160a7a
commit 2468d13
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git 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<TValue> : InputBase<TValue>, ICascadeEnabledCo
 	/// <summary>
 	/// Elements rendering order.
 	/// </summary>
-	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;
+			}
+		}
+	}
 
 	/// <summary>
 	/// 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
@@ -217,6 +217,8 @@ protected override void BuildRenderInput(RenderTreeBuilder builder)
 		builder.AddAttribute(102, nameof(HxMultiSelectInternal<TValue, TItem>.InputCssClass), GetInputCssClassToRender());
 		builder.AddAttribute(103, nameof(HxMultiSelectInternal<TValue, TItem>.InputText), GetInputText());
 		builder.AddAttribute(104, nameof(HxMultiSelectInternal<TValue, TItem>.EnabledEffective), EnabledEffective);
+		builder.AddAttribute(125, nameof(HxMultiSelectInternal<TValue, TItem>.LabelTypeEffective), LabelTypeEffective);
+		builder.AddAttribute(126, nameof(HxMultiSelectInternal<TValue, TItem>.LabelText), Label);
 		builder.AddAttribute(105, nameof(HxMultiSelectInternal<TValue, TItem>.ItemsToRender), _itemsToRender);
 		builder.AddAttribute(106, nameof(HxMultiSelectInternal<TValue, TItem>.TextSelector), TextSelector);
 		builder.AddAttribute(107, nameof(HxMultiSelectInternal<TValue, TItem>.ValueSelector), ValueSelector);

diff --git 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);
 }
-<div class="@CssClassHelper.Combine("hx-multi-select",
-                                    HasInputGroups ? "input-group" : null,
+<div class="@CssClassHelper.Combine(HasInputGroups ? "input-group" : null,
                                     HasInputGroupEnd ? "input-group-end" : null,
 					                HasInputGroupStart ? "input-group-start" : null,
                                     InputGroupCssClass)">
@@ -16,7 +15,7 @@
 	}
 
 	@InputGroupStartTemplate
-	<div @ref="_elementReference" class="dropdown" role="listbox">
+    <div @ref="_elementReference" class="hx-multi-select dropdown @(LabelTypeEffective == LabelType.Floating ? "form-floating": "")" role="listbox">
 
 		<input @ref="_inputElementReference"
 				type="text"
@@ -30,6 +29,11 @@
 				data-bs-auto-close="outside"
 				@attributes="this.AdditionalAttributes" />
 
+        @if (LabelTypeEffective == LabelType.Floating)
+        {
+            <label for="@InputId">@LabelText</label>
+        }
+
 		@* Must be always rendered otherwise does not work after disable->enabled scenario *@
 		<ul class="@CssClassHelper.Combine("dropdown-menu", _isShown ? "show" : null)">
 			@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
@@ -13,8 +13,12 @@ public partial class HxMultiSelectInternal<TValue, TItem> : 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<TItem> ItemsToRender { get; set; }
 
 	[Parameter] public List<TValue> SelectedValues { get; set; }

diff --git a/...lazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor b/...lazor.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)"