@massimo-cassandro/minimo 1.27.1 → 1.27.3

package/package.json

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

package/src/components/autocomplete/autocomplete-engine.js

@@ -284,8 +284,7 @@ export default function (params = {}) {
         }
       }); // end autoComplete
 
-      // TODO[epic=autocomplete]
-      // improve and make the callback invocation more efficient
+      // TODO improve and make the callback invocation more efficient
 
       // reset hidden field when the autocomplete value is cleared or mismatched
       const check_ac = () => {

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

@@ -1,11 +1,20 @@
 /*! minimo - Symfony Macro Manager */
 import './sf-macro.css';
 
+// TODO[epic=v2] in una v. 2 di minimo, rinominare wrapper_selector e row_selector in
+// wrapperClass e rowClass (NB: classi, non selettori, per uniformità con closeBtnClass/addBtnClass/containerClass
+// aggiunti sotto) e rendere tutti i parametri camelCase.
+// TODO[epic=v2] valutare se rendere opzionale, tramite parametro, l'importazione statica
+// di sf-macro.css qui sopra (questione lasciata in sospeso).
+
 /**
  * Initialises Symfony macro collection fields (repeatable fieldsets).
  * @param {Object} [options={}]
  * @param {string} [options.wrapper_selector='.sf-macro-wrapper'] - Selector for the outer wrapper element.
  * @param {string} [options.row_selector='.sf-macro-riga'] - Selector for each repeatable row.
+ * @param {string} [options.closeBtnClass='sf-macro-close-btn'] - Class name of the row-remove button.
+ * @param {string} [options.addBtnClass='sf-macro-riga-add'] - Class name of the row-add button.
+ * @param {string} [options.containerClass='sf-macro-container'] - Class name of the rows container.
  * @param {((newRow: Element | null, addBtn: Element | null) => void) | null} [options.add_callback=null] - Called after a row is added; receives the new row and the add button.
  * @param {(() => void) | null} [options.del_callback=null] - Called after a row is removed.
  * @param {boolean} [options.insertAtTop=false] - When true, new rows are inserted at the top.
@@ -14,46 +23,63 @@ import './sf-macro.css';
 export function sf_macro({
   wrapper_selector = '.sf-macro-wrapper',
   row_selector = '.sf-macro-riga',
+  // Change closeBtnClass/addBtnClass/containerClass only if you don't want to use
+  // the default sf-macro.css: unused default classes are not stripped by this
+  // component, that cleanup is delegated to PurgeCSS (or equivalent) downstream.
+  closeBtnClass = 'sf-macro-close-btn',
+  addBtnClass = 'sf-macro-riga-add',
+  containerClass = 'sf-macro-container',
   add_callback = null,
   del_callback = null,
   insertAtTop = false
 }={}) {
 
-  document.querySelectorAll(wrapper_selector).forEach(fset => {
-    const macro_container = /** @type {HTMLElement | null} */ (fset.querySelector('.sf-macro-container'));
-    if (!macro_container) return;
-    const macro_template = macro_container.dataset.template ?? '';
+  // 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);
 
-    // event listeners
-    fset.addEventListener('click', e => {
-      const target = /** @type {HTMLElement} */ (e.target);
+    const action_btn = /** @type {HTMLElement | null} */ (
+      target.closest(`.${addBtnClass}, .${closeBtnClass}`)
+    );
+    if (!action_btn) return;
 
-      if(target.closest('.sf-macro-riga-add')) {
+    const fset = /** @type {HTMLElement | null} */ (target.closest(wrapper_selector));
+    if (!fset) return;
 
-        const righe_macro = macro_container.querySelectorAll(row_selector).length;
+    const macro_container = /** @type {HTMLElement | null} */ (fset.querySelector(`.${containerClass}`));
+    if (!macro_container) return;
 
-        macro_container.insertAdjacentHTML(insertAtTop? 'afterbegin' : 'beforeend',
-          macro_template.replace(/__indice\d?__/g, String(righe_macro + 1))
-        );
+    if(action_btn.matches(`.${addBtnClass}`)) {
 
-        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')
-          );
-        }
+      const macro_template = macro_container.dataset.template ?? '';
+      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))
+      );
+
+      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
+        );
+      }
 
-      } 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);
 }