@csedl/hotwire-svelte-helpers 3.0.0 → 4.0.1

package/README.md

@@ -44,7 +44,7 @@ to your application.js. This will check for detached instances and unmount them.
 <div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
     Button
 </div>
-<div id="dropdown-panel-3h5k7l4" class="hide dropdownSvelte-panel-example-class">
+<div id="dropdown-panel-3h5k7l4" class="dropdownSvelte-panel-example-class" style="display: none;">
     ... any content
 </div>
 ```
@@ -52,39 +52,32 @@ to your application.js. This will check for detached instances and unmount them.
 ## Svelte Dropdowns
 
 There are some default components included, which can be used to build Svelte Dropdowns.
-The
+Check the online example app for more details.
 
 ## What it does
 
-- When the button is clicked, it toggles the `hide` class on the panel and places the panel using floating-ui.
+- When the button is clicked, it toggles the `display` style on the panel and places the panel using floating-ui.
 - When the panel is open, the `has-open-panel` class is added to the button, otherwise it is removed.
 - Adds functionality to close all panels when clicking outside a panel.
-- When a `data-src` attribute is given to the panel, on opening the panel, it fires a xhr request and replaces the configured  content-tags (see: content-selectors on configs) by the response.
+- When a `data-src` attribute is given to the panel, on opening the panel, it fires a xhr request and replaces the content (fetched by selector: `.content` within the panel-element) by the response.
 - This all works with stacked panels too (panel in panel).
 
 ## Close on click outside
 
 When a dropdownSvelte is open, it closes when clicking outside a panel.
 
-This behaviour can be stopped on:
+This behaviour can be stopped by:
 
 - The clicked element or its parent elements has the `data-dropdownSvelte-persist` (not: `data-dropdownSvelte-persist="false"`) attribute.
 - the event has the attribute `event.detail.dataDropdownPersist` set to true.
 
-## Flexibility
+## Notes
 
-The functions of this package are intended to give flexibility on various ways building a dropdownSvelte.
-
-**Important:** When creating or initializing the dropdownSvelte, 
+**Important:** When creating or initializing the dropdown, 
 always call the initialize function before attaching a listener to the panel's close event. 
 The initialize function adds a `close` event listener to the panel that executes the `onPanelClose` function. 
 If your custom close function destroys the panel, this has to be done after the `onPanelClose` is fired by the `close` event.
 
-## Requirements
-
-- The class `dropdownSvelte-panel-example-class` must be set to `position: absolute;`.
-- The class `hide` must be set to `display: none;`.
-
 ## Options
 
 - If there is an element with ID `arrow` inside the dropdownSvelte panel, it is treated as described on [floating-ui](https://floating-ui.com/docs/arrow).
@@ -147,7 +140,7 @@ What these helpers mainly do is to find all the dropdowns by the `has-open-panel
 <span data-controller="csedl-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
     Text-with-tooltip
 </span>
-<div id="tooltip-123" class="hide tooltip-panel">
+<div id="tooltip-123" class="tooltip-panel" style="display: none;">
     <div id="arrow"></div>
     ... any content
 </div>
@@ -159,11 +152,7 @@ It adds the class `tooltip-is-visible` to the tooltip label while the tooltip is
 
 `data-src` attribute is working similar to dropdownSvelte
 
-## Rails Helpers
-
-There is a corresponding rails gem, on [GitLab](https://gitlab.com/sedl/csedl-stimulus-dropdown)
-
-## Stimulus Usage in stimulus-dropdownSvelte
+## Stimulus Usage
 
 This package uses Stimulus unconventionally to initialize and toggle external dropdownSvelte or tooltip panels 
 (via data-panel-id) rather than managing child elements within the controller’s scope, 

package/package.json

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