@massimo-cassandro/minimo 0.1.0

package/src/components/auto-datatable/auto-datatable.js

@@ -0,0 +1,154 @@
+/* global process */
+
+import 'jquery?as_asset';
+import 'datatables.net/js/jquery.dataTables.js?as_asset';
+
+import { spinner } from '@minimo/spinner.js';
+import svg_icons from '@imgs/icone.svg';
+
+import { creaDT } from '@massimo-cassandro/auto-datatables-bs5';
+import './auto-datatable.css?inline';
+/*
+per personalizzazioni datatable
+da usare insieme alle opzioni globali
+
+  import {default_dt_options} from 'path/to/datatable.js';
+  import { dt_default_options, dt_classes } from '@massimo-cassandro/auto-datatables-bs5';
+
+  $.extend( $.fn.dataTable.ext.classes, dt_classes );
+  $(__table__).DataTable($.extend(true, {}, dt_default_options, ada_default_dt_options,
+
+    // opzioni specifiche, se necessarie, ad esempio per tabelle non ajax:
+    {
+      processing  : false,
+      serverSide  : false,
+      pageLength  : 25,
+      order       : [[ 1, 'asc' ]],
+      columns     : null
+    }
+  ));
+
+*/
+
+export const default_dt_options = {
+
+    dom:
+      // controlli
+      '<\'dt-controls\'lf>' +
+      // table + processing
+      //"<'position-relative'tr>" +
+      // table + processing
+      '<\'dt-table-wrapper\'t>r' +
+      // info + paginazione
+      '<\'dt-footer\'ip>',
+
+    // renderer: 'bootstrap',
+
+    // serverSide     : true,
+    // paging         : true,
+    // pageLength     : 25,
+    language: {
+      processing: spinner(),
+
+      lengthMenu:
+          '<di class"dt-control-label">Mostra</di>' +
+          '<div class="dt-control">_MENU_</div>' +
+          '<div>record per pagina</div>',
+      search:
+          '<div class="dt-control-label">Filtra risultati:</div>' +
+          '<div class="dt-control">_INPUT_</div>',
+    },
+
+    responsive       : true,
+    stateSave        : process.env.NODE_ENV === 'development',
+    stateDuration    : -1, //sessionStorage
+    // columnDefs       : [{
+    //   orderable      : true,
+    //   targets        : ['_all']
+    // }],
+    // ajax             : null,
+    // order            : [],
+    // columns          : []
+  }, // end dt_options
+
+  default_cdt_options = {
+
+    icone: {
+      ok  : `<svg class="icon text-success"><use href="${svg_icons}#check-circle-bold"></use></svg>`,
+      off : `<svg class="icon text-danger"><use href="${svg_icons}#x-circle-bold"></use></svg>`,
+    },
+
+    id_visible_default: true,
+
+    formats: {
+      decimals_class: 'data-dec',
+      euro_class: 'data-euro',
+
+      date: {
+        year: '2-digit',
+        month: 'short',
+        day: 'numeric'
+      },
+      time: {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit'
+      },
+      datetime: {
+        date: {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        },
+        time: {
+          hour12: false,
+          hour: '2-digit',
+          minute: '2-digit'
+        },
+        separator: ' ',  // date-time separator
+        date_wrapper: '<span class="text-nowrap"></span>', // HTML string or null or ''
+        time_wrapper: '<small></small>' // HTML string or null or ''
+      }
+    },
+
+    use_sorting_arrow: false, // se true viene aggiunta al container la classe `w-arrow` che attiva la visualizzazione delle frecce dell'ordinamento
+
+    // container_header: '', //'Risultato della ricerca', // se presente aggiunge un header prima della tabella
+
+    // container_class: 'dt-container', // classe che viene assegnata al div che contiene la tabella
+    //container_header_level: 2, // livello gerarchico dell'header (h2, h3, ecc...)
+    // table_id: 'table_result',
+    table_class: 'table table-bordered'
+    //table_caption: '',
+    //table_footer: false, // se true aggiunge una riga tfoot alla tabella, da popolare con un callback
+    //extra_info:''
+  }
+;
+
+/**
+  * _datatable
+  * crea e renderizza un datatable da un flusso json
+  *
+  */
+
+export function _datatable(container, options = {}) {
+
+  options.dt_options = {...default_dt_options, ...(options.dt_options?? {}) };
+  options.cdt_options = {...default_cdt_options, ...(options.cdt_options?? {}) };
+
+  container.innerHTML = '<div class="datatable-spinner-wrapper">' +
+      spinner() +
+    '</div>';
+
+  creaDT(container, options.cdt_options, options.dt_options, options.dt_columns?? []);
+}
+
+
+// utilizza _datatable per generare in modo automatico i datatable
+// negli elementi con classe 'dt-container'
+// i parametri datatable sono ricavati dagli attributi data di '.dt-container'
+
+document.querySelectorAll('.dt-container').forEach(container => {
+  _datatable(container);
+});
+

