@massimo-cassandro/minimo 0.1.12 → 0.2.0

package/src/design-tokens/typography.minimo.tokens.jsonc

@@ -0,0 +1,120 @@
+{
+  "font": {
+
+    "family": {
+      "$value": "sans-serif",
+      "$type": "fontFamily"
+    },
+    "family-mono": {
+      "$value": "'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace",
+      "$type": "fontFamily"
+    },
+
+    "size": {
+      "base": {
+        "$value": "clamp(.9rem, .6538rem + .3846vw, 1rem)",
+        "$type": "string"
+      },
+      "xxs": {
+        "$value": "clamp(.6rem, .3538rem + .3846vw, .7rem)",
+        "$type": "string"
+      },
+      "xs": {
+        "$value": "clamp(.7rem, .4538rem + .3846vw, .8rem)",
+        "$type": "string"
+      },
+      "sm": {
+        "$value": "clamp(.8rem, .5538rem + .3846vw, .9rem)",
+        "$type": "string"
+      },
+      // "lead": {
+      //   "$value": "clamp(1rem, 0.6923rem + 0.4808vw, 1.125rem)",
+      //   "$type": "string"
+      // },
+      "md": {
+        "$value": "clamp(1.05rem, .6808rem + .5769vw, 1.2rem)",
+        "$type": "string"
+      },
+      "lg": {
+        "$value": "clamp(1.2rem, .7077rem + .7692vw, 1.4rem)",
+        "$type": "string"
+      },
+      "xl": {
+        "$value": "clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem)",
+        "$type": "string"
+      },
+      "2xl": {
+        "$value": "clamp(2rem, .7692rem + 1.9231vw, 2.5rem)",
+        "$type": "string"
+      },
+      "3xl": {
+        "$value": "clamp(2.2rem, .2308rem + 3.0769vw, 3rem)",
+        "$type": "string"
+      }
+
+    },
+
+
+    // Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/>
+    // The good line-height <https://www.thegoodlineheight.com/>
+
+    "line-height": {
+      "base": {
+        "$value": "1.5",
+        "$type": "number"
+      }
+    },
+
+    "style": {
+      "base": {
+        "$value": "normal",
+        "$type": "string"
+      }
+
+    },
+
+
+    "weight": {
+      "xxlight": {
+        "$value": "100",
+        "$type": "string",
+        "$description": ""
+      },
+      "xlight": {
+        "$value": "200",
+        "$type": "string",
+        "$description": ""
+      },
+      "light": {
+        "$value": "300",
+        "$type": "string",
+        "$description": ""
+      },
+      "regular": {
+        "$value": "400",
+        "$type": "string",
+        "$description": ""
+      },
+      "medium": {
+        "$value": "500",
+        "$type": "string",
+        "$description": ""
+      },
+      "semibold": {
+        "$value": "600",
+        "$type": "string",
+        "$description": ""
+      },
+      "bold": {
+        "$value": "700",
+        "$type": "string",
+        "$description": ""
+      },
+      "xbold": {
+        "$value": "900",
+        "$type": "string",
+        "$description": ""
+      }
+    }
+  }
+}

package/src/design-tokens/utility.minimo.tokens.jsonc

@@ -0,0 +1,8 @@
+{
+  "overlay": {
+    "color": {
+      "$value": "rgb(0 0 0 / .6)",
+      "$type": "color"
+    }
+  }
+}

package/src/design-tokens/z-index.minimo.tokens.jsonc

@@ -0,0 +1,8 @@
+{
+  "z-index": {
+    "overlay": {
+      "$value": 99,
+      "$type": "number"
+    }
+  }
+}

package/src/fonts-template.css

@@ -0,0 +1,7 @@
+/*
+  https://fontsource.org/fonts/rethink-sans/install
+
+*/
+
+@import '@fontsource-variable/rethink-sans/wght.css';
+@import '@fontsource-variable/rethink-sans/wght-italic.css';

package/src/index-template.css

@@ -15,7 +15,11 @@
 @import '@minimo/css/container.css';
 
 /* @import '@minimo/css/forms/forms.css'; */
-/* @import '@minimo/css/forms/form-edit-info.css'; */
+/* @import '@minimo/css/forms/fieldset.css'; */
+/* @import '@minimo/css/forms/form-group.css'; */
+/* @import '@minimo/css/forms/input-group.css'; */
+/* @import '@minimo/css/forms/validation.css'; */
+/* @import '@minimo/css/forms/form-utilities.css'; */
 @import '@minimo/css/buttons/buttons.css';
 /* @import '@minimo/css/buttons/status-buttons.css'; */
 /* @import '@minimo/css/buttons/btn-close.css'; */
@@ -26,19 +30,10 @@
 /* @import '@minimo/css/icons.css'; */
 @import '@minimo/css/svg.css';
 @import '@minimo/css/overlay.css';
-/* @import '@minimo/css/inner-nav.css'; */
 /* @import '@minimo/css/table.css'; */
 /* @import '@minimo/css/flex.css'; */
 /* @import '@minimo/css/grid.css'; */
 /* @import '@minimo/css/details.css'; */
