!3535 feat(#I61CMJ): update card-body css

* chore: Table 组件适配 Card 收缩样式
* feat: 更新可收缩 Card 内容样式

src/BootstrapBlazor/Components/Card/Card.css

@@ -47,3 +47,11 @@
 .card-header .tag {
     line-height: 21px;
 }
+
+.is-collapsable .card-body {
+    padding: 0;
+}
+
+.is-collapsable .card-body-wrapper {
+    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+}

src/BootstrapBlazor/Components/Card/Card.razor

@@ -21,7 +21,16 @@
         </div>
     }
     <div class="@BodyClassName" id="@Id">
-        @BodyTemplate
+        @if (IsCollapsible)
+        {
+            <div class="card-body-wrapper">
+                @BodyTemplate
+            </div>
+        }
+        else
+        {
+            @BodyTemplate
+        }
     </div>
     @if (FooterTemplate != null)
     {

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

@@ -16,11 +16,12 @@ public partial class Card
         .AddClass("text-center", IsCenter)
         .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClass("card-shadow", IsShadow)
+        .AddClass("is-collapsable", IsCollapsible)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     /// <summary>
-    /// 
+    /// 获得 收缩图标样式
     /// </summary>
     protected string? ArrowClassString => CssBuilder.Default("card-collapse-arrow")
         .AddClass(CollapseIcon)

src/BootstrapBlazor/Components/Table/Table.css

@@ -620,15 +620,6 @@ form .table .table-cell > textarea {
             padding: .275rem .5rem;
         }
 
-.table-search .card-body {
-    --bs-card-spacer-x: 0;
-    --bs-card-spacer-y: 0;
-}
-
-    .table-search .card-body > .groupbox {
-        margin: var(--bb-table-search-body-margin);
-    }
-
 .table-search-collapse {
     flex: 1;
     display: flex;

src/BootstrapBlazor/Components/Table/Table.razor

@@ -834,7 +834,7 @@ RenderFragment<TItem> RenderRowExtendButtons => item =>
 </td>;
 
 RenderFragment RenderSearch =>
-@<div class="card">
+@<div class="card is-collapsable">
     <div class="card-header">
         <div class="d-flex">
             <div class="table-search-collapse" data-bs-toggle="collapse" data-bs-target="#@TopSearchBodyId" aria-expanded="@TopSearchCollapsedString">
@@ -884,21 +884,23 @@ RenderFragment RenderSearch =>
         </div>
     </div>
     <div class="@TopSearchBodyClassString" id="@TopSearchBodyId">
-        @if(CustomerSearchModel != null && CustomerSearchTemplate != null)
-        {
-            @CustomerSearchTemplate(CustomerSearchModel)
-        }
-        else if(SearchTemplate != null)
-        {
-            @SearchTemplate(SearchModel)
-        }
-        else
-        {
-            <CascadingValue Value="true" IsFixed="true" Name="IsSearch">
-                <EditorForm Model="SearchModel" Items="GetSearchColumns()" ItemsPerRow="SearchDialogItemsPerRow" RowType="SearchDialogRowType" LabelAlign="SearchDialogLabelAlign">
-                </EditorForm>
-            </CascadingValue>
-        }
+        <div class="card-body-wrapper">
+            @if(CustomerSearchModel != null && CustomerSearchTemplate != null)
+            {
+                @CustomerSearchTemplate(CustomerSearchModel)
+            }
+            else if(SearchTemplate != null)
+            {
+                @SearchTemplate(SearchModel)
+            }
+            else
+            {
+                <CascadingValue Value="true" IsFixed="true" Name="IsSearch">
+                    <EditorForm Model="SearchModel" Items="GetSearchColumns()" ItemsPerRow="SearchDialogItemsPerRow" RowType="SearchDialogRowType" LabelAlign="SearchDialogLabelAlign">
+                    </EditorForm>
+                </CascadingValue>
+            }
+        </div>
     </div>
 </div>;
 

src/BootstrapBlazor/wwwroot/modules/table.js

@@ -79,10 +79,6 @@ export class Table extends BlazorComponent {
                     break
                 }
             }
-
-            // if ($.browser.versions.mobile) {
-            //     fs.remove();
-            // }
         }
 
         // 尝试自适应高度