⚡ (Tabs): use js interop to calculate and set the position of slider

src/Masa.Blazor.JS/src/interop.ts

@@ -1592,3 +1592,38 @@ export function unregisterTableScrollEvent(wrapper: HTMLElement) {
     delete wrapper["_m_table_scroll_event"]
   }
 }
+
+export function updateTabSlider(
+  sliderWrapper: HTMLElement,
+  tab: HTMLElement,
+  sliderSize: number,
+  vertical: boolean,
+  isReversed: boolean
+) {
+  if (!sliderWrapper) {
+    console.warn('[MTab] the element of slider wrapper is not found')
+    return;
+  }
+
+  if (!tab) {
+    console.warn('[MTab] the element of tab to be activated is not found')
+    return;
+  }
+
+  const height = !vertical ? sliderSize : tab.scrollHeight;
+  const left = vertical ? 0 : tab.offsetLeft;
+  const right = vertical ? 0 : tab.offsetLeft + tab.offsetWidth;
+  const top = tab.offsetTop;
+  const width = vertical ? sliderSize : tab.clientWidth;
+  sliderWrapper.style.width = `${width}px`;
+  sliderWrapper.style.height = `${height}px`;
+  if (!isReversed) {
+    sliderWrapper.style.left = `${left}px`;
+  }
+  if (isReversed) {
+    sliderWrapper.style.right = `${right}px`;
+  }
+  if (vertical) {
+    sliderWrapper.style.top = `${top}px`;
+  }
+}

src/Masa.Blazor/Components/ItemGroup/MGroupable.cs

@@ -99,7 +99,7 @@ protected override async Task OnInitializedAsync()
 
         if (this is IGroupable item)
         {
-            ItemGroup!.Register(item);
+            await ItemGroup!.Register(item);
         }
 
         await base.OnInitializedAsync();
@@ -132,10 +132,9 @@ public async Task RefreshState()
         if (!Matched || HasRoutableAncestor) return;
 
         await SetInternalIsActive(ValueMatched);
-        StateHasChanged();
     }
 
-    protected virtual async Task ToggleAsync()
+    protected async Task ToggleAsync()
     {
         if (!Matched) return;
 
@@ -149,6 +148,7 @@ protected async Task SetInternalIsActive(bool val, bool force = false)
             if (InternalIsActive != val || force)
             {
                 InternalIsActive = val;
+                StateHasChanged();
             }
         }
         else

src/Masa.Blazor/Components/ItemGroup/MItemGroupBase.cs

@@ -51,7 +51,10 @@ internal List<StringNumber?> InternalValues
         set => SetValue(value);
     }
 
-    protected StringNumber? InternalValue => InternalValues?.LastOrDefault();
+    protected StringNumber? InternalValue => InternalValues.LastOrDefault();
+
+    private HashSet<StringNumber?> _prevInternalValues = [];
+    private CancellationTokenSource? _cts;
 
     protected override void OnParametersSet()
     {
@@ -64,10 +67,14 @@ protected override void OnParametersSet()
             GroupType = TargetGroup.Value;
         }
 
-        RefreshItemsState();
+        if (!_prevInternalValues.SetEquals(InternalValues))
+        {
+            _prevInternalValues = [..InternalValues];
+           RefreshItemsState();
+        }
     }
 
-    private void RefreshItemsState()
+    protected virtual void RefreshItemsState()
     {
         Items.ForEach(item => item.RefreshState());
     }
@@ -77,7 +84,7 @@ protected StringNumber InitDefaultItemValue()
         return _registeredItemsIndex++;
     }
 
-    internal virtual void Register(IGroupable item)
+    internal virtual async Task Register(IGroupable item)
     {
         item.Value ??= InitDefaultItemValue();
 
@@ -89,26 +96,22 @@ internal virtual void Register(IGroupable item)
         {
             if (InternalValues.Count == 0)
             {
-                InternalValues = new List<StringNumber?>() { item.Value };
+                InternalValues = [item.Value];
 
                 if (Multiple)
                 {
-                    if (ValuesChanged.HasDelegate)
-                    {
-                        ValuesChanged.InvokeAsync(InternalValues.ToList());
-                    }
+                    await ValuesChanged.InvokeAsync(InternalValues.ToList());
                 }
                 else
                 {
-                    if (ValueChanged.HasDelegate)
-                    {
-                        ValueChanged.InvokeAsync(item.Value);
-                    }
+                    await ValueChanged.InvokeAsync(item.Value);
                 }
             }
         }
 
-        RefreshItemsState();
+        _cts?.Cancel();
+        _cts = new CancellationTokenSource();
+        await RunTaskInMicrosecondsAsync(RefreshItemsState, 16, _cts.Token);
     }
 
     public virtual void Unregister(IGroupable item)
