@marianmeres/stuic 2.23.0 → 2.26.0

package/dist/actions/popover/popover.svelte.d.ts

@@ -1,5 +1,31 @@
 import type { THC } from "../../components/Thc/Thc.svelte";
 import "./index.css";
+/**
+ * Open a popover by its registered ID.
+ *
+ * @param id - The popover ID to open
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * import { openPopover } from './';
+ * </script>
+ * <button onclick={() => openPopover('my-popover')}>Open</button>
+ * ```
+ */
+export declare function openPopover(id: string): void;
+/**
+ * Close a popover by its registered ID.
+ *
+ * @param id - The popover ID to close
+ */
+export declare function closePopover(id: string): void;
+/**
+ * Toggle a popover by its registered ID.
+ *
+ * @param id - The popover ID to toggle
+ */
+export declare function togglePopover(id: string): void;
 /**
  * Checks if the browser supports CSS Anchor Positioning for popovers.
  *
@@ -65,6 +91,10 @@ export interface PopoverOptions {
     onHide?: () => void;
     /** Debug mode */
     debug?: boolean;
+    /** Programmatically control open state (reactive) */
+    open?: boolean;
+    /** Unique ID for registry-based programmatic control (use with openPopover/closePopover/togglePopover) */
+    id?: string;
 }
 /**
  * A Svelte action that displays a popover anchored to an element using CSS Anchor Positioning.

package/dist/actions/popover/popover.svelte.js

@@ -6,6 +6,54 @@ import PopoverContent from "./PopoverContent.svelte";
 import "./index.css";
 // Registry of open popover hide functions for closeOthers feature
 const openPopovers = new Set();
+// Registry of popovers by ID for programmatic control
+const popoverRegistry = new Map();
+// Track if an open was just requested (to prevent same-click outside close)
+let openRequestedThisCycle = false;
+/**
+ * Open a popover by its registered ID.
+ *
+ * @param id - The popover ID to open
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * import { openPopover } from './';
+ * </script>
+ * <button onclick={() => openPopover('my-popover')}>Open</button>
+ * ```
+ */
+export function openPopover(id) {
+    const entry = popoverRegistry.get(id);
+    if (entry) {
+        openRequestedThisCycle = true;
+        setTimeout(() => {
+            openRequestedThisCycle = false;
+        }, 0);
+        // Close all other open popovers first
+        openPopovers.forEach((hideFn) => {
+            if (hideFn !== entry.hide)
+                hideFn();
+        });
+        entry.show();
+    }
+}
+/**
+ * Close a popover by its registered ID.
+ *
+ * @param id - The popover ID to close
+ */
+export function closePopover(id) {
+    popoverRegistry.get(id)?.hide();
+}
+/**
+ * Toggle a popover by its registered ID.
+ *
+ * @param id - The popover ID to toggle
+ */
+export function togglePopover(id) {
+    popoverRegistry.get(id)?.toggle();
+}
 const SHOW_DELAY = 100;
 const HIDE_DELAY = 200;
 const TRANSITION = 200;
@@ -155,6 +203,7 @@ export function popover(anchorEl, fn) {
     let hideTimer = null;
     let isVisible = false;
     let do_debug = false;
+    let prevOpen = undefined;
     // Unique identifiers
     const rnd = Math.random().toString(36).slice(2);
     const id = `popover-${rnd}`;
@@ -200,11 +249,20 @@ export function popover(anchorEl, fn) {
         if (popoverEl &&
             !popoverEl.contains(e.target) &&
             !anchorEl.contains(e.target)) {
+            // Skip if an open was just requested via registry (same click event)
+            if (openRequestedThisCycle) {
+                return;
+            }
             hide();
         }
     }
     function onClickTrigger(e) {
         e.stopPropagation();
+        // Close all other open popovers (since stopPropagation prevents onClickOutside from firing)
+        openPopovers.forEach((hideFn) => {
+            if (hideFn !== hide)
+                hideFn();
+        });
         if (isVisible)
             hide();
         else
@@ -408,8 +466,22 @@ export function popover(anchorEl, fn) {
             onShow: opts.onShow,
             onHide: opts.onHide,
             debug: opts.debug,
+            id: opts.id,
         };
         do_debug = !!opts.debug;
+        // Register in global registry if id provided
+        if (opts.id) {
+            popoverRegistry.set(opts.id, {
+                show,
+                hide,
+                toggle: () => {
+                    if (isVisible)
+                        hide();
+                    else
+                        show();
+                },
+            });
+        }
         // Update popover if visible
         if (isVisible && popoverEl) {
             // Update position (only in anchor positioning mode)
@@ -421,6 +493,17 @@ export function popover(anchorEl, fn) {
         }
         // Note: trigger mode change while visible is not fully handled
         // User should close and reopen for trigger mode change to take effect
+        // Handle programmatic open/close
+        const openValue = opts.open;
+        if (openValue !== undefined && openValue !== prevOpen) {
+            if (openValue && !isVisible) {
+                show();
+            }
+            else if (!openValue && isVisible) {
+                hide();
+            }
+        }
+        prevOpen = openValue;
     });
     // Event listeners effect
     $effect(() => {
@@ -461,6 +544,10 @@ export function popover(anchorEl, fn) {
             clearTimers();
             // Unregister from open popovers
             openPopovers.delete(hide);
+            // Unregister from popover registry
+            if (currentOptions.id) {
+                popoverRegistry.delete(currentOptions.id);
+            }
             document.removeEventListener("keydown", onEscape);
             document.removeEventListener("click", onClickOutside);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.23.0",
+  "version": "2.26.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",