🆕 feat(Tabs): support setting the height and re-rendering the slider …

…when switching RTL (#1851)

* 🐛 fix(Tabs): set current uri as the default value of tab when Routable

* remove unnecessary code

* 💄 style(PageTabs): add hover transition for close btn

* ⚰ refactor: Remove unnecessary CallSlider

* 🆕 feat(Tabs): re-render the slider when toggle RTL

* 🆕 feat(Tabs): add support for setting the height

* comment out unsupported feature

docs/Masa.Blazor.Docs/Examples/components/tabs/DynamicTabs.razor

@@ -1,8 +1,7 @@
 <MCard>
     <MTabs @bind-Value="_tabValue"
            BackgroundColor="red lighten-2"
-           Dark
-           @ref="_tabsRef">
+           Dark>
         @foreach (var tab in _tabs)
         {
             <MTab @key="tab" Value="tab">
@@ -34,8 +33,6 @@
 </MCard>
 
 @code {
-
-    private MTabs _tabsRef;
     private StringNumber _tabValue;
 
     private List<int> _tabs = Enumerable.Range(1, 3).ToList();
@@ -55,9 +52,5 @@
         {
             _tabValue = _tabs.LastOrDefault();
         }
-
-        StateHasChanged();
-        _ = _tabsRef.CallSlider();
     }
-
 }

docs/Masa.Docs.Shared/Components/Tabs.razor

@@ -1,6 +1,5 @@
 @namespace Masa.Docs.Shared.Components
 @inject I18n I18n
-@inject MasaBlazor MasaBlazor
 @implements IAsyncDisposable
 
 <MTabs Class="default-tabs"
@@ -64,17 +63,8 @@
         base.OnInitialized();
 
         _prevCulture = Culture;
-        MasaBlazor.RTLChanged += MasaBlazorOnRTLChanged;
-    }
-
-    private void MasaBlazorOnRTLChanged(object? sender, EventArgs e)
-    {
-        InvokeAsync(() =>
-        {
-            _tabs?.CallSlider();
-            StateHasChanged();
-        });
     }
+
 
     protected override void OnParametersSet()
     {
@@ -103,8 +93,6 @@
         {
             await _tabs.DisposeAsync();
         }
-
-        MasaBlazor.RTLChanged -= MasaBlazorOnRTLChanged;
     }
 
 }

docs/Masa.Docs.Shared/Pages/Home.razor

@@ -11,8 +11,7 @@
                FixedTabs="MasaBlazor.Breakpoint.Xs"
                IconsAndText="@(!MasaBlazor.Breakpoint.Xs)">
             <MTab Value="@("stack")"
-                  OnClick="@(() => NavigationManager.NavigateTo(NavigationManager.GetRelativeUriWithQueryParameter("product", "stack")))"
-                  Class="mr-4">
+                  OnClick="@(() => NavigationManager.NavigateTo(NavigationManager.GetRelativeUriWithQueryParameter("product", "stack")))">
                 @if (!MasaBlazor.Breakpoint.Xs)
                 {
                     @("MASA Stack")
@@ -21,8 +20,7 @@
                 <MIcon Icon="@("$masaStack")" />
             </MTab>
             <MTab Value="@("framework")"
-                  OnClick="@(() => NavigationManager.NavigateTo(NavigationManager.GetRelativeUriWithQueryParameter("product", "framework")))"
-                  Class="mr-4">
+                  OnClick="@(() => NavigationManager.NavigateTo(NavigationManager.GetRelativeUriWithQueryParameter("product", "framework")))">
                 @if (!MasaBlazor.Breakpoint.Xs)
                 {
                     @("MASA Framework")

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

@@ -12,16 +12,6 @@ protected override void OnInitialized()
             Tabs?.RegisterTabItem(this);
         }
 
-        protected override async Task OnAfterRenderAsync(bool firstRender)
-        {
-            await base.OnAfterRenderAsync(firstRender);
-
-            if (firstRender)
-            {
-                Tabs?.CallSlider();
-            }
-        }
-
         protected override ValueTask DisposeAsyncCore()
         {
             Tabs?.UnregisterTabItem(this);

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

@@ -1,4 +1,6 @@
-namespace Masa.Blazor
+using StyleBuilder = Masa.Blazor.Core.StyleBuilder;
+
+namespace Masa.Blazor
 {
     public partial class MTabs : BTabs, IThemeable
     {
@@ -35,14 +37,26 @@ public partial class MTabs : BTabs, IThemeable
         [Parameter]
         public bool IconsAndText { get; set; }
 
-        [Parameter]
-        public StringNumber? MobileBreakpoint { get; set; }
+        // [Parameter]
+        // public StringNumber? MobileBreakpoint { get; set; }
 
         [Parameter]
         public bool Right { get; set; }
 
         protected override bool RTL => MasaBlazor.RTL;
 
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            MasaBlazor.RTLChanged += MasaBlazorOnRTLChanged;
+        }
+
+        private void MasaBlazorOnRTLChanged(object? sender, EventArgs e)
+        {
+            InvokeAsync(CallSlider);
+        }
+
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await base.OnAfterRenderAsync(firstRender);
@@ -116,6 +130,7 @@ protected override void SetComponentClass()
                     attrs[nameof(MTabsBar.CenterActive)] = CenterActive;
                     attrs[nameof(MTabsBar.BackgroundColor)] = BackgroundColor;
                     attrs[nameof(MTabsBar.IsDark)] = IsDark;
+                    attrs[nameof(MTabsBar.Style)] = StyleBuilder.Create().AddHeight(Height).Build();
                 })
                 .Apply<BItem, MSlideItem>()
                 .Apply<BTab, MTab>()
@@ -133,8 +148,8 @@ private async Task OnIntersectAsync(IntersectEventArgs e)
 
         protected override async ValueTask DisposeAsyncCore()
         {
+            MasaBlazor.RTLChanged -= MasaBlazorOnRTLChanged;
             await IntersectJSModule.UnobserveAsync(Ref);
-
             await base.DisposeAsyncCore();
         }
     }

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

