@massimo-cassandro/minimo 1.4.13 → 1.5.1

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

@@ -0,0 +1,82 @@
+// -----------------------------------------------------------------------
+// Generated file — do not edit manually.
+// This file is produced by the design-token build pipeline.
+// Source of truth: the token files in the project source directory.
+// Re-generate with: node build-tokens.mjs --config <path/to/config>
+// -----------------------------------------------------------------------
+{
+  "modal-popup": {
+    "drop-shadow": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "12px",
+          "spread": "2px",
+          "color": "rgba(0 0 0 / .25)"
+        }
+      ]
+    },
+    "backdrop-color": {
+      "$type": "color",
+      "$value": "rgb(0 0 0 / .6)"
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{size.base}"
+      }
+    },
+    "btn-close": {
+      "size": {
+        "$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

@@ -0,0 +1,78 @@
+export default {
+  'modal-popup': {
+    'drop-shadow': {
+      $type: 'shadow',
+      $value: [
+        {
+          offsetX: '0',
+          offsetY: '0',
+          blur: '12px',
+          spread: '2px',
+          color: 'rgba(0 0 0 / .25)'
+        }
+      ]
+    },
+    'backdrop-color': {
+      $value: 'rgb(0 0 0 / .6)',
+      $type: 'color',
+    },
+    border: {
+      radius: {
+        $type: 'dimension',
+        $value: '{size.base}',
+      }
+    },
+
+    'btn-close': {
+      size: {
+        $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/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.4.13",
+  "version": "1.5.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

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

@@ -1,152 +1,203 @@
-import { domBuilder, classnames } from '../index.js';
-import { spinner } from '@minimo/spinner.js';
-import * as styles from './modal-content.module.css?inline';
+import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../utilities/classnames.js';
+import { spinner } from '../spinner/spinner.js';
+import * as styles from './modal-popup.module.css';
 
 
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
 
 
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+// TODO testare la modalità iframe
+
+let dialogEl, dialogContentEl;
+
+function closeDialog() {
+  dialogEl.classList.remove(styles.on);
 
-export function modalContent({
+  dialogEl.addEventListener('transitionend', () => {
+    dialogEl.close();
+  }, { once: true });
+}
+
+/**
+ * modalPopup
+ * Mostra un popup con il contenuto indicato
+ * il contentuo può essere in forma di:
+ *  - array domBuilder oppure plain text oppure HTML (parametro `content`)
+ *  - contenuto caricato via Ajax  (parametri `ajaxUrl` e `ajaxCallback`)
+ *  - iframe (parametro `iframeUrl`)
+ *
+ * in presenza di più impostazioni in conflitto, viene scelta la prima opzione utile
+ * nell'ordine di priorità riportato nella lista precedente.
+ */
 
-  /** iframe | content */
-  mode = 'iframe',
+export function modalPopup({
 
   /** dialog extra class */
-  dialogClassName = null,
+  dialogExtraClassName = null,
+
+  /** extra classname added to  dialogInner */
+  contentExtraClassName = null,
 
   /** iframe url */
   iframeUrl = null,
 
-  /** content string (markup) o array */
+  /** content: plain text, html or  domBuilder array */
   content = null,
 
-  /** content extra classname */
-  contentClassName = null,
+  /** url ajax e relatuva funzione di callback.
+   * Quest'ultima viene invocata con argomenti i dati restituiti dalla chiamata ajax
+   * e con l''elemento contenitore (`ajaxCallback(data, dialogContentEl)`)
+  */
+  ajaxUrl = null,
+  ajaxCallback = null,
+
+  /** eventuale callback da invocare alla chiusra del dialog
+   * Viene invocato con il le'elento dialog (`closeCallback(dialogEl)`)
+   * NB: `dialogEl` viene eliminato subito dopo
+   */
+  closeCallback = null,
+  addScrollbarPadding = false, // aggiunge un padding extra a destra per la barra di scorrimento
+
+  /** header content: plain text or HTML */
+  headerContent = null,
+
+  /** footer content: plain text or HTML  */
+  footerContent = null,
+}) {
 
-  /** dimensione modal: full, large, medium o small */
-  size = 'large',
 
-  /** padding: std (var(--size-md) 0) o none */
-  padding = 'std'
-}) {
 
-  if(!['content', 'iframe'].includes(mode)) {
-    throw `modalContent: parametro 'mode' non corretto (${mode})`;
-  }
-  if(!iframeUrl && mode === 'iframe') {
-    throw 'modalContent: parametro `iframeUrl` mancante';
-  }
-  if(content == null && mode === 'content') {
-    throw 'modalContent: parametro `content` mancante';
-  }
-  if(!['full', 'large', 'medium', 'small'].includes(size)) {
-    throw `modalContent: parametro 'size' non corretto (${size})`;
-  }
-  if(!['std', 'none'].includes(padding)) {
-    throw `modalContent: parametro 'padding' non corretto (${padding})`;
+  if(content == null && (ajaxUrl == null || ajaxCallback == null) && iframeUrl == null) {
+    throw '[modalContent] parametri `content`, `ajaxUrl`/ `ajaxCallback` e `iframeUrl` mancanti';
   }
 
-  let dialog_element, dialog_inner, iframe_element = null, content_element = null;
-  const iframeLoadEventHandler = () => {
-    dialog_element.classList.add(styles.on);
-  };
+  let mode;
+  if(content != null && Array.isArray(content)) {
+    mode = 'domBuilder';
 
-  if(!dialog_element) {
+  } else if (content != null) {
+    mode = 'html';
 
-    domBuilder([
-      {
-        tag: 'dialog',
-        className: styles.dialog,
-        attrs: {
-          'closedby': 'any'
-        },
-        children: [
-          {
-            tag: 'button',
-            className: styles.closeButton, // TODO standardizzare close btn
-            attrs: {
-              'aria-label': 'Chiudi'
-            }
-          },
-          {
-            className: styles.dialogInner,
-            children: [
-              {
-                className: styles.modalSpinner,
-                content: spinner({container: null, withOverlay: false })
-              }
-
-            ]
-          }
-        ]
-      }
-    ], document.body);
+  } else if (ajaxUrl != null && ajaxCallback != null) {
+    mode = 'ajax';
 
+  } else {
+    mode = 'iframe';
+  }
 
-    dialog_element = document.querySelector(`.${styles.dialog}`);
-    dialog_inner = dialog_element.querySelector(`.${styles.dialogInner}`);
+  domBuilder([
+    {
+      tag: 'dialog',
+      className: classnames(styles.dialog, dialogExtraClassName, addScrollbarPadding && styles.scrollBarPadding),
+      attrs: {
+        'closedby': 'any'
+      },
+      callback: el => dialogEl = el,
+      children: [
+        {
+          tag: 'button',
+          className: classnames('btn-close', styles.closeButton),
+          attrs: {
+            type: 'button',
+            'aria-label': 'Chiudi'
+          }
+        },
+        {
+          className: styles.contentWrapper,
+          children: [
+            {
+              className: styles.header,
+              condition: headerContent != null,
+              content: headerContent
+            },
+            {
+              className: classnames(styles.content, contentExtraClassName),
+
+              content: mode === 'html'
+                ? content
+                : mode === 'ajax'
+                  ? spinner()
+                  : null,
+
+              children: [
+                ...(mode === 'domBuilder'? content : []),
+                {
+                  condition: mode === 'iframe',
+                  className: styles.iframe,
+                  tag: 'iframe',
+                  attrs: {
+                    src: iframeUrl
+                  }
+                }
+              ],
+              callback: el => {
+                dialogContentEl = el;
+
+                if(mode === 'ajax') {
+                  try {
+
+                    (async () => {
+                      const response = await fetch(ajaxUrl),
+                        data = await response.json();
+                      el.innerHTML = '';
+                      ajaxCallback(data, dialogContentEl);
+                    })();
+
+                  } catch(err) {
+                    /* eslint-disable no-console */
+                    console.error(ajaxUrl);
+                    console.error(err);
+                    /* eslint-enable no-console */
+                  }
+                }
+
+              },
+            },
+            {
+              className: styles.footer,
+              condition: footerContent != null,
+              content: footerContent
+            },
+          ]
+        }
+      ]
+    }
+  ], document.body);
 
-    dialog_element.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
-      dialog_element.close();
-    }, false);
 
-    // listener chiusura
-    dialog_element.addEventListener('close', () => {
+  // listener sul pulsante di chiusura
+  dialogEl.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
+    closeDialog();
+  }, false);
 
-      iframe_element?.removeEventListener('load', iframeLoadEventHandler, false);
-      iframe_element?.remove();
-      content_element?.remove();
+  // // Esc e clic sul backdrop
+  // dialogEl.addEventListener('cancel', (e) => {
+  //   e.preventDefault();
+  //   closeDialog();
+  // }, false);
 
-      document.body.classList.remove('overflow-hidden');
-      dialog_element.classList.remove(styles.on);
-    }, false);
 
-  }
 
+  dialogEl.addEventListener('close', () => {
 
-  // aggiunta classi extra
-  dialog_element.className = classnames(
-    styles.dialog,
-    dialogClassName,
-    styles[`size-${size}`],
-    styles[`padding-${padding}`]
-  );
+    document.body.classList.remove('overflow-hidden');
 
-  domBuilder([
-    {
-      condition: mode === 'iframe',
-      className: styles.iframeEl,
-      tag: 'iframe',
-      attrs: {
-        src: ''
-      }
-    },
-    {
-      condition: mode === 'content',
-      className: classnames(styles.contentEl, contentClassName),
-      content: (content && !Array.isArray(content))? content : null,
-      children: (content && Array.isArray(content))? content : null
+    if(closeCallback) {
+      closeCallback(dialogEl);
     }
-  ], dialog_inner);
+    dialogEl.remove();
 
+  }, false);
 
-  document.body.classList.add('overflow-hidden');
-  dialog_element.showModal();
-  dialog_element.focus();
 
+  document.body.classList.add('overflow-hidden');
+  dialogEl.showModal();
+  dialogEl.focus();
 
-  if(mode === 'iframe') {
-    iframe_element = dialog_element.querySelector(`.${styles.iframeEl}`);
-    iframe_element.src = iframeUrl;
-
-    // listener load per i frame
-    iframe_element?.addEventListener('load', iframeLoadEventHandler, false);
+  dialogEl.classList.add(styles.on);
 
 
-  } else if (mode === 'content') {
-    content_element = dialog_element.querySelector(`.${styles.contentEl}`);
-    dialog_element.classList.add(styles.on);
-  }
+  return dialogEl;
 
 }

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

@@ -1,142 +1,104 @@
-/* TODO custom props nel file generale */
-/* TODO prevedere opzione con bordo del pulsante di chiusura (NB: si disallinea) */
-/* TODO cambiare icona chiusura con svg? */
-/* TODO aggiungere wrapper intorno a dialogInner (a filo con il dialog) per la scroll bar */
+/*
+NB:
+`--_modal-popup-width` and `--_modal-popup-height` are used with a fallback value
+but can be set with a desired value caso per caso
+
+*/
+
+.dialog {
 
-.dialog { /* dialog */
-  --modal-border-radius: var(--radius-md, 1.2rem);
   position: fixed;
-  max-width: 80dvw;
+
+  display: flex;
+  flex-direction: column;
+
+  width: var(--_modal-popup-width, max-content);
+  min-width: 400px;
+  max-width: 98dvw;
+  height: var(--_modal-popup-height, max-content);
+  min-height: 300px;
   max-height: 90dvh;
   padding: 0;
   margin: auto;
   overflow: visible;
-  background-color: var(--body-bg-color, #fff);
+  background-color: var(--body-background-color);
   border: none;
-  border-radius: var(--modal-border-radius);
-  box-shadow: 0 0 2rem .5rem rgb(0 0 0 / .5);
+  border-radius: var(--modal-popup-border-radius);
+  box-shadow: var(--modal-popup-drop-shadow);
   scale: 0;
   transition: scale .2s ease-out;
 
-  /* stylelint-disable selector-class-pattern */
-  &.size-full {
-    width: 80dvw;
-    height: 90dvh;
-  }
-  /* dimensioni std -> size == 'large' */
-  &.size-large {
-    width: 50rem; /* 800px */
-    height: auto;
-  }
-  &.size-medium {
-    width: 37.5rem; /* 600px */
-    height: 37.5rem;
-  }
-  &.size-small {
-    width: 32rem; /* ~500 x 400 */
-    height: 25rem;
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--modal-popup-backdrop-color);
   }
-  /* stylelint-enable selector-class-pattern */
 
   &.on {
     scale: 1;
   }
 
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: rgb(0 0 0 / .7);
-  }
+}
+
+.closeButton  {
+
+  position: absolute;
+  top: calc(-1 * var(--modal-popup-btn-close-size) / 3);
+  right: calc(-1 * var(--modal-popup-btn-close-size) / 3);
+}
 
+.contentWrapper {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+  gap: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  min-height: 0;
 }
 
-.dialogInner {
-  width: 100%;
-  height: 100%;
-  padding-inline-end: var(--size-md);
+
+.content {
+  flex: 1;
+  /* width: 100%;
+  height: 100%; */
+  min-height: 0;
+  padding: var(--size-base) var(--size-sm) var(--size-sm);
   overflow-x: hidden;
   overflow-y: auto;
-  /* scrollbar-gutter: stable; */
-  border-radius: var(--modal-border-radius);
+  scrollbar-gutter: stable;
 
-  /* stylelint-disable selector-class-pattern */
-  .padding-std & {
-    padding: var(--size-md) 0;
+  .scrollBarPadding & {
+    padding-inline-end: var(--size-md);
   }
-  .padding-none & {
-    padding: 0;
-  }
-  /* stylelint-enable selector-class-pattern */
-}
-
-.modalSpinner {
-  position: relative;
-  padding-block-start: var(--size-2xl);
 
-  .dialog.on & {
-    display: none;
-  }
 }
 
-.iframeEl, .contentEl {
+.iframe {
   width: 100%;
-  overscroll-behavior: contain;
-}
-
-.iframeEl {
   height: 100%;
   padding: 0;
   margin: 0;
+  overscroll-behavior: contain;
   border: none;
 }
 
-.contentEl {
-  min-height: 100%;
+.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);
 }
 
-.closeButton  {
-  --btn-color: var(--secondary-fg, #000);
-  --btn-bg-color: var(--secondary, #fff);
-  --btn-hover-color: var(--secondary, #fff);
-  --btn-hover-bg-color: var(--secondary-fg, #000);
-  --icon-size: 2.5rem;
-  --btn-padding: var(--size-xs, .5rem);
-  --icon-bars-thickness: 3px;
-
-  position: absolute;
-  top: calc(-1 * var(--icon-size) / 3);
-  right: calc(-1 * var(--icon-size) / 3);
-  display: block;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  padding: var(--btn-padding);
-  color: var(--btn-color);
-  cursor: pointer;
-  background-color: var(--btn-bg-color);
-  /* border: var(--icon-bars-thickness) solid currentColor; */
-  border: none;
-  border-radius: 50%;
-
-
-  &:hover {
-    --btn-color: var(--btn-hover-color);
-    --btn-bg-color: var(--btn-hover-bg-color);
-  }
-
-  &::before, &::after {
-    position: absolute;
-    top: 50%;
-    left: var(--btn-padding);
-    display: block;
-    width: calc(var(--icon-size) - (var(--btn-padding) * 2));
-    height: var(--icon-bars-thickness);
-    content: '';
-    background: currentColor;
-  }
-  &::before {
-    transform: translateY(-50%) rotate(45deg);
-  }
-  &::after {
-    transform: translateY(-50%) rotate(-45deg);
+.header, .footer {
+  * {
+    color: inherit;
   }
 }
-

package/src/components/spinner/spinner.js

@@ -0,0 +1,8 @@
+import * as styles from './spinner.module.css';
+
+// NB la classe spinner è legata al tipo di spinner che si decide di usare, il cui file va incluso
+// TODO sistema per coinfigurare il tipo di spinner da utilizzare, per permettere l'uso di più tipi di spinner nello stesso progetto
+
+export function spinner() {
+  return `<div class="${styles.spinnerWrapper}"><div class="spinner">Loading...</div></div>`;
+}

package/src/components/spinner/spinner.module.css

@@ -0,0 +1,5 @@
+.spinnerWrapper {
+  display: grid;
+  place-content: center;
+  padding: 2rem;
+}

package/src/custom-properties.css

@@ -190,6 +190,18 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
+  --modal-popup-backdrop-color: rgb(0 0 0 / .6);
+  --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/minimo.css

@@ -41,3 +41,6 @@
 @import '@minimo/css/position.css';
 @import '@minimo/css/visibility.css';
 
+
+/* spinner: include the css of the choosen spinner only */
+@import '@minimo/components/spinner/spinner-circle-basic.css';

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/src/parse-cols.js

@@ -120,7 +120,7 @@ export function parseCols(col_obj){
 
     } else if(col_obj._renderMode === 'numeric') {
       return {
-
+// TODO implementare merge con classi presenti nei parametri definiti dall'utente
         cellClass: 'text-end text-numeric',
         headerClass: 'text-end text-numeric', // NB: usata anche per il footer
       };