@massimo-cassandro/minimo 1.29.1 → 1.29.3

package/src/web-components/s-datatable-component/s-datatable-component.module.css

@@ -0,0 +1,220 @@
+
+/* frontend/src/web-components/s-datatable-component.module.css */
+
+/* import delle custom properties gestito da jit-props */
+
+
+/* purgecss start ignore */
+
+/* .datatable-wrapper.no-header .datatable-container {
+border-top: 1px solid #d9d9d9;
+} */
+.datatableWrapper {
+  margin-block: var(--size-md);
+}
+
+.topArea {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 2rem;
+  align-items: center;
+  justify-content: flex-end;
+  padding-block-end: var(--size-xs);
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:has(.info), &:has(:global(.datatable-top-slot)) {
+    justify-content: space-between;
+  }
+}
+
+.searchWrapper {
+  max-width: 50%;
+}
+
+.table {
+  margin-block: 0;
+  border-block: var(--_border); /* definito in minimo table */
+
+  thead {
+    th:has(.sortBtn) {
+      padding-inline-end: 0;
+    }
+  }
+
+}
+
+/* cella unica per indicare l'assenza di record */
+.empty {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-block: var(--size-sm) !important;
+  font-style: italic;
+  color: var(--text-muted);
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+}
+
+.hasIcon {
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+  svg {
+    display: inline-block;
+    width: 1.05em;
+  }
+}
+
+
+[data-sortable='true'] {
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--sdt-thead-hover-background-color);
+    }
+  }
+
+  .sortBtn {
+    padding: 0 1.5em 0 0;
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: .1em;
+      display: block;
+      width: 1em;
+      height: 1em;
+      translate: 0 -50%;
+    }
+  }
+
+  &:not(.sortAscending):not(.sortDescending){
+    .sortBtn::after {
+      content: url('../../icons/arrows-down-up.svg?cssInline');
+      opacity: .4;
+    }
+  }
+}
+.sortAscending {
+  .sortBtn::after {
+    content: url('../../icons/arrow-up.svg?cssInline');
+  }
+}
+.sortDescending {
+  .sortBtn::after {
+    content: url('../../icons/arrow-down.svg?cssInline');
+  }
+}
+
+.sortBtn {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  line-height: var(--table-cell-line-height);
+
+  text-align: start;
+}
+
+/* stylelint-disable selector-class-pattern */
+:global(.text-start), :global(.text-left) {
+  .sortBtn {
+    text-align: start;
+  }
+}
+:global(.text-end), :global(.text-right) {
+  .sortBtn {
+    text-align: end;
+  }
+}
+:global(.text-center) {
+  .sortBtn {
+    text-align: center;
+  }
+}
+/* stylelint-enable selector-class-pattern */
+
+.bottomArea {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--size-md);
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  margin-block-start: var(--size-xs);
+}
+.info {
+  font-size: var(--font-size-sm);
+  font-style: italic;
+  color: var(--text-muted);
+}
+
+/* pagination */
+/* .paginationNav {} */
+.paginationList, .paginationListItem, .paginationListItemBtn {
+  padding: 0;
+  margin: 0;
+}
+
+.paginationList {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  list-style: none;
+}
+.paginationListItem {
+  border: var(--sdt-pagination-border);
+  border-style: solid solid solid none;
+
+  &:first-child {
+    border-inline-start-style: solid;
+    border-radius: var(--radius-xxs) 0 0 var(--radius-xxs);
+  }
+  &:last-child {
+    border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--sdt-hover-color);
+      background-color: var(--sdt-hover-background-color);
+    }
+  }
+
+}
+
+.paginationDisabled {
+  pointer-events: none;
+
+  .paginationListItemBtn {
+    opacity: .7;
+  }
+}
+
+.paginationActive {
+  color: var(--sdt-hover-color);
+  background-color: var(--sdt-hover-background-color);
+}
+
+.paginationListItemBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--sdt-pagination-padding-block) var(--sdt-pagination-padding-inline);
+  color: inherit;
+  background-color: transparent;
+  border: none;
+
+  &.hasSvg {
+    padding-inline: calc(var(--sdt-pagination-padding-inline) / 2);
+  }
+
+  svg {
+    width: 1em;
+    aspect-ratio: 1;
+    fill: currentColor;
+  }
+}
+
+/* purgecss end ignore */

package/src/web-components/s-datatable-component/simple-datatable.minimo.tokens.mjs

