@csedl/hotwire-svelte-helpers 4.1.0 → 4.2.1

package/README.md

@@ -14,7 +14,7 @@ A small toolkit for building more interactive Rails apps with Hotwire and Svelte
 ## Setup
 
 ```javascript
-import { HotwireSvelteHelpers } from "@csedl/hotwire-svelte-helpers/init"
+import { HotwireSvelteHelpers } from "@csedl/hotwire-svelte-helpers/setup"
 HotwireSvelteHelpers.debug = true
 HotwireSvelteHelpers.initializeOverlays()
 ```
@@ -52,6 +52,14 @@ to your application.js. This will check for detached instances and unmount them.
     ... any content
 </div>
 ```
+## `body#overlays-box` Tag
+
+Svelte dropdown panels are mounted into `#overlays-box`, a shared overlay container appended directly to `document.body`.
+If `#overlays-box` does not exist, it is created automatically.
+This keeps overlays at the root level to avoid most z-index and clipping issues, 
+while keeping the DOM cleaner than mounting panels directly into `body`.
+
+This aligns to the behaviour of the [stimulus side](https://gitlab.com/sedl/stimulus-overlay-helpers)
 
 ## Svelte Dropdowns
 

package/index.js

@@ -1,9 +1,12 @@
 
 import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount.js';
-import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, getCsrfToken } from './src/lib/utils.js'
+import {
+    initializeDropdown, openDropdownPanel,
+    getOrSetPanelId, debugLog, getCsrfToken, getOverlayTarget
+} from './src/lib/utils.js'
 
 export {
     cleanMount, unmountAllDetached,
     initializeDropdown, openDropdownPanel, getOrSetPanelId,
-    debugLog, getCsrfToken
+    debugLog, getCsrfToken, getOverlayTarget
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "Hotwire + Svelte helpers for Rails: Stimulus floating dropdowns/toolips + Svelte global panels/modals + RTurbo-friendly utilities. Build together with the rubygem svelte-on-rails and its npm-package.",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
       "import": "./index.js",
       "default": "./index.js"
     },
-    "./init": {
+    "./setup": {
       "import": "./src/lib/initializers.js",
       "default": "./src/lib/initializers.js"
     },

package/src/lib/utils.js

@@ -1,6 +1,7 @@
 import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
 
 // Fetch content from server based on panel's data-src attribute and update content
+
 export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 
     if (buttonElement.classList.contains('has-open-panel')) {
@@ -69,6 +70,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 }
 
 // Handle panel closing
+
 export function closePanel(button) {
 
     const panel = findPanelOrThrow(button);
@@ -95,6 +97,7 @@ export function closePanel(button) {
 }
 
 // Close panels when clicking outside
+
 export function closeOnOutsideClick(clickedElement) {
 
     // set button
@@ -148,6 +151,7 @@ export function closeOnOutsideClick(clickedElement) {
 }
 
 // Add panel functionality, including close event listeners
+
 export function initializeDropdown(button) {
 
     // find panel
@@ -213,10 +217,6 @@ export function findPanelOrThrow(button) {
     return (panel)
 }
 
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-// LOGGER
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
 export function debugLog(message, object) {
     if (window.HotwireSvelteHelpers.debug) {
 
@@ -230,13 +230,8 @@ export function debugLog(message, object) {
     }
 }
 
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-// ADDITIONAL FUNCTIONS
-// utils that are not used for the primary functions of this package itself, but helpful for building associated functions
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
-
 // find or add the data-panel-id attribute of a button and return it
+
 export function getOrSetPanelId(buttonTag) {
     let id = buttonTag.getAttribute('data-panel-id')
     if (id) {
@@ -259,5 +254,17 @@ function generateRandomHex(n) {
     ).join('');
 }
 
+const OVERLAY_TARGET_ID = 'overlays-box';
+
+export function getOverlayTarget() {
+    let target = document.getElementById(OVERLAY_TARGET_ID);
 
+    if (!target) {
+        target = document.createElement('div');
+        target.id = OVERLAY_TARGET_ID;
+        document.body.appendChild(target);
+    }
+
+    return target;
+}
 

package/src/svelte/templates/DropdownButton.svelte

@@ -2,6 +2,7 @@
     import DropdownPanel from "./DropdownPanel.svelte";
     import { unmount } from 'svelte'
     import { cleanMount } from "../cleanMount.js";
+    import { getOverlayTarget } from "../../lib/utils.js";
 
     let { panelContent, panelTitle, panelClass, label, svgIcon, panelPlacement } = $props();
 
@@ -21,7 +22,7 @@
 
         panelInstance = cleanMount(
             DropdownPanel, {
-                target: document.getElementById('dropdown-panels-box'),
+                target: getOverlayTarget(),
                 props: {
                     title: panelTitle,
                     closeFunction: closeDropdown,

package/src/svelte/templates/ModalButton.svelte

@@ -1,7 +1,8 @@
 <script>
     import Modal from './Modal.svelte';
-    import {unmount} from 'svelte'
-    import {cleanMount} from "../cleanMount.js";
+    import { unmount } from 'svelte'
+    import { cleanMount } from "../cleanMount.js";
+    import { getOverlayTarget } from "../../lib/utils.js";
 
     let {panelTitle, panelContent, label, svgIcon} = $props()
     let modalInstance;
@@ -15,7 +16,7 @@
     function openModal() {
 
         modalInstance = cleanMount(Modal, {
-            target: document.getElementById('dropdown-panels-box'),
+            target: getOverlayTarget(),
             props: {
                 title: panelTitle,
                 content: panelContent,