Check: Add Group Name parameter (#5372)

* Add Group Name to Check * Rename Group to Name * add name example * Fix naming and docs * Move name to beginning * Add name to all providers implementation * Update comments * Update Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/CheckPage.razor --------- Co-authored-by: Mladen Macanovic <[email protected]> Co-authored-by: Mladen Macanović <[email protected]>
Megabit · Mar 25, 2024 · b654447 · b654447
1 parent 7d58983
commit b654447
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 10 deletions.
diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -1557,6 +1557,13 @@ void OnRememberMeChanged( bool value )
     }
 }";
 
+        public const string CheckWithNameExample = @"<Check TValue=""bool"" Name=""@name"">Check me out</Check>
+<Check TValue=""bool"" Name=""@name"">Check me out too!</Check>
+
+@code{
+    string name = ""CheckMeOut"";
+}";
+
         public const string AutoCloseExample = @"<Alert @bind-Visible=""@visible"">
     I can be closed!
     <CloseButton AutoClose=""true"" />

diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/CheckPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/CheckPage.razor
@@ -24,6 +24,16 @@
     <DocsPageSectionSource Code="CheckExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="With name">
+        This example showcases two Blazorise checkboxes linked to the same identifier, <Strong>CheckMeOut</Strong>. Both checkboxes contribute to the same data field upon submission when included in a form. This setup is ideal for grouping related choices under one name but requires careful data handling to distinguish between the choices on the server side.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined>
+        <CheckWithNameExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="CheckWithNameExample" />
+</DocsPageSection>
+
 <DocsPageSubtitle>
     Usage
 </DocsPageSubtitle>
@@ -73,4 +83,7 @@
     <DocsAttributesItem Name="Cursor" Type="Cursor" Default="Default">
         Defines the mouse cursor based on the behavior by the current CSS framework.
     </DocsAttributesItem>
+    <DocsAttributesItem Name="Name" Type="Cursor" Default="Default">
+        Defines the name attribute of a checkbox. The name attribute is used to identify form data after it has been submitted to the server, or to reference form data using JavaScript on the client side.
+    </DocsAttributesItem>
 </DocsAttributes>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/Code/CheckWithNameExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/Code/CheckWithNameExampleCode.html
@@ -0,0 +1,11 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Check</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bool</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>name</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Check me out<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Check</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Check</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bool</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>name</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Check me out too!<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Check</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code{
+    <span class="keyword">string</span> name = <span class="string">&quot;CheckMeOut&quot;</span>;
+}
+</pre></div>
+</div>
diff --git a/...mentation/Blazorise.Docs/Pages/Docs/Components/Checks/Examples/CheckWithNameExample.razor b/...mentation/Blazorise.Docs/Pages/Docs/Components/Checks/Examples/CheckWithNameExample.razor
@@ -0,0 +1,8 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<Check TValue="bool" Name="@name">Check me out</Check>
+<Check TValue="bool" Name="@name">Check me out too!</Check>
+
+@code{
+    string name = "CheckMeOut";
+}
diff --git a/Source/Blazorise.AntDesign/Components/Check.razor b/Source/Blazorise.AntDesign/Components/Check.razor
@@ -2,7 +2,7 @@
 @inherits Blazorise.Check<TValue>
 <label class="@WrapperClassNames">
     <span class="@CheckboxClassNames">
-        <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+        <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
         <span class="@InnerClassNames"></span>
     </span>
     <span>

diff --git a/Source/Blazorise.Bootstrap/Components/Check.razor b/Source/Blazorise.Bootstrap/Components/Check.razor
@@ -1,7 +1,7 @@
 @typeparam TValue
 @inherits Blazorise.Check<TValue>
 <Control Role="ControlRole.Check" Inline="@Inline">
-    <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+    <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
     <Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
     @Feedback
 </Control>
diff --git a/Source/Blazorise.Bootstrap5/Components/Check.razor b/Source/Blazorise.Bootstrap5/Components/Check.razor
@@ -1,7 +1,7 @@
 @typeparam TValue
 @inherits Blazorise.Check<TValue>
 <Control Role="ControlRole.Check" Inline="@Inline">
-    <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+    <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
     <Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
     @Feedback
 </Control>
diff --git a/Source/Blazorise.Bulma/Components/Check.razor b/Source/Blazorise.Bulma/Components/Check.razor
@@ -3,14 +3,14 @@
 @if ( ParentIsFieldBody )
 {
     <div class="field">
-        <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+        <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
         <Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
         @Feedback
     </div>
 }
 else
 {
-    <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+    <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
     <Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
     @Feedback
 }
diff --git a/Source/Blazorise.FluentUI2/Components/Check.razor b/Source/Blazorise.FluentUI2/Components/Check.razor
@@ -19,7 +19,7 @@ else
 
     private RenderFragment InputElement => __builder =>
     {
-        <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+        <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
         <div aria-hidden="true" class="fui-Checkbox__indicator">
             <svg fill="currentColor" class="fui-Checkbox__icon" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path></svg>
         </div>

diff --git a/Source/Blazorise.Tailwind/Components/Check.razor b/Source/Blazorise.Tailwind/Components/Check.razor
@@ -1,7 +1,7 @@
 @typeparam TValue
 @inherits Blazorise.Check<TValue>
 <Control Role="ControlRole.Check" Inline="@Inline">
-    <input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+    <input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
     @if ( ChildContent is not null )
     {
         <Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>

diff --git a/Source/Blazorise/Components/Check/Check.razor b/Source/Blazorise/Components/Check/Check.razor
@@ -1,6 +1,6 @@
 @namespace Blazorise
 @typeparam TValue
 @inherits BaseCheckComponent<TValue>
-<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
+<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
 @ChildContent
 @Feedback
diff --git a/Source/Blazorise/Components/Check/Check.razor.cs b/Source/Blazorise/Components/Check/Check.razor.cs
@@ -78,8 +78,15 @@ protected override void BuildClasses( ClassBuilder builder )
     /// <summary>
     /// The indeterminate property can help you to achieve a 'check all' effect.
     /// </summary>
-    [Parameter]
-    public bool? Indeterminate { get; set; }
+    [Parameter] public bool? Indeterminate { get; set; }
+
+    /// <summary>
+    /// Defines the name attribute of a checkbox.
+    /// </summary>
+    /// <remarks>
+    /// The name attribute is used to identify form data after it has been submitted to the server, or to reference form data using JavaScript on the client side.
+    /// </remarks>
+    [Parameter] public string Name { get; set; }
 
     #endregion
 }