@@ -0,0 +1,47 @@
+export default {
+  sdt: {
+    thead: {
+      hover: {
+        background: {
+          color: {
+            $value: 'color-mix(in srgb, {table.thead.background.color} 90%, {accent})',
+            $type: 'color'
+          }
+        }
+      }
+    },
+
+    pagination: {
+      border: {
+        $type: 'border',
+        $value: {
+          color: '{neutral.100}',
+          width: '{btn.border.width}',
+          // style: 'solid'
+        }
+      },
+      padding: {
+        block: {
+          $value: '{size.xxs}',
+          $type: 'dimension'
+        },
+        inline: {
+          $value: '{size.xs}',
+          $type: 'dimension'
+        },
+      }
+    },
+    hover: {
+      background: {
+        color: {
+          $value: '{btn.primary.background.color}',
+          $type: 'color'
+        }
+      },
+      color: {
+        $value: '{btn.primary.color}',
+        $type: 'color'
+      }
+    }
+  }
+};

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

@@ -0,0 +1,158 @@
+// @ts-nocheck
+
+// pre-elaborazione tipi dati predefiniti
+// le chiavi che cominciano con '_' sono di questa applicazione, le altre sono di simple-datatable
+
+import { classnames } from '../../../../index.js';
+
+import * as styles from '../s-datatable-component.module.css';
+
+import checkIcon from '../../../icons/check-bold.svg?inline';
+import xIcon from '../../../icons/x-bold.svg?inline';
+
+// col_obj è l'oggetto che descrive una singola colonna del datatable
+// viene utilizzato per produrre l'oggetto columns di simple-datatable
+export function parseCols(col_obj){
+
+
+  if(col_obj.render == null) {
+
+    // campi template
+    if(col_obj._renderTpl) {
+
+      return {
+        ...col_obj,
+        type: col_obj.type?? 'html',
+
+        // render: (value, cell /*, dataIndex, rowIndex */) => {
+
+        //   cell.attributes['data-order'] = value.replace(/(<([^>]+)>)/ig,'');
+        //   return value;
+        //   // non viene elaborato qui perché non è possibile raggiungere la riga del json
+        //   // return `<a href="${col_obj._href}">${value}</a>`;
+        // }
+
+      };
+
+    } else if(col_obj._renderMode === 'id') {
+
+      return {
+        ...col_obj,
+        type: 'number',
+        searchable: false,
+        cellClass: 'text-end',
+        headerClass: 'text-end',
+      };
+
+    } else if(col_obj._renderMode === 'email') {
+      return {
+        ...col_obj,
+        type: 'string',
+        render: value => value.text?.replace('@', '<wbr />@<wbr />')
+      };
+
+    // campi booleani
+    } else if (col_obj.type === 'boolean' || col_obj._renderMode === 'bool_true_only') {
+      // TODO caso in cui il valore è null nel caso si voglia differenziarlo da false
+
+      return {
+        ...col_obj,
+        type: 'boolean',
+        cellClass: styles.hasIcon,
+        headerClass: 'text-center',
+        render: (value, td) => {
+
+          if(Boolean(value)) {
+            td.attributes.class = classnames(td.attributes.class, 'text-success');
+            return checkIcon;
+          } else {
+            td.attributes.class = classnames(td.attributes.class, 'text-danger');
+            return col_obj._renderMode === 'bool_true_only'? '' : xIcon;
+          }
+        }
+      };
+
+    // campi date e datetime, symfony e no
+    // nel caso di datetime/date symfony, il valore è stato già preelaborato da _load
+    } else if(['sf_datetime', 'sf_date', 'date', 'datetime'].includes(col_obj._renderMode)) {
+
+      const _isDatetime = ['sf_datetime', 'datetime'].includes(col_obj._renderMode);
+
+      return {
+        ...col_obj,
+        type: 'string',
+        cellClass: 'text-end',
+        headerClass: 'text-end',
+
+        render: (value, cell /*, dataIndex, rowIndex */) => { // value si riferisce al valore già trasformato nella pre-elaborazione dei dati
+          /* {
+            "date": "2026-03-31 07:54:31.000000",
+            "timezone_type": 3,
+            "timezone": "UTC"
+          } */
+
+          if(value == null) {
+            cell.attributes['data-order'] = ' ';
+            return '\u2014';
+
+          } else {
+
+            const dateObj = new Date(value);
+
+
+            cell.attributes['data-order'] = _isDatetime? value : value.substring(0,10);
+
+            return `<span class="text-nowrap">${dateObj.toLocaleString('it-IT', {
+              year: '2-digit',
+              month: 'short',
+              day: 'numeric',
+            })}</span>` +
+              (_isDatetime
+                ? `\u2009<span class="text-xs">${dateObj.toLocaleString('it-IT', {
+                  hour12: false,
+                  hour:'2-digit',
+                  minute:'2-digit'
+                })}</span>`
+                : '');
+          }
+
+        }
+      };
+
+    } else if(col_obj._renderMode === 'numeric') {
+      return {
+        ...col_obj,
+        // le classi definite dall'utente vengono unite, non sostituite
+        cellClass: classnames('text-end text-numeric', col_obj.cellClass),
+        headerClass: classnames('text-end text-numeric', col_obj.headerClass), // NB: usata anche per il footer
+      };
+
+    } else if(col_obj._renderMode === 'euro_no_dec') {
+      return {
+        ...col_obj,
+        render: (value, cell) => {
+          // console.log(value);
+          if(value == null || isNaN(value)) {
+            cell.attributes['data-order'] = '';
+            return '\u2014';
+
+          } else {
+            cell.attributes['data-order'] = value;
+            return Number(value).toLocaleString('it-IT', {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 0,
+              useGrouping: 'always',
+            });
+          }
+        },
+        // le classi definite dall'utente vengono unite, non sostituite
+        cellClass: classnames('text-nowrap text-end text-numeric', col_obj.cellClass),
+        headerClass: classnames('text-nowrap text-end text-numeric', col_obj.headerClass), // NB: usata anche per il footer
+        type: 'number'
+      };
+
+    }
+  } // end if not render
+
+  return col_obj;
+}

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