@@ -2,6 +2,12 @@
 {
     public partial class MTabsBar : MSlideGroup, IThemeable
     {
+        [Inject]
+        private NavigationManager NavigationManager { get; set; } = null!;
+
+        [CascadingParameter]
+        public BTabs? Tabs { get; set; }
+
         [Parameter]
         public string? BackgroundColor { get; set; }
 
@@ -32,6 +38,11 @@ protected override void OnParametersSet()
         }
 #endif
 
+        protected override StringNumber InitDefaultItemValue()
+        {
+            return Tabs?.Routable is true ? NavigationManager.Uri : base.InitDefaultItemValue();
+        }
+
         protected override void SetComponentClass()
         {
             base.SetComponentClass();
@@ -53,5 +64,12 @@ protected override void SetComponentClass()
                 })
                 .Merge("content", css => { css.Add($"{prefix}__content"); });
         }
+
+        public override void Unregister(IGroupable item)
+        {
+            base.Unregister(item);
+
+            Tabs?.CallSliderAfterRender();
+        }
     }
 }

src/Masa.Blazor/Presets/PageTabs/PPageTabs.razor.cs

@@ -212,8 +212,6 @@ public void CloseTabs(Regex pattern, bool disableAutoNavigation = false)
         }
 
         TabsUpdated?.Invoke(this, PatternPaths.ToArray());
-
-        NextTick(() => { _tabs?.CallSlider(); });
     }
 
     [MasaApiPublicMethod]
@@ -227,8 +225,8 @@ private void PageTabsProviderOnTabTitleChanged(object? sender, string e)
     {
         InvokeAsync(() =>
         {
-            NextTick(() => { _tabs?.CallSlider(); });
-
+            _tabs?.CallSliderAfterRender();
+        
             StateHasChanged();
         });
     }
@@ -349,8 +347,6 @@ private void HandleOnCloseTabsToTheLeft()
         }
 
         TabsUpdated?.Invoke(this, PatternPaths.ToArray());
-
-        NextTick(() => { _tabs?.CallSlider(); });
     }
 
     private void HandleOnCloseTabsToTheRight()
@@ -375,8 +371,6 @@ private void HandleOnCloseTabsToTheRight()
         }
 
         TabsUpdated?.Invoke(this, PatternPaths.ToArray());
-
-        NextTick(() => { _tabs?.CallSlider(); });
     }
 
     private void HandleOnCloseOtherTabs()
@@ -401,7 +395,7 @@ private async Task HandleOnAuxclick(MouseEventArgs args, PatternPath patternPath
     {
         if (args.Button == 1)
         {
-            // HACK: I don't know why this event would be triggered twice
+            // HACK: I don't know why this event would be triggered twice,
             // so I use a cancellation token to cancel the previous task
 
             _middleClickCancellationTokenSource?.Cancel();
@@ -416,8 +410,6 @@ private void CloseTab(PatternPath patternPath)
         PatternPaths.Remove(patternPath);
         TabClosed?.Invoke(this, patternPath);
         PageTabsProvider?.RemovePathTitles(patternPath.AbsolutePath);
-
-        NextTick(() => { _tabs?.CallSlider(); });
     }
 
     private void CloseOtherTabs(PatternPath current)
@@ -431,8 +423,6 @@ private void CloseOtherTabs(PatternPath current)
         NavigationManager.NavigateTo(current.AbsolutePath);
 
         TabsUpdated?.Invoke(this, PatternPaths.ToArray());
-
-        NextTick(() => { _tabs?.CallSlider(); });
     }
 
     private void NavigateToNextIfCurrentClosing(PatternPath current)

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -390,10 +390,13 @@
 
 .p-page-tab:not(.m-tab--active) .p-page-tab__close {
     visibility: hidden;
+    opacity: 0;
+    transition: .3s cubic-bezier(.25,.8,.5,1);
 }
 
 .p-page-tab:not(.m-tab--active):hover .p-page-tab__close {
     visibility: visible;
+    opacity: 1;
 }
 
 /* block-text */