@csedl/hotwire-svelte-helpers 2.2.3 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "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": {

package/src/svelte/templates/DropdownButton.svelte

@@ -3,7 +3,7 @@
     import { unmount } from 'svelte'
     import { cleanMount } from "../cleanMount.js";
 
-    let { panelContent, panelTitle, panelClass, label, svgIcon } = $props();
+    let { panelContent, panelTitle, panelClass, label, svgIcon, panelPlacement } = $props();
 
     let buttonElement, panelInstance;
 
@@ -15,7 +15,7 @@
         buttonElement.classList.remove('has-open-panel');
     };
 
-    function openEditPanel() {
+    function openPanel() {
 
         if (buttonElement.classList.contains('has-open-panel')) return;
 
@@ -28,13 +28,14 @@
                     buttonElement: buttonElement,
                     panelClass: panelClass,
                     content: panelContent,
+                    placement: panelPlacement
                 }
             }
         );
     }
 </script>
 
-<span class="dropdown-button" onclick={ openEditPanel } bind:this={ buttonElement } role="button" tabindex="0" onkeyup={()=>{}}>
+<span class="dropdown-button" onclick={ openPanel } bind:this={ buttonElement } role="button" tabindex="0" onkeyup={()=>{}}>
     {#if svgIcon}
         {@html svgIcon}
     {/if}

package/src/svelte/templates/DropdownPanel.svelte

@@ -1,6 +1,6 @@
 <script>
-    import {openDropdownPanel, hotwireSvelteConfig} from "@csedl/hotwire-svelte-helpers";
-    import {onMount} from "svelte";
+    import { openDropdownPanel, hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
+    import { onMount } from "svelte";
 
     let {
         title,
@@ -9,10 +9,14 @@
         closeButtonSvg,
         buttonElement,
         content,
+        placement,
     } = $props()
     let panelElement
 
     onMount(() => {
+        if (placement) {
+            panelElement.setAttribute('data-placement', placement)
+        }
         openDropdownPanel(buttonElement, panelElement);
     });