@massimo-cassandro/minimo 1.5.0 → 1.5.2

package/design-tokens/modal-popup.minimo.tokens.jsonc

@@ -33,6 +33,50 @@
         "$type": "dimension",
         "$value": "1.6rem"
       }
+    },
+    "header": {
+      "padding": {
+        "$type": "dimension",
+        "$value": "{size.xs}"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{text.color}"
+      },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "#ddd"
+        }
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}"
+        }
+      }
+    },
+    "footer": {
+      "padding": {
+        "$type": "dimension",
+        "$value": "{size.xs}"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{text.color}"
+      },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "#ddd"
+        }
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.base}"
+        }
+      }
     }
   }
 }

package/design-tokens-src/modal-popup.minimo.tokens.mjs

@@ -29,6 +29,50 @@ export default {
         $value: '1.6rem'
       }
 
+    },
+    header: {
+      padding: {
+        $type: 'dimension',
+        $value: '{size.xs}',
+      },
+      color: {
+        $type: 'color',
+        $value: '{text.color}'
+      },
+      background: {
+        color: {
+          $type: 'color',
+          $value: '#ddd'
+        }
+      },
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.xl}'
+        }
+      }
+    },
+    footer: {
+      padding: {
+        $type: 'dimension',
+        $value: '{size.xs}',
+      },
+      color: {
+        $type: 'color',
+        $value: '{text.color}'
+      },
+      background: {
+        color: {
+          $type: 'color',
+          $value: '#ddd'
+        }
+      },
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.base}'
+        }
+      }
     }
   }
 };

package/index.js

@@ -15,4 +15,5 @@ export { innerNav } from './src/components/inner-nav/inner-nav.js';
 export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
 export { sf_macro } from './src/components/sf-macro/sf-macro.js';
 export { snackbar } from './src/components/snackbar/snackbar.js';
+export { modalPopup } from './src/components/modal-popup/modal-popup.js';
 export { unsplashPageJS } from './src/components/unsplash-page/unsplash-page.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

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

@@ -6,6 +6,9 @@ import * as styles from './modal-popup.module.css';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
 