-
-/* spinner attivarne uno solo + spinner-wrapper */
-@import '@minimo/css/spinners/spinner-wrapper.css';
-/* @import '@minimo/css/spinners/spinner-trailing-dots.css'; */
-/* @import '@minimo/css/spinners/spinner-three-dots.css'; */
-/* @import '@minimo/css/spinners/spinner-circle.css'; */
-@import '@minimo/css/spinners/spinner-circle-basic.css';
-
 /* @import '@minimo/css/utilities.css'; */
 
 

package/src/index.js

@@ -0,0 +1 @@
+export { classnames } from './utilities/classnames.js';

package/src/utilities/classnames.js

@@ -0,0 +1,3 @@
+export function classnames(...args) {
+  return args.filter(Boolean).join(' ');
+}

package/src/web-components/simple-datatable/icons/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M205.66 149.66l-72 72a8 8 0 0 1-11.32 0l-72-72a8 8 0 0 1 11.32-11.32L120 196.69V40a8 8 0 0 1 16 0v156.69l58.34-58.35a8 8 0 0 1 11.32 11.32z"/></svg>

package/src/web-components/simple-datatable/icons/arrow-up.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32z"/></svg>

package/src/web-components/simple-datatable/icons/arrows-down-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M117.66 170.34a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32 0l-32-32a8 8 0 0 1 11.32-11.32L72 188.69V48a8 8 0 0 1 16 0v140.69l18.34-18.35a8 8 0 0 1 11.32 0zm96-96l-32-32a8 8 0 0 0-11.32 0l-32 32a8 8 0 0 0 11.32 11.32L168 67.31V208a8 8 0 0 0 16 0V67.31l18.34 18.35a8 8 0 0 0 11.32-11.32z"/></svg>

package/src/web-components/simple-datatable/icons/caret-left.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="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>

package/src/web-components/simple-datatable/icons/caret-right.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="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>

package/src/web-components/simple-datatable/icons/check-bold.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="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>

package/src/web-components/simple-datatable/icons/x-bold.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="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg>

package/src/web-components/simple-datatable/simple-datatable.js

