Add BitProLayout component (#9502)

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor

@@ -0,0 +1,21 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement"
+     @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+    <div style="@Styles?.Top" class="bit-ply-top @Classes?.Top" />
+    <div style="@Styles?.Center"
+         class="bit-ply-center @Classes?.Center" 
+         dir="@Dir?.ToString().ToLower()">
+        <div style="@Styles?.Left" class="bit-ply-left @Classes?.Left"></div>
+        <div style="@Styles?.Main" class="bit-ply-main @Classes?.Main">
+            @ChildContent
+        </div>
+        <div style="@Styles?.Right" class="bit-ply-right @Classes?.Right"></div>
+    </div>
+    <div style="@Styles?.Bottom" class="bit-ply-bottom @Classes?.Bottom"></div>
+</div>

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs

@@ -0,0 +1,33 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProLayout : BitComponentBase
+{
+    /// <summary>
+    /// The content of the layout.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the layout.
+    /// </summary>
+    [Parameter] public BitProLayoutClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the layout.
+    /// </summary>
+    [Parameter] public BitProLayoutClassStyles? Styles { get; set; }
+
+
+
+    protected override string RootElementClass => "bit-ply";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => Classes?.Root);
+    }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss

@@ -0,0 +1,75 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+:root {
+    --bit-ply-inset-top: env(safe-area-inset-top);
+    --bit-ply-inset-left: env(safe-area-inset-left);
+    --bit-ply-inset-right: env(safe-area-inset-right);
+    --bit-ply-inset-bottom: env(safe-area-inset-bottom);
+    //--
+    --bit-ply-width-vw: calc(100vw - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
+    --bit-ply-height-vh: calc(100vh - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
+    --bit-ply-width-per: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
+    --bit-ply-height-per: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
+    --bit-ply-width: calc(var(--win-width) - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
+    --bit-ply-height: calc(var(--win-height) - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
+    //--
+    --bit-ply-inset-inline-start: var(--bit-ply-inset-left);
+    --bit-ply-inset-inline-end: var(--bit-ply-inset-right);
+
+    [dir="rtl"] {
+        --bit-ply-inset-inline-start: var(--bit-ply-inset-right);
+        --bit-ply-inset-inline-end: var(--bit-ply-inset-left);
+    }
+}
+
+.bit-ply {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-top {
+    width: 100%;
+    z-index: 999999;
+    height: var(--bit-ply-inset-top);
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-bottom {
+    width: 100%;
+    z-index: 999999;
+    height: var(--bit-ply-inset-bottom);
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-center {
+    width: 100%;
+    display: flex;
+    height: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
+}
+
+.bit-ply-main {
+    height: 100%;
+    display: flex;
+    overflow: auto;
+    position: relative;
+    scroll-behavior: smooth;
+    overscroll-behavior: none;
+    width: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
+}
+
+.bit-ply-left {
+    height: 100%;
+    z-index: 999999;
+    width: var(--bit-ply-inset-left);
+    background-color: $clr-bg-pri;
+}
+
+.bit-ply-right {
+    height: 100%;
+    z-index: 999999;
+    width: var(--bit-ply-inset-right);
+    background-color: $clr-bg-pri;
+}

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs

@@ -0,0 +1,39 @@
+namespace Bit.BlazorUI;
+
+public class BitProLayoutClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the root of the BitProLayout.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the top area of the BitProLayout.
+    /// </summary>
+    public string? Top { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the center area of the BitProLayout.
+    /// </summary>
+    public string? Center { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the left area of the BitProLayout.
+    /// </summary>
+    public string? Left { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the main area of the BitProLayout.
+    /// </summary>
+    public string? Main { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the right area of the BitProLayout.
+    /// </summary>
+    public string? Right { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the bottom area of the BitProLayout.
+    /// </summary>
+    public string? Bottom { get; set; }
+}

src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss

@@ -2,3 +2,4 @@
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
 @import "../Components/PdfReader/BitPdfReader.scss";
 @import "../Components/ProPanel/BitProPanel.scss";
+@import "../Components/ProLayout/BitProLayout.scss";

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor

@@ -3,25 +3,28 @@
 <section class="box">
     <div class="box-header">
         <BitText Typography="BitTypography.H5" Class="section-title" Id="@Id" example-section-title>@Title</BitText>
-        <div class="header-btn-group">
-            <BitActionButton OnClick="() => showCode = !showCode"
-                             Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
-                             Classes="@(new() { Content = "show-code-lbl" })"
-                             IconName="@BitIconName.CodeEdit"
-                             Title="@(showCode ? "Hide code" : "Show code")">
-                @(showCode ? "Hide code" : "Show code")
-            </BitActionButton>
-            <BitActionButton Class="@($"header-btn copy-link {(isLinkCopied ? "copied" : "")}")"
-                             Styles="@(new() { Content = (isLinkCopied ? "" : "display: none") })"
-                             Title="@copyLinkMessage"
-                             IconName="@linkIcon"
-                             OnClick="@CopyLinkToClipboard">
-                @if (isLinkCopied)
-                {
-                    <span>@copyLinkMessage</span>
-                }
-            </BitActionButton>
-        </div>
+        @if (RazorCode is not null || CsharpCode is not null)
+        {
+            <div class="header-btn-group">
+                <BitActionButton OnClick="() => showCode = !showCode"
+                                 Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
+                                 Classes="@(new() { Content = "show-code-lbl" })"
+                                 IconName="@BitIconName.CodeEdit"
+                                 Title="@(showCode ? "Hide code" : "Show code")">
+                    @(showCode ? "Hide code" : "Show code")
+                </BitActionButton>
+                <BitActionButton Class="@($"header-btn copy-link {(isLinkCopied ? "copied" : "")}")"
+                                 Styles="@(new() { Content = (isLinkCopied ? "" : "display: none") })"
+                                 Title="@copyLinkMessage"
+                                 IconName="@linkIcon"
+                                 OnClick="@CopyLinkToClipboard">
+                    @if (isLinkCopied)
+                    {
+                        <span>@copyLinkMessage</span>
+                    }
+                </BitActionButton>
+            </div>
+        }
     </div>
 
     <div class="box-content">
@@ -39,16 +42,16 @@
             </BitActionButton>
 
             <pre class="code">
-                <code class="language-cshtml">@RazorCode.Trim()</code>
+            <code class="language-cshtml">@RazorCode.Trim()</code>
 
                 @if (CsharpCode.HasValue())
                 {
-                    <code class="language-csharp">
-&#64code {
-     @CsharpCode.Trim().Replace("\n", "\n     ")
-}</code>
+                <code class="language-csharp">
+        &#64code {
+                        @CsharpCode.Trim().Replace("\n", "\n     ")
+        }</code>
                 }
-            </pre>
+                </pre>
         }
 
         <div class="example-container">

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor

@@ -0,0 +1,24 @@
+@page "/components/prolayout"
+
+@inherits AppComponentBase
+
+<PageOutlet Url="components/prolayout"
+            Title="ProLayout"
+            Description="prolayout component of the bit BlazorUI components" />
+
+<ComponentDemo ComponentName="ProLayout"
+               ComponentDescription="BitProLayout is an advanced container to handle the nuances of a cross-platform layout."
+               Notes="To use this component, you need to install the `Bit.BlazorUI.Extras` nuget package, as described in the Optional steps of the Getting started page."
+               ComponentParameters="componentParameters"
+               ComponentSubClasses="componentSubClasses">
+    <ComponentExampleBox Title="Basic" Id="example1">
+        <ExamplePreview>
+            <div>Since this component is a base layout container, it is not possible to show its capabilities in a demo sample here.</div>
+            <div>
+                You can always check our Boilerplate project template samples
+                (<a href="https://adminpanel.bitplatform.dev" target="_blank">AdminPanel</a> & <a href="https://todo.bitplatform.dev" target="_blank">Todo</a>)
+                to see the BitProLayout in action.
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+</ComponentDemo>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs

@@ -0,0 +1,95 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProLayout;
+
+public partial class BitProLayoutDemo
+{
+    private readonly List<ComponentParameter> componentParameters =
+    [
+         new()
+         {
+            Name = "ChildContent",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The content of the layout.",
+         },
+         new()
+         {
+            Name = "Classes",
+            Type = "BitProLayoutClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS classes for different parts of the layout.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles"
+         },
+         new()
+         {
+            Name = "Styles",
+            Type = "BitProLayoutClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS styles for different parts of the layout.",
+            LinkType = LinkType.Link,
+            Href = "#class-styles"
+         },
+    ];
+
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        new()
+         {
+            Id = "class-styles",
+            Title = "BitProLayoutClassStyles",
+            Parameters=
+            [
+                new()
+                {
+                    Name = "Root",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the root of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Top",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the top area of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Center",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the top center of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Left",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the top left of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Main",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the main area of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Right",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the right area of the BitProLayout.",
+                },
+                new()
+                {
+                    Name = "Bottom",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the bottom area of the BitProLayout.",
+                },
+            ]
+        }
+    ];
+
+}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor

@@ -253,6 +253,9 @@
             <BitLink Href="/components/pdfreader" title="PdfReader" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">PdfReader</BitText>
             </BitLink>
+            <BitLink Href="/components/prolayout" title="ProLayout" Style="display: flex">
+                <BitText Typography="BitTypography.Subtitle1">ProLayout</BitText>
+            </BitLink>
             <BitLink Href="/components/propanel" title="ProPanel" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">ProPanel</BitText>
             </BitLink>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs

@@ -156,6 +156,7 @@ public partial class NavMenu : IDisposable
                 new() { Text = "DataGrid", Url = "/components/datagrid", AdditionalUrls = ["/components/data-grid"] },
                 new() { Text = "Chart", Url = "/components/chart" },
                 new() { Text = "PdfReader", Url = "/components/pdfreader" },
+                new() { Text = "ProLayout", Url = "/components/prolayout" },
                 new() { Text = "ProPanel", Url = "/components/propanel" },
                 new() 
                 {