feat(ISortableList): add ISortableList interface (#6527)

* feat: 增加 Key 参数

* refactor: 使用回调方法 GetKeyByITem 获得行 Key 值

* chore: bump version 9.9.1-beta02

* doc: 调整示例

* refactor: 增加键值

* doc: 更新示例

* refactor: 内置可拖动行样式

* feat: 增加 ISortableList 接口

* chore: bump version 9.9.1-beta04

* chore: 更新 SortableList 组件

* refactor: 增加级联参数

* refactor: 内置 SortableList 行键值逻辑向下兼容

* revert: 撤销更改

* revert: 撤销 Key 参数

* revert: 撤销依赖

* revert: 临时移除 OnGetRowKey 回调方法

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor

@@ -187,7 +187,7 @@
            Introduction="@Localizer["SortableListTableIntro"]"
            Name="Table">
     <SortableList Option="_optionTable" OnUpdate="OnUpdateTable">
-        <Table TItem="Foo" Items="@Items" IsStriped="true" ShowLineNo="true">
+        <Table TItem="Foo" Items="@Items" IsStriped="true" ShowLineNo="true" RenderMode="TableRenderMode.Table">
             <TableColumns>
                 <TableColumn @bind-Field="@context.DateTime" Width="180" />
                 <TableColumn @bind-Field="@context.Name" />

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.9.1-beta03</Version>
+    <Version>9.9.1-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/SortableList/ISortableList.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// SortableList 组件接口
+/// </summary>
+public interface ISortableList
+{
+
+}

src/BootstrapBlazor/Components/Table/Table.razor

@@ -243,7 +243,7 @@
                         }
                         else
                         {
-                            <DynamicElement class="@GetRowClassString(item, "table-row")" @key="item"
+                            <DynamicElement class="@GetRowClassString(item, "table-row")" @key="GetKeyByITem(item)"
                                             TriggerContextMenu="ContextMenuZone != null" OnContextMenu="e => OnContextMenu(e, item)"
                                             @ontouchstart="e => OnTouchStart(e, item)"
                                             @ontouchend="OnTouchEnd"
@@ -692,7 +692,7 @@
     </thead>;
 
     RenderFragment<TItem> RenderRow => item =>
-    @<DynamicElement TagName="tr" class="@GetRowClassString(item)" @key="item"
+    @<DynamicElement TagName="tr" class="@GetRowClassString(item)" @key="GetKeyByITem(item)"
                      TriggerContextMenu="ContextMenuZone != null" OnContextMenu="e => OnContextMenu(e, item)"
                      @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd"
                      TriggerClick="@(ClickToSelect || OnClickRowCallback != null)" OnClick="() => ClickRow(item)"

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

@@ -198,6 +198,12 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
     [Parameter]
     public bool ShowColumnWidthTooltip { get; set; }
 
+    ///// <summary>
+    ///// 获得/设置 行 Key 回调方法
+    ///// </summary>
+    //[Parameter]
+    //public Func<TItem, object?>? OnGetRowKey { get; set; }
+
     private string ScrollWidthString => $"width: {ActualScrollWidth}px;";
 
     private string? GetScrollStyleString(bool condition) => condition
@@ -780,6 +786,9 @@ public async Task ExpandDetailRow(TItem item)
     [CascadingParameter]
     private ContextMenuZone? ContextMenuZone { get; set; }
 
+    [CascadingParameter]
+    private ISortableList? SortableList { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
@@ -1681,6 +1690,8 @@ private void OnTouchEnd()
         TouchStart = false;
     }
 
+    private object? GetKeyByITem(TItem item) => SortableList != null ? item : null; //OnGetRowKey?.Invoke(item);
+
     /// <summary>
     /// Dispose 方法
     /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -963,3 +963,7 @@ form .table .table-cell > textarea {
         border-bottom-color: var(--bs-primary);
     }
 }
+
+.bb-sortable tr {
+    cursor: pointer;
+}