add popover options

docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/SimpleDropdownExample.razor

@@ -12,7 +12,7 @@
             <HBDropdownItemLink class="dropdown-item" href="#" OnClickPreventDefault="true" OnClickStopPropagation="true">Link (Prevent Default and Stop Propagation)</HBDropdownItemLink>
         </HBDropdownItems>
     </HBDropdown>
-    <HBDropdown class="dropdown d-inline-block">
+    <HBDropdown class="dropdown d-inline-block" Alignment="HBPopoverAlignment.End">
         <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
         <HBDropdownItems class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
             <HBDropdownItem class="dropdown-item">Default</HBDropdownItem>

src/HeadlessBlazor.Core/Behaviors/HBPopoverAlignment.cs

@@ -0,0 +1,11 @@
+using System.Text.Json.Serialization;
+
+namespace HeadlessBlazor.Behaviors;
+
+[JsonConverter(typeof(JsonStringEnumConverter))]
+public enum HBPopoverAlignment
+{
+    Start,
+    Center,
+    End
+}

src/HeadlessBlazor.Core/Behaviors/HBPopoverBehavior.razor

@@ -1,14 +1,19 @@
 @implements IAsyncDisposable
 @code {
-    private DotNetObjectReference<HBPopoverBehavior>? dotNetObjRef;
     private IJSObjectReference? popover;
 
     [Inject]
     private IJSRuntime JS { get; set; } = default!;
 
+    [Parameter]
+    public HBPopoverAlignment? Alignment { get; set; }
+
     [Parameter]
     public IReferenceable Container { get; set; } = default!;
 
+    [Parameter]
+    public HBPopoverSide? Side { get; set; }
+
     public async ValueTask DisposeAsync()
     {
         if (popover is not null)
@@ -17,18 +22,19 @@
             await popover.DisposeAsync();
             popover = null;
         }
-
-        dotNetObjRef?.Dispose();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            dotNetObjRef ??= DotNetObjectReference.Create(this);
             var moduleName = nameof(HBPopoverBehavior);
             var module = await JS.InvokeAsync<IJSObjectReference>("import", $"./_content/HeadlessBlazor.Core/Behaviors/{moduleName}.razor.js");
-            popover = await module.InvokeAsync<IJSObjectReference>($"{moduleName}.createInstance", Container.ElementReference, dotNetObjRef);
+            popover = await module.InvokeAsync<IJSObjectReference>($"{moduleName}.createInstance", Container.ElementReference, new HBPopoverOptions
+            {
+                Alignment = Alignment,
+                Side = Side
+            });
             await module.DisposeAsync();
         }
     }

src/HeadlessBlazor.Core/Behaviors/HBPopoverBehavior.razor.js

@@ -1,38 +1,36 @@
-import {
-    autoUpdate,
-    computePosition,
-    flip
-} from '../@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs';
+import { autoUpdate, computePosition, flip } from '../floating-ui.dom.browser.min.mjs';
 
 export class HBPopoverBehavior {
 
     /**
      * @static
      * @param {Element} container
-     * @param {any} dotNetRef
+     * @param {any} options
      * @returns {HBPopoverBehavior}
      */
-    static createInstance(container) {
-        return new HBPopoverBehavior(container);
+    static createInstance(container, options) {
+        return new HBPopoverBehavior(container, options);
     }
 
     /**
      * Creates a new instance of HBPopoverBehavior.
      * @constructor
      * @param {Element} container
-     * @param {any} dotNetRef
+     * @param {any} options
      */
-    constructor(container) {
+    constructor(container, options) {
         const anchor = container.querySelector('[hb-popover-anchor]');
         const floater = container.querySelector('[hb-popover]');
+
+        const side = (options && options.Side) || 'bottom';
+        const align = (options && options.Alignment) || 'start';
 
         this.dispose = autoUpdate(anchor, floater, () => {
             computePosition(anchor, floater, {
-                placement: 'bottom-start',
+                placement: `${side}-${align}`,
                 middleware: [flip()]
             }).then(({ x, y }) => {
                 Object.assign(floater.style, {
-                    display: `block`,
                     left: `${x}px`,
                     top: `${y}px`,
                 });

src/HeadlessBlazor.Core/Behaviors/HBPopoverOptions.cs

@@ -0,0 +1,7 @@
+namespace HeadlessBlazor.Behaviors;
+
+public sealed record HBPopoverOptions
+{
+    public HBPopoverAlignment? Alignment { get; init; }
+    public HBPopoverSide? Side { get; init; }
+}

src/HeadlessBlazor.Core/Behaviors/HBPopoverSide.cs

@@ -0,0 +1,12 @@
+using System.Text.Json.Serialization;
+
+namespace HeadlessBlazor.Behaviors;
+
+[JsonConverter(typeof(JsonStringEnumConverter))]
+public enum HBPopoverSide
+{
+    Top,
+    Right,
+    Bottom,
+    Left
+}