+
+// TODO testare la modalità iframe
+
 let dialogEl, dialogContentEl;
 
 function closeDialog() {
@@ -104,7 +107,7 @@ export function modalPopup({
           className: styles.contentWrapper,
           children: [
             {
-              classname: styles.header,
+              className: styles.header,
               condition: headerContent != null,
               content: headerContent
             },
@@ -137,7 +140,7 @@ export function modalPopup({
                     (async () => {
                       const response = await fetch(ajaxUrl),
                         data = await response.json();
-
+                      el.innerHTML = '';
                       ajaxCallback(data, dialogContentEl);
                     })();
 
@@ -152,7 +155,7 @@ export function modalPopup({
               },
             },
             {
-              classname: styles.footer,
+              className: styles.footer,
               condition: footerContent != null,
               content: footerContent
             },

package/src/components/modal-popup/modal-popup.module.css

@@ -4,11 +4,13 @@ NB:
 but can be set with a desired value caso per caso
 
 */
+
 .dialog {
 
   position: fixed;
 
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   width: var(--_modal-popup-width, max-content);
   min-width: 400px;
@@ -46,17 +48,19 @@ but can be set with a desired value caso per caso
 
 .contentWrapper {
   display: flex;
+  flex: 1;
   flex-flow: column nowrap;
   gap: 0;
-  align-items: flex-start;
+  align-items: stretch;
   justify-content: flex-start;
+  min-height: 0;
 }
 
 
 .content {
   flex: 1;
-  width: 100%;
-  height: 100%;
+  /* width: 100%;
+  height: 100%; */
   min-height: 0;
   padding: var(--size-base) var(--size-sm) var(--size-sm);
   overflow-x: hidden;
@@ -78,11 +82,23 @@ but can be set with a desired value caso per caso
   border: none;
 }
 
-
 .header {
-
+  padding: var(--modal-popup-header-padding);
+  font-size: var(--modal-popup-header-font-size);
+  color: var(--modal-popup-header-color);
+  background-color: var(--modal-popup-header-background-color);
+  border-radius: var(--modal-popup-border-radius) var(--modal-popup-border-radius) 0 0;
 }
-
 .footer {
+  padding: var(--modal-popup-footer-padding);
+  font-size: var(--modal-popup-footer-font-size);
+  color: var(--modal-popup-footer-color);
+  background-color: var(--modal-popup-footer-background-color);
+  border-radius: 0 0 var(--modal-popup-border-radius) var(--modal-popup-border-radius);
+}
 
+.header, .footer {
+  * {
+    color: inherit;
+  }
 }

package/src/custom-properties.css

@@ -194,6 +194,14 @@
   --modal-popup-border-radius: var(--size-base);
   --modal-popup-btn-close-size: 1.6rem;
   --modal-popup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
+  --modal-popup-footer-background-color: #ddd;
+  --modal-popup-footer-color: var(--text-color);
+  --modal-popup-footer-font-size: var(--font-size-base);
+  --modal-popup-footer-padding: var(--size-xs);
+  --modal-popup-header-background-color: #ddd;
+  --modal-popup-header-color: var(--text-color);
+  --modal-popup-header-font-size: var(--font-size-xl);
+  --modal-popup-header-padding: var(--size-xs);
   --neutral-100: #666;
   --neutral-100-fg: #fff;
   --overlay-color: rgb(0 0 0 / .6);

package/src/utilities/dom-builder/dom-builder.js

@@ -23,7 +23,7 @@ import { parseDomString } from './parseDomString.js';
  *     className: 'xxx' | ['class1', 'class2'], // anche `class`
  *     id: 'element-id',
  *     attrs: [attr_name, attr_value] | [[...], [...]] | {name: value},
- *     content: 'xxx' | 123 | function | Element,
+ *     content: 'xxx' | 123 | domBuilder Array | function | Element,
  *     condition: true | false,
  *     callback: el => ...,
  *     children: [...]
@@ -137,6 +137,9 @@ export function domBuilder(structureArray = [], parent, options = {}) {
         if (typeof item.content === 'function') {
           content = item.content();
 
+        } else if (Array.isArray(item.content)) {
+          content = domBuilder(item.content);
+
         } else if (item.content != null) {
           content = String(item.content);
         }

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -146,7 +146,9 @@ function getNestedValue(obj, path) {
  * resolveTemplate
  *
  * Risolve un template in base al suo tipo:
- *   - Funzione:              invocata con `row`, deve restituire una stringa.
+ *   - Elemento DOM:          restituisce `outerHTML` dell'elemento.
+ *   - Funzione:              invocata con `row`, può restituire una stringa o un elemento DOM
+ *                            (in tal caso viene serializzato con `outerHTML`).
  *   - Stringa mustache-like ([[key]]): i segnaposto vengono sostituiti con i
  *                            valori corrispondenti dell'oggetto riga.
  *   - Stringa semplice:      restituita così com'è (utile per tooltip statici).
@@ -155,7 +157,7 @@ function getNestedValue(obj, path) {
  * comunque chiamate con null; la stringa mustache-like viene restituita
  * letteralmente perché non ci sono dati da interpolare.
  *
- * @param {string|Function} tpl           Template da risolvere.
+ * @param {string|Function|Node} tpl      Template da risolvere.
  * @param {object|null}     row           Oggetto riga corrente (null per le intestazioni).
  * @param {object}          [opts]        Opzioni aggiuntive.
  * @param {string}          [opts.nullAs] Stringa da usare come fallback per i segnaposto
@@ -169,8 +171,14 @@ function getNestedValue(obj, path) {
 function resolveTemplate(tpl, row, { nullAs = '', warnColIdx } = {}) {
   if (!tpl) return null;
 
+  if (tpl instanceof Node) {
+    return tpl.outerHTML;
+  }
+
   if (typeof tpl === 'function') {
-    return tpl(row) ?? null;
+    const result = tpl(row);
+    if (result instanceof Node) return result.outerHTML;
+    return result ?? null;
   }
 
   // Stringa mustache-like: interpola solo se row è disponibile
@@ -591,7 +599,8 @@ class SimpleDatatableAdapter extends HTMLElement {
 
 
           // _cellRender: template per il rendering del valore.
-          // Accetta stringa mustache-like ([[key]]) o funzione (row) => string.
+          // Accetta stringa mustache-like ([[key]]), funzione (row) => string|Node,
+          // oppure un elemento DOM direttamente (serializzato via outerHTML).
           // Delega a resolveTemplate, passando nullAs e l'indice di colonna
           // per i warning di chiavi mancanti.
           if (col_item._cellRender) {
@@ -605,7 +614,7 @@ class SimpleDatatableAdapter extends HTMLElement {
           }
 
 // TODO rendere più snella la gestione di questi casi (???)
-// TODO pasare il valore `nullAs` al render predefinito
+// TODO passare il valore `nullAs` al render predefinito
           // Applica _renderNullAs al valore della cella se null/undefined
           // e la cella non ha già un template che gestisce la visualizzazione.
           // se _renderMode è impostato, il valore null è gestito direttamente dal gestore predefinito