@@ -153,8 +156,6 @@ public async Task ToggleAsync(StringNumber? key)
                 {
                     InternalValues = Values.ToList();
                 }
-
-                StateHasChanged();
             }
         }
         else
@@ -170,8 +171,6 @@ public async Task ToggleAsync(StringNumber? key)
                 {
                     InternalValues = new List<StringNumber?>() { Value };
                 }
-
-                StateHasChanged();
             }
         }
 
@@ -184,13 +183,13 @@ private void InitOrUpdateInternalValues()
         {
             if (!IsDirtyParameter(nameof(Values))) return;
 
-            InternalValues = Values == null ? new List<StringNumber?>() : Values.ToList();
+            InternalValues = Values == null ? [] : Values.ToList();
         }
         else
         {
             if (!IsDirtyParameter(nameof(Value))) return;
 
-            InternalValues = Value == null ? new List<StringNumber?>() : new List<StringNumber?>() { Value };
+            InternalValues = Value == null ? [] : [Value];
         }
     }
 

src/Masa.Blazor/Components/Tabs/MTab.razor

@@ -3,11 +3,13 @@
 @inherits MRoutableGroupItem<MItemGroupBase>
 
 <MElement Tag="@Tag"
-         Class="@GetClass()"
-         Style="@GetStyle()"
-         ReferenceCaptureAction="r => Ref = r"
-         id="@Id"
-         @onclick="HandleOnClick"
-         @attributes="@Attributes">
-    @ChildContent
+          Class="@GetClass()"
+          Style="@GetStyle()"
+          ReferenceCaptureAction="r => Ref = r"
+          id="@Id"
+          @onclick="HandleOnClick"
+          @attributes="@Attributes">
+    <MShouldRender Value="InternalIsActive">
+        @ChildContent
+    </MShouldRender>
 </MElement>

src/Masa.Blazor/Components/Tabs/MTabs.razor

@@ -14,7 +14,7 @@
                       PrevIcon="@PrevIcon"
                       ShowArrows="@ShowArrows"
                       Value="@Value"
-                      ValueChanged="@ValueChanged"
+                      ValueChanged="@OnValueChanged"
                       Color="@Color"
                       ActiveClass="@ActiveClass"
                       CenterActive="@CenterActive"
@@ -54,16 +54,8 @@
 
     private RenderFragment GenSlider() => __builder =>
     {
-        var style = StyleBuilder.Create()
-            .AddWidth(Slider.width)
-            .AddHeight(Slider.height)
-            .AddIf("left", Slider.left.ToUnit(), !IsReversed)
-            .AddIf("right", Slider.right.ToUnit(), IsReversed)
-            .AddIf("top", Slider.top.ToUnit(), Vertical)
-            .AddIf("transition", "none", Slider.left == null);
-
         <div class="m-tabs-slider-wrapper"
-             style="@style">
+             @ref="@_sliderWrapperRef">
             <div class="@GetClass("m-tabs-slider", CssClassUtils.GetBackgroundColor(SliderColor))"
                  style="@(StyleBuilder.Create().AddBackgroundColor(SliderColor))">
             </div>

src/Masa.Blazor/Components/Tabs/MTabs.razor.cs

@@ -47,25 +47,9 @@ public partial class MTabs : MasaComponentBase, IThemeable
         [Parameter] public string? SliderColor { get; set; }
 
         [Parameter] [MasaApiParameter(2)] public StringNumber SliderSize { get; set; } = 2;
-
         [Parameter] public StringNumber? Value { get; set; }
 
-        private EventCallback<StringNumber>? _valueChanged;
-
-        [Parameter]
-        public EventCallback<StringNumber> ValueChanged
-        {
-            get
-            {
-                if (_valueChanged.HasValue)
-                {
-                    return _valueChanged.Value;
-                }
-
-                return EventCallback.Factory.Create<StringNumber>(this, (v) => Value = v);
-            }
-            set => _valueChanged = value;
-        }
+        [Parameter] public EventCallback<StringNumber?> ValueChanged { get; set; }
 
         [Parameter] public bool Vertical { get; set; }
 
@@ -80,10 +64,10 @@ public EventCallback<StringNumber> ValueChanged
         [Parameter] public bool Dark { get; set; }
 
         [Parameter] public bool Light { get; set; }
-        private StringNumber? _prevValue;
         private int _registeredTabItemsIndex;
-        private bool _callSliderOnAfterRender;
         private CancellationTokenSource? _callSliderCts;
+        private ElementReference _sliderWrapperRef;
+        private bool _isFirstRender = true;
 
         private List<ITabItem> TabItems { get; set; } = new();
 
@@ -132,17 +116,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await ResizeJSModule.ObserverAsync(Ref, OnResize);
                 await IntersectJSModule.ObserverAsync(Ref, OnIntersectAsync);
-                _callSliderOnAfterRender = true;
-            }
-            else if (_prevValue != Value)
-            {
-                _prevValue = Value;
-                _callSliderOnAfterRender = true;
-            }
-
-            if (_callSliderOnAfterRender)
-            {
-                _callSliderOnAfterRender = false;
+                _isFirstRender = false;
                 await CallSlider();
             }
         }
