@csedl/hotwire-svelte-helpers 2.1.0 → 2.2.0

package/README.md

@@ -12,12 +12,21 @@ 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`, at least with:
+
+```javascript
+export default {
+}
+```
+
+The package-internal default configs, which can be overwritten hereby, are:
 
 ```javascript
 export default {
@@ -31,23 +40,24 @@ 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,
+}
 ```
 
-But, at least with content: 
+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')
 ```
 
-The reason for this is that we need to have ssr safe configs.
-
-## Example
+## Example App
 
 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">
     Button

package/index.js

@@ -1,8 +1,9 @@
 
 import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount.js';
-import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, hotwireSvelteConfig } from './src/lib/utils.js'
+import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, hotwireSvelteConfig, getCsrfToken } from './src/lib/utils.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.0",
+  "version": "2.2.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": {
     "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/utils.js

@@ -278,17 +278,17 @@ export function hotwireSvelteConfig(key) {
         closeButtonSvg: '',
     }
 
-    const validations = {
-        closeButtonSelector: 'string',
-        dropdownContentSelector: 'string',
-        tooltipContentSelector: 'string',
-        addArrow: 'boolean',
-        persistTooltipOnClick: 'boolean',
-        closeButtonSvg: 'string',
+        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 • ")}`)
     }
-    validateOptions(customConfigs, validations)
 
-    return customConfigs[key] || defaultConfig[key] || null
+    return configs[key] || null
+}
+
+export function getCsrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
 }
 
 function generateRandomHex(n) {

package/src/svelte/templates/DropdownButton.svelte

@@ -0,0 +1,48 @@
+<script>
+    import {hotwireSvelteConfig} from "../../lib/utils";
+    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,6 +1,5 @@
 <script>
-    import {openDropdownPanel} from "@csedl/hotwire-svelte-helpers";
-
+    import {openDropdownPanel, hotwireSvelteConfig} from "@csedl/hotwire-svelte-helpers";
     import {onMount} from "svelte";
 
     let {
@@ -23,21 +22,40 @@
         }, 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}>
 
 
     <div class="header">
-            <span class="title">
-                {title || 'missing title'}
-            </span>
-        <button class="close-btn"
-                onclick={closeFunction}>{@html window.HotwireSvelteHelpers.overlays.closeButtonSvg}</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,89 @@
+<script>
+
+    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="grid-x input-wrapper string {model}_{columnName} {inputType} {fieldErrorsClass}">
+    <div class="small-12 cell">
+        <label class="strong optional" for="{model}_{columnName}">{label()}</label>
+    </div>
+    <div class="small-12 cell">
+
+        {#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

@@ -1,16 +1,12 @@
 <script>
-    import {openDropdownPanel} from "@csedl/hotwire-svelte-helpers";
+    import {hotwireSvelteConfig} from "@csedl/hotwire-svelte-helpers";
     import {onMount} from "svelte";
 
     let {
         title,
         panelClass,
-        SvelteComponent,
-        svelteComponentProps,
         closeFunction,
-        closeButtonSvg,
         content,
-        text,
         actionButtonLabel,
         actionButtonFunction,
     } = $props()
@@ -26,6 +22,15 @@
         }, 0)
     }
 
+    function closeSvg() {
+        const path = hotwireSvelteConfig('closeButtonSvg');
+        const svg = (path ? path : '?')
+        return svg;
+    }
+
+    export function setTitle(newTitle) {
+        title = newTitle
+    }
 </script>
 
 <div class="modal-overlay">
@@ -36,25 +41,23 @@
             <span class="title">
                 {title || 'missing title'}
             </span>
-            <button class="close-btn"
-                    onclick={closeFunction}>{@html window.HotwireSvelteHelpers.overlays.closeButtonSvg}</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}
-
-            {#if SvelteComponent}
-                <SvelteComponent {...svelteComponentProps}/>
-            {/if}
+            <div class="content">
+                {#if content}
+                    {@render content()}
+                {:else}
+                    <div style="color: red;">Missing required `content` snippet for dropdown panel.</div>
+                {/if}
+            </div>
 
-            {#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>