package/src/components/init.js

@@ -0,0 +1,7 @@
+import './modal-alert/flash-alerts.js';
+
+import '@minimo/utility/inner-nav.js';
+import '@minimo/utility/dismiss-alerts.js';
+
+
+

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

@@ -0,0 +1,32 @@
+import { mAlert } from './modal-alert.js';
+
+
+/*
+twig message labels:
+  - success
+  - notice
+  - error
+  - warning
+*/
+document.querySelectorAll('.flash-alert').forEach(item => {
+
+  mAlert({
+    // test
+    // type  : 'confirm',
+    // timer: null,
+
+    type  : item.dataset.label === 'notice'? 'warning' : item.dataset.label,
+    // title : item.message,
+    mes   : item.dataset.message
+    // use_warning_icon: true, // solo confirm
+    // ok_btn_text: 'OK',
+    // cancel_btn_text: 'Annulla',
+    // callback: function(esito) {}, // confirm: console.log( esito? 'Confermato' : 'Annullato')
+    // timer: 4000 // ms
+    // extra_btn: '<button type="button" data-confirm-result="annulla" class="stop-btn btn btn-confirm">Annulla</button>',
+    // extra_btn_selector: '.stop-btn',
+    // extra_btn_focus: true,
+
+  });
+
+});

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

