@csedl/hotwire-svelte-helpers 2.1.1 → 2.2.1

package/README.md

@@ -12,12 +12,27 @@ Dropdown with stimulus, based on floating-UI.
 ## Setup
 
 ```javascript
-import {HotwireSvelteHelpers} from "@csedl/hotwire-svelte-helpers/init"
+import { HotwireSvelteHelpers } from "@csedl/hotwire-svelte-helpers/init"
 HotwireSvelteHelpers.debug = true
 HotwireSvelteHelpers.initializeOverlays()
 ```
 
-You MUST add the file `<vite-sourcee-code-dir>/config/hotwire-svelte-helpers.js`, with content like:
+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.
+
+Minimal content of this file:
+
+```javascript
+export default {
+}
+```
+
+## Configuration
+
+The package-internal default configs, which can be overwritten hereby, are:
 
 ```javascript
 export default {
@@ -31,22 +46,48 @@ export default {
     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: '',
-})
+    closeButtonSvg: null,
+    // raw import of svg-icon,
+
+    formFieldWrapperClass: 'form-field-wrapper',
+    formFieldLabelWrapperClass: 'form-field-label-wrapper',
+    formFieldInputWrapperClass: 'form-field-input-wrapper',
+}
 ```
 
-But, at least with content: 
+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
-export default {
-}
+import { hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
+hotwireSvelteConfig('closeButtonSelector')
+```
+
+## 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, ...});
 ```
 
-The reason for this is that we need to have ssr safe configs.
+Next, you must add something like
+
+```javascript
+import { unmountAllDetached } from '@csedl/hotwire-svelte-helpers'
+document.addEventListener('turbo:render', () => {
+  unmountAllDetached()
+})
+```
 
-## Example
+to your application.js. This will check for detached instances and unmount them.
 
-There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
+## Dropdown Example
 
 ```html
 <div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">

package/index.js

@@ -1,8 +1,10 @@
 
 import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount.js';
-import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, hotwireSvelteConfig } 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,
-    initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog
+    initializeDropdown, openDropdownPanel, getOrSetPanelId,
+    debugLog, getCsrfToken
 }

package/package.json

@@ -1,21 +1,43 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "2.1.1",
+  "version": "2.2.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": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "exports": {
-    ".": "./index.js",
-    "./init": "./src/lib/initializers.js",
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./init": {
+      "import": "./src/lib/initializers.js",
+      "default": "./src/lib/initializers.js"
+    },
+    "./DropdownButton.svelte": {
+      "svelte": "./src/svelte/templates/DropdownButton.svelte",
+      "default": "./src/svelte/templates/DropdownButton.svelte"
+    },
     "./DropdownPanel.svelte": {
       "svelte": "./src/svelte/templates/DropdownPanel.svelte",
       "default": "./src/svelte/templates/DropdownPanel.svelte"
     },
+    "./ModalButton.svelte": {
+      "svelte": "./src/svelte/templates/ModalButton.svelte",
+      "default": "./src/svelte/templates/ModalButton.svelte"
+    },
     "./Modal.svelte": {
       "svelte": "./src/svelte/templates/Modal.svelte",
       "default": "./src/svelte/templates/Modal.svelte"
+    },
+    "./FormInput.svelte": {
+      "svelte": "./src/svelte/templates/FormInput.svelte",
+      "default": "./src/svelte/templates/FormInput.svelte"
+    },
+    "./FormSubmitButton.svelte": {
+      "svelte": "./src/svelte/templates/FormSubmitButton.svelte",
+      "default": "./src/svelte/templates/FormSubmitButton.svelte"
     }
   },
   "repository": {

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,28 +263,8 @@ export function getOrSetPanelId(buttonTag) {
     }
 }
 
-export function hotwireSvelteConfig(key) {
-
-    const defaultConfig = {
-        closeButtonSelector: '.close-button',
-        dropdownContentSelector: '.content',
-        tooltipContentSelector: '.content',
-        addArrow: true,
-        persistTooltipOnClick: false,
-        closeButtonSvg: '',
-    }
-
-    const validations = {
-        closeButtonSelector: 'string',
-        dropdownContentSelector: 'string',
-        tooltipContentSelector: 'string',
-        addArrow: 'boolean',
-        persistTooltipOnClick: 'boolean',
-        closeButtonSvg: 'string',
-    }
-    validateOptions(customConfigs, validations)
-
-    return customConfigs[key] || defaultConfig[key] || null
+export function getCsrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
 }
 
 function generateRandomHex(n) {

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

@@ -0,0 +1,47 @@
+<script>
+    import DropdownPanel from "./DropdownPanel.svelte";
+    import { unmount } from 'svelte'
+    import { cleanMount } from "../cleanMount.js";
+
+    let { panelContent, panelTitle, panelClass, label, svgIcon } = $props();
+
+    let buttonElement, panelInstance;
+
+
+    export function closeDropdown() {
+        if (panelInstance) {
+            unmount(panelInstance);
+        }
+        buttonElement.classList.remove('has-open-panel');
+    };
+
+    function openEditPanel() {
+
+        if (buttonElement.classList.contains('has-open-panel')) return;
+
+        panelInstance = cleanMount(
+            DropdownPanel, {
+                target: document.getElementById('dropdown-panels-box'),
+                props: {
+                    title: panelTitle,
+                    closeFunction: closeDropdown,
+                    buttonElement: buttonElement,
+                    panelClass: panelClass,
+                    content: panelContent,
+                }
+            }
+        );
+    }
+</script>
+
+<span class="dropdown-button" onclick={ openEditPanel } bind:this={ buttonElement } role="button" tabindex="0" onkeyup={()=>{}}>
+    {#if svgIcon}
+        {@html svgIcon}
+    {/if}
+    {#if label}
+        {label}
+    {/if}
+    {#if !svgIcon && !label}
+        ??
+    {/if}
+</span>

package/src/svelte/templates/DropdownPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { openDropdownPanel, hotwireSvelteConfig } from "@csedl/hotwire-svelte-helpers";
+    import {openDropdownPanel, hotwireSvelteConfig} from "@csedl/hotwire-svelte-helpers";
     import {onMount} from "svelte";
 
     let {
@@ -23,9 +23,15 @@
     }
 
     function closeSvg() {
-        const path = hotwireSvelteConfig('closeButtonSvg');
-        const svg = (path ? path : '?')
-        return svg;
+        const value = hotwireSvelteConfig('closeButtonSvg');
+
+        if (!value) return '?';
+
+        if (typeof value === 'function') {
+            return value();
+        }
+
+        return String(value);
     }
 
 </script>
@@ -34,15 +40,22 @@
 
 
     <div class="header">
-            <span class="title">
-                {title || 'missing title'}
-            </span>
-        <button class="close-btn"
-                onclick={closeFunction}>{@html closeSvg()}</button>
+        <span class="title">
+            {title || 'missing title'}
+        </span>
+        <span class="buttons">
+        <button class={ hotwireSvelteConfig('closeButtonSelector').replace('.', '') || 'close-btn' }
+                onclick={closeFunction}>{@html closeSvg()}
+        </button>
+        </span>
     </div>
 
     <div class="content">
-        {@render content()}
+        {#if content}
+            {@render content()}
+        {:else}
+            <div style="color: red;">Missing required `content` snippet for dropdown panel.</div>
+        {/if}
     </div>
 
 </div>

package/src/svelte/templates/FormInput.svelte

@@ -0,0 +1,91 @@
+<script>
+
+    import { hotwireSvelteConfig } from "../../lib/config.js";
+
+    let {
+        context,
+        columnName,
+        errors,
+        onChangeFunction,
+        type,
+        autocomplete = 'on'
+    } = $props();
+
+    let model = $derived(context._schema.self.modelKey)
+    let columnSchema = $derived(context._schema[columnName])
+    let value = $derived(context[columnName])
+    let inputType = $derived.by(() => {
+        const t = {
+            string: 'text',
+            text: 'textarea',
+            integer: 'number',
+            decimal: 'number',
+            boolean: 'checkbox',
+        }[columnSchema.dbType]
+        return (type ? type : t);
+    })
+
+    let fieldErrors = $derived.by(() => {
+        const modelErrors = errors?.[model] ?? {};
+        const fieldErrors = modelErrors?.[columnSchema.key];
+        if (!fieldErrors) return [];
+
+        console.log('fieldErrors', fieldErrors)
+
+        return fieldErrors;
+    })
+
+    let fieldErrorsClass = $derived.by(() => {
+        return fieldErrors.length > 0 ? 'error' : '';
+    })
+
+    function label() {
+        let req = (columnSchema.required) ? '* ' : ''
+        return req + columnSchema.label
+    }
+
+</script>
+
+
+<div class="{hotwireSvelteConfig('formFieldWrapperClass')} {model}_{columnName} {inputType} {fieldErrorsClass}">
+    <div class={hotwireSvelteConfig('formFieldLabelWrapperClass')}>
+        <label for="{model}_{columnName}">{label()}</label>
+    </div>
+    <div class={hotwireSvelteConfig('formFieldInputWrapperClass')}>
+
+        {#if columnSchema.enum}
+            <select
+                    id="{model}_{columnName}"
+                    name="{model}[{columnSchema.key}]"
+                    value="{value}"
+                    onchange="{onChangeFunction}"
+                    class="input-field">
+                {#each Object.entries(columnSchema.enum) as [key, label]}
+                    <option value="{key}">{label}</option>
+                {/each}
+            </select>
+        {:else if inputType === 'textarea'}
+            <textarea
+                    id="{model}_{columnName}"
+                    name="{model}[{columnSchema.key}]"
+                    value="{value}"
+                    class="input-field"/>
+        {:else}
+            <input
+                    id="{model}_{columnName}"
+                    type="{inputType}"
+                    name="{model}[{columnSchema.key}]"
+                    value="{value}"
+                    class="input-field"
+                    autocomplete={autocomplete}
+            >
+        {/if}
+
+
+    </div>
+
+    {#each fieldErrors as error}
+        <small class="error">{error}</small>
+    {/each}
+
+</div>

package/src/svelte/templates/FormSubmitButton.svelte

@@ -0,0 +1,6 @@
+<script>
+    let { context } = $props();
+    let label = $derived(context.id ? context._translations.helpers.submit.update : context._translations.helpers.submit.create);
+</script>
+
+<button class="button" type="submit">{label}</button>

package/src/svelte/templates/Modal.svelte

@@ -5,12 +5,8 @@
     let {
         title,
         panelClass,
-        SvelteComponent,
-        svelteComponentProps,
         closeFunction,
-        closeButtonSvg,
         content,
-        text,
         actionButtonLabel,
         actionButtonFunction,
     } = $props()
@@ -45,25 +41,23 @@
             <span class="title">
                 {title || 'missing title'}
             </span>
-            <button class="close-btn"
-                    onclick={closeFunction}>{@html closeSvg()}</button>
+            <span class="buttons">
+                <button class={ hotwireSvelteConfig('closeButtonSelector').replace('.', '') || 'close-btn' }
+                        onclick={closeFunction}>{@html closeSvg()}
+                </button>
+            </span>
         </div>
 
         <div class="content">
 
-            {#if content}
-                {@render content()}
-            {/if}
+            <div class="content">
+                {#if content}
+                    {@render content()}
+                {:else}
+                    <div style="color: red;">Missing required `content` snippet for dropdown panel.</div>
+                {/if}
+            </div>
 
-            {#if SvelteComponent}
-                <SvelteComponent {...svelteComponentProps}/>
-            {/if}
-
-            {#if text}
-                {#each text as paragraph}
-                    <p>{paragraph}</p>
-                {/each}
-            {/if}
         </div>
         <div class="footer">
             {#if actionButtonLabel}

package/src/svelte/templates/ModalButton.svelte

@@ -0,0 +1,38 @@
+<script>
+    import Modal from './Modal.svelte';
+    import {unmount} from 'svelte'
+    import {cleanMount} from "../cleanMount.js";
+
+    let {panelTitle, panelContent, label, svgIcon} = $props()
+    let modalInstance;
+
+    export function closeModal() {
+        if (modalInstance) {
+            unmount(modalInstance);
+        }
+    };
+
+    function openModal() {
+
+        modalInstance = cleanMount(Modal, {
+            target: document.getElementById('dropdown-panels-box'),
+            props: {
+                title: panelTitle,
+                content: panelContent,
+                closeFunction: closeModal
+            }
+        });
+    }
+</script>
+
+<span role="button" tabindex="0" onkeyup={()=>{}} onclick={openModal} class="modal-button">
+    {#if svgIcon}
+        {@html svgIcon}
+    {/if}
+    {#if label}
+        {label}
+    {/if}
+    {#if !svgIcon && !label}
+        ??
+    {/if}
+</span>