@csedl/hotwire-svelte-helpers 4.5.0 → 4.7.0

package/package.json

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

package/src/svelte/templates/DropdownButton.svelte

@@ -4,7 +4,11 @@
     import { cleanMount } from "../cleanMount.js";
     import { getOverlayTarget } from "../../lib/utils.js";
 
-    let { panelContent, panelTitle, panelClass, label, svgIcon, panelPlacement } = $props();
+    let {
+        panel,
+        label,
+        svgIcon
+    } = $props();
 
     let buttonElement, panelInstance;
 
@@ -24,12 +28,8 @@
             DropdownPanel, {
                 target: getOverlayTarget(),
                 props: {
-                    title: panelTitle,
+                    ...panel,
                     closeFunction: closeDropdown,
-                    buttonElement: buttonElement,
-                    panelClass: panelClass,
-                    content: panelContent,
-                    placement: panelPlacement
                 }
             }
         );

package/src/svelte/templates/FormInput.svelte

@@ -6,11 +6,25 @@
         errors,
         onChangeFunction,
         type,
-        autocomplete = 'on'
+        autocomplete = 'on',
+        collection,
+        includeBlank = false,
     } = $props();
 
     let model = $derived(context._schema.self.paramKey)
-    let columnSchema = $derived(context._schema[columnName])
+    let columnSchema = $derived.by(() => {
+        const cnt = context._schema[columnName]
+        if (!cnt) {
+            const keys = Object.keys(context._schema).sort()
+            if (keys.length > 0) {
+                throw new Error(`Column ${columnName} not found in schema, available keys in _schema are:\n • ${keys.join('\n • ')}`)
+            } else {
+                throw new Error(`Column ${columnName} not found in schema, _schema is empty!`)
+            }
+
+        }
+        return cnt
+    })
     let value = $derived(context[columnName])
     let inputType = $derived.by(() => {
         const t = {
@@ -55,11 +69,23 @@
             <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>
+                    <option value="{key}" selected={key == value}>{label}</option>
+                {/each}
+            </select>
+        {:else if collection}
+            <select
+                    id="{model}_{columnName}"
+                    name="{model}[{columnSchema.key}]"
+                    onchange="{onChangeFunction}"
+                    class="input-field">
+                {#if includeBlank}
+                    <option></option>
+                {/if}
+                {#each Object.entries(collection) as [key, label]}
+                    <option value="{key}" selected={key == value}>{label}</option>
                 {/each}
             </select>
         {:else if inputType === 'textarea'}

package/src/svelte/templates/Modal.svelte

@@ -6,9 +6,9 @@
         panelClass,
         closeFunction,
         content,
-        contentX,
         actionButtonLabel,
         actionButtonFunction,
+        actionButtonClass,
     } = $props()
     let panelElement
 
@@ -63,17 +63,17 @@
             </div>
         {/if}
 
-        <div class="footer">
-            {#if actionButtonLabel}
+        {#if actionButtonLabel}
+            <div class="footer">
                 <span
                         role="button"
                         tabindex="0"
                         onkeydown={(e) => {}}
-                        class="action button"
+                        class={actionButtonClass || "action button"}
                         onclick={actionButtonFunction}>
                     {actionButtonLabel}
                 </span>
-            {/if}
-        </div>
+            </div>
+        {/if}
     </div>
 </div>

package/src/svelte/templates/ModalButton.svelte

@@ -4,7 +4,12 @@
     import { cleanMount } from "../cleanMount.js";
     import { getOverlayTarget } from "../../lib/utils.js";
 
-    let {panelTitle, panelContent, label, svgIcon} = $props()
+    let {
+        label,
+        svgIcon,
+        modal,
+        beforeOpen
+    } = $props()
     let modalInstance;
 
     export function closeModal() {
@@ -14,12 +19,12 @@
     };
 
     function openModal() {
+        beforeOpen()
 
         modalInstance = cleanMount(Modal, {
             target: getOverlayTarget(),
             props: {
-                title: panelTitle,
-                content: panelContent,
+                ...modal,
                 closeFunction: closeModal
             }
         });