@massimo-cassandro/minimo 1.16.2 → 1.17.1

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

@@ -1,170 +1,297 @@
-import { marks as default_marks } from './marks.js';
-import {defaults} from './defaults.js';
-
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+import * as styles from './modal-alert.module.css';
+import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../utilities/classnames.js';
+
+import successIcon from './svg/success.svg?inline';
+import infoIcon from './svg/info.svg?inline';
+import confirmIcon from './svg/confirm.svg?inline';
+import warningIcon from './svg/warning.svg?inline';
+import errorIcon from './svg/error.svg?inline';
+import dangerIcon from './svg/danger.svg?inline';
+
+// backward compatibility: legacy snake_case param names mapped to their camelCase equivalent
+const legacyParamNames = {
+  extra_class: 'extraClass',
+  heading_class: 'headingClass',
+  text_class: 'textClass',
+  extra_btn: 'extraBtn',
+  extra_btn_focus: 'extraBtnFocus',
+  ok_btn_text: 'okBtnText',
+  ok_btn_class: 'okBtnClass',
+  cancel_btn_text: 'cancelBtnText',
+  cancel_btn_class: 'cancelBtnClass',
+  cancel_focus: 'cancelBtnFocus',
+  use_warning_icon: 'useAltIcon'
+};
+
+const defaults = {
+
+  // settings applied to all dialog types; can be overridden per type
+  globals: {
+    extraClass: null,
+    onOpen: null,
+    onClose: null,
+    animation: true,
+    showMarks: true,
+    callback: null,
+    timer: null,
+    title: null,
+    mes: null,
+    headingClass: null,
+    textClass: null,
+    icon: null,
+    altIcon: null,
+    useAltIcon: false,
+    type: null,
+
+    // extra btn markup, ignored on confirm
+    extraBtn: null,
+    extraBtnFocus: true
+  },
+
+  success: {
+    type: 'success',
+    title: 'Operazione completata',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    timer: 4000, // ms
+    icon: successIcon
+  },
+  error: {
+    type: 'error',
+    title: 'Si è verificato un errore',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: errorIcon
+  },
+  warning: {
+    type: 'warning',
+    title: 'Attenzione!',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: warningIcon,
+    altIcon: dangerIcon,
+    useAltIcon: false // when true, uses altIcon (danger) instead of the default warning icon
+  },
+  info: {
+    type: 'info',
+    title: null,
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: infoIcon
+  },
+  confirm: {
+    type: 'confirm',
+    title: 'Confermi?',
+    okBtnText: 'OK',
+    cancelBtnText: 'Annulla',
+    cancelBtnFocus: true, // false to give focus to the ok button
+    okBtnClass: 'btn btn-outline',
+    cancelBtnClass: 'btn',
+    icon: confirmIcon,
+    altIcon: warningIcon,
+    useAltIcon: false // when true, uses altIcon (warning) instead of the default confirm icon
+  }
 
-// TODO rewrite as async
-// TODO refactor entirely, rewrite using domBuilder
+};
 
 /**
  * @typedef {Object} ModalAlertParams
- * @property {string} type - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
- * @property {string | null} [extra_class]
- * @property {(() => void) | null} [onOpen]
- * @property {(() => void) | null} [onClose]
- * @property {string | null} [cssFile]
- * @property {boolean} [animation]
- * @property {boolean} [showMarks]
- * @property {((arg?: *) => void) | null} [callback]
- * @property {number | null} [timer]
- * @property {string | null} [mes]
- * @property {string | null} [heading_class]
- * @property {string | null} [text_class]
- * @property {string | null} [extra_btn]
- * @property {string | null} [extra_btn_selector]
- * @property {boolean} [extra_btn_focus]
- * @property {string | null} [title]
- * @property {string} [ok_btn_text]
- * @property {string} [ok_btn_class]
- * @property {string} [cancel_btn_text]
- * @property {string} [cancel_btn_class]
- * @property {boolean} [cancel_focus]
- * @property {boolean} [use_warning_icon]
- */
-
-/**
+ * @property {string} [type] - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
+ * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {(() => void) | null} [onOpen] - optional callback on dialog open
+ * @property {(() => void) | null} [onClose] - optional callback on dialog close
+ * @property {boolean} [animation] - if true, dialog will be animated
+ * @property {boolean} [showMarks] - if true, mark iconswill be showed
+ * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
+ * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
+ * @property {string | null} [title] - title text
+ * @property {string | null} [mes] - text message (plain or html)
+ * @property {string | null} [headingClass] - optional extra class for heading
+ * @property {string | null} [textClass] - optional extra class for text
+ * @property {string | null} [icon] - Icon markup used for the dialog; defaults to the type's icon.
+ * @property {string | null} [altIcon] - Alternate icon markup, used instead of `icon` when `useAltIcon` is `true`.
+ * @property {boolean} [useAltIcon] - When `true`, uses `altIcon` instead of `icon` (e.g. the `danger` icon on a `warning` dialog, or the `warning` icon on a `confirm` dialog).
+ * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
+ * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
+ * @property {string} [okBtnText] - text for 'ok' button
+ * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
+ * @property {string} [cancelBtnText] - text for 'cancel' button
+ * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
+ * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
+ *
  * Renders and opens a modal alert dialog.
+ *
+ * Backward compatibility: legacy snake_case parameter names (`extra_class`, `heading_class`,
+ * `text_class`, `extra_btn`, `extra_btn_selector`, `extra_btn_focus`, `ok_btn_text`,
+ * `ok_btn_class`, `cancel_btn_text`, `cancel_btn_class`, `cancel_focus`, `use_warning_icon`)
+ * are still accepted and internally mapped to their camelCase equivalent, see `legacyParamNames`.
+ *
  * @param {ModalAlertParams} params - Dialog parameters (merged with defaults by type).
- * @param {Record<string, any>} [custom_defaults={}] - Per-project overrides for the default settings.
- * @param {Record<string, string>} [marks=default_marks] - SVG icon map keyed by dialog type.
- * @returns {void}
+ * @returns {Promise<string | boolean | undefined>} Resolves when the dialog closes. If the
+ *   dismissing button has a `data-malert-result` attribute, that string is used; otherwise, for
+ *   `confirm` dialogs, resolves `true`/`false` for the OK/Cancel button; otherwise `undefined`.
  */