@@ -0,0 +1,47 @@
+/* NB incluso nel css principale */
+
+@import '@massimo-cassandro/modal-alert';
+
+
+.modal-alert {
+  --malert-success-color: var(--status-success-color);
+  --malert-success-color-fg: var(--status-success-fg-color);
+
+  --malert-info-color: var(--status-info-color);
+  --malert-info-color-fg: var(--status-info-fg-color);
+
+  --malert-warning-color: var(--status-warning-color);
+  --malert-warning-color-fg: var(--status-warning-fg-color);
+
+  --malert-error-color: var(--status-danger-color);
+  --malert-error-color-fg: var(--status-danger-fg-color);
+
+  --malert-confirm-color: var(--status-warning-color);
+  --malert-confirm-color-fg: var(--status-warning-fg-color);
+
+  /* --malert-marks-stroke-width: 6px; */
+  --malert-backdrop: rgb(0 0 0 / .3);
+  --malert-border-radius: var(--radius-md);
+  /* --malert-box-shadow: var(--box-shadow); */
+  --malert-heading-font-family: var(--font-family);
+  /* --malert-heading-line-height: */
+  --malert-heading-font-size: 1.8rem;
+  --malert-heading-font-weigth: var(--font-size-base);
+  --malert-body-font-family: var(--font-family);
+
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+
+
+.malert-mark {
+  svg {
+    width: 7rem;
+    max-width: none;
+    height: 7rem;
+    fill: var(--malert-color-fg);
+    stroke: none;
+  }
+}

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

@@ -0,0 +1,85 @@
+// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
+
+import modalAlert from '@massimo-cassandro/modal-alert';
+
+import checkIcon from './svg/check-circle-duotone.svg?inline';
+import infoIcon from './svg/info-duotone.svg?inline';
+import confirmIcon from './svg/question-duotone.svg?inline';
+import warningIcon from './svg/warning-duotone.svg?inline';
+import errorIcon from './svg/x-circle-duotone.svg?inline';
+
+const custom_defaults = {
+
+  globals: {
+    onOpen: () => {
+      document.body.classList.add('overflow-hidden');
+    },
+    onClose: () => {
+      document.body.classList.remove('overflow-hidden');
+    },
+    cssFile: null,
+    animation: true,
+    showMarks: true,
+  },
+
+  success: {
+    title: 'Operazione completata',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    ok_btn_class: 'btn btn-success',
+    timer: 4000, // ms
+  },
+  error: {
+    title: 'Si è verificato un errore',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-danger',
+    timer: null,
+  },
+  warning: {
+    title: 'Attenzione!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    timer: null,
+  },
+  info: {
+    title: null,
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-info',
+    timer: null,
+  },
+  confirm: {
+    title: 'Confermi?',
+    mes: null,
+    ok_btn_text: 'OK',
+    cancel_btn_text: 'Cancel',
+    cancel_focus: true, // false to give focus to the ok button
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    cancel_btn_class: 'btn btn-outline-secondary',
+    callback: null,
+    timer: null
+  }
+};
+
+const marks = {
+  success: checkIcon,
+  error: errorIcon,
+  warning: warningIcon,
+  info: infoIcon,
+  confirm: confirmIcon
+};
+
+export function mAlert(params) {
+  modalAlert(params, custom_defaults, marks);
+}

package/src/components/modal-alert/svg/check-circle-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/src/components/modal-alert/svg/info-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"></path></svg>

package/src/components/modal-alert/svg/question-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/src/components/modal-alert/svg/warning-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>

package/src/components/modal-alert/svg/x-circle-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

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

@@ -0,0 +1,152 @@
+import { domBuilder, classnames } from '@node_modules/@massimo-cassandro/js-utilities/index.js';
+import { spinner } from '@minimo/spinner.js';
+import * as styles from './modal-content.module.css?inline';
+
+
+
+
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+
+export function modalContent({
+
+  /** iframe | content */
+  mode = 'iframe',
+
+  /** dialog extra class */
+  dialogClassName = null,
+
+  /** iframe url */
+  iframeUrl = null,
+
+  /** content string (markup) o array */
+  content = null,
+
+  /** content extra classname */
+  contentClassName = null,
+
+  /** dimensione modal: full, large, medium o small */
+  size = 'large',
+
+  /** padding: std (var(--spacing-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})`;
+  }
+
+  let dialog_element, dialog_inner, iframe_element = null, content_element = null;
+  const iframeLoadEventHandler = () => {
+    dialog_element.classList.add(styles.on);
+  };
+
+  if(!dialog_element) {
+
+    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);
+
+
+    dialog_element = document.querySelector(`.${styles.dialog}`);
+    dialog_inner = dialog_element.querySelector(`.${styles.dialogInner}`);
+
+    dialog_element.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
+      dialog_element.close();
+    }, false);
+
+    // listener chiusura
+    dialog_element.addEventListener('close', () => {
+
+      iframe_element?.removeEventListener('load', iframeLoadEventHandler, false);
+      iframe_element?.remove();
+      content_element?.remove();
+
+      document.body.classList.remove('overflow-hidden');
+      dialog_element.classList.remove(styles.on);
+    }, false);
+
+  }
+
+
+  // aggiunta classi extra
+  dialog_element.className = classnames(
+    styles.dialog,
+    dialogClassName,
+    styles[`size-${size}`],
+    styles[`padding-${padding}`]
+  );
+
+  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
+    }
+  ], dialog_inner);
+
+
+  document.body.classList.add('overflow-hidden');
+  dialog_element.showModal();
+  dialog_element.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);
+
+
+  } else if (mode === 'content') {
+    content_element = dialog_element.querySelector(`.${styles.contentEl}`);
+    dialog_element.classList.add(styles.on);
+  }
+
+}

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

@@ -0,0 +1,142 @@
+/* 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 */
+
+.dialog { /* dialog */
+  --modal-border-radius: var(--radius-md, 1.2rem);
+  position: fixed;
+  max-width: 80dvw;
+  max-height: 90dvh;
+  padding: 0;
+  margin: auto;
+  overflow: visible;
+  background-color: var(--body-bg-color, #fff);
+  border: none;
+  border-radius: var(--modal-border-radius);
+  box-shadow: 0 0 2rem .5rem rgb(0 0 0 / .5);
+  transition: scale .2s ease-out;
+  scale: 0;
+
+  /* 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;
+  }
+  /* stylelint-enable selector-class-pattern */
+
+  &.on {
+    scale: 1;
+  }
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: rgb(0 0 0 / .7);
+  }
+
+}
+
+.dialogInner {
+  width: 100%;
+  height: 100%;
+  padding-inline-end: var(--spacing-md);
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* scrollbar-gutter: stable; */
+  border-radius: var(--modal-border-radius);
+
+  /* stylelint-disable selector-class-pattern */
+  .padding-std & {
+    padding: var(--spacing-md) 0;
+  }
+  .padding-none & {
+    padding: 0;
+  }
+  /* stylelint-enable selector-class-pattern */
+}
+
+.modalSpinner {
+  position: relative;
+  padding-block-start: var(--spacing-2xl);
+
+  .dialog.on & {
+    display: none;
+  }
+}
+
+.iframeEl, .contentEl {
+  width: 100%;
+  overscroll-behavior: contain;
+}
+
+.iframeEl {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.contentEl {
+  min-height: 100%;
+}
+
+.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(--spacing-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);
+  }
+}
+