From cd959ea63df46678f3a2a7e20617e5f65615d628 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 23 Dec 2024 09:51:48 +0330 Subject: [PATCH 1/5] unify dragdrop --- .../Surfaces/Dialog/BitDialog.razor.cs | 8 +++--- .../Components/Surfaces/Dialog/BitDialog.scss | 8 ------ .../Surfaces/Modal/BitModal.razor.cs | 8 +++--- .../Components/Surfaces/Modal/BitModal.scss | 8 ------ .../Modal/BitModalJsRuntimeExtensions.cs | 14 ----------- .../JsInterop/DragDropsJsRuntimeExtensions.cs | 14 +++++++++++ .../Modal/BitModal.ts => Scripts/DragDrop.ts} | 25 +++++++++++-------- src/BlazorUI/Bit.BlazorUI/Styles/general.scss | 11 +++++++- 8 files changed, 46 insertions(+), 50 deletions(-) delete mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs rename src/BlazorUI/Bit.BlazorUI/{Components/Surfaces/Modal/BitModal.ts => Scripts/DragDrop.ts} (79%) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs index 5ae699aba7..da8c189047 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs @@ -217,16 +217,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { if (IsDraggable) { - _ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsSetup(_containerId, GetDragElementSelector()); } else { - _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsRemove(_containerId, GetDragElementSelector()); } } else { - _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsRemove(_containerId, GetDragElementSelector()); } _offsetTop = 0; @@ -329,7 +329,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing) try { - await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + await _js.DragDropsRemove(_containerId, GetDragElementSelector()); } catch (JSDisconnectedException) { } // we can ignore this exception here diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss index a91c080711..85e6aa8966 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss @@ -21,14 +21,6 @@ } } -.bit-dlg-nta { - touch-action: none; - - * { - touch-action: none; - } -} - .bit-dlg-abs { z-index: unset; position: absolute; 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 c19d8f49bb..ead42badde 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs @@ -179,16 +179,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { if (ModalParameters.Draggable) { - _ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsSetup(_containerId, GetDragElementSelector()); } else { - _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsRemove(_containerId, GetDragElementSelector()); } } else { - _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + _ = _js.DragDropsRemove(_containerId, GetDragElementSelector()); } _offsetTop = 0; @@ -250,7 +250,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing) try { await ToggleScroll(false); - await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector()); + await _js.DragDropsRemove(_containerId, GetDragElementSelector()); } catch (JSDisconnectedException) { } // we can ignore this exception here diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss index 370c4664f5..053665edfb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss @@ -19,14 +19,6 @@ transition: opacity 300ms ease 0s; } -.bit-mdl-nta { - touch-action: none; - - * { - touch-action: none; - } -} - .bit-mdl-abs { z-index: unset; position: absolute; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs deleted file mode 100644 index 4bbdb16006..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace Bit.BlazorUI; - -internal static class BitModalJsRuntimeExtensions -{ - internal static ValueTask BitModalSetupDragDrop(this IJSRuntime js, string id, string dragElementSelector) - { - return js.InvokeVoid("BitBlazorUI.Modal.setupDragDrop", id, dragElementSelector); - } - - internal static ValueTask BitModalRemoveDragDrop(this IJSRuntime js, string id, string dragElementSelector) - { - return js.InvokeVoid("BitBlazorUI.Modal.removeDragDrop", id, dragElementSelector); - } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs new file mode 100644 index 0000000000..c6c9d53a6c --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs @@ -0,0 +1,14 @@ +namespace Bit.BlazorUI; + +internal static class DragDropsJsRuntimeExtensions +{ + internal static ValueTask DragDropsSetup(this IJSRuntime js, string id, string dragElementSelector) + { + return js.InvokeVoid("BitBlazorUI.DragDrops.setup", id, dragElementSelector); + } + + internal static ValueTask DragDropsRemove(this IJSRuntime js, string id, string dragElementSelector) + { + return js.InvokeVoid("BitBlazorUI.DragDrops.remove", id, dragElementSelector); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts similarity index 79% rename from src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts rename to src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts index c07eaf45c3..862567560d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts +++ b/src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts @@ -1,14 +1,17 @@ namespace BitBlazorUI { - export class Modal { + export class DragDrops { private static _dragDropListeners: any = {}; - public static setupDragDrop(containerId: string, dragElementSelector: string) { - Modal.removeDragDrop(containerId, dragElementSelector); + public static setup(id: string, dragElementSelector: string) { + DragDrops.remove(id, dragElementSelector); const listeners: any = {}; - Modal._dragDropListeners[containerId] = listeners; + DragDrops._dragDropListeners[id] = listeners; - const element = document.getElementById(containerId)! as HTMLElement; - const dragElement = document.querySelector(dragElementSelector)! as HTMLElement; + const element = document.getElementById(id) as HTMLElement; + if (!element) return; + + const dragElement = document.querySelector(dragElementSelector) as HTMLElement; + if (!dragElement) return; let x = 0; let y = 0; @@ -16,7 +19,7 @@ listeners['pointerdown'] = handlePointerDown; dragElement.addEventListener('pointerdown', handlePointerDown); dragElement.style.cursor = 'move'; - dragElement.classList.add('bit-mdl-nta'); + dragElement.classList.add('bit-nta'); function handlePointerDown(e: PointerEvent) { //e.preventDefault(); @@ -55,15 +58,15 @@ } } - public static removeDragDrop(id: string, dragElementSelector: string) { - const listeners = Modal._dragDropListeners[id]; + public static remove(id: string, dragElementSelector: string) { + const listeners = DragDrops._dragDropListeners[id]; if (!listeners) return; const dragElement = document.querySelector(dragElementSelector)! as HTMLElement; dragElement.removeEventListener('pointerdown', listeners['pointerdown']); dragElement.style.cursor = ''; - dragElement.classList.remove('bit-mdl-nta'); + dragElement.classList.remove('bit-nta'); document.removeEventListener('pointermove', listeners['pointermove']); @@ -74,7 +77,7 @@ delete listeners['pointerdown']; delete listeners['pointermove']; delete listeners['pointerup']; - delete Modal._dragDropListeners[id]; + delete DragDrops._dragDropListeners[id]; } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss index 09ae31d958..34cbd760b3 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss @@ -9,7 +9,16 @@ button { outline: none; } -// Prevent text selection by user +// none touch action +.bit-nta { + touch-action: none; + + * { + touch-action: none; + } +} + +// none text selection .bit-nts { user-select: none; -ms-user-select: none; From 1ace76ca1462799aa3313af698cb188f47b3e8fa Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 23 Dec 2024 11:20:11 +0330 Subject: [PATCH 2/5] 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() { From e0a036c5ed1e1e750adbe946c82a9c911d9c0559 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Tue, 24 Dec 2024 11:43:14 +0330 Subject: [PATCH 3/5] fix modal demo page --- .../Components/ProModal/BitProModal.razor.cs | 3 + .../Components/ProModal/BitProModal.scss | 90 +-- .../Surfaces/Modal/BitModalTests.cs | 58 -- .../Components/Surfaces/Modal/BitModal.razor | 2 - .../Surfaces/Modal/BitModal.razor.cs | 31 - .../Surfaces/Modal/BitModalParameters.cs | 15 - .../Extras/ProModal/BitProModalDemo.razor | 76 +- .../Extras/ProModal/BitProModalDemo.razor.cs | 50 +- .../Surfaces/Modal/BitModalDemo.razor | 464 ++++------- .../Surfaces/Modal/BitModalDemo.razor.cs | 742 +++++------------- .../Surfaces/Modal/BitModalDemo.razor.scss | 23 +- 11 files changed, 503 insertions(+), 1051 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs index eeda5d838c..aa4bbf7685 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs @@ -169,6 +169,9 @@ public async Task Close() protected override void RegisterCssClasses() { + ClassBuilder.Register(() => FullSize || FullHeight ? "bit-pmd-fhe" : string.Empty); + ClassBuilder.Register(() => FullSize || FullWidth ? "bit-pmd-fwi" : string.Empty); + ClassBuilder.Register(() => ModeFull ? "bit-pmd-mfl" : string.Empty); } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss index 1dd783c9ab..f14911f316 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss @@ -1,98 +1,22 @@ @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-pmd { } -.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-pmd-mfl { + .bit-pnl-ovl { + background-color: $clr-bg-overlay; + } } -.bit-mdl-fhe { +.bit-pmd-fhe { .bit-mdl-ctn { height: 100%; } } -.bit-mdl-fwi { +.bit-pmd-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.Tests/Components/Surfaces/Modal/BitModalTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs index 5141f34c83..950c89e54c 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs @@ -82,64 +82,6 @@ public void BitModalIsOpenTest(bool isOpen) Assert.AreEqual(isOpen ? 1 : 0, bitModel.Count); } - [DataTestMethod, - DataRow(null), - DataRow(""), - DataRow("Test-S-A-Id") - ] - public void BitModalSubtitleAriaIdTest(string subtitleAriaId) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.SubtitleAriaId, subtitleAriaId); - parameters.Add(p => p.IsOpen, true); - }); - - var element = com.Find(".bit-mdl"); - - if (subtitleAriaId == null) - { - Assert.IsFalse(element.HasAttribute("aria-describedby")); - } - else if (subtitleAriaId == string.Empty) - { - Assert.AreEqual(element.Attributes["aria-describedby"].Value, string.Empty); - } - else - { - Assert.AreEqual(element.Attributes["aria-describedby"].Value, subtitleAriaId); - } - } - - [DataTestMethod, - DataRow(null), - DataRow(""), - DataRow("Test-T-A-Id") - ] - public void BitModalTitleAriaIdTest(string titleAriaId) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.TitleAriaId, titleAriaId); - parameters.Add(p => p.IsOpen, true); - }); - - var element = com.Find(".bit-mdl"); - - if (titleAriaId == null) - { - Assert.IsFalse(element.HasAttribute("aria-labelledby")); - } - else if (titleAriaId == string.Empty) - { - Assert.AreEqual(element.Attributes["aria-labelledby"].Value, string.Empty); - } - else - { - Assert.AreEqual(element.Attributes["aria-labelledby"].Value, titleAriaId); - } - } - [TestMethod] public void BitModalContentTest() { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor index e9638db9a2..42222bcfd8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor @@ -8,8 +8,6 @@ style="@StyleBuilder.Value" class="@ClassBuilder.Value" dir="@ModalParameters.Dir?.ToString().ToLower()" - aria-labelledby="@ModalParameters.TitleAriaId" - aria-describedby="@ModalParameters.SubtitleAriaId" aria-modal="@((ModalParameters.Modeless is false).ToString().ToLower())" role="@GetRole()"> @if (ModalParameters.Modeless is false) 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 2b507a809d..6326f03afa 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs @@ -58,24 +58,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable /// [Parameter] public bool Draggable { 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. /// @@ -113,16 +95,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable /// [Parameter] public BitModalClassStyles? 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; } - protected override string RootElementClass => "bit-mdl"; @@ -134,9 +106,6 @@ protected override void RegisterCssClasses() ClassBuilder.Register(() => ModalParameters.AbsolutePosition ? "bit-mdl-abs" : string.Empty); - ClassBuilder.Register(() => ModalParameters.FullSize || ModalParameters.FullHeight ? "bit-mdl-fhe" : string.Empty); - ClassBuilder.Register(() => ModalParameters.FullSize || ModalParameters.FullWidth ? "bit-mdl-fwi" : string.Empty); - ClassBuilder.Register(() => ModalParameters.Position switch { BitPosition.Center => "bit-mdl-ctr", diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs index 86635d0469..c54074c5d5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs @@ -21,12 +21,6 @@ public class BitModalParameters public bool Draggable { get { return _modal?.Draggable ?? field; } set; } - public bool FullHeight { get { return _modal?.FullHeight ?? field; } set; } - - public bool FullSize { get { return _modal?.FullSize ?? field; } set; } - - public bool FullWidth { get { return _modal?.FullWidth ?? field; } set; } - public bool? Alert { get { return _modal?.Alert ?? field; } set; } public bool Modeless { get { return _modal?.Modeless ?? field; } set; } @@ -63,10 +57,6 @@ public EventCallback OnOverlayClick public BitModalClassStyles? Styles { get; set; } - public string? SubtitleAriaId { get { return _modal?.SubtitleAriaId ?? field; } set; } - - public string? TitleAriaId { get { return _modal?.TitleAriaId ?? field; } set; } - private BitModal? _modal; public void SetModal(BitModal modal) @@ -94,9 +84,6 @@ public void SetModal(BitModal modal) Classes = BitModalClassStyles.Merge(params1.Classes, params2.Classes), DragElementSelector = params1.DragElementSelector ?? params2.DragElementSelector, Draggable = params1.Draggable || params2.Draggable, - FullHeight = params1.FullHeight || params2.FullHeight, - FullSize = params1.FullSize || params2.FullSize, - FullWidth = params1.FullWidth || params2.FullWidth, Alert = params1.Alert ?? params2.Alert, Modeless = params1.Modeless || params2.Modeless, OnDismiss = EventCallback.Factory.Create(new object(), async () => @@ -112,8 +99,6 @@ public void SetModal(BitModal modal) Position = params1.Position ?? params2.Position, ScrollerSelector = params1.ScrollerSelector ?? params2.ScrollerSelector, Styles = BitModalClassStyles.Merge(params1.Styles, params2.Styles), - SubtitleAriaId = params1.SubtitleAriaId ?? params2.SubtitleAriaId, - TitleAriaId = params1.TitleAriaId ?? params2.TitleAriaId, }; } } 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 index 118cb1bfb5..31b18311c9 100644 --- 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 @@ -5,14 +5,14 @@ Description="promodal component of the bit BlazorUI components" /> 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 @@ -23,7 +23,77 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
- + + + @* *@ + @* *@ + @* Open Modal *@ + @* *@ + @*
*@ + @* Lorem Ipsum *@ + @* *@ + @*
*@ + @*
*@ + @*

