@massimo-cassandro/minimo 1.27.1 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/components/sf-macro/sf-macro.js

@@ -19,41 +19,52 @@ export function sf_macro({
   insertAtTop = false
 }={}) {
 
-  document.querySelectorAll(wrapper_selector).forEach(fset => {
+  // Single delegated listener: resolves the nearest wrapper_selector ancestor
+  // of the click target at click time, instead of binding one listener per
+  // wrapper found at init time. This is required for wrapper_selector to be
+  // shared by nested wrapper instances (the nearest one always wins, with no
+  // propagation to outer ones) and to work on wrappers created dynamically
+  // after this call (e.g. a nested wrapper inside a newly added row), which
+  // would otherwise never get their own listener.
+  document.addEventListener('click', e => {
+    const target = /** @type {HTMLElement} */ (e.target);
+
+    const action_btn = /** @type {HTMLElement | null} */ (
+      target.closest('.sf-macro-riga-add, .sf-macro-close-btn')
+    );
+    if (!action_btn) return;
+
+    const fset = /** @type {HTMLElement | null} */ (target.closest(wrapper_selector));
+    if (!fset) return;
+
     const macro_container = /** @type {HTMLElement | null} */ (fset.querySelector('.sf-macro-container'));
     if (!macro_container) return;
-    const macro_template = macro_container.dataset.template ?? '';
 
-    // event listeners
-    fset.addEventListener('click', e => {
-      const target = /** @type {HTMLElement} */ (e.target);
+    if(action_btn.matches('.sf-macro-riga-add')) {
 
-      if(target.closest('.sf-macro-riga-add')) {
+      const macro_template = macro_container.dataset.template ?? '';
+      const righe_macro = macro_container.querySelectorAll(row_selector).length;
 
-        const righe_macro = macro_container.querySelectorAll(row_selector).length;
+      macro_container.insertAdjacentHTML(insertAtTop? 'afterbegin' : 'beforeend',
+        macro_template.replace(/__indice\d?__/g, String(righe_macro + 1))
+      );
 
-        macro_container.insertAdjacentHTML(insertAtTop? 'afterbegin' : 'beforeend',
-          macro_template.replace(/__indice\d?__/g, String(righe_macro + 1))
+      if(add_callback && typeof add_callback === 'function') {
+        add_callback(
+          insertAtTop
+            ? macro_container.querySelector(`${row_selector}:first-child`)
+            : macro_container.querySelector(`${row_selector}:last-child`),
+          action_btn
         );
+      }
 
-        if(add_callback && typeof add_callback === 'function') {
-          add_callback(
-            insertAtTop
-              ? macro_container.querySelector('.sf-macro-riga:first-child')
-              : macro_container.querySelector('.sf-macro-riga:last-child'),
-            target.closest('.sf-macro-riga-add')
-          );
-        }
-
-
-      } else if(target.closest('.sf-macro-close-btn')) {
-        target.closest(row_selector)?.remove();
+    } else {
+      target.closest(row_selector)?.remove();
 
-        if(del_callback && typeof del_callback === 'function') {
-          del_callback();
-        }
+      if(del_callback && typeof del_callback === 'function') {
+        del_callback();
       }
+    }
 
-    }, false);
-  });
+  }, false);
 }