@@ -158,7 +132,7 @@ protected override void OnParametersSet()
             if (MasaBlazor.IsSsr && !IndependentTheme)
             {
                 CascadingIsDark = MasaBlazor.Theme.Dark;
-            }
+            } 
         }
 #endif
 
@@ -187,9 +161,19 @@ private async Task OnIntersectAsync(IntersectEventArgs e)
             }
         }
 
+        private async Task OnValueChanged(StringNumber? val)
+        {
+            if (Value == val)
+            {
+                return;
+            }
+            Value = val;
+            await ValueChanged.InvokeAsync(val);
+        }
+
         public bool IsReversed => RTL && Vertical;
 
-        public MSlideGroup? Instance => TabsBarRef as MSlideGroup;
+        public MItemGroup? Instance => TabsBarRef as MItemGroup;
 
         public void RegisterTabItem(ITabItem tabItem)
         {
@@ -212,40 +196,16 @@ public void UnregisterTabItem(ITabItem tabItem)
         [MasaApiPublicMethod]
         public async Task CallSlider()
         {
-            if (HideSlider) return;
-
-            _callSliderCts?.Cancel();
-            _callSliderCts = new();
-
-            try
-            {
-                await Task.Delay(16, _callSliderCts.Token);
-
-                var item = Instance?.Items?.FirstOrDefault(item => item.Value == Instance.Value);
-                if (item?.Ref.Context == null)
-                {
-                    Slider = (0, 0, 0, 0, 0);
-                }
-                else
-                {
-                    var el = await Js.InvokeAsync<Masa.Blazor.JSInterop.Element>(JsInteropConstants.GetDomInfo, item.Ref);
-                    var height = !Vertical ? SliderSize.TryGetNumber().number : el.ScrollHeight;
-                    var left = Vertical ? 0 : el.OffsetLeft;
-                    var right = Vertical ? 0 : el.OffsetLeft + el.OffsetWidth;
-                    var top = el.OffsetTop;
-                    var width = Vertical
-                        ? SliderSize.TryGetNumber().number
-                        : el.ClientWidth; // REVIEW: el.ScrollWidth was used in Vuetify2
-
-                    Slider = (height, left, right, top, width);
-                }
-
-                StateHasChanged();
-            }
-            catch (TaskCanceledException)
-            {
-                // ignored
-            }
+            if (HideSlider || _isFirstRender) return;
+
+            var item = Instance?.Items.FirstOrDefault(item => item.Value == Value);
+            await Js.InvokeVoidAsync(
+                JsInteropConstants.UpdateTabSlider,
+                _sliderWrapperRef,
+                item?.Ref,
+                SliderSize.TryGetNumber().number,
+                Vertical,
+                IsReversed);
         }
 
         private async Task OnResize()
@@ -264,7 +224,7 @@ private async Task OnResize()
         [MasaApiPublicMethod]
         public void CallSliderAfterRender()
         {
-            _callSliderOnAfterRender = true;
+            NextTick(CallSlider);
         }
 
         protected override async ValueTask DisposeAsyncCore()

src/Masa.Blazor/Components/Tabs/MTabsBar.cs

@@ -63,6 +63,13 @@ protected override IEnumerable<string> BuildContentClass()
         return base.BuildContentClass().Concat(new[] { _block.Element("content").Name });
     }
 
+    protected override void RefreshItemsState()
+    {
+        base.RefreshItemsState();
+
+        Tabs?.CallSlider();
+    }
+
     public override void Unregister(IGroupable item)
     {
         base.Unregister(item);

src/Masa.Blazor/Components/Window/MWindow.razor.cs

@@ -116,13 +116,6 @@ protected override void RegisterWatchers(PropertyWatcher watcher)
         watcher.Watch<List<StringNumber?>>(nameof(InternalValues), UpdateInternalIndex);
     }
 
-    internal override void Register(IGroupable item)
-    {
-        base.Register(item);
-
-        StateHasChanged();
-    }
-
     public void RenderState()
     {
         StateHasChanged();