!3536 fix(#I61B4Z): trigger collapse when click on Select component in the HeaderTemplate

* chore: bump version 7.0.1
* revert: 使用 bs collapse
* doc: 更新示例
* fix: 移除客户端收缩机制改用服务器端

src/BootstrapBlazor.Shared/Samples/Cards.razor

@@ -139,6 +139,14 @@
     <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
         <HeaderTemplate>
             @Localizer["CollapsibleHeaderTemplate"]
+            <Select TValue="string">
+                <Options>
+                    <SelectOption Text="Test1" Value="" />
+                    <SelectOption Text="Test2" Value="1" />
+                    <SelectOption Text="Test3" Value="2" />
+                    <SelectOption Text="Test4" Value="3" />
+                </Options>
+            </Select>
         </HeaderTemplate>
         <BodyTemplate>
             @Localizer["CollapsibleBody"]

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.0.1-beta08</Version>
+    <Version>7.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Card/Card.css

@@ -3,33 +3,29 @@
     --bs-card-inner-border-radius: calc(var(--bs-border-radius) - 1px);
     --bb-card-shadow: var(--bb-shadow);
     --bb-card-hover-shadow: var(--bb-hover-shadow);
+    --bb-card-collapse-bar-margin-right: .5rem;
+    --bb-card-header-tag-height: 21px;
 }
 
-    .card .card-collapse {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-    }
+.card-header {
+    border-bottom-width: 0;
+    display: flex;
+    align-items: center;
+}
 
-        .card .card-collapse .card-collapse-body {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            margin-left: .5rem;
-        }
-
-    .card .card-collapse-arrow {
+    .card-header .card-collapse-arrow {
+        margin-right: var(--bb-card-collapse-bar-margin-right);
         transition: transform .3s linear;
     }
 
-    .card .card-header {
-        border-bottom-width: 0;
+    .card-header .card-collapse-bar {
+        cursor: pointer;
+        margin-right: var(--bb-card-collapse-bar-margin-right);
     }
 
-        .card .card-header + .card-body {
-            border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
-        }
+    .card-header .tag {
+        line-height: var(--bb-card-header-tag-height);
+    }
 
 .card-shadow {
     box-shadow: var(--bb-card-shadow);
@@ -44,14 +40,14 @@
     transform: rotate( 90deg);
 }
 
-.card-header .tag {
-    line-height: 21px;
+.card-body {
+    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
 }
 
-.is-collapsable .card-body {
+.is-collapsable > .card-body {
     padding: 0;
 }
 
-.is-collapsable .card-body-wrapper {
-    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
-}
+    .is-collapsable > .card-body > .card-body-wrapper {
+        padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+    }

src/BootstrapBlazor/Components/Card/Card.razor

@@ -7,16 +7,28 @@
         <div class="card-header">
             @if (IsCollapsible)
             {
-                <div class="card-collapse" data-bs-toggle="collapse" data-bs-target="#@Id" aria-expanded="@ExpandedString">
+                <div class="card-collapse-bar" data-bs-toggle="collapse" data-bs-target="#@Id" aria-expanded="@ExpandedString">
                     <i class="@ArrowClassString"></i>
-                    <div class="card-collapse-body">
-                        @RenderHeader
-                    </div>
+                    @if (!string.IsNullOrEmpty(HeaderText))
+                    {
+                        <span class="card-title">@HeaderText</span>
+                    }
                 </div>
+                if (HeaderTemplate != null)
+                {
+                    @HeaderTemplate
+                }
             }
             else
             {
-                @RenderHeader
+                if (!string.IsNullOrEmpty(HeaderText))
+                {
+                    <span class="card-title">@HeaderText</span>
+                }
+                if (HeaderTemplate != null)
+                {
+                    @HeaderTemplate
+                }
             }
         </div>
     }

src/BootstrapBlazor/Components/Card/Card.razor.cs

@@ -117,19 +117,4 @@ public partial class Card
 
         CollapseIcon ??= "fa-solid fa-circle-chevron-right";
     }
-
-    /// <summary>
-    /// 渲染 Header 方法
-    /// </summary>
-    protected RenderFragment RenderHeader => builder =>
-    {
-        if (HeaderTemplate != null)
-        {
-            builder.AddContent(0, HeaderTemplate);
-        }
-        else
-        {
-            builder.AddContent(1, HeaderText);
-        }
-    };
 }