@@ -0,0 +1,219 @@
+
+import { DataTable } from 'simple-datatables';
+// import { classnames } from '@massimo-cassandro/js-utilities/index.js';
+
+import { parseCols } from './src/parse-cols.js';
+
+import * as styles from './simple-datatable.module.css';
+
+import caretLeftIcon from './icons/caret-left.svg?inline';
+import caretRightIcon from './icons/caret-right.svg?inline';
+
+// TODO possibilità di definizione cols anche da js. In questo caso, in presenza ANCHE dell'attributo, deve prevalere quest'ultimo
+
+// https://fiduswriter.github.io/simple-datatables/documentation/
+
+class SimpleDatatable extends HTMLElement {
+  constructor() {
+    super();
+    // this.attachShadow({ mode: 'open' }); // commentare per light dom
+  }
+
+
+  // implementare se necessario modificare gli attributi nel runtime
+  /*
+  static get observedAttributes() {
+    return ['icon', 'variant', 'size', 'url'];
+  }
+
+  attributeChangedCallback() {}
+  */
+
+
+  async connectedCallback() {
+    this.innerHTML = '<div class="spinner"><span class="visually-hidden">Caricamento dati...</span></div>';
+
+    const jsonUrl = this.getAttribute('json') || null,
+      cols = JSON.parse(this.getAttribute('cols')?? {});
+
+    try {
+      const response = await fetch(jsonUrl),
+        json_data = await response.json();
+
+      this.headings = cols.map(item => item._title? `<abbr title="${item._title}">${item._heading}</abbr>` : item._heading);
+
+      this.data = json_data.data.map((row, idx) => {
+
+        // riga datatable
+        return {
+          attributes: {'data-jidx': idx}, // indice della riga dati nel json originale
+
+          cells: cols.map((col_item, col_idx) => {
+
+            let value = row[col_item._field];
+            // let order = null;
+
+            // ------------------
+            // elaborazione _renderTpl -> aggiunta id e/o altri riferimenti a campi della riga.
+            // necessario farlo così, perché simple-datatable non permette l'accesso ai dati di riga
+            // durante il render delle celle, i riferimenti vanno quindi risolti al momento di elaborare i dati
+            if(col_item._renderTpl) {
+              const this_value = decodeURIComponent(col_item._renderTpl).replace(/\[\[(.*?)\]\]/g, (match, key) => {
+
+                if(row[key] == null) {
+                  // eslint-disable-next-line no-console
+                  console.error(`[s-datatable] Chiave “${key}” non trovata (colonna ${col_idx})`);
+                }
+                return row[key]?? '{{' + key + '}}';
+              });
+
+              value = this_value;
+              // order = row[col_item._field];
+            }
+            // ------------------
+
+            // conversione date symfony in ISO8601
+            else if(col_item._renderMode === 'sf_datetime' && value != null) {
+              value = value.date.replace(' ', 'T') +
+                (value.timezone === 'UTC'? 'Z' : '');
+            }
+
+            return value; //{text: value, ...(order? {order: order} : {})};
+          })
+        };
+      });
+
+      this.columns = cols.map((col_settings, idx ) => {
+
+        // pre-elaborazione tipi predefiniti
+        col_settings = parseCols(col_settings);
+
+        const col_obj = {
+          ...(Object.fromEntries(
+            Object.entries(col_settings).filter(([key]) => !key.startsWith('_'))
+          )),
+          select: idx,
+          type: col_settings.type?? 'string',
+          searchable: col_settings.searchable?? true,
+          sortable: col_settings.sortable?? true,
+        };
+
+        return col_obj;
+      });
+
+      // console.log('json_data', json_data);
+      // console.log('cols', cols);
+      // console.log('columns', this.columns);
+      // console.log('data', this.data);
+
+    } catch(err) {
+      /* eslint-disable no-console */
+      console.error(jsonUrl);
+      console.error(err);
+      /* eslint-enable no-console */
+    }
+
+    this.render();
+  }
+
+  // approccio per eventuale modifica degli attributi nel runtime
+  // set variant(val) {this.setAttribute('variant', val);} get variant(val) {return this.getAttribute('variant')}
+
+  render() {
+    this.innerHTML = '';
+    const table = document.createElement('table');
+    this.appendChild(table);
+
+    // https://fiduswriter.github.io/simple-datatables/documentation/Options
+    const dt = new DataTable(table, {
+      locale: 'it',
+      searchable: true,
+      sortable: true,
+      fixedHeight: false,
+      fixedColumns: false,
+      paging: true,
+      perPage: +this.getAttribute('perPage') || 25,
+      pagerDelta: 2,
+      perPageSelect: false,
+
+      labels: {
+        placeholder: 'Cerca...',
+        searchTitle: 'Cerca nella tabella',
+        pageTitle: 'Pagina {page}',
+        perPage: 'Righe per pagina',
+        noRows: 'Nessun record trovato',
+        info: 'Stai visualizzando le righe da {start} a {end}, su un totale di {rows}',
+        noResults: 'Nessun risultato per la ricerca',
+      },
+      classes: {
+        wrapper                 : styles.datatableWrapper,
+        container               : 'table-responsive',
+        loading                 : 'datatable-loading', // ??
+
+        // barra superiore
+        top                     : styles.topArea,
+        search                  : styles.searchWrapper,
+        input                   : 'form-control form-control-sm',
+        // dropdown         : 'datatable-dropdown', // selettore righe per pagina, disattivato
+
+        empty                   : styles.empty,
+
+        // table
+        table                   : `table table-bordered ${styles.table}`,
+        // buttons in thead per il sort
+        sorter                  : `btn-reset ${styles.sortBtn}`,
+        ascending               : styles.sortAscending,
+        descending              : styles.sortDescending,
+
+        // area inferiore
+        bottom                  : styles.bottomArea,
+        // info text
+        info                    : styles.info,
+
+        // pagination
+        // pagination           : styles.paginationNav,
+        paginationList          : styles.paginationList,
+        paginationListItem      : styles.paginationListItem,
+        paginationListItemLink  : styles.paginationListItemBtn,
+        // hidden                  : 'datatable-hidden',
+        disabled                : styles.paginationDisabled,
+        active                  : styles.paginationActive,
+
+        // cursor: 'datatable-cursor',
+        // dropdown: 'datatable-dropdown',
+        // ellipsis: 'datatable-ellipsis',
+        // filter: 'datatable-filter',
+        // filterActive: 'datatable-filter-active',
+        // headercontainer: 'datatable-headercontainer',
+        // selector: 'datatable-selector',
+      },
+
+      columns: this.columns,
+      data: {
+        headings: this.headings,
+        data: this.data
+      }
+    });
+
+    dt.on('datatable.init', () => {
+      const pagination = this.querySelector(`.${styles.paginationList}`);
+
+      if(pagination.querySelectorAll(`.${styles.paginationListItem}`).length) {
+
+        pagination.querySelector(`.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`)
+          .innerHTML = caretLeftIcon;
+
+        pagination.querySelector(`.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`)
+          .innerHTML = caretRightIcon;
+
+        pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
+          .forEach(btn => btn.classList.add(styles.hasSvg));
+      }
+    });
+
+  } // end render
+} // end component
+
+if (!customElements.get('s-datatable')) {
+  customElements.define('s-datatable', SimpleDatatable);
+}

package/src/web-components/simple-datatable/simple-datatable.minimo.tokens.jsonc

@@ -0,0 +1,50 @@
+{
+  "sdt": {
+
+    "thead": {
+      "hover": {
+        "background": {
+          "color": {
+            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.base})",
+            "$type": "color"
+          }
+        }
+      }
+    },
+
+    "pagination": {
+      "border": {
+        "$type": "border",
+        "$value": {
+          "color": "{neutral.base}",
+          "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"
+      }
+
+    }
+  }
+
+}