@csedl/hotwire-svelte-helpers 4.6.0 → 4.7.0

package/package.json

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

@@ -4,7 +4,11 @@
     import { cleanMount } from "../cleanMount.js";
     import { getOverlayTarget } from "../../lib/utils.js";
 
-    let { panelContent, panelTitle, panelClass, label, svgIcon, panelPlacement } = $props();
+    let {
+        panel,
+        label,
+        svgIcon
+    } = $props();
 
     let buttonElement, panelInstance;
 
@@ -24,12 +28,8 @@
             DropdownPanel, {
                 target: getOverlayTarget(),
                 props: {
-                    title: panelTitle,
+                    ...panel,
                     closeFunction: closeDropdown,
-                    buttonElement: buttonElement,
-                    panelClass: panelClass,
-                    content: panelContent,
-                    placement: panelPlacement
                 }
             }
         );

package/src/svelte/templates/Modal.svelte

@@ -6,9 +6,9 @@
         panelClass,
         closeFunction,
         content,
-        contentX,
         actionButtonLabel,
         actionButtonFunction,
+        actionButtonClass,
     } = $props()
     let panelElement
 
@@ -63,17 +63,17 @@
             </div>
         {/if}
 
-        <div class="footer">
-            {#if actionButtonLabel}
+        {#if actionButtonLabel}
+            <div class="footer">
                 <span
                         role="button"
                         tabindex="0"
                         onkeydown={(e) => {}}
-                        class="action button"
+                        class={actionButtonClass || "action button"}
                         onclick={actionButtonFunction}>
                     {actionButtonLabel}
                 </span>
-            {/if}
-        </div>
+            </div>
+        {/if}
     </div>
 </div>

package/src/svelte/templates/ModalButton.svelte

@@ -4,7 +4,12 @@
     import { cleanMount } from "../cleanMount.js";
     import { getOverlayTarget } from "../../lib/utils.js";
 
-    let {panelTitle, panelContent, label, svgIcon} = $props()
+    let {
+        label,
+        svgIcon,
+        modal,
+        beforeOpen
+    } = $props()
     let modalInstance;
 
     export function closeModal() {
@@ -14,12 +19,12 @@
     };
 
     function openModal() {
+        beforeOpen()
 
         modalInstance = cleanMount(Modal, {
             target: getOverlayTarget(),
             props: {
-                title: panelTitle,
-                content: panelContent,
+                ...modal,
                 closeFunction: closeModal
             }
         });