🆕 feat(Sortable): add a parameter for container element of type ElementReference

src/Masa.Blazor/Components/Sortable/MSortable.razor.cs

@@ -13,7 +13,7 @@ public partial class MSortable<TItem> : MSortableProviderBase<TItem>
     private static Block _block = new("m-sortable");
     private ModifierBuilder _modifierBuilder = _block.CreateModifierBuilder();
 
-    protected override string ContainerSelector => Ref.GetSelector();
+    protected override string? ContainerSelector => Ref.TryGetSelector(out var selector) ? selector : null;
 
     protected override IEnumerable<string> BuildComponentClass()
     {

src/Masa.Blazor/Components/Sortable/MSortableProvider.cs

@@ -2,17 +2,26 @@
 
 public class MSortableProvider<TItem> : MSortableProviderBase<TItem>
 {
-    [Parameter] [EditorRequired] public string Container { get; set; } = null!;
+    [Parameter] public string? Container { get; set; }
 
-    [Parameter] public RenderFragment<SortableItemContext<TItem>>? ItemContent { get; set; }
+    [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.7.3")]
+    public ElementReference ContainerRef { get; set; }
 
-    protected override string ContainerSelector => Container;
+    [Parameter] public RenderFragment<SortableItemContext<TItem>>? ItemContent { get; set; }
 
-    protected override void OnParametersSet()
+    protected override string? ContainerSelector
     {
-        base.OnParametersSet();
+        get
+        {
+            if (Container is not null && ContainerRef.Id is not null)
+            {
+                throw new InvalidOperationException(
+                    $"{nameof(MSortableProvider<TItem>)} requires one of {nameof(Container)} or {nameof(ContainerRef)}, but both were provided.");
+            }
 
-        Container.ThrowIfNull(ComponentName);
+            return Container ?? (ContainerRef.TryGetSelector(out var selector) ? selector : null);
+        }
     }
 
     protected override void BuildRenderTree(RenderTreeBuilder builder)

src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs

@@ -188,7 +188,7 @@ public bool Disabled
 
     private RenderRateLimiter? _renderRateLimiter;
 
-    protected abstract string ContainerSelector { get; }
+    protected abstract string? ContainerSelector { get; }
 
     protected override void OnInitialized()
     {
@@ -247,16 +247,23 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (firstRender)
-        {
-            if (_sortableJSInteropHandle is null)
-            {
-                return;
-            }
+        await InitAsync();
+    }
 
-            _jsObjectReference =
-                await SortableJSModule.InitAsync(ContainerSelector, GenOptions(), Order, _sortableJSInteropHandle);
+    private async Task InitAsync()
+    {
+        if (_jsObjectReference is not null)
+        {
+            return;
+        }
+
+        if (_sortableJSInteropHandle is null || ContainerSelector is null)
+        {
+            return;
         }
+
+        _jsObjectReference =
+            await SortableJSModule.InitAsync(ContainerSelector, GenOptions(), Order, _sortableJSInteropHandle);
     }
 
     private SortableOptions GenOptions()

src/Masa.Blazor/Core/Styles/StyleBuilder.cs

@@ -56,6 +56,17 @@ public StyleBuilder AddLength(string name, double value, string unit = "px")
         return Add(value == 0 ? $"{name}: 0" : $"{name}: {value}{unit}".ToString(CultureInfo.InvariantCulture));
     }
 
+    public void Clear()
+    {
+        _stringBuilder.Clear();
+    }
+
+    public StyleBuilder Reset()
+    {
+        _stringBuilder.Clear();
+        return this;
+    }
+
     public IEnumerable<string> GenerateCssStyles()
     {
         yield return _stringBuilder.ToString();