!1685 feat(#I43XTG): use parameters in EditForm mode on Table component

* doc: 增加 Card 两行样式
* style: 行内编辑下拉框充满
* style: 微调行内编辑组件周边间隙
* style: 移除行内编辑行背景色样式
* style: 行内编辑微调边距
* feat: 移除编辑行背景色
* feat: 更新表单编辑模式下布局

src/BootstrapBlazor.Shared/Pages/Samples/Rows.razor

@@ -28,6 +28,27 @@
                 <a href="#" class="btn btn-primary">Go somewhere</a>
             </CardBody>
         </Card>
+        <Card>
+            <CardBody>
+                <h5 class="card-title">Card 1</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" class="btn btn-primary">Go somewhere</a>
+            </CardBody>
+        </Card>
+        <Card>
+            <CardBody>
+                <h5 class="card-title">Card 2</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" class="btn btn-primary">Go somewhere</a>
+            </CardBody>
+        </Card>
+        <Card>
+            <CardBody>
+                <h5 class="card-title">Card 3</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" class="btn btn-primary">Go somewhere</a>
+            </CardBody>
+        </Card>
     </Row>
 </Block>
 

src/BootstrapBlazor/Components/Table/Table.css

@@ -202,8 +202,9 @@
     }
 
 .table-hover tbody tr.is-detail:hover,
+.table-hover tbody tr.is-editform,
 .table-hover tbody tr.is-editform:hover {
-    background-color: unset;
+    --bs-table-accent-bg: unset;
 }
 
 .table tbody tr.is-master td:first-child {
@@ -339,12 +340,13 @@
     text-align: right;
 }
 
-.table tbody tr.active,
+.table tbody tr.active:not(.is-edit),
 .table-row.active {
     background-color: var(--bb-table-selected-bg);
 }
 
-.table-hover > tbody > tr.is-detail:hover {
+.table-hover > tbody > tr.is-detail:hover,
+.table-hover > tbody > tr.is-edit.active {
     --bs-table-accent-bg: none;
 }
 
@@ -518,7 +520,7 @@
 }
 
 .table-cell.is-incell {
-    margin: -.5rem;
+    margin: -7px -6px;
 }
 
     .table-cell.is-incell .switch {
@@ -526,6 +528,10 @@
         padding-left: 9px;
     }
 
+    .table-cell.is-incell .select {
+        width: 100%;
+    }
+
 .table-sm .table-cell.is-incell {
     margin: -.25rem;
 }

src/BootstrapBlazor/Components/Table/Table.razor

@@ -656,9 +656,9 @@ RenderFragment<TItem> RenderEditForm => item =>
             {
                 <ValidateForm Model="@item" OnValidSubmit="@(new Func<EditContext, Task>(SaveAsync))">
                     <CascadingValue Value="@Columns.Where(c => c.Editable)" IsFixed="true">
-                        <EditorForm TModel="TItem">
+                        <EditorForm TModel="TItem" ItemsPerRow="EditDialogItemsPerRow" RowType="EditDialogRowType" LabelAlign="EditDialogLabelAlign">
                             <Buttons>
-                                <div class="modal-footer table-modal-footer">
+                                <div class="table-modal-footer">
                                     <Button Color="Color.Secondary" Icon="fa fa-times" Text="@CancelDeleteButtonText" OnClick="@CancelSave()" />
                                     <Button Color="Color.Primary" ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="@SaveButtonText" />
                                 </div>

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -62,6 +62,7 @@ namespace BootstrapBlazor.Components
             .AddClass("is-master", ShowDetails())
             .AddClass("is-click", ClickToSelect)
             .AddClass("is-dblclick", DoubleClickToEdit)
+            .AddClass("is-edit", EditInCell)
             .Build();
 
         /// <summary>