@csedl/hotwire-svelte-helpers 4.2.1 → 4.4.0

package/README.md

@@ -45,7 +45,7 @@ to your application.js. This will check for detached instances and unmount them.
 ## Dropdown Example
 
 ```html
-<div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
+<div data-controller="hotwire-svelte-helpers-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
     Button
 </div>
 <div id="dropdown-panel-3h5k7l4" class="dropdownSvelte-panel-example-class" style="display: none;">
@@ -149,7 +149,7 @@ What these helpers mainly do is to find all the dropdowns by the `has-open-panel
 ## Tooltip
 
 ```html
-<span data-controller="csedl-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
+<span data-controller="hotwire-svelte-helpers-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
     Text-with-tooltip
 </span>
 <div id="tooltip-123" class="tooltip-panel" style="display: none;">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "4.2.1",
+  "version": "4.4.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/lib/floating-ui-functions.js

@@ -21,7 +21,7 @@ export function getAllOpenPanels(scopeElement) {
     const elements = []
 
     for (const button of buttons) {
-        if (button.getAttribute('data-controller') === 'csedl-dropdown') {
+        if (button.getAttribute('data-controller') === 'hotwire-svelte-helpers-dropdown') {
             const getOrSetPanelId = button.getAttribute('data-panel-id')
             const panel = document.getElementById(getOrSetPanelId)
             elements.push([button, panel])

package/src/lib/initializers.js

@@ -2,6 +2,7 @@ import {debugLog} from "./utils.js";
 import {Application} from "@hotwired/stimulus"
 import dc from '../stimulus/dropdown-controller'
 import ttc from '../stimulus/tooltip-controller'
+import mod from '../stimulus/modal-controller'
 import ppc from '../stimulus/move-panels-controller'
 
 
@@ -30,9 +31,10 @@ const HotwireSvelteHelpers = {
 
         const Stimulus = Application.start()
 
-        Stimulus.register('csedl-dropdown', dc)
-        Stimulus.register('csedl-tooltip', ttc)
-        Stimulus.register('csedl-move-panels', ppc)
+        Stimulus.register('hotwire-svelte-helpers-modal', mod)
+        Stimulus.register('hotwire-svelte-helpers-dropdown', dc)
+        Stimulus.register('hotwire-svelte-helpers-tooltip', ttc)
+        Stimulus.register('hotwire-svelte-helpers-move-panels', ppc)
 
         debugLog('Overlays active, driven by Stimulus')
 

package/src/lib/utils.js

@@ -11,11 +11,13 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 
     // link button and panel, initialize
     panelElement.id = getOrSetPanelId(buttonElement);
-    initializeDropdown(buttonElement)
-    debugLog(`opening panel ${panelElement.id.split('-').pop()}`)
-    panelElement.style.display = 'block';
+    initializeDropdown(buttonElement, options)
+    debugLog(`opening panel ${panelElement.id.split('-').pop()}`, options)
+    panelElement.style.display = (options.isModal ? 'flex' : 'block');
 
-    positionPanel(buttonElement, panelElement);
+    if (!options.isModal) {
+        positionPanel(buttonElement, panelElement);
+    }
 
     // Set focus to input element
     if (panelElement.hasAttribute('data-set-focus')) {
@@ -49,10 +51,10 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
                 const buttonElement = document.querySelector(`[data-panel-id="${panelElement.id}"]`);
                 const ctrl = buttonElement.getAttribute('data-controller');
 
-                if (ctrl === 'csedl-dropdown' ) {
+                if (ctrl === 'hotwire-svelte-helpers-dropdown') {
                     const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
-                } else if (ctrl === 'csedl-tooltip') {
+                } else if (ctrl === 'hotwire-svelte-helpers-tooltip') {
                     const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
                 } else {
@@ -152,7 +154,7 @@ export function closeOnOutsideClick(clickedElement) {
 
 // Add panel functionality, including close event listeners
 
-export function initializeDropdown(button) {
+export function initializeDropdown(button, options = {}) {
 
     // find panel
     const panel_id = button.getAttribute('data-panel-id');
@@ -187,6 +189,12 @@ export function initializeDropdown(button) {
         debugLog('initializeDropdown: panel already initialized:', panel.id.split('-').pop())
     }
 
+    // return if isModal
+
+    if (options.isModal) {
+        return
+    }
+
     // initialize the button
     if (!button.hasAttribute('data-hsh-initialized')) {
         button.setAttribute('data-hsh-initialized', 'true');

package/src/stimulus/modal-controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+import { openDropdownPanel, closePanel, findPanelOrThrow } from "../lib/utils.js";
+import { debugLog } from "../lib/utils.js";
+
+export default class extends Controller {
+
+    connect() {
+
+        this.element.addEventListener('click', (e) => this.toggle(e))
+
+    }
+
+
+    toggle(e) {
+        if (this.element.getAttribute('data-prevent-default')) {
+            e.preventDefault()
+        }
+        e.stopPropagation()
+        debugLog('toggle panel', e)
+
+        const panel = findPanelOrThrow(this.element)
+        if (panel.style.display === 'block') {
+            closePanel(this.element)
+        } else {
+            openDropdownPanel(this.element, panel, {isModal: true})
+        }
+    }
+
+
+
+}
+
+
+

package/src/svelte/templates/FormInput.svelte

@@ -9,7 +9,7 @@
         autocomplete = 'on'
     } = $props();
 
-    let model = $derived(context._schema.self.modelKey)
+    let model = $derived(context._schema.self.paramKey)
     let columnSchema = $derived(context._schema[columnName])
     let value = $derived(context[columnName])
     let inputType = $derived.by(() => {
@@ -67,7 +67,8 @@
                     id="{model}_{columnName}"
                     name="{model}[{columnSchema.key}]"
                     value="{value}"
-                    class="input-field"/>
+                    class="input-field"
+            ></textarea>
         {:else}
             <input
                     id="{model}_{columnName}"