@massimo-cassandro/minimo 1.18.4 → 1.19.1

package/src/web-components/TODO json-table/src/js/main-builder.js

@@ -1,87 +0,0 @@
-import * as styles from '../css/main-builder.module.css';
-import { classnames } from '@massimo-cassandro/js-utilities/index.js';
-import { domBuilder } from '@massimo-cassandro/dom-builder/index.js';
-
-export function mainBuilder() {
-
-  /*
-  <section class="wrapper">
-    <div class="infoOuterContainer">
-      <!-- content -->
-    </div>
-
-    <div class="tableWrapper">
-      <table>
-        <caption>Static table demo</caption>
-        <thead>
-          <!-- thead rows -->
-        </thead>
-        <tbody>
-          <!-- tbody rows -->
-        </table>
-      </table>
-    </div>
-
-  </section>
-  */
-
-  domBuilder([
-    {
-      tag: 'section',
-      className: classnames(styles.wrapper, this.params.mainWrapperExtraClassName),
-      children: [
-        ...this.infoSection(),
-        ...this.tableBuilder()
-      ]
-    }
-  ], this.params.container);
-
-  if(!this.params.ajax) {
-    this.params.elements.tbodyRows = this.params.elements.table.querySelectorAll('tbody tr');
-  }
-
-  this.updateInfo();
-  this.setSearchListener();
-  this.setSortListeners();
-
-
-  // TODO pagination => https://www.taniarascia.com/front-end-tables-sort-filter-paginate/
-
-
-
-  // TODO check custom event
-  // ready customEvent
-  const event = new CustomEvent('jt:ready', { detail: { jsonTable: this }, bubbles: true });
-  // dispatch into the next microtask so any listeners registered immediately after the instance can intercept it
-  Promise.resolve().then(() => this.params.container.dispatchEvent(event));
-}
-
-
-/*
-// TODO resize observer per calcolo altezza infoOuterContainer
-
-// TODO wrapper con altezza definita per abilitare il thead sticky
-//     stabilire una proprietà css per lo spazio dal bordo inferiore del viewport e definire l'altezza di conseguenza.
-//     Oppure impostare una variabile per altezza arbitraria.
-//     Da ricalcolare con resize observer??
-
-
-const infoSection = document.querySelector('.infoOuterContainer');
-const tableWrapper = document.querySelector('.tableWrapper');
-
-if (infoSection && tableWrapper) {
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      // Prende l'altezza esatta dell'elemento incluse le variazioni responsive
-      const height = entry.contentRect.height +
-                     parseFloat(getComputedStyle(infoSection).paddingTop) +
-                     parseFloat(getComputedStyle(infoSection).paddingBottom);
-
-      tableWrapper.style.setProperty('--js-thead-sticky-top', `${height}px`);
-    }
-  });
-
-  resizeObserver.observe(infoSection);
-}
-
- */

package/src/web-components/TODO json-table/src/js/parse-data-row.js

