@csedl/hotwire-svelte-helpers 2.2.0 → 2.2.2

package/README.md

@@ -6,7 +6,7 @@ Dropdown with stimulus, based on floating-UI.
 
 **Links:**
 - [Online Demo App](https://hotwire-svelte-helpers.sedlmair.ch/)
-- [Ruby Gem: csedl-stimulus-dropdownSvelte](https://gitlab.com/sedl/csedl-stimulus-dropdown)
+- [Ruby Gem: stimulus-overlay-helpers](https://gitlab.com/sedl/stimulus-overlay-helpers)
 - [How we are building a Rails App](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
 
 ## Setup
@@ -19,13 +19,19 @@ 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`, at least with:
+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'`.
+By this, it must find that file.
+
+Minimal content of this file:
 
 ```javascript
 export default {
 }
 ```
 
+## Configuration
+
 The package-internal default configs, which can be overwritten hereby, are:
 
 ```javascript
@@ -42,9 +48,15 @@ export default {
     // this may mostly be helpful for development, so you may make it environment-dependent
     closeButtonSvg: null,
     // raw import of svg-icon,
+
+    formFieldWrapperClass: 'form-field-wrapper',
+    formFieldLabelWrapperClass: 'form-field-label-wrapper',
+    formFieldInputWrapperClass: 'form-field-input-wrapper',
 }
 ```
 
+The code you can find in this package under `src/lib/configs.js`
+
 You can add as many keys as you like and fetch them from anywhere by:
 
 ```javascript
@@ -52,9 +64,28 @@ import { hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
 hotwireSvelteConfig('closeButtonSelector')
 ```
 
-## Example App
+## cleanMount()
+
+Interaction with (Svelte) components can lead to orphaned instances. 
+This can happen when the [unmount](https://svelte.dev/docs/svelte/imperative-component-api#unmount) event does not happen, for example when the underlaying DOM element disappears which can happen in a Hotwire Environemnt.
+
+For this here is a double security. CleanMount() adds the instance to a global store and then executes mount().
+
+```javascript
+import {cleanMount} from "@csedl/hotwire-svelte-helpers";
+cleanMount(AnySvelteComponent, { target: cleanMountDemoTag, ...});
+```
+
+Next, you must add something like
 
-There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
+```javascript
+import { unmountAllDetached } from '@csedl/hotwire-svelte-helpers'
+document.addEventListener('turbo:render', () => {
+  unmountAllDetached()
+})
+```
+
+to your application.js. This will check for detached instances and unmount them.
 
 ## Dropdown Example
 
@@ -93,11 +124,6 @@ This behaviour can be stopped on:
 
 The functions of this package are intended to give flexibility on various ways building a dropdownSvelte.
 
-- Stimulus Controller with Rails Helper
-  - Example: [Stimulus controller within this package](https://gitlab.com/sedl/csedl-stimulus-dropdown-js/-/blob/main/src/dropdown-controller.js?ref_type=heads)
-- Stimulus with Svelte component
-  - Example: [Stimulus controller on example app](https://gitlab.com/sedl/stimulusfloatingdropdown/-/blob/main/app/frontend/javascript/svelte-dropdown-controller.js?ref_type=heads)
-
 **Important:** When creating or initializing the dropdownSvelte, 
 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. 

package/index.js

@@ -1,6 +1,7 @@
 
 import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount.js';
-import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, hotwireSvelteConfig, getCsrfToken } from './src/lib/utils.js'
+import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, getCsrfToken } from './src/lib/utils.js'
+import { hotwireSvelteConfig } from './src/lib/config.js'
 
 export {
     cleanMount, unmountAllDetached, hotwireSvelteConfig,

package/package.json

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

@@ -0,0 +1,25 @@
+import customConfigs from '/config/hotwire-svelte-helpers.js'
+
+export function hotwireSvelteConfig(key) {
+
+    const defaultConfig = {
+        closeButtonSelector: '.close-button',
+        dropdownContentSelector: '.content',
+        tooltipContentSelector: '.content',
+        addArrow: true,
+        persistTooltipOnClick: false,
+        closeButtonSvg: '',
+
+        formFieldWrapperClass: 'form-field-wrapper',
+        formFieldLabelWrapperClass: 'form-field-label-wrapper',
+        formFieldInputWrapperClass: 'form-field-input-wrapper',
+    }
+
+    const configs = {...defaultConfig, ...customConfigs}
+
+    if (!Object.keys(configs).includes(key)) {
+        throw new Error(`[@csedl/hotwire-svelte-helpers] unknown config key: ${key}, actual keys are:\n • ${Object.keys(configs).join("\n • ")}`)
+    }
+
+    return configs[key] || null
+}

package/src/lib/utils.js

@@ -1,6 +1,5 @@
 import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
-import customConfigs from '@frontend/config/hotwire-svelte-helpers.js';
-import {validateOptions} from "./type-validators";
+import {hotwireSvelteConfig} from "./config.js";
 
 // Fetch content from server based on panel's data-src attribute and update content
 export function openDropdownPanel(buttonElement, panelElement, options = {}) {
@@ -9,9 +8,6 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
         return
     }
 
-    //validateOptions(options, {clickedElement: 'object'})
-    //const clickedElement = options.clickedElement || buttonElement;
-
 
     // link button and panel, initialize
     panelElement.id = getOrSetPanelId(buttonElement);
@@ -267,26 +263,6 @@ export function getOrSetPanelId(buttonTag) {
     }
 }
 
-export function hotwireSvelteConfig(key) {
-
-    const defaultConfig = {
-        closeButtonSelector: '.close-button',
-        dropdownContentSelector: '.content',
-        tooltipContentSelector: '.content',
-        addArrow: true,
-        persistTooltipOnClick: false,
-        closeButtonSvg: '',
-    }
-
-        const configs = {...defaultConfig, ...customConfigs}
-
-    if (!Object.keys(configs).includes(key)) {
-        throw new Error(`[@csedl/hotwire-svelte-helpers] unknown config key: ${key}, actual keys are:\n • ${Object.keys(configs).join("\n • ")}`)
-    }
-
-    return configs[key] || null
-}
-
 export function getCsrfToken() {
     return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
 }

package/src/stimulus/tooltip-controller.js

@@ -1,6 +1,7 @@
 import {Controller} from "@hotwired/stimulus"
 import {positionPanelByButton} from "../lib/floating-ui-functions.js";
-import {hotwireSvelteConfig, debugLog, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
+import { debugLog, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
+import {hotwireSvelteConfig} from "../lib/config.js";
 
 export default class extends Controller {
 

package/src/svelte/templates/DropdownButton.svelte

@@ -1,5 +1,4 @@
 <script>
-    import {hotwireSvelteConfig} from "../../lib/utils";
     import DropdownPanel from "./DropdownPanel.svelte";
     import { unmount } from 'svelte'
     import { cleanMount } from "../cleanMount.js";

package/src/svelte/templates/FormInput.svelte

@@ -1,5 +1,7 @@
 <script>
 
+    import { hotwireSvelteConfig } from "../../lib/config.js";
+
     let {
         context,
         columnName,
@@ -45,11 +47,11 @@
 </script>
 
 
-<div class="grid-x input-wrapper string {model}_{columnName} {inputType} {fieldErrorsClass}">
-    <div class="small-12 cell">
-        <label class="strong optional" for="{model}_{columnName}">{label()}</label>
+<div class="{hotwireSvelteConfig('formFieldWrapperClass')} {model}_{columnName} {inputType} {fieldErrorsClass}">
+    <div class={hotwireSvelteConfig('formFieldLabelWrapperClass')}>
+        <label for="{model}_{columnName}">{label()}</label>
     </div>
-    <div class="small-12 cell">
+    <div class={hotwireSvelteConfig('formFieldInputWrapperClass')}>
 
         {#if columnSchema.enum}
             <select