*@ + @* 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. *@ + @*

*@ + @*

*@ + @* Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus *@ + @* faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a *@ + @* magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia, *@ + @* nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est ornare, *@ + @* rhoncus odio eu, pharetra tellus. Nunc sed velit mi. *@ + @*

*@ + @*

*@ + @* Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel *@ + @* consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis *@ + @* et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor *@ + @* finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend *@ + @* mollis. Curabitur ultricies leo ac metus venenatis elementum. *@ + @*

*@ + @*
*@ + @* *@ + @* *@ + @* *@ + + @* *@ + @* *@ + @*
The FullSize parameter of the BitModal allows the modal to be full-screen.

*@ + @* Open Modal *@ + @* *@ + @*
*@ + @* Full size 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. *@ + @*

*@ + @*
*@ + @* *@ + @* *@ + @* *@ 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 index 0c0c658c8d..1f614c8ca2 100644 --- 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 @@ -133,20 +133,6 @@ public partial class BitProModalDemo 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.", } ]; @@ -227,4 +213,40 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. "; private readonly string example1CsharpCode = @" private bool isOpenBasic;"; + + private readonly string example2RazorCode = @" + 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 example2CsharpCode = @" +private bool isOpenBasic;"; + + private readonly string example3RazorCode = @" + 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 example3CsharpCode = @" +private bool isOpenBasic;"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor index 683e56b935..7f85c6af6b 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor @@ -13,7 +13,7 @@ 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 @@ -27,64 +27,66 @@ - + - Open Modal - -
- Lorem Ipsum - +
BitModal has some advanced options.