@@ -1,123 +0,0 @@
-/**
- * Parses a data row and prepares it for rendering, searching, and sorting
- *
- * @param {Object} dataRow - The data row object to parse
- * @param {Object} dataRow.idx - Row unique index, if needed (static tables only)
- * @returns {void}
- * @description This function processes a single data row by:
- * - Adding unique identifiers to rows if needed
- * - Extracting and parsing cell content using custom parse functions or dataType parsers
- * - Rendering content using custom render functions
- * - Storing parsed data (raw, display, searching, and sorting values) for efficiency
- * @note Only works on static tables or on AJAX mode with specific dataRow object
- */
-
-import { isFunction } from './utilities.js';
-import * as iconStyles from '../css/icons.module.css';
-import { classnames } from '@massimo-cassandro/js-utilities/index.js';
-
-export function parseDataRow({
-  dataRow = {},
-  idx = null,
-  isTbody = true
-}){
-
-  try {
-
-    const parsedRow = {};
-
-    // adding unique index (static table only)
-    if(idx != null) {
-      parsedRow.jtId = idx;
-    }
-
-    // exclude any unnecessary data
-    this.params.columns.forEach(col => {
-
-
-      let raw_content, content;
-
-      const datatypeObj = this.params.dataTypes[col.dataType]?? {};
-
-      if(col.parse && isFunction(col.parse)) {
-        raw_content = col.parse(dataRow);
-      } else {
-        raw_content = dataRow[col.key];
-      }
-
-      // if parent is 'tfoot', columns with `tfoot: false` in their column definitions are not rendered
-      if(!isTbody && !col.tfoot) {
-        content = '';
-
-      } else if(raw_content === 0 && this.params.useZeroAltChar) {
-        content = this.params.zeroAltChar;
-
-      // All `render` functions are invoked with the `raw_content` value and the global params object as arguments
-      } else if(col.render && isFunction(col.render)) {
-        content = col.render(raw_content, this.params);
-
-      } else if(col.dataType && isFunction(datatypeObj?.render)) {
-        content = datatypeObj.render(raw_content, this.params);
-
-      } else  if(raw_content == null) {
-        content = '';
-
-      } else {
-        content = raw_content;
-      }
-
-      parsedRow[col.key] = {
-        raw: raw_content,
-        type: col.dataType,
-        // datatypeObj: datatypeObj,
-        displayValue: content,
-      };
-
-      parsedRow[col.key].className = classnames(
-        col.className,
-
-        // any default classes defined by the cell's dataType
-        col.dataType? this.params.dataTypes[col.dataType]?.className : null,
-
-        // custom bool icons
-        this.params.boolValuesClassName,
-        this.params.boolTrueClassName && parsedRow[col.key].raw === true
-          ? this.params.boolTrueClassName
-          : null,
-        this.params.boolFalseClassName && parsedRow[col.key].raw === false
-          ? this.params.boolFalseClassName
-          : null,
-
-        // default icon styles
-        !this.params.boolValuesClassName
-          ? parsedRow[col.key].raw === true
-            ? iconStyles.true
-            : iconStyles.false
-          : null
-      );
-
-      if(isTbody && !this.params.ajax) {
-        parsedRow[col.key].searchingValue = col.searchValueCustomParser != null
-          ? col.searchValueCustomParser(raw_content, this.params)
-          : datatypeObj.searchValueParser
-            ? datatypeObj.searchValueParser(raw_content, this.params)
-            : String(raw_content);
-
-        parsedRow[col.key].sortingValue = col.sortValueCustomParser != null
-          ? col.sortValueCustomParser(raw_content, this.params)
-          : datatypeObj.sortValueParser
-            ? datatypeObj.sortValueParser(raw_content, this.params)
-            : raw_content;
-      }
-
-    }); // end foreach
-
-    return parsedRow;
-
-  } catch(e) {
-    console.error( e ); // eslint-disable-line
-  }
-
-
-
-}

package/src/web-components/TODO json-table/src/js/parse-params.js

