@csedl/hotwire-svelte-helpers 2.3.0 → 3.0.0

package/README.md

@@ -15,56 +15,6 @@ HotwireSvelteHelpers.debug = true
 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'`.
-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
-export default {
-}
-```
-
-## Configuration
-
-The package-internal default configs, which can be overwritten hereby, are:
-
-```javascript
-export default {
-    closeButtonSelector: '.close-button',
-    dropdownContentSelector: '.content',
-    // when a data-src attribute is added to the panel, the content-tag is replaced by the result of the xhr-response
-    tooltipContentSelector: '.content',
-    // same as dropdownContentSelector
-    addArrow: true,
-    // add element with id #arrow within the panel, on opening
-    persistTooltipOnClick: false,
-    // clicking on the tooltip-label causes the tooltip-panel to persist open
-    // 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
-import { hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
-hotwireSvelteConfig('closeButtonSelector')
-```
-
 ## cleanMount()
 
 Interaction with (Svelte) components can lead to orphaned instances. 

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "2.3.0",
+  "version": "3.0.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": {
@@ -58,6 +58,7 @@
   "homepage": "https://gitlab.com/sedl/csedl-hotwire-svelte-helpers",
   "dependencies": {
     "@floating-ui/dom": ">=1.5.1",
-    "@hotwired/stimulus": ">=3.2.1"
+    "@hotwired/stimulus": ">=3.2.1",
+    "fast-glob": ">=3.3.3"
   }
 }

package/src/lib/utils.js

@@ -1,5 +1,4 @@
 import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
-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 = {}) {
@@ -15,15 +14,6 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
     debugLog(`opening panel ${panelElement.id.split('-').pop()}`)
     panelElement.style.display = 'block';
 
-    // add arrow
-    if (hotwireSvelteConfig('addArrow')) {
-        if (!panelElement.querySelector(':scope > #arrow')) {
-            const arrowTag = document.createElement('div');
-            arrowTag.id = 'arrow';
-            panelElement.appendChild(arrowTag)
-        }
-    }
-
     positionPanel(buttonElement, panelElement);
 
     // Set focus to input element
@@ -57,18 +47,14 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
             } else {
                 const buttonElement = document.querySelector(`[data-panel-id="${panelElement.id}"]`);
                 const ctrl = buttonElement.getAttribute('data-controller');
-                const contentSelector = hotwireSvelteConfig('dropdownContentSelector');
 
-                if (ctrl === 'csedl-dropdown' && contentSelector) {
-                    debugLog(`dropdown / contentSelector: «${contentSelector}»`);
-                    const wrapper = panelElement.querySelector(contentSelector);
+                if (ctrl === 'csedl-dropdown' ) {
+                    const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
-                } else if (ctrl === 'csedl-tooltip' && contentSelector) {
-                    debugLog(`tooltip / contentSelector: «${contentSelector}»`);
-                    const wrapper = panelElement.querySelector(hotwireSvelteConfig('tooltipContentSelector'));
+                } else if (ctrl === 'csedl-tooltip') {
+                    const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
                 } else {
-                    debugLog(`? / contentSelector: «${contentSelector}»`);
                     panelElement.innerHTML = xhr.response;
                     console.error('fallback to replace whole panel');
                 }
@@ -182,8 +168,7 @@ export function initializeDropdown(button) {
 
         // Add close button functionality
 
-        const selector = hotwireSvelteConfig('closeButtonSelector');
-        const closeButtons = panel.querySelectorAll(selector);
+        const closeButtons = panel.querySelectorAll('.close-button');
         for (const btn of closeButtons) {
             btn.addEventListener('click', () => {
                 const ev = new Event('close');

package/src/stimulus/tooltip-controller.js

@@ -1,7 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
 import {positionPanelByButton} from "../lib/floating-ui-functions.js";
 import { debugLog, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
-import {hotwireSvelteConfig} from "../lib/config.js";
 
 export default class extends Controller {
 
@@ -18,9 +17,7 @@ export default class extends Controller {
         }
         this.element.addEventListener('mouseenter', (e) => this.start_opening(e, panel_id, delay_sec * 1000))
         this.element.addEventListener('mouseleave', (e) => this.close(e, panel_id))
-        if (hotwireSvelteConfig('persistTooltipOnClick')) {
-            this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
-        }
+        this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
     }
 
     start_opening(e, panel_id, delay_ms) {

package/src/svelte/templates/DropdownPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { openDropdownPanel, hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
+    import { openDropdownPanel } from "@csedl/hotwire-svelte-helpers";
     import { onMount } from "svelte";
 
     let {
@@ -26,18 +26,6 @@
         }, 0)
     }
 
-    function closeSvg() {
-        const value = hotwireSvelteConfig('closeButtonSvg');
-
-        if (!value) return '?';
-
-        if (typeof value === 'function') {
-            return value();
-        }
-
-        return String(value);
-    }
-
 </script>
 
 <div class="dropdown-panel {panelClass}" bind:this={panelElement} onclose={closeFunc}>
@@ -48,8 +36,9 @@
             {title || 'missing title'}
         </span>
         <span class="buttons">
-        <button class={ hotwireSvelteConfig('closeButtonSelector').replace('.', '') || 'close-btn' }
-                onclick={closeFunction}>{@html closeSvg()}
+        <button class='close-button'
+                onclick={closeFunction}>
+            X
         </button>
         </span>
     </div>

package/src/svelte/templates/FormInput.svelte

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

package/src/svelte/templates/Modal.svelte

@@ -1,5 +1,4 @@
 <script>
-    import {hotwireSvelteConfig} from "@csedl/hotwire-svelte-helpers";
     import {onMount} from "svelte";
 
     let {
@@ -22,12 +21,6 @@
         }, 0)
     }
 
-    function closeSvg() {
-        const path = hotwireSvelteConfig('closeButtonSvg');
-        const svg = (path ? path : '?')
-        return svg;
-    }
-
     export function setTitle(newTitle) {
         title = newTitle
     }
@@ -42,8 +35,9 @@
                 {title || 'missing title'}
             </span>
             <span class="buttons">
-                <button class={ hotwireSvelteConfig('closeButtonSelector').replace('.', '') || 'close-btn' }
-                        onclick={closeFunction}>{@html closeSvg()}
+                <button class='close-button'
+                        onclick={closeFunction}>
+                    X
                 </button>
             </span>
         </div>

package/src/lib/config.js

@@ -1,25 +0,0 @@
-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
-}