diff --git a/src/LumexUI/Components/Popover/LumexPopover.razor.cs b/src/LumexUI/Components/Popover/LumexPopover.razor.cs index fdca7a5c..b4c2da46 100644 --- a/src/LumexUI/Components/Popover/LumexPopover.razor.cs +++ b/src/LumexUI/Components/Popover/LumexPopover.razor.cs @@ -2,6 +2,8 @@ // LumexUI licenses this file to you under the MIT license // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE +using System.Threading.Tasks; + using LumexUI.Common; using LumexUI.Extensions; using LumexUI.Styles; @@ -99,8 +101,10 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent [Parameter] public PopoverSlots? Classes { get; set; } + internal bool IsVisible { get; private set; } internal bool IsTooltip { get; private set; } internal PopoverOptions Options { get; private set; } + internal PopoverState State { get; private set; } = PopoverState.Closed; internal Dictionary Slots { get; private set; } = []; private readonly PopoverContext _context; @@ -126,6 +130,11 @@ protected override void OnParametersSet() IsTooltip = value is "tooltip"; } + if (Open && State is PopoverState.Closing or PopoverState.Closed ) + { + State = PopoverState.Opening; + } + Options = new PopoverOptions( this ); var popover = Popover.Style( TwMerge ); @@ -135,6 +144,7 @@ protected override void OnParametersSet() [nameof( Color )] = Color.ToString(), [nameof( Radius )] = Radius.ToString(), [nameof( Shadow )] = Shadow.ToString(), + [nameof( State )] = State.ToString(), } ); } @@ -151,21 +161,40 @@ internal async Task TriggerAsync() await CloseAsync(); } - StateHasChanged(); + await InvokeAsync( StateHasChanged ); } - internal Task OpenAsync() + internal async Task OpenAsync() { + State = PopoverState.Opening; + await InvokeAsync( StateHasChanged ); + + await Task.Delay( 100 ); // <-- I don't know how to avoid this. The animation works from the second time forward + Open = true; - return OpenChanged.InvokeAsync( true ); + await OpenChanged.InvokeAsync( true ); } internal Task CloseAsync() { + State = PopoverState.Closing; + Open = false; return OpenChanged.InvokeAsync( false ); } + internal void SetTransitionState() + { + if( State is PopoverState.Opening ) + { + State = PopoverState.Opened; + } + else if( State is PopoverState.Closing ) + { + State = PopoverState.Closed; + } + } + /// /// Represents the configuration options for a component. /// @@ -177,4 +206,9 @@ internal readonly struct PopoverOptions( LumexPopover popover ) public bool MatchRefWidth { get; } = popover.MatchRefWidth; public string Placement { get; } = popover.Placement.ToDescription(); } + + internal enum PopoverState + { + Closed, Opening, Opened, Closing + } } diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor b/src/LumexUI/Components/Popover/LumexPopoverContent.razor index 6d42d0d3..d4f8d648 100644 --- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor +++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor @@ -1,9 +1,14 @@ @namespace LumexUI @inherits LumexComponentBase -@if( Popover.Open ) +@using PopoverState = LumexPopover.PopoverState; + +@if( Popover.State is not PopoverState.Closed ) { - +