+ Open Modal (Blocking) + +
+ 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. +
+ Close
-
-

- 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. -

-

- Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus - faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a - magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia, - nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est ornare, - rhoncus odio eu, pharetra tellus. Nunc sed velit mi. -

-

- Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel - consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis - et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor - finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend - mollis. Curabitur ultricies leo ac metus venenatis elementum. -

+ +

+ Open Modal (Modeless) + +
+ 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. +
+ Close +
+ +

+ Open Modal (AutoToggleScroll) + +
+ 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.
- + -
BitModal has some advanced options.

- Open Modal (Blocking) -

- Open Modal (AutoToggleScroll) +
BitModal has an absolute position option to further customize its location.

+ Open Modal

- Open Modal (Modeless) - - -
- Blocking - -
-
-

- In Blocking mode, the modal won't close by clicking outside (on the overlay). -

-
-

+

+ +
+

AbsolutePosition

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 @@ -93,46 +95,36 @@ 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. -

-
- +
+ - -
- AutoToggleScroll - -
-
-

- In AutoToggleScroll mode, the scrollbar of the scroll element - (body by default and customizable with the ScrollerSelector parameter) - will be removed when the modal opens. -

-
-

- 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. -

-
- +
+ 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. - -
- Modeless - + 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.
-
-

- In Modeless mode, the overlay element won't render. -

-
-

+

+



+ Open Modal (AutoToggleScroll & ScrollerSelector) +

+