From 1ace76ca1462799aa3313af698cb188f47b3e8fa Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 23 Dec 2024 11:20:11 +0330 Subject: [PATCH] initial promodal impl --- .../Components/ProModal/BitProModal.razor | 65 +++++ .../Components/ProModal/BitProModal.razor.cs | 185 ++++++++++++++ .../Components/ProModal/BitProModal.scss | 98 ++++++++ .../ProModal/BitProModalClassStyles.cs | 34 +++ .../Components/ProPanel/BitProPanel.razor.cs | 8 +- .../Surfaces/Modal/BitModalTests.cs | 2 +- .../Surfaces/Modal/BitModal.razor.cs | 21 +- .../Surfaces/Modal/BitModalParameters.cs | 4 +- .../Extras/ProModal/BitProModalDemo.razor | 29 +++ .../Extras/ProModal/BitProModalDemo.razor.cs | 230 ++++++++++++++++++ .../ProModal/BitProModalDemo.razor.scss | 68 ++++++ .../Extras/ProPanel/BitProPanelDemo.razor.cs | 14 +- .../Surfaces/Modal/BitModalDemo.razor.cs | 22 +- .../Pages/Home/ComponentsSection.razor | 3 + .../Shared/NavMenu.razor.cs | 1 + 15 files changed, 749 insertions(+), 35 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor new file mode 100644 index 0000000000..6f31d16201 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor @@ -0,0 +1,65 @@ +@namespace Bit.BlazorUI +@inherits BitComponentBase + + + @if (Header is not null || HeaderText is not null || ShowCloseButton) + { +
+ @if (Header is not null) + { +
+ @Header +
+ } + else if (HeaderText is not null) + { +
+ @HeaderText +
+ } + + @if (ShowCloseButton) + { + + } +
+ } + +
+ @(Body ?? ChildContent) +
+ + @if (Footer is not null) + { +
+ @Footer +
+ } + else if (FooterText is not null) + { +
+ @FooterText +
+ } + diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs new file mode 100644 index 0000000000..eeda5d838c --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs @@ -0,0 +1,185 @@ +namespace Bit.BlazorUI; + +public partial class BitProModal : BitComponentBase +{ + [Inject] private IJSRuntime _js { get; set; } = default!; + + + + /// + /// When true, the Modal will be positioned absolute instead of fixed. + /// + [Parameter, ResetClassBuilder] + public bool AbsolutePosition { get; set; } + + /// + /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless. + /// + [Parameter] public bool? Alert { get; set; } + + /// + /// Enables the auto scrollbar toggle behavior of the Modal. + /// + [Parameter] public bool AutoToggleScroll { get; set; } + + /// + /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay). + /// + [Parameter] public bool Blocking { get; set; } + + /// + /// The alias of the ChildContent. + /// + [Parameter] public RenderFragment? Body { get; set; } + + /// + /// The content of the Modal, it can be any custom tag or text. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Custom CSS classes for different parts of the BitModal component. + /// + [Parameter] public BitProModalClassStyles? Classes { get; set; } + + /// + /// The CSS selector of the drag element. by default it's the Modal container. + /// + [Parameter] public string? DragElementSelector { get; set; } + + /// + /// Whether the Modal can be dragged around. + /// + [Parameter] public bool Draggable { get; set; } + + /// + /// The template used to render the footer section of the panel. + /// + [Parameter] public RenderFragment? Footer { get; set; } + + /// + /// The text of the footer section of the panel. + /// + [Parameter] public string? FooterText { get; set; } + + /// + /// The template used to render the header section of the panel. + /// + [Parameter] public RenderFragment? Header { get; set; } + + /// + /// The text of the header section of the panel. + /// + [Parameter] public string? HeaderText { get; set; } + + /// + /// Makes the Modal height 100% of its parent container. + /// + [Parameter, ResetClassBuilder] + public bool FullHeight { get; set; } + + /// + /// Makes the Modal width and height 100% of its parent container. + /// + [Parameter, ResetClassBuilder] + public bool FullSize { get; set; } + + /// + /// Makes the Modal width 100% of its parent container. + /// + [Parameter, ResetClassBuilder] + public bool FullWidth { get; set; } + + /// + /// Whether the Modal is displayed. + /// + [Parameter, TwoWayBound] + public bool IsOpen { get; set; } + + /// + /// Renders the overlay in full mode that gives it an opaque background. + /// + [Parameter] public bool ModeFull { get; set; } + + /// + /// Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay. + /// + [Parameter] public bool Modeless { get; set; } + + /// + /// A callback function for when the Modal is dismissed. + /// + [Parameter] public EventCallback OnDismiss { get; set; } + + /// + /// A callback function for when somewhere on the overlay element of the Modal is clicked. + /// + [Parameter] public EventCallback OnOverlayClick { get; set; } + + /// + /// Position of the Modal on the screen. + /// + [Parameter, ResetClassBuilder] + public BitPosition? Position { get; set; } + + /// + /// Set the element selector for which the Modal disables its scroll if applicable. + /// + [Parameter] public string? ScrollerSelector { get; set; } + + /// + /// Shows the close button of the Panel. + /// + [Parameter] public bool ShowCloseButton { get; set; } + + /// + /// Custom CSS styles for different parts of the BitModal component. + /// + [Parameter] public BitProModalClassStyles? Styles { get; set; } + + /// + /// ARIA id for the subtitle of the Modal, if any. + /// + [Parameter] public string? SubtitleAriaId { get; set; } + + /// + /// ARIA id for the title of the Modal, if any. + /// + [Parameter] public string? TitleAriaId { get; set; } + + + + public async Task Open() + { + if (await AssignIsOpen(true) is false) return; + + StateHasChanged(); + } + + public async Task Close() + { + if (await AssignIsOpen(false) is false) return; + + StateHasChanged(); + } + + + + protected override string RootElementClass => "bit-pmd"; + + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => ModeFull ? "bit-pmd-mfl" : string.Empty); + } + + + + private async Task CloseModal(MouseEventArgs e) + { + if (IsEnabled is false) return; + + if (await AssignIsOpen(false) is false) return; + + await OnDismiss.InvokeAsync(e); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss new file mode 100644 index 0000000000..1dd783c9ab --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss @@ -0,0 +1,98 @@ +@import '../../../Bit.BlazorUI/Styles/functions.scss'; + +.bit-mdl { + inset: 0; + opacity: 1; + width: 100%; + height: 100%; + outline: none; + display: flex; + position: fixed; + font-weight: 400; + align-items: center; + pointer-events: auto; + z-index: $zindex-modal; + justify-content: center; + font-size: spacing(1.75); + font-family: $tg-font-family; + background-color: transparent; + transition: opacity 300ms ease 0s; +} + +.bit-mdl-abs { + z-index: unset; + position: absolute; +} + +.bit-mdl-ovl { + inset: 0; + z-index: 0; + position: absolute; + background-color: $clr-bg-overlay; +} + +.bit-mdl-ctn { + max-width: 100%; + position: absolute; + box-sizing: border-box; + background-color: $clr-bg-pri; + box-shadow: $box-shadow-callout; + border-radius: $shp-border-radius; +} + +.bit-mdl-fhe { + .bit-mdl-ctn { + height: 100%; + } +} + +.bit-mdl-fwi { + .bit-mdl-ctn { + width: 100%; + } +} + +.bit-mdl-ctr { + align-items: center; + justify-content: center; +} + +.bit-mdl-tl { + align-items: flex-start; + justify-content: flex-start; +} + +.bit-mdl-tc { + align-items: flex-start; + justify-content: center; +} + +.bit-mdl-tr { + align-items: flex-start; + justify-content: flex-end; +} + +.bit-mdl-cl { + align-items: center; + justify-content: flex-start; +} + +.bit-mdl-cr { + align-items: center; + justify-content: flex-end; +} + +.bit-mdl-bl { + align-items: flex-end; + justify-content: flex-start; +} + +.bit-mdl-bc { + align-items: flex-end; + justify-content: center; +} + +.bit-mdl-br { + align-items: flex-end; + justify-content: flex-end; +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs new file mode 100644 index 0000000000..39568f6b77 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs @@ -0,0 +1,34 @@ +namespace Bit.BlazorUI; + +public class BitProModalClassStyles : BitModalClassStyles +{ + /// + /// Custom CSS classes/styles for the header container of the BitProModal. + /// + public string? HeaderContainer { get; set; } + + /// + /// Custom CSS classes/styles for the header of the BitProModal. + /// + public string? Header { get; set; } + + /// + /// Custom CSS classes/styles for the close button of the BitProModal. + /// + public string? CloseButton { get; set; } + + /// + /// Custom CSS classes/styles for the close button of the BitProModal. + /// + public string? CloseIcon { get; set; } + + /// + /// Custom CSS classes/styles for the body of the BitProModal. + /// + public string? Body { get; set; } + + /// + /// Custom CSS classes/styles for the footer of the BitProModal. + /// + public string? Footer { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs index cc7b077732..9f6f43fc38 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs @@ -8,14 +8,14 @@ public partial class BitProPanel : BitComponentBase [Parameter] public bool AutoToggleScroll { get; set; } /// - /// The alias of the ChildContent. + /// Whether the panel can be dismissed by clicking outside of it on the overlay. /// - [Parameter] public RenderFragment? Body { get; set; } + [Parameter] public bool Blocking { get; set; } /// - /// Whether the panel can be dismissed by clicking outside of it on the overlay. + /// The alias of the ChildContent. /// - [Parameter] public bool Blocking { get; set; } + [Parameter] public RenderFragment? Body { get; set; } /// /// The content of the panel. diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs index eb3b8ed478..5141f34c83 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs @@ -17,7 +17,7 @@ public void BitModalIsAlertTest(bool? isAlert) { var com = RenderComponent(parameters => { - parameters.Add(p => p.IsAlert, isAlert); + parameters.Add(p => p.Alert, isAlert); parameters.Add(p => p.IsOpen, true); }); diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs index ead42badde..2b507a809d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs @@ -16,10 +16,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable private BitModalParameters modalParameters = new(); - /// - /// Enables the auto scrollbar toggle behavior of the Modal. - /// - [Parameter] public bool AutoToggleScroll { get; set; } /// /// When true, the Modal will be positioned absolute instead of fixed. @@ -27,6 +23,16 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable [Parameter, ResetClassBuilder] public bool AbsolutePosition { get; set; } + /// + /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless. + /// + [Parameter] public bool? Alert { get; set; } + + /// + /// Enables the auto scrollbar toggle behavior of the Modal. + /// + [Parameter] public bool AutoToggleScroll { get; set; } + /// /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay). /// @@ -70,11 +76,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable [Parameter, ResetClassBuilder] public bool FullWidth { get; set; } - /// - /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless. - /// - [Parameter] public bool? IsAlert { get; set; } - /// /// Whether the Modal is displayed. /// @@ -225,7 +226,7 @@ private string GetDragElementSelector() private string GetRole() { - return (ModalParameters.IsAlert ?? (ModalParameters.Blocking && ModalParameters.Modeless is false)) ? "alertdialog" : "dialog"; + return (ModalParameters.Alert ?? (ModalParameters.Blocking && ModalParameters.Modeless is false)) ? "alertdialog" : "dialog"; } private async Task ToggleScroll(bool isOpen) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs index e9cd0da410..86635d0469 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs @@ -27,7 +27,7 @@ public class BitModalParameters public bool FullWidth { get { return _modal?.FullWidth ?? field; } set; } - public bool? IsAlert { get { return _modal?.IsAlert ?? field; } set; } + public bool? Alert { get { return _modal?.Alert ?? field; } set; } public bool Modeless { get { return _modal?.Modeless ?? field; } set; } @@ -97,7 +97,7 @@ public void SetModal(BitModal modal) FullHeight = params1.FullHeight || params2.FullHeight, FullSize = params1.FullSize || params2.FullSize, FullWidth = params1.FullWidth || params2.FullWidth, - IsAlert = params1.IsAlert ?? params2.IsAlert, + Alert = params1.Alert ?? params2.Alert, Modeless = params1.Modeless || params2.Modeless, OnDismiss = EventCallback.Factory.Create(new object(), async () => { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor new file mode 100644 index 0000000000..118cb1bfb5 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor @@ -0,0 +1,29 @@ +@page "/components/promodal" + + + + + + + Open ProModal + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs new file mode 100644 index 0000000000..0c0c658c8d --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs @@ -0,0 +1,230 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProModal; + +public partial class BitProModalDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "AbsolutePosition", + Type = "bool", + DefaultValue = "false", + Description = "When true, the Modal will be positioned absolute instead of fixed.", + }, + new() + { + Name = "Alert", + Type = "bool?", + DefaultValue = "null", + Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.", + }, + new() + { + Name = "AutoToggleScroll", + Type = "bool", + DefaultValue = "false", + Description = "Enables the auto scrollbar toggle behavior of the Modal.", + }, + new() + { + Name = "Blocking", + Type = "bool", + DefaultValue = "false", + Description = "Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).", + }, + new() + { + Name = "ChildContent", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The content of Modal, It can be Any custom tag or a text.", + }, + new() + { + Name = "Classes", + Type = "BitModalClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the BitModal component.", + LinkType = LinkType.Link, + Href = "#modal-class-styles", + }, + new() + { + Name = "DragElementSelector", + Type = "string?", + DefaultValue = "null", + Description = "The CSS selector of the drag element. by default the Modal container is the drag element.", + }, + new() + { + Name = "Draggable", + Type = "bool", + DefaultValue = "false", + Description = "Whether the Modal can be dragged around.", + }, + new() + { + Name = "FullHeight", + Type = "bool", + DefaultValue = "false", + Description = "Makes the Modal height 100% of its parent container.", + }, + new() + { + Name = "FullSize", + Type = "bool", + DefaultValue = "false", + Description = "Makes the Modal width and height 100% of its parent container.", + }, + new() + { + Name = "FullWidth", + Type = "bool", + DefaultValue = "false", + Description = "Makes the Modal width 100% of its parent container.", + }, + new() + { + Name = "IsOpen", + Type = "bool", + DefaultValue = "false", + Description = "Whether the Modal is displayed.", + }, + new() + { + Name = "Modeless", + Type = "bool", + DefaultValue = "false", + Description = "Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.", + }, + new() + { + Name = "OnDismiss", + Type = "EventCallback", + Description = "A callback function for when the Modal is dismissed.", + }, + new() + { + Name = "OnOverlayClick", + Type = "EventCallback", + Description = "A callback function for when somewhere on the overlay element of the Modal is clicked.", + }, + new() + { + Name = "Position", + Type = "BitPosition?", + DefaultValue = "null", + Description = "Position of the Modal on the screen.", + LinkType = LinkType.Link, + Href = "#position-enum", + }, + new() + { + Name = "ScrollerSelector", + Type = "string", + DefaultValue = "body", + Description = "Set the element selector for which the Modal disables its scroll if applicable.", + }, + new() + { + Name = "Styles", + Type = "BitModalClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the BitModal component.", + LinkType = LinkType.Link, + Href = "#modal-class-styles", + }, + new() + { + Name = "SubtitleAriaId", + Type = "string?", + DefaultValue = "null", + Description = "ARIA id for the subtitle of the Modal, if any.", + }, + new() + { + Name = "TitleAriaId", + Type = "string?", + DefaultValue = "null", + Description = "ARIA id for the title of the Modal, if any.", + } + ]; + + private readonly List componentSubClasses = + [ + new() + { + Id = "modal-class-styles", + Title = "BitModalClassStyles", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the BitModal." + }, + new() + { + Name = "Overlay", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the overlay of the BitModal." + }, + new() + { + Name = "Content", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the content of the BitModal." + } + ] + } + ]; + + private readonly List componentSubEnums = + [ + new() + { + Id = "position-enum", + Name = "BitPosition", + Description = "", + Items = + [ + new() { Name = "Center", Value = "0" }, + new() { Name = "TopLeft", Value = "1" }, + new() { Name = "TopCenter", Value = "2" }, + new() { Name = "TopRight", Value = "3" }, + new() { Name = "CenterLeft", Value = "4" }, + new() { Name = "CenterRight", Value = "5" }, + new() { Name = "BottomLeft", Value = "6" }, + new() { Name = "BottomCenter", Value = "7" }, + new() { Name = "BottomRight", Value = "8" } + ] + } + ]; + + + + private bool isOpenBasic; + + + private readonly string example1RazorCode = @" + isOpenBasic = true"">Open Modal + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+"; + private readonly string example1CsharpCode = @" +private bool isOpenBasic;"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss new file mode 100644 index 0000000000..d25be02092 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss @@ -0,0 +1,68 @@ +@import '../../../../Styles/abstracts/_functions.scss'; + +.modal-header { + gap: 0.5rem; + display: flex; + font-weight: 600; + align-items: center; + font-size: rem2(24px); + border-top: rem2(4px) solid #0054C6; + padding: rem2(12px) rem2(12px) rem2(14px) rem2(24px); +} + +.modal-header-text { + flex-grow: 1; +} + +.modal-body { + overflow-y: hidden; + max-width: rem2(960px); + line-height: rem2(20px); + padding: 0 rem2(24px) rem2(24px); +} + +.relative-container { + width: 100%; + overflow: auto; + margin-top: 1rem; + position: relative; + height: rem2(400px); + border: rem2(2px) lightgreen solid; +} + +.position-btn-container { + gap: 1rem; + display: flex; + flex-flow: column nowrap; + + div { + display: flex; + justify-content: space-between; + } +} + +::deep { + .position-button { + width: 130px; + } + + .custom-class { + border: 0.5rem solid tomato; + background-color: darkgoldenrod; + } + + .custom-root { + border: 0.25rem solid #0054C6; + } + + .custom-overlay { + background-color: #ffbd5a66; + } + + .custom-content { + margin: 1rem; + box-shadow: 0 0 10rem purple; + border-end-end-radius: 1rem; + border-end-start-radius: 1rem; + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs index 7cac770d07..89b8f9e7a1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs @@ -12,13 +12,6 @@ public partial class BitProPanelDemo Description = "Enables the auto scrollbar toggle behavior of the panel.", }, new() - { - Name = "Body", - Type = "RenderFragment?", - DefaultValue = "null", - Description = "The alias of the ChildContent.", - }, - new() { Name = "Blocking", Type = "bool", @@ -26,6 +19,13 @@ public partial class BitProPanelDemo Description = "Whether the panel can be dismissed by clicking outside of it on the overlay.", }, new() + { + Name = "Body", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The alias of the ChildContent.", + }, + new() { Name = "ChildContent", Type = "RenderFragment?", diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs index 44520654da..a95fffcdac 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs @@ -6,17 +6,24 @@ public partial class BitModalDemo [ new() { - Name = "AutoToggleScroll", + Name = "AbsolutePosition", Type = "bool", DefaultValue = "false", - Description = "Enables the auto scrollbar toggle behavior of the Modal.", + Description = "When true, the Modal will be positioned absolute instead of fixed.", }, new() { - Name = "AbsolutePosition", + Name = "Alert", + Type = "bool?", + DefaultValue = "null", + Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.", + }, + new() + { + Name = "AutoToggleScroll", Type = "bool", DefaultValue = "false", - Description = "When true, the Modal will be positioned absolute instead of fixed.", + Description = "Enables the auto scrollbar toggle behavior of the Modal.", }, new() { @@ -77,13 +84,6 @@ public partial class BitModalDemo Description = "Makes the Modal width 100% of its parent container.", }, new() - { - Name = "IsAlert", - Type = "bool?", - DefaultValue = "null", - Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.", - }, - new() { Name = "IsOpen", Type = "bool", diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor index b3e28e6a15..63a35a585f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor @@ -256,6 +256,9 @@ ProPanel + + ProModal + ModalService diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs index 84b6f10f89..46508c9eae 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs +++ b/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 = "ProModal", Url = "/components/promodal" }, new() { Text = "ProPanel", Url = "/components/propanel" }, new() {