@@ -1,118 +0,0 @@
-
-import { defaults_params, columns_default } from './defaults.js';
-import { defaultDataTypes } from './default-columns-data-types.js';
-
-export function parseParams({custom_params = {}, custom_data_types = {}}) {
-
-  try {
-
-
-    const params = {
-      ...defaults_params,
-      ...(JSON.parse(custom_params?.container?.dataset?.params?? null)?? {}), // params from `data-params` attribute
-      ...custom_params
-    };
-
-    if(!params.container || !(params.container instanceof HTMLElement)) {
-      throw '`container` parameter not present or not a DOM element';
-    }
-
-    // ENHANCEMENT jqDatatableCompliant
-    // temporarily force `jqDatatableCompliant` to true
-    params.jqDatatableCompliant = true;
-
-
-
-    // ENHANCEMENT download btn
-    // if(params.ajax === true) {
-    //   params.showDownloadBtn = false;
-    // }
-
-
-    // =>> DATA TYPES
-    // parse default datatypes
-    params.dataTypes = defaultDataTypes(params);
-
-    // if custom_data_types are provided, they are merged with the one defined in the `inheritsFrom` key
-    if(Object.keys(custom_data_types).length) {
-
-      for(const key in custom_data_types) {
-        if(custom_data_types[key].inheritsFrom) {
-          custom_data_types[key] = {
-            ...params.dataTypes[custom_data_types[key].inheritsFrom],
-            ...custom_data_types[key]
-          };
-        }
-      }
-      // merge custom data types with the default ones
-      params.dataTypes = {...params.dataTypes, ...custom_data_types};
-    }
-
-
-    // check if the dataTypes are valid
-    const dataTypesList = Object.keys(params.dataTypes);
-    params.columns.forEach(col => {
-      if(col.dataType && !dataTypesList.includes(col.dataType)) {
-        throw `JsonTable: Invalid data type for column with key '${col.key}' (${col.dataType})`;
-      }
-    });
-
-
-    // =>> COLUMNS
-
-    // build columns definition array
-    params.columns = params.columns.map(col => {
-
-      const inheritedDatatype = params.dataTypes[col.dataType]?.inheritsFrom?? null;
-
-      return {
-        // default values
-        ...columns_default,
-
-        // override values for columns with specific dataTypes (from the `colDefaultsOverrides` object in dataTypes)`)
-        ...(params.dataTypes[col.dataType]?.colDefaultsOverrides?? {}),
-
-        // same, from the inherited dataType, if exists
-        ...(inheritedDatatype? params.dataTypes[inheritedDatatype].colDefaultsOverrides?? {} : {}),
-
-        // user settings
-        ...col
-      };
-    });
-
-
-    // columns key list and check for missing ones
-    params.fieldKeysList = params.columns.reduce((acc, col, idx) => {
-      if(!col.key) {
-        throw `JsonTable: Missing key for column #${idx}`;
-      }
-      acc.push(col.key);
-      return acc;
-    }, []);
-
-    // default sorting check
-    params.defaultSorting??= {}; // force null to empty object
-
-    Object.keys(params.defaultSorting).forEach(sort_key => {
-
-      if(!params.fieldKeysList.includes(sort_key)) {
-        throw `JsonTable: Invalid sort key '${sort_key}'`;
-      }
-
-      // force sorting direction to lowercase
-      params.defaultSorting[sort_key] = params.defaultSorting[sort_key].toLowerCase();
-      if(['asc', 'desc'].indexOf(params.defaultSorting[sort_key]) === -1) {
-        throw `JsonTable: Invalid sorting direction for column with key '${sort_key}' `+
-          `(${params.defaultSorting[sort_key]} instead of 'sort' or 'desc')`;
-      }
-    });
-
-    return params;
-
-  } catch(e) {
-    return {err: e};
-  }
-
-}
-
-

package/src/web-components/TODO json-table/src/js/set-search-listener.js

@@ -1,62 +0,0 @@
-
-/**
- * Listener for search input
- */
-
-// TODO form ricerca: prevedere salvataggio dati ricerca nel sessionstorage
-// TODO form ricerca: datalist
-
-export function setSearchListener(){
-  const searchInput = this.params.elements.searchInput;
-
-  if(searchInput && this.params.search) {
-
-    let searchtimer;
-    searchInput.addEventListener('input', () => {
-      clearTimeout(searchtimer);
-      searchtimer = setTimeout(() => {
-        const toBeSearchedValue = searchInput.value.trim();
-
-        const test_regexp = new RegExp(toBeSearchedValue, 'i');
-        if(this.ajax) {
-          // TODO ajax search
-
-        } else {
-
-
-
-          this.params.elements.tbodyRows.forEach(tr => {
-            const rowId = +tr.dataset.jtId;
-
-            let result = false;
-            tr.querySelectorAll('th, td').forEach(cell => {
-              const cellData = this.parsedData.filter(data => // parsedData is generated into `table-row.js` for static data only
-                data.rowId === rowId &&
-                data.key === cell.dataset.key
-              )?.[0]?? null;
-
-              const found = cellData != null
-                ? toBeSearchedValue? test_regexp.test(cellData.searchingValue) : true // if toBeSearchedValue is an empty string all rows are returned
-                : false;
-
-              cell.innerHTML = (toBeSearchedValue && cellData != null)
-                ? cellData.displayValue.replace(
-                  RegExp('(?![^<]*>)' + toBeSearchedValue, 'ig'), // ignores matches occurring inside html tags
-                  `<mark>${toBeSearchedValue}</mark>`
-                )
-                : cellData.displayValue;
-
-              result = result || found;
-            });
-
-            tr.toggleAttribute('hidden', !result);
-          });
-        }
-
-        this.updateInfo();
-
-      }, 400);
-
-    }, false);
-  }
-}

package/src/web-components/TODO json-table/src/js/set-sort-listeners.js