+export function modalAlert(params = {}) {
 
-//TODO refactoring
+  return new Promise((resolve) => {
 
-export function modalAlert(params, custom_defaults = {}, marks = default_marks) {
+    try {
 
-  try {
+      // garbage collection
+      document.querySelector('.modal-alert')?.remove();
 
-    // garbage collection
-    document.querySelector('.modal-alert')?.remove();
-
-    const typedDefaults = /** @type {Record<string, any>} */ (defaults);
+      // backward compatibility: map legacy snake_case keys to their camelCase equivalent
+      const rawParams = /** @type {Record<string, any>} */ (params);
+      Object.entries(legacyParamNames).forEach(([legacyKey, newKey]) => {
+        if(legacyKey in rawParams && !(newKey in rawParams)) {
+          rawParams[newKey] = rawParams[legacyKey];
+        }
+      });
 
-    params = /** @type {ModalAlertParams} */ ({
-      ...(typedDefaults.globals ?? {}),
-      ...(custom_defaults.globals ?? {}),
-      ...(typedDefaults[params.type] ?? {}),
-      ...(custom_defaults[params.type] ?? {}),
-      ...params
-    });
+      const typedDefaults = /** @type {Record<string, any>} */ (defaults);
 
-    // backwards compatibility: 'danger' is an alias for 'error'
-    if(params.type === 'danger') {
-      params.type = 'error';
-    }
+      params = /** @type {ModalAlertParams} */ ({
+        ...(typedDefaults.globals ?? {}),
+        ...(typedDefaults[params.type ?? ''] ?? {}),
+        ...params
+      });
 
-    if(!params.type || Object.keys(defaults).filter(item => item !== 'global').indexOf(params.type) === -1) {
-      throw 'Missing or incorrect `type` parameter';
-    }
+      // backwards compatibility: 'danger' is an alias for 'error'
+      if(params.type === 'danger') {
+        params.type = 'error';
+      }
 
-    if(params.callback && typeof params.callback !== 'function') {
-      throw 'Incorrect `callback` parameter';
-    }
-    if(params.onOpen && typeof params.onOpen !== 'function') {
-      throw 'Incorrect `onOpen` parameter';
-    }
-    if(params.onClose && typeof params.onClose !== 'function') {
-      throw 'Incorrect `onClose` parameter';
-    }
-    if(params.extra_btn && !params.extra_btn_selector) {
-      throw 'Incorrect `extra_btn` parameter: missing `extra_btn_selector`';
-    }
+      if(!params.type || Object.keys(defaults).filter(item => item !== 'globals').indexOf(params.type) === -1) {
+        throw 'Missing or incorrect `type` parameter';
+      }
 
-    if(params.cssFile && !document.querySelector(`link[href='${params.cssFile}']`)) {
-      document.head.insertAdjacentHTML('beforeend',
-        `<link rel="stylesheet" href="${params.cssFile}" type="text/css">`
-      );
-    }
+      if(params.callback && typeof params.callback !== 'function') {
+        throw 'Incorrect `callback` parameter';
+      }
+      if(params.onOpen && typeof params.onOpen !== 'function') {
+        throw 'Incorrect `onOpen` parameter';
+      }
+      if(params.onClose && typeof params.onClose !== 'function') {
+        throw 'Incorrect `onClose` parameter';
+      }
 
-    // confirm type can optionally use the warning icon instead of the confirm icon
-    let icon = marks[params.type];
-    if(params.type === 'confirm' && params.use_warning_icon) {
-      icon = marks.warning;
-    }
+      /** @type {HTMLElement | undefined} */
+      let okBtn;
+      /** @type {HTMLElement | undefined} */
+      let cancelBtn;
+      /** @type {HTMLElement | undefined} */
+      let extraBtn;
+
+      const focusTarget =  (params.extraBtn != null && params.extraBtnFocus)
+        ? 'extra'
+        : (params.type === 'confirm' && params.cancelBtnFocus)
+          ? 'cancel'
+          : 'ok';
+
+      const dialog = /** @type {HTMLDialogElement} */ (domBuilder([
+        {
+          tag: 'dialog',
+          className: classnames(
+            styles.malert,
+            styles[params.type],
+            params.animation && styles.mAnimated,
+            params.extraClass
+          ),
+          attrs: {
+            closedBy: ['success', 'info'].includes(params.type)? 'any' : null
+          },
+          children: [
+            {
+              className: styles.innerWrapper,
+              children: [
+                {
+                  condition: params.showMarks,
+                  className: styles.mMark,
+                  content: (params.useAltIcon && params.altIcon)? params.altIcon : params.icon
+                },
+                {
+                  className: styles.mBody,
+                  children: [
+                    {
+                      condition: !!params.title,
+                      className: classnames(styles.mHeading, params.headingClass),
+                      content: params.title
+                    },
+                    {
+                      className: classnames(styles.mText, params.textClass),
+                      content: params.mes
+                    },
+                    {
+                      className: styles.mBtns,
+                      children: [
+                        {
+                          tag: 'button',
+                          className: params.okBtnClass? params.okBtnClass : 'btn btn-secondary',
+                          attrs: {
+                            type: 'button',
+                            autofocus: focusTarget === 'ok'
+                          },
+                          callback: el => okBtn = el
+                        },
+                        {
+                          condition: params.type === 'confirm',
+                          tag: 'button',
+                          className: params.cancelBtnClass? params.cancelBtnClass : 'btn btn-secondary btn-hollow',
+                          attrs: {
+                            type: 'button',
+                            autofocus: focusTarget === 'cancel'
+                          },
+                          callback: el => cancelBtn = el
+                        },
+                        {
+                          ...(params.extraBtn?? {}),
+                          condition: params.extraBtn != null,
+                          callback: el => {
+                            extraBtn = el;
+                            if(typeof params.extraBtn?.callback === 'function') {
+                              params.extraBtn.callback(el);
+                            }
+                          },
+                          attrs: {
+                            ...(params.extraBtn?.attrs?? {}),
+                            autofocus: focusTarget === 'extra'
+                          }
+                        },
+                      ]
+                    },
+                  ]
+                }
+              ]
+            }
+          ]
 
+        }
+      ], document.body));
 
-    // if(!params.title) {
-    //   throw '`title` parameter not present';
-    // }
-    const closedByAny = ['success', 'info'].indexOf(params.type) !== -1? ' closedBy="any"' : '';
-
-    document.body.insertAdjacentHTML('beforeend',
-      `<dialog class="modal-alert modal-alert-${params.type}${params.animation? ' modal-alert-animated' : ''} ${params.extra_class??''}"${closedByAny}>
-        <div class="malert-inner">
-          ${params.showMarks? `<div class="malert-mark">${icon}</div>` : ''}
-          <div class="malert-body">
-            ${params.title? `<div class="malert-heading ${params.heading_class?? ''}">${params.title}</div>` : ''}
-            <div class="malert-text ${params.text_class?? ''}">${params.mes?? ''}</div>
-            <div class="malert-btns">
-              <button type="button" class="malert-ok ${params.ok_btn_class}">
-                ${params.ok_btn_text}
-              </button>
-              ${params.type === 'confirm'?
-                `<button type="button" class="malert-cancel ${params.cancel_btn_class}">
-                  ${params.cancel_btn_text}
-                </button>`
-              : ''}
-              ${params.extra_btn?? ''}
-            </div>
-          </div>
-        </div>
-      </dialog>`
-    );
-
-    const dialog = /** @type {HTMLDialogElement} */ (document.querySelector('.modal-alert'));
-
-    dialog.showModal();
-
-    // button focus
-    const ok_btn = /** @type {HTMLElement | null} */ (dialog.querySelector('.malert-ok')),
-      cancel_btn = /** @type {HTMLElement | null} */ (dialog.querySelector('.malert-cancel')),
-      extra_btn = /** @type {HTMLElement | null} */ (
-        (params.extra_btn && params.extra_btn_selector)? dialog.querySelector(params.extra_btn_selector) : null
-      );
-
-    if(extra_btn && params.extra_btn_focus) {
-      extra_btn.focus();
-
-    } else if(cancel_btn && params.cancel_focus) { // confirm
-      cancel_btn.focus();
-
-    } else {
-      ok_btn?.focus();
-    }
+      dialog.showModal();
 
-    if(params.onOpen && typeof params.onOpen === 'function') {
-      params.onOpen();
-    }
+      if(params.onOpen && typeof params.onOpen === 'function') {
+        params.onOpen();
+      }
 
-    /** @type {number | undefined} */
-    let timeoutID;
+      /** @type {number | undefined} */
+      let timeoutID;
 
-    /**
-     * @param {HTMLElement | null} [btn]
-     * @returns {void}
-     */
-    const dialogDismiss = (btn = null) => {
-      dialog.remove();
+      /**
+       * @param {HTMLElement | null} [btn]
+       * @returns {void}
+       */
+      const dialogDismiss = (btn = null) => {
+        dialog.remove();
 
-      if(params.onClose && typeof params.onClose === 'function') {
-        params.onClose();
-      }
+        if(params.onClose && typeof params.onClose === 'function') {
+          params.onClose();
+        }
 
-      // If present, the callback argument is `btn.dataset.malertResult`
-      // Otherwise, if the modal type is `confirm`, it is `true` for the OK button, `false` for the Cancel button
-      // Otherwise, for all other modal types, it is `undefined`
-      if(params.callback && typeof params.callback === 'function') {
+        // If present, the resolved/callback argument is `btn.dataset.malertResult`
+        // Otherwise, if the modal type is `confirm`, it is `true` for the OK button, `false` for the Cancel button
+        // Otherwise, for all other modal types, it is `undefined`
         let arg;
         if(btn) {
           if(btn.dataset?.malertResult) {
@@ -173,39 +300,42 @@ export function modalAlert(params, custom_defaults = {}, marks = default_marks)
           } else if(params.type === 'confirm') {
             arg = btn.classList.contains('malert-ok');
           }
-        } else {
-          arg = undefined;
         }
 
-        params.callback(arg);
-      }
+        if(params.callback && typeof params.callback === 'function') {
+          params.callback(arg);
+        }
+        resolve(arg);
+
+        if(timeoutID) {
+          window.clearTimeout(timeoutID);
+        }
+      };
 
-      if(timeoutID) {
-        window.clearTimeout(timeoutID);
+      if( params.timer != null && params.type !== 'confirm') {
+        timeoutID = window.setTimeout( function() {
+          dialogDismiss();
+        }, params.timer);
       }
-    };
 
-    if( params.timer && params.type !== 'confirm') {
-      timeoutID = window.setTimeout( function() {
+      dialog.addEventListener('close', () => {
         dialogDismiss();
-      }, params.timer);
-    }
+      }, false);
 
-    dialog.addEventListener('close', () => {
-      dialogDismiss();
-    }, false);
+      [okBtn, cancelBtn, ...(extraBtn? [extraBtn] : [])].forEach(btn => {
 
-    [ok_btn, cancel_btn, ...(extra_btn? [extra_btn] : [])].forEach(btn => {
+        btn?.addEventListener('click', () => {
+          dialogDismiss(btn);
+        }, false);
 
-      btn?.addEventListener('click', () => {
-        dialogDismiss(btn);
-      }, false);
+      });
 
-    });
 
+    } catch(e) {
+      console.error( '[modal-alert] ' + e ); // eslint-disable-line
+      resolve(undefined);
+    }
 
-  } catch(e) {
-    console.error( e ); // eslint-disable-line
-  }
+  });
 
 }

package/src/components/modal-alert/modal-alert.minimo.tokens.mjs

@@ -0,0 +1,164 @@
+export default {
+  'malert': {
+    background: {
+      color: {
+        $type: 'color',
+        $value: '#fff'
+      }
+    },
+    border: {
+      radius: {
+        $type: 'dimension',
+        $value: '{radius.xs}'
+      },
+    },
+    'box-shadow-color': {
+      $type: 'color',
+      $value: '#000'
+    },
+    // https://www.joshwcomeau.com/shadow-palette/
+    'box-shadow': {
+      $type: 'shadow',
+      $value: [
+        {
+          offsetX: '0',
+          offsetY: '.4px',
+          blur: '4px',
+          spread: '0',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 15%, transparent)'
+        },
+        {
+          offsetX: '-.3px',
+          offsetY: '3px',
+          blur: '3.3px',
+          spread: '-.5px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 15%, transparent)'
+        },
+        {
+          offsetX: '-.5px',
+          offsetY: '6.1px',
+          blur: '6.6px',
+          spread: '-.9px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 14%, transparent)'
+        },
+        {
+          offsetX: '-.9px',
+          offsetY: '11.2px',
+          blur: '12.1px',
+          spread: '-1.4px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 14%, transparent)'
+        },
+        {
+          offsetX: '-1.6px',
+          offsetY: '19.5px',
+          blur: '21.1px',
+          spread: '-1.9px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 13%, transparent)'
+        },
+        {
+          offsetX: '-2.7px',
+          offsetY: '32.7px',
+          blur: '35.4px',
+          spread: '-2.3px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 13%, transparent)'
+        },
+        {
+          offsetX: '-4.3px',
+          offsetY: '52px',
+          blur: '56.4px',
+          spread: '-2.8px',
+          color: 'color-mix(in srgb, {malert.box-shadow-color} 12%, transparent)'
+        }
+      ]
+    },
+    backdrop: {
+      $type: 'color',
+      $value: 'rgb(0 0 0 / .7)'
+    },
+
+    success: {
+      bg: {
+        $type: 'color',
+        $value: '{status.success.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.success.fg}'
+      }
+    },
+    info: {
+      bg: {
+        $type: 'color',
+        $value: '{status.info.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.info.fg}'
+      }
+    },
+    warning: {
+      bg: {
+        $type: 'color',
+        $value: '{status.warning.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.warning.fg}'
+      }
+    },
+    error: {
+      bg: {
+        $type: 'color',
+        $value: '{status.danger.background.color}'
+      },
+      fg: {
+        $type: 'color',
+        $value: '{status.danger.fg}'
+      }
+    },
+    confirm: {
+      bg: {
+        $type: 'color',
+        $value: 'hsl(277deg 72% 45%)'
+      },
+      fg: {
+        $type: 'color',
+        $value: '#fff'
+      }
+    },
+
+    heading: {
+      font: {
+        family: {
+          $type: 'fontFamily',
+          $value: '{headings.font.family}'
+        },
+        size: {
+          $type: 'dimension',
+          $value: '{headings.h2.font.size}'
+        },
+        weight: {
+          $type: 'dimension',
+          $value: '{headings.font.weight}'
+        },
+      },
+      'line-height': {
+        $type: 'dimension',
+        $value: '{headings.line-height}'
+      }
+    },
+    text: {
+      font: {
+        family: {
+          $type: 'fontFamily',
+          $value: '{font.family}'
+        },
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.base}'
+        },
+      }
+    }
+  }
+};
+