@massimo-cassandro/minimo 1.30.0 → 1.31.1

package/charts/src/bars.js

@@ -1,5 +1,5 @@
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -185,13 +185,15 @@ export async function bars(params) {
     }
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> legenda
     // costruzione delle opzioni per la legenda
     const legenda_params = {

package/charts/src/goal.js

@@ -1,7 +1,7 @@
 // mostra un triangolo rettangolo disposto orizzontalmente che mostra
 // la porzione di raggiungimento di un obiettivo
 
-import { parseContainer, getElementFromContainer } from './helpers/chart-utils.js';
+import { parseContainer, getElementFromContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { createTextEl } from './helpers/create-text-element.js';
 
 export async function goal({
@@ -158,11 +158,12 @@ export async function goal({
     // calcolo width
     [, width] = parseContainer({ container: container, width: width, height: height });
 
-
-    if(!width || !height) {
+    if(!container && (!width || !height)) {
       throw `width e/o height mancanti: width: ${width}, height: ${height} (chartHeight: ${chartHeight})`;
     }
 
+    ({ width, height } = await waitForContainerSize(container, { width, height }, debug));
+
     // larghezza iniziale grafico
     // al netto del padding orizzontale pari a 1/2 cursore, in modo che sia visibile interamente
     // quando posizionato agli estremi (anche in presenta di etichetta laterale, nel caso quest'ultima sia più alta del grafico)

package/charts/src/hbars.js

@@ -2,7 +2,7 @@
 // categorie sull'asse verticale (a sinistra), valori sull'asse orizzontale (in basso)
 
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -186,13 +186,15 @@ export async function hbars(params) {
     }
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> legenda
     // costruzione delle opzioni per la legenda
     const legenda_params = {

package/charts/src/helpers/chart-utils.js

@@ -155,3 +155,50 @@ export function parseContainer({ container = null, width = null, height = null }
 
   return [containerElement, width, height];
 }
+
+/**
+ * Attende che il container abbia dimensioni valide, utile quando è temporaneamente
+ * nascosto (es. `display: none` dentro un tab o un pannello non ancora attivo) al
+ * momento della creazione del grafico. Se `width`/`height` sono già entrambe valide
+ * risolve immediatamente, altrimenti osserva il container con un `ResizeObserver` ed
+ * attende che torni visibile. Non ha timeout: se il container non torna mai visibile
+ * la promise resta in sospeso.
+ * @param {Element|null} containerElement - L'elemento container (può essere null).
+ * @param {Object} size - Dimensioni già note.
+ * @param {number|null} size.width - Larghezza già nota (se valida, non si attende il container).
+ * @param {number|null} size.height - Altezza già nota (se valida, non si attende il container).
+ * @param {boolean} [debug=false] - Se true, logga in console quando l'attesa ha inizio. (default: false)
+ * @returns {Promise<{width: number, height: number}>} Le dimensioni effettive una volta disponibili.
+ */
+export function waitForContainerSize(containerElement, { width = null, height = null } = {}, debug = false) {
+  if (width && height) {
+    return Promise.resolve({ width, height });
+  }
+
+  if (!containerElement) {
+    return Promise.resolve({ width, height });
+  }
+
+  return new Promise(resolve => {
+
+    if (debug) {
+      // eslint-disable-next-line no-console
+      console.warn('MinimoCharts → in attesa che il container ottenga dimensioni valide (es. tab/pannello nascosto)', containerElement);
+    }
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const observedWidth = width || entry.contentRect.width;
+        const observedHeight = height || entry.contentRect.height;
+
+        if (observedWidth && observedHeight) {
+          observer.disconnect();
+          resolve({ width: observedWidth, height: observedHeight });
+          return;
+        }
+      }
+    });
+
+    observer.observe(containerElement);
+  });
+}

package/charts/src/lines.js

@@ -1,5 +1,5 @@
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -196,12 +196,15 @@ export async function lines(params) {
 
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> ricalcolo data_lines_attrs (utilizzato anche per le linee della legenda)
     const default_line_width = params.data_lines_attrs['stroke-width']?? 1;
 

package/package.json

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

package/src/components/modal-popup/modal-popup.js

@@ -27,6 +27,54 @@ function closeDialog(el) {
   }, { once: true });
 }
 
+/**
+ * Wraps a single domBuilder object (not an array, not a DOM Node) into an array,
+ * so `content`/`headerContent`/`footerContent` can be handled uniformly with domBuilder arrays.
+ * @param {*} value
+ * @returns {*}
+ */
+function normalizeContentParam(value) {
+  if(value != null && typeof value === 'object' && !Array.isArray(value) && !(value instanceof Node)) {
+    return [value];
+  }
+  return value;
+}
+
+/**
+ * @param {*} value - a non-null `content`/`headerContent`/`footerContent` value
+ * @returns {'domBuilder' | 'node' | 'function' | 'html'}
+ */
+function getContentKind(value) {
+  if(Array.isArray(value)) {
+    return 'domBuilder';
+  }
+  if(value instanceof Node) {
+    return 'node';
+  }
+  if(typeof value === 'function') {
+    return 'function';
+  }
+  return 'html';
+}
+
+/**
+ * Resolves the `content`/`children` domBuilder props for a `headerContent`/`footerContent` value.
+ * The `function` kind is not handled here: it is invoked separately, from the item's `callback`,
+ * once the container element exists.
+ * @param {*} value
+ * @returns {{content: string | Node | null, children: DomBuilderItem[] | undefined}}
+ */
+function getDomBuilderContentProps(value) {
+  if(value == null) {
+    return { content: null, children: undefined };
+  }
+  const kind = getContentKind(value);
+  return {
+    content: (kind === 'html' || kind === 'node') ? value : null,
+    children: kind === 'domBuilder' ? value : undefined
+  };
+}
+
 /**
  * modalPopup
  * Opens a popup dialog with the given content.
@@ -40,7 +88,7 @@ function closeDialog(el) {
  *
  * @param {Object} params
  * @param {string | null} [params.dialogExtraClassName=null] - Extra class added to the dialog element. (default: null)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.content=null] - Plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.content=null] - Plain text, HTML, a domBuilder object, a domBuilder array, a DOM node (appended as-is), or a function invoked with the content container element to populate it directly (`content(dialogContentEl)`). (default: null)
  * @param {string | null} [params.contentExtraClassName=null] - Extra class added to the content wrapper. (default: null)
  * @param {HTMLElement | null} [params.triggerElement=null] - Optional element that triggered the popup; when set, `aria-haspopup`, `aria-controls` and `aria-expanded` are managed on it. (default: null)
  * @param {boolean} [params.addFocus=true] - if true, dialog receives focus after opening (default: true)
@@ -58,8 +106,8 @@ function closeDialog(el) {
  * @param {((el: HTMLDialogElement) => void) | null} [params.closeCallback=null] - Called with the dialog element just before it is removed, receives the dialog element (`closeCallback(dialogEl)`). NB: `dialogEl` is removed immediately after closing. (default: null)
  * @param {((data: *, el: Element) => void) | null} [params.ajaxCallback=null] - Called with the Ajax response and the content element. (default: null)
  * @param {boolean} [params.addScrollbarPadding=false] - Adds right padding to compensate for the scrollbar. (default: false)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.headerContent=null] - Header content: plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
- * @param {string | DomBuilderItem | DomBuilderItem[] | null} [params.footerContent=null] - Footer content: plain text, HTML, a domBuilder object, or a domBuilder array. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.headerContent=null] - Header content: plain text, HTML, a domBuilder object, a domBuilder array, a DOM node, or a function invoked with the header container element to populate it directly. (default: null)
+ * @param {string | DomBuilderItem | DomBuilderItem[] | Node | ((container: HTMLElement) => void) | null} [params.footerContent=null] - Footer content: same accepted types as `headerContent`, invoked with the footer container element. (default: null)
  * @returns {HTMLDialogElement} The dialog element.
  */
 
@@ -84,7 +132,7 @@ export function modalPopup({
   /** iframe url */
   iframeUrl = null,
 
-  /** content: plain text, html, domBuilder object or domBuilder array */
+  /** content: plain text, html, domBuilder object/array, DOM node, or function(container) */
   content = null,
 
   /** Ajax url and callback.
@@ -98,13 +146,13 @@ export function modalPopup({
   closeCallback = null,
   addScrollbarPadding = false, // adds extra right padding to compensate for the scrollbar
 
-  /** header content: plain text, HTML, domBuilder object or domBuilder array */
+  /** header content: plain text, HTML, domBuilder object/array, DOM node, or function(container) */
   headerContent = null,
 
   /** extra classname added to header */
   headerExtraClassName = null,
 
-  /** footer content: plain text, HTML, domBuilder object or domBuilder array */
+  /** footer content: plain text, HTML, domBuilder object/array, DOM node, or function(container) */
   footerContent = null,
 
   /** extra classname added to footer */
@@ -121,22 +169,13 @@ export function modalPopup({
   }
 
   // allow a single domBuilder object (in addition to a domBuilder array) by wrapping it in an array
-  if(content != null && typeof content === 'object' && !Array.isArray(content)) {
-    content = [content];
-  }
-  if(headerContent != null && typeof headerContent === 'object' && !Array.isArray(headerContent)) {
-    headerContent = [headerContent];
-  }
-  if(footerContent != null && typeof footerContent === 'object' && !Array.isArray(footerContent)) {
-    footerContent = [footerContent];
-  }
+  content = normalizeContentParam(content);
+  headerContent = normalizeContentParam(headerContent);
+  footerContent = normalizeContentParam(footerContent);
 
   let mode;
-  if(content != null && Array.isArray(content)) {
-    mode = 'domBuilder';
-
-  } else if (content != null) {
-    mode = 'html';
+  if(content != null) {
+    mode = getContentKind(content);
 
   } else if (ajaxUrl != null && ajaxCallback != null) {
     mode = 'ajax';
@@ -210,13 +249,17 @@ export function modalPopup({
               id: headerId,
               className: classnames(styles.header, headerExtraClassName),
               condition: headerContent != null,
-              content: Array.isArray(headerContent) ? null : headerContent,
-              children: Array.isArray(headerContent) ? headerContent : undefined
+              ...getDomBuilderContentProps(headerContent),
+              callback: el => {
+                if(headerContent != null && getContentKind(headerContent) === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (headerContent)(/** @type {HTMLElement} */ (el));
+                }
+              }
             },
             {
               className: classnames(styles.content, contentExtraClassName),
-              content: mode === 'html'
-                ? content
+              content: (mode === 'html' || mode === 'node')
+                ? /** @type {string | Node} */ (content)
                 : mode === 'ajax'
                   ? spinner()
                   : null,
@@ -233,7 +276,11 @@ export function modalPopup({
                 }
               ],
               callback: el => {
-                dialogContentEl = el;
+                dialogContentEl = /** @type {HTMLElement} */ (el);
+
+                if(mode === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (content)(dialogContentEl);
+                }
 
                 if(mode === 'ajax') {
                   try {
@@ -241,7 +288,7 @@ export function modalPopup({
                     (async () => {
                       const response = await fetch(safeAjaxUrl),
                         data = await response.json();
-                      el.innerHTML = '';
+                      dialogContentEl.innerHTML = '';
                       ajaxCallback?.(data, dialogContentEl);
                     })();
 
@@ -258,8 +305,12 @@ export function modalPopup({
             {
               className: classnames(styles.footer, footerExtraClassName),
               condition: footerContent != null,
-              content: Array.isArray(footerContent) ? null : footerContent,
-              children: Array.isArray(footerContent) ? footerContent : undefined
+              ...getDomBuilderContentProps(footerContent),
+              callback: el => {
+                if(footerContent != null && getContentKind(footerContent) === 'function') {
+                  /** @type {(container: HTMLElement) => void} */ (footerContent)(/** @type {HTMLElement} */ (el));
+                }
+              }
             },
           ]
         }