@csedl/hotwire-svelte-helpers 2.2.2 → 2.3.0

package/README.md

@@ -1,7 +1,5 @@
 # Hotwire Svelte Helpers
 
-is the successor of the `@csedl/stimulus-dropdown` package
-
 Dropdown with stimulus, based on floating-UI.
 
 **Links:**
@@ -20,9 +18,12 @@ HotwireSvelteHelpers.initializeOverlays()
 This package has a Server-Side Rendering (SSR) safe configuration, which means:
 
 You must add the file `<vite-sourcee-code-dir>/config/hotwire-svelte-helpers.js`.
-The package inside does a fixed `import customConfigs from '/config/hotwire-svelte-helpers.js'`.
+The package inside does a fixed `import customConfigs from '@/config/hotwire-svelte-helpers.js'`.
 By this, it must find that file.
 
+The alias `@` is by default a alias set by vite_rails, pointing to `sourceCodeDir`.
+For this package it is required not to change override this.
+
 Minimal content of this file:
 
 ```javascript

package/package.json

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

@@ -1,4 +1,4 @@
-import customConfigs from '/config/hotwire-svelte-helpers.js'
+import customConfigs from '@/config/hotwire-svelte-helpers.js'
 
 export function hotwireSvelteConfig(key) {
 

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);
     });