@csedl/hotwire-svelte-helpers 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +14 -21
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # Hotwire Svelte Helpers
2
2
 
3
- Dropdown with stimulus, based on floating-UI.
3
+ Helpers for building overlays — such as dropdowns, tooltips, and modals — with Floating UI, Stimulus, and Svelte in a Hotwire/Turbo environment.
4
+
5
+ Also includes Svelte form helpers designed to work with the `svelte-on-rails` gem.
6
+
7
+ A small toolkit for building more interactive Rails apps with Hotwire and Svelte.
4
8
 
5
9
  **Links:**
6
10
  - [Online Demo App](https://hotwire-svelte-helpers.sedlmair.ch/)
@@ -44,7 +48,7 @@ to your application.js. This will check for detached instances and unmount them.
44
48
  <div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
45
49
  Button
46
50
  </div>
47
- <div id="dropdown-panel-3h5k7l4" class="hide dropdownSvelte-panel-example-class">
51
+ <div id="dropdown-panel-3h5k7l4" class="dropdownSvelte-panel-example-class" style="display: none;">
48
52
  ... any content
49
53
  </div>
50
54
  ```
@@ -52,39 +56,32 @@ to your application.js. This will check for detached instances and unmount them.
52
56
  ## Svelte Dropdowns
53
57
 
54
58
  There are some default components included, which can be used to build Svelte Dropdowns.
55
- The
59
+ Check the online example app for more details.
56
60
 
57
61
  ## What it does
58
62
 
59
- - When the button is clicked, it toggles the `hide` class on the panel and places the panel using floating-ui.
63
+ - When the button is clicked, it toggles the `display` style on the panel and places the panel using floating-ui.
60
64
  - When the panel is open, the `has-open-panel` class is added to the button, otherwise it is removed.
61
65
  - Adds functionality to close all panels when clicking outside a panel.
62
- - 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.
66
+ - 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.
63
67
  - This all works with stacked panels too (panel in panel).
64
68
 
65
69
  ## Close on click outside
66
70
 
67
71
  When a dropdownSvelte is open, it closes when clicking outside a panel.
68
72
 
69
- This behaviour can be stopped on:
73
+ This behaviour can be stopped by:
70
74
 
71
75
  - The clicked element or its parent elements has the `data-dropdownSvelte-persist` (not: `data-dropdownSvelte-persist="false"`) attribute.
72
76
  - the event has the attribute `event.detail.dataDropdownPersist` set to true.
73
77
 
74
- ## Flexibility
78
+ ## Notes
75
79
 
76
- The functions of this package are intended to give flexibility on various ways building a dropdownSvelte.
77
-
78
- **Important:** When creating or initializing the dropdownSvelte,
80
+ **Important:** When creating or initializing the dropdown,
79
81
  always call the initialize function before attaching a listener to the panel's close event.
80
82
  The initialize function adds a `close` event listener to the panel that executes the `onPanelClose` function.
81
83
  If your custom close function destroys the panel, this has to be done after the `onPanelClose` is fired by the `close` event.
82
84
 
83
- ## Requirements
84
-
85
- - The class `dropdownSvelte-panel-example-class` must be set to `position: absolute;`.
86
- - The class `hide` must be set to `display: none;`.
87
-
88
85
  ## Options
89
86
 
90
87
  - 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 +144,7 @@ What these helpers mainly do is to find all the dropdowns by the `has-open-panel
147
144
  <span data-controller="csedl-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
148
145
  Text-with-tooltip
149
146
  </span>
150
- <div id="tooltip-123" class="hide tooltip-panel">
147
+ <div id="tooltip-123" class="tooltip-panel" style="display: none;">
151
148
  <div id="arrow"></div>
152
149
  ... any content
153
150
  </div>
@@ -159,11 +156,7 @@ It adds the class `tooltip-is-visible` to the tooltip label while the tooltip is
159
156
 
160
157
  `data-src` attribute is working similar to dropdownSvelte
161
158
 
162
- ## Rails Helpers
163
-
164
- There is a corresponding rails gem, on [GitLab](https://gitlab.com/sedl/csedl-stimulus-dropdown)
165
-
166
- ## Stimulus Usage in stimulus-dropdownSvelte
159
+ ## Stimulus Usage
167
160
 
168
161
  This package uses Stimulus unconventionally to initialize and toggle external dropdownSvelte or tooltip panels
169
162
  (via data-panel-id) rather than managing child elements within the controller’s scope,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@csedl/hotwire-svelte-helpers",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "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.",
5
5
  "main": "index.js",
6
6
  "scripts": {