Merge branch 'refactor-tab' into tab_table

# Conflicts:
#	src/BootstrapBlazor/Components/Tab/Tab.razor

Author: ArgoZhang

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -49,14 +49,6 @@
 
         .layout-main {
             min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
-
-            > .tabs,
-            > .bb-cm-zone > .tabs {
-                margin: -1rem;
-                border: none;
-                border-radius: unset;
-                min-height: calc(100% + 2rem);
-            }
         }
     }
 

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -45,9 +45,7 @@ else
         <div class="@WrapClassString">
             @if (BeforeNavigatorTemplate != null)
             {
-                <CascadingValue Value="this" IsFixed="true">
-                    @BeforeNavigatorTemplate(this)
-                </CascadingValue>
+                @BeforeNavigatorTemplate(this)
             }
             @if (ShowNavigatorButtons)
             {
@@ -65,36 +63,7 @@ else
                         @ChildContent
                     </CascadingValue>
                     <RenderTemplate>
-                        @if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
-                        {
-                            if (ClickTabToNavigation)
-                            {
-                                Navigator.NavigateTo(DefaultUrl);
-                            }
-                            else
-                            {
-                                AddTabItem(DefaultUrl);
-                            }
-                        }
-                        @if (FirstRender)
-                        {
-                            if (!Items.Any(t => t.IsActive))
-                            {
-                                Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
-                            }
-                        }
-                        @if (ShowContextMenu)
-                        {
-                            @RenderTabItemListContextMenu
-                        }
-                        else
-                        {
-                            @RenderTabItemList
-                        }
-                        @if (IsCard || IsBorderCard)
-                        {
-                            <div class="tabs-item-fix"></div>
-                        }
+                        @RenderTabList()
                     </RenderTemplate>
                     @if (!IsCard && !IsBorderCard && ShowActiveBar)
                     {
@@ -160,31 +129,27 @@ else
         </div>
     </div>;
 
-    RenderFragment RenderTabItemListContextMenu =>
-    @<div>
-        @RenderTabItemList
-    </div>;
-
-    RenderFragment RenderTabItemList =>
-    @<div>
-        @foreach (var item in Items)
+    RenderFragment RenderContextMenu =>
+    @<ContextMenu>
+        @if (BeforeContextMenuTemplate != null)
         {
-            @if (item.HeaderTemplate != null)
-            {
-                <div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
-                    @item.HeaderTemplate(item)
-                </div>
-            }
-            else if (item.IsDisabled)
-            {
-                @RenderDisabledHeaderItem(item)
-            }
-            else
-            {
-                @RenderHeaderItem(item)
-            }
+            @BeforeContextMenuTemplate(this)
         }
-    </div>;
+        <ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
+        <ContextMenuDivider></ContextMenuDivider>
+        <ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
+        <ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
+        <ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
+        @if (ShowContextMenuFullScreen)
+        {
+            <ContextMenuDivider></ContextMenuDivider>
+            <ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
+        }
+        @if (ContextMenuTemplate != null)
+        {
+            @ContextMenuTemplate(this)
+        }
+    </ContextMenu>;
 
     RenderFragment<TabItem> RenderTabItem => item =>
     @<CascadingValue Value="item" IsFixed="true">

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -580,7 +580,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(DragItemCallback), Layout?.Id);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(DragItemCallback), LayoutId);
+
+    private string? LayoutId => Layout is { ShowTabInHeader: true } ? Layout.Id : null;
 
     private void RemoveLocationChanged()
     {
@@ -1132,6 +1134,80 @@ private async Task OnContextMenu(MouseEventArgs e, TabItem item)
         }
     }
 
+    private RenderFragment RenderTabList() => builder =>
+    {
+        if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
+        {
+            if (ClickTabToNavigation)
+            {
+                Navigator.NavigateTo(DefaultUrl);
+            }
+            else
+            {
+                AddTabItem(DefaultUrl);
+            }
+        }
+
+        if (FirstRender)
+        {
+            if (!Items.Any(t => t.IsActive))
+            {
+                Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
+            }
+        }
+
+        if (ShowContextMenu)
+        {
+            builder.OpenComponent<ContextMenuZone>(0);
+            builder.AddAttribute(10, nameof(ContextMenuZone.ChildContent), RenderContextMenuZoneContent());
+            builder.AddComponentReferenceCapture(20, instance => _contextMenuZone = (ContextMenuZone)instance);
+            builder.CloseComponent();
+        }
+        else
+        {
+            builder.AddContent(150, RenderTabItems());
+        }
+
+        if (TabStyle == TabStyle.Default && (IsCard || IsBorderCard))
+        {
+            builder.OpenElement(200, "div");
+            builder.AddAttribute(210, "class", "tabs-item-fix");
+            builder.CloseElement();
+        }
+    };
+
+    private RenderFragment RenderContextMenuZoneContent() => builder =>
+    {
+        builder.AddContent(0, RenderTabItems());
+        builder.AddContent(10, RenderContextMenu);
+    };
+
+    private RenderFragment RenderTabItems() => builder =>
+    {
+        for (var index = 0; index < _items.Count; index++)
+        {
+            var item = _items[index];
+            var sequence = (index + 1) * 100;
+            if (item.HeaderTemplate != null)
+            {
+                builder.OpenElement(sequence, "div");
+                builder.SetKey(item);
+                builder.AddAttribute(sequence + 10, "class", GetItemWrapClassString(item));
+                builder.AddAttribute(sequence + 20, "draggable", DraggableString);
+                builder.AddContent(sequence + 30, item.HeaderTemplate(item));
+                builder.CloseElement();
+            }
+            else if (item.IsDisabled)
+            {
+                builder.AddContent(sequence + 40, RenderDisabledHeaderItem(item));
+            }
+            else
+            {
+                builder.AddContent(sequence + 50, RenderHeaderItem(item));
+            }
+        }
+    };
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -82,6 +82,11 @@
     position: relative;
     display: flex;
     height: 100%;
+
+    .bb-cm-zone {
+        display: flex;
+        flex-wrap: nowrap;
+    }
 }
 
 .tabs-nav-wrap {
@@ -501,10 +506,6 @@
     --bb-tabs-item-text-padding: 0 .5rem;
     background-color: var(--bb-tabs-header-bg-color);
 
-    .tabs-item-fix {
-        border: none;
-    }
-
     .tabs-item-wrap {
         &:not(.active) {
             .tabs-item:not(.disabled) .tabs-item-body {
@@ -557,6 +558,7 @@
             display: flex;
             align-items: center;
             border-radius: var(--bs-border-radius);
+            user-select: none;
 
             &:hover {
                 background-color: var(--bb-tabs-item-hover-bg-color);