@@ -0,0 +1,84 @@
+// @ts-nocheck
+
+// Generazione della `searchMethod` di colonna usata da `_searchValue`.
+//
+// simple-datatables NON passa alla searchMethod il nodo DOM della cella, ma
+// l'oggetto dati interno `cellType` ({ data, text?, order?, attributes? }):
+// vedi `multiSearch` in `src/datatable.ts` (`customSearchMethod(queryColumnWord,
+// searchRow[index], row, index, source)`). Gli `attributes` sono conservati
+// nell'oggetto dati (`readDataCell` in `src/read_data.ts` ammette le chiavi
+// "text", "order", "data", "attributes"), quindi `data-search` va letto da
+// `cell.attributes['data-search']`, non con `cell.getAttribute()`.
+
+// Punteggiatura rimossa quando `ignorePunctuation` è attivo
+const PUNCTUATION_RX = /[.,/#!$%^&*;:{}=\-_`~()]/g;
+
+/**
+ * Normalizza una stringa replicando il trattamento che simple-datatables
+ * applica ai termini di ricerca quando è attiva una `searchMethod` personalizzata.
+ *
+ * La libreria normalizza solo i termini digitati (non il contenuto della cella),
+ * con i default `sensitivity: 'base'` e `ignorePunctuation: true`: se l'haystack
+ * non riceve lo stesso trattamento, "citta" non troverebbe "Città" e "spa" non
+ * troverebbe "S.p.A.".
+ *
+ * @param {*} str Valore da normalizzare (convertito con String()).
+ * @param {object} [opts] (default: {})
+ * @param {'base'|'accent'|'case'|'variant'} [opts.sensitivity='base']
+ *        'base'    → ignora maiuscole/minuscole e diacritici
+ *        'accent'  → ignora maiuscole/minuscole, mantiene i diacritici
+ *        'case'    → distingue maiuscole/minuscole, ignora i diacritici
+ *        'variant' → distingue tutto (default: 'base')
+ * @param {boolean} [opts.ignorePunctuation=true] (default: true)
+ * @returns {string}
+ */
+export function normalizeSearchString(str, opts = {}) {
+  const sensitivity       = opts.sensitivity       ?? 'base';
+  const ignorePunctuation = opts.ignorePunctuation ?? true;
+
+  // String() anche su numeri/booleani: `_searchValue` come funzione può
+  // restituire un id numerico o un flag
+  let out = String(str ?? '');
+
+  if (sensitivity === 'base' || sensitivity === 'accent') {
+    out = out.toLowerCase();
+  }
+  if (sensitivity === 'base' || sensitivity === 'case') {
+    out = out.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+  }
+  if (ignorePunctuation) {
+    out = out.replace(PUNCTUATION_RX, '');
+  }
+
+  return out;
+}
+
+/**
+ * Restituisce la `searchMethod` di colonna per le colonne con `_searchValue`.
+ *
+ * API simple-datatables: (terms, cell, row, colIdx, source) => boolean
+ * - `terms` array di stringhe (una per parola cercata), già normalizzate dalla libreria
+ * - `cell`  oggetto dati `cellType` ({ data, text?, order?, attributes? })
+ *
+ * Comportamento AND: tutti i termini devono essere presenti
+ * (come nella demo https://fiduswriter.github.io/simple-datatables/demos/22-and-search/).
+ *
+ * @param {object} [colSettings] Definizione della colonna (per `sensitivity` / `ignorePunctuation`). (default: {})
+ * @returns {(terms: string[], cell: object) => boolean}
+ */
+export function makeSearchMethod(colSettings = {}) {
+  const opts = {
+    sensitivity:       colSettings.sensitivity,
+    ignorePunctuation: colSettings.ignorePunctuation,
+  };
+
+  return (terms, cell) => {
+    const raw = cell?.attributes?.['data-search']
+      ?? cell?.text
+      ?? (typeof cell?.data === 'string' || typeof cell?.data === 'number' ? cell.data : '');
+
+    const haystack = normalizeSearchString(raw, opts);
+
+    return terms.every(term => haystack.includes(normalizeSearchString(term, opts)));
+  };
+}