@@ -1,115 +0,0 @@
-import * as styles from '../css/table.module.css';
-import { domBuilder } from '@massimo-cassandro/dom-builder/index.js';
-
-// TODO defaultSorting => conversione nel formato datatable se jqDatatableCompliant = true
-
-export function setSortListeners(){
-
-  this.params.activeSorting = { ...this.params.defaultSorting }; // to preserve the original sorting
-
-  this.params.elements.thead.addEventListener('click', e => {
-
-    const hasShiftKey = e.shiftKey,
-      sortBtn = e.target.closest(`.${styles.sortArrow}`);
-
-    if( sortBtn ) {
-      const columnKey = sortBtn.closest('th').dataset.key;
-
-      // each click activate a sort direction in this order: asc, desc or none (null)
-      const newDirection = this.params.activeSorting[columnKey] == null
-        ? 'asc'
-        : this.params.activeSorting[columnKey] === 'asc'
-          ? 'desc'
-          : null;
-
-      if(!hasShiftKey) {
-        this.params.elements.thead.querySelectorAll(`.${styles.sortActive}`).forEach(el => {
-          el.classList.remove(styles.sortActive);
-        });
-        this.params.activeSorting = {};
-      }
-
-      // TODO aria attrs (vedi sotto)
-
-      sortBtn.classList.toggle(styles.sortActive, newDirection != null);
-      this.params.activeSorting[columnKey] = newDirection;
-
-
-      // TODO wait for shift click ending
-      if (this.params.ajax) {
-        // TODO ajax sorting (vedi datatable-like url in _work)
-
-      } else {
-
-        const sorted = this.staticDataSorting();
-
-        domBuilder(
-          sorted.map( row_data => this.tableRow(row_data)),
-          this.params.elements.tbody,
-          {emptyParent: true}
-        );
-
-      }
-    }
-
-  }, false);
-}
-
-
-/*
-Per rendere accessibile un pulsante di ordinamento all'interno di una cella di intestazione (`<th>`), non basta l'aspetto visivo. È necessario comunicare agli screen reader la funzione del pulsante e, soprattutto, lo **stato corrente** dell'ordinamento.
-
-Ecco gli attributi ARIA e i ruoli fondamentali da utilizzare:
-
----
-
-### 1. Attributi ARIA Fondamentali
-
-Quando un pulsante controlla l'ordinamento, l'attributo più importante risiede sulla cella genitore (`<th>`), mentre il pulsante gestisce l'interazione.
-
-* **`aria-sort` (sull'elemento `<th>`):**
-Indica se la colonna è ordinata e in quale direzione. I valori possibili sono:
-* `ascending`: Ordinamento crescente.
-* `descending`: Ordinamento decrescente.
-* `none`: La colonna è ordinabile ma non è attualmente ordinata.
-
-
-* **`aria-label` o testo descrittivo (sul pulsante):**
-Il pulsante deve avere un nome accessibile chiaro. Invece di un generico "Ordina", è meglio usare "Ordina per [Nome Colonna]".
-* **`aria-pressed` (opzionale sul pulsante):**
-Se vuoi indicare che il pulsante è "attivo", puoi usare questo stato, anche se `aria-sort` sul `th` è solitamente sufficiente per il contesto della tabella.
-
----
-
-### 2. Struttura del Codice (Esempio)
-
-Ecco come implementare correttamente il pattern per una colonna che viene ordinata in modo crescente:
-
-```html
-<th scope="col" aria-sort="ascending">
-  <button type="button" aria-label="Ordina per Nome in modo decrescente">
-    Nome
-    <span aria-hidden="true">↑</span>
-  </button>
-</th>
-
-```
-
-### 3. Best Practices per l'Accessibilità
-
-* **Non usare `role="button"` su tutto:** Se usi il tag HTML `<button>`, il ruolo è implicito. Non serve aggiungerlo manualmente.
-* **Gestione del Focus:** Quando l'utente clicca sul pulsante e la tabella si aggiorna, il focus deve rimanere sul pulsante stesso per permettere di cambiare nuovamente l'ordinamento senza dover navigare di nuovo l'intera pagina.
-* **Aggiornamento Dinamico:** Quando lo stato cambia da crescente a decrescente, devi aggiornare via JavaScript sia l'attributo `aria-sort` sul `<th>` che l' `aria-label` (o il testo nascosto) sul pulsante.
-* **Icone:** Se usi icone (come frecce), nascondile agli screen reader con `aria-hidden="true"`, poiché l'informazione è già fornita dagli attributi ARIA.
-
----
-
-### Riepilogo degli Stati
-
-| Stato della Colonna | Valore `aria-sort` (su `th`) | Suggerimento `aria-label` (su `button`) |
-| --- | --- | --- |
-| Non ordinata | `none` | "Ordina per [Nome]" |
-| Crescente (A-Z) | `ascending` | "Ordina decrescente" |
-| Decrescente (Z-A) | `descending` | "Rimuovi ordinamento" o "Ordina crescente" |
-
-*/

package/src/web-components/TODO json-table/src/js/static-data-sorting.js

@@ -1,23 +0,0 @@
-
-
-export function staticDataSorting(useDefaultSorting = false) {
-
-
-  const sortingObj = useDefaultSorting? { ...this.params.defaultSorting?? {} } : { ...this.params.activeSorting?? {} };
-
-  if(Object.keys(sortingObj)) {
-
-    // parsedData is generated into `table-row.js` for static data only
-    // return this.parsedData.toSorted( (a, b) => {
-
-    //   let ts = (a.ts === null) - (b.ts === null) || a.ts - b.ts;
-    //   let rk = b.rk - a.rk;
-    //   return ts || rk;
-    // });
-    return this.params.data;
-
-  } else {
-    return this.params.data;
-  }
-
-}

package/src/web-components/TODO json-table/src/js/table-builder.js

@@ -1,45 +0,0 @@
-import { classnames } from '@massimo-cassandro/js-utilities/index.js';
-
-import * as styles from '../css/table.module.css';
-
-
-
-export function tableBuilder() {
-  return [
-    {
-      className: styles.tableWrapper,
-      children: [
-        {
-          tag: 'table',
-          className: classnames(styles.table, this.params.tableClassName),
-          id: this.params.tableId,
-          callback: el => this.params.elements.table = el,
-          children: [
-            {
-              tag: 'caption',
-              condition: !!this.params.caption,
-              content: this.params.caption
-            },
-            // thead
-            this.tableThead(),
-
-            // tbody
-            {
-              tag: 'tbody',
-              callback: el => this.params.elements.tbody = el,
-
-              children: this.params.ajax
-                ? [] // TODO  dati da ajax
-                : this.params.data.map(row_data => this.tableRow(row_data))
-            },
-
-            // tfoot
-            // TODO tfoot ajax ???
-            this.tableTfoot(),
-
-          ]
-        }
-      ]
-    }
-  ];
-}

package/src/web-components/TODO json-table/src/js/table-row.js

@@ -1,43 +0,0 @@
-import { isFunction } from './utilities.js';
-
-
-export function tableRow(row_data, parent = 'tbody') {
-
-  // parent: tbody or tfoot
-
-  return {
-    tag: 'tr',
-    attrs: {
-      'data-jt-id': (!this.params.ajax) && parent === 'tbody'? row_data.jtId : null
-    },
-    children: this.params.columns.map((col, i) => {
-
-      const parsedData = this.params.ajax
-        ? this.parseDataRow({
-          dataRow: row_data,
-          isTbody: parent === 'tbody'
-        })
-        : row_data; // Static data has already been parsed at startup
-
-
-      const tag = col.rowHeading && i === 0? 'th' : 'td';
-
-      return {
-        tag: tag,
-        className: parsedData[col.key]?.className,
-        attrs: {
-          scope: tag === 'th'? 'row' : null,
-          'data-key': col.key,  // key for cell data
-        },
-        content : parsedData[col.key].displayValue
-      }; // end cell
-    }), // end columns map
-
-    // tr callback => eseguito al completamento della costruzione della tabella in main-builder
-    callback: isFunction(this.params.trCallback) && parent === 'tbody'
-      ? tr => this.params.trCallback(tr, row_data, this.params)
-      : null
-
-  }; // end tr
-
-}

package/src/web-components/TODO json-table/src/js/table-tfoot.js

@@ -1,9 +0,0 @@
-
-export function tableTfoot() {
-
-  return {
-    tag: 'tfoot',
-    condition: this.params.footerData.length,
-    children:this.params.footerData.map(row_data => this.tableRow(row_data, 'tfoot'))
-  };
-}