@massimo-cassandro/minimo 1.7.1 → 1.8.0

package/src/web-components/TODO json-table/demo/js/demo-ajax-table.js

@@ -0,0 +1,165 @@
+/* eslint-disable no-console */
+import jsonTable from '@src/index.js';
+
+const container = document.getElementById('ajax-table-demo');
+
+// Register listener BEFORE instantiation so it can catch the event
+// TODO verificare funzionamento
+container.addEventListener('jt:ready', e => {
+  console.log('Static table ready');
+  console.log(e.detail);
+});
+
+new jsonTable(
+  // params
+  {
+    debug: true,
+    container: container,
+    useZeroAltChar: false,
+
+    // true: => use the standard parameters (similar to datatable ones), object: customize parameters
+    // see ajax_config_default in `src/js/defaults.js`
+    ajax: {
+
+      // https://github.com/typicode/json-server
+      urlParams: {
+        startItem: `_page`,
+        perPage : '_per_page',
+        // TODO search param
+        // search : 'search[value]',
+        // TODO columns + order
+      },
+
+      // Config for returned object keys: uses default
+      // jsonKeys: {}
+    },
+    ajaxUrl: 'http://localhost:3004',
+
+    addRowIndex: true,
+    searchInputClassName: 'form-control',
+    infoExtraClassName: 'border border-secondary rounded p-2', // some classes from the used framework (bootstrap)
+    tableClassName: 'table table-striped table-hover table-bordered',
+    defaultSorting: {date: 'asc', perc: 'desc'},
+
+    // add a red background to each number cell whose content is a number and less than 3000
+    trCallback: (tr/* , row_data, params */) => {
+
+      tr.querySelectorAll('td').forEach(cell => {
+
+        const raw_value = +cell.dataset.raw;
+        if(!isNaN(raw_value) && raw_value < 3000 && cell.dataset.type === 'num') {
+          cell.classList.add('text-bg-danger');
+        }
+      });
+    },
+
+    caption: 'Ajax table demo',
+
+    // using some bootstrap classes
+    // tableClassName: 'table table-striped table-hover table-bordered', // overrides the default class
+    inlineEndAlignClassName : 'text-end',
+    nowrapClassName         : 'text-nowrap',
+
+    columns: [
+      {
+        title       : 'ID',
+        key         : 'id',
+        // dataType    : 'string',  // dataType can be omitted if it's `string`
+        className   : 'small text-center',
+        rowHeading  : true,
+        tfoot       : false // avoid rendering these values inside the tfoot element
+      },
+      {
+        title       : 'Boolean',
+        key         : 'bool',
+        dataType    : 'bool',
+        // parse       : row => !!row.isActive // if the original data contains other values besides true or false and you need to force them all to boolean
+      },
+      {
+        title       : 'Boolean (customized)',
+        key         : 'boolCustomized',
+        dataType    : 'boolWithNull' // custom dataType, see below
+      },
+      {
+        title       : 'Text column',
+        key         : 'text',
+        dataType    : 'string'
+      },
+      {
+        title       : 'Number #1',
+        key         : 'number1',
+        dataType    : 'num',
+      },
+      {
+        title       : 'Number #2',
+        key         : 'number2',
+        dataType    : 'num',
+        render      : cell_data => {                           // custom render function
+          const [int, dec] = cell_data.toFixed(2).split('.');
+          return `${int}.<small>${dec}</small>`;
+        }
+      },
+      {
+        key         : 'sum',
+        title       : 'Sum #1 + #2',
+        dataType    : 'num',
+        parse       : (row) => row.number1 + row.number2        // parsed value
+      },
+      {
+        title       : 'Date',
+        key         : 'date',
+        dataType    : 'date'
+      },
+      {
+        title       : 'Datetime (obj)',
+        key         : 'sfDatetime',
+        dataType    : 'datetime',
+      },
+      {
+        title       : 'Perc',
+        key         : 'perc',
+        dataType    : 'perc'
+      },
+      {
+        title       : 'Perc. (dec.)',
+        key         : 'percDecimal',
+        dataType    : 'percDecimal'
+      },
+      {
+        title       : 'Perc. (dec.)',
+        key         : 'euro',
+        dataType    : 'euro'
+      },
+
+    ],
+
+  }, // end params
+
+  // custom dataTypes
+  {
+    // redefine the default `string` dataType
+    string: {
+      // inheritsFrom: 'string', // inherits properties from the default dataType, if needed
+      className: 'fst-italic' // from bootstrap css
+    },
+
+    // new dataType
+    // similar to the default dataType `bool`, but also renders null values with a different style
+    // SVG icons are replaced with text symbols
+    boolWithNull: {
+      inheritsFrom     : 'bool', // inherits properties from the default dataType, if needed
+      className        : 'text-center', // from bootstrap css
+
+      render           : function (val /* , params */) { // you can access the global params object if you need
+        if(val == null) {
+          return '<span class="text-bg-warning py-1 px-3 small rounded">null</span>';
+
+        } else {
+          return val
+            ? '<span class="text-success lead">&check;</span>'
+            : '<span class="text-danger lead">&#x2715;</span>';
+        }
+      }
+    }
+  } // end custom dataTypes
+);

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

@@ -0,0 +1,180 @@
+/* eslint-disable no-console */
+import jsonTable from '@src/index.js';
+import static_demo_data  from '../demo-data/json-static-table-demo-data.js';
+
+/*
+  data:
+  [
+    {
+      'id': 350,
+      'isActive': true,
+      'number1': 1081.55,
+      'number2': 4411.51,
+      'date': '2017-06-20',
+      'datetime': '2015-02-21T01:23:49',
+      'text': 'sit officia in',
+      'perc': 42.33,
+      'percDecimal': 0.19,
+      'euro': 879.21
+    },
+  ]
+*/
+
+// Register listener BEFORE instantiation so it can catch the event
+const container = document.getElementById('static-table-demo');
+container.addEventListener('jt:ready', e => {
+  console.log('Static table ready');
+  console.log(e.detail);
+});
+
+new jsonTable(
+  // params
+  {
+    debug: true,
+    container: container,
+    useZeroAltChar: false,
+    ajax: false,
+    data: static_demo_data,
+    addRowIndex: true,
+    searchInputClassName: 'form-control',
+    infoExtraClassName: 'border border-secondary rounded p-2', // some classes from the used framework (bootstrap)
+    tableClassName: 'table table-striped table-hover table-bordered',
+    defaultSorting: {date: 'asc', perc: 'desc'},
+
+    // add a red background to each number cell whose content is a number and less than 3000
+    trCallback: (tr/* , row_data, params */) => {
+
+      tr.querySelectorAll('td').forEach(cell => {
+
+        const raw_value = +cell.dataset.raw;
+        if(!isNaN(raw_value) && raw_value < 3000 && cell.dataset.type === 'num') {
+          cell.classList.add('text-bg-danger');
+        }
+      });
+    },
+
+    caption: 'Static table demo',
+
+    // using some bootstrap classes
+    // tableClassName: 'table table-striped table-hover table-bordered', // overrides the default class
+    inlineEndAlignClassName : 'text-end',
+    nowrapClassName         : 'text-nowrap',
+
+    columns: [
+      {
+        title       : 'ID',
+        key         : 'id',
+        // dataType    : 'string',  // dataType can be omitted if it's `string`
+        className   : 'small text-center',
+        rowHeading  : true,
+        tfoot       : false // avoid rendering these values inside the tfoot element
+      },
+      {
+        title       : 'Boolean',
+        key         : 'bool',
+        dataType    : 'bool',
+        // parse       : row => !!row.isActive // if the original data contains other values besides true or false and you need to force them all to boolean
+      },
+      {
+        title       : 'Boolean (customized)',
+        key         : 'boolCustomized',
+        dataType    : 'boolWithNull' // custom dataType, see below
+      },
+      {
+        title       : 'Text column',
+        key         : 'text',
+        dataType    : 'string'
+      },
+      {
+        title       : 'Number #1',
+        key         : 'number1',
+        dataType    : 'num',
+      },
+      {
+        title       : 'Number #2',
+        key         : 'number2',
+        dataType    : 'num',
+        render      : cell_data => {                           // custom render function
+          const [int, dec] = cell_data.toFixed(2).split('.');
+          return `${int}.<small>${dec}</small>`;
+        }
+      },
+      {
+        key         : 'sum',
+        title       : 'Sum #1 + #2',
+        dataType    : 'num',
+        parse       : (row) => row.number1 + row.number2        // parsed value
+      },
+      {
+        title       : 'Date',
+        key         : 'date',
+        dataType    : 'date'
+      },
+      {
+        title       : 'Datetime (obj)',
+        key         : 'sfDatetime',
+        dataType    : 'datetime',
+      },
+      {
+        title       : 'Perc',
+        key         : 'perc',
+        dataType    : 'perc'
+      },
+      {
+        title       : 'Perc. (dec.)',
+        key         : 'percDecimal',
+        dataType    : 'percDecimal'
+      },
+      {
+        title       : 'Perc. (dec.)',
+        key         : 'euro',
+        dataType    : 'euro'
+      },
+
+    ],
+    footerData: [
+      {
+        'id': 'this will not be rendered, sice the the `tfoot` option in `columns` is set to false',
+        'isActive': null,
+        'number1': static_demo_data.reduce((prev, curr) => prev + curr.number1, 0),
+        'number2': static_demo_data.reduce((prev, curr) => prev + curr.number2, 0),
+        'sum:': static_demo_data.reduce((prev, curr) => prev + curr.number1 + curr.number2, 0),
+        'date': null,
+        'datetime': null,
+        'text': null,
+        'perc': null,
+        'percDecimal': null,
+        'euro': static_demo_data.reduce((prev, curr) => prev + curr.euro, 0),
+      }
+
+    ]
+  }, // end params
+
+  // custom dataTypes
+  {
+    // redefine the default `string` dataType
+    string: {
+      // inheritsFrom: 'string', // inherits properties from the default dataType, if needed
+      className: 'fst-italic' // from bootstrap css
+    },
+
+    // new dataType
+    // similar to the default dataType `bool`, but also renders null values with a different style
+    // SVG icons are replaced with text symbols
+    boolWithNull: {
+      inheritsFrom     : 'bool', // inherits properties from the default dataType, if needed
+      className        : 'text-center', // from bootstrap css
+
+      render           : function (val /* , params */) { // you can access the global params object if you need
+        if(val == null) {
+          return '<span class="text-bg-warning py-1 px-3 small rounded">null</span>';
+
+        } else {
+          return val
+            ? '<span class="text-success lead">&check;</span>'
+            : '<span class="text-danger lead">&#x2715;</span>';
+        }
+      }
+    }
+  } // end custom dataTypes
+);

package/src/web-components/TODO json-table/demo/webpack-modules/css-rules.mjs

@@ -0,0 +1,122 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+export function cssRules({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true
+}) {
+  const configOptions = { isDevelopment, useSass, inlineCssInDevMode };
+
+  return [
+    // CSS modules
+    {
+      test: /\.module\.(sass|scss|css)$/i,
+      oneOf: [
+        // inserimento critical css con tag style al momento della build
+        {
+          test: /\.critical\.module\./i,
+          use: css_loaders({ ...configOptions, critical: true, css_modules: true }),
+        },
+
+        // inserimento css con tag style nel runtime
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true, css_modules: true }),
+        },
+        // comportamento standard
+        {
+          use: css_loaders({ ...configOptions, css_modules: true }),
+        },
+      ]
+    },
+    // CSS standard
+    {
+      test: /\.(sass|scss|css)$/i,
+      exclude: /\.module\.(sass|scss|css)$/i,
+      sideEffects: true,
+      oneOf: [
+        {
+          test: /\.critical\.(sass|scss|css)$/i,
+          use: css_loaders({ ...configOptions, critical: true }),
+        },
+        {
+          resourceQuery: /inline/,
+          use: css_loaders({ ...configOptions, inline: true }),
+        },
+        {
+
+          use: css_loaders({ ...configOptions }),
+        }
+      ]
+    }
+  ];
+}
+
+function css_loaders({
+  isDevelopment = false,
+  useSass = false,
+  inlineCssInDevMode = true,
+  css_modules = false,
+  critical = false,     // Iniezione statica nell'HTML
+  inline = false        // Iniezione dinamica via JS
+}) {
+
+  let mainLoader;
+
+  if (inline) {
+    // usa style-loader per la query string ?inline
+    mainLoader = {
+      loader: 'style-loader',
+      options: { injectType: 'singletonStyleTag' }
+    };
+
+  } else if (critical) {
+    // usa MiniCssExtractPlugin per permettere al plugin HTML di leggerlo
+    mainLoader = MiniCssExtractPlugin.loader;
+
+  } else {
+    // compartamento stabdard
+    mainLoader = (isDevelopment && inlineCssInDevMode)
+      ? { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }
+      : MiniCssExtractPlugin.loader;
+  }
+
+
+  return [
+    mainLoader,
+
+    {
+      loader: 'css-loader',
+      options: {
+        modules: css_modules
+          ? {
+            auto: true,
+            localIdentName: isDevelopment ? '[local]_[hash:base64:6]' : '[hash:base64]',
+            exportLocalsConvention: 'as-is',
+          }
+          : false,
+        sourceMap: isDevelopment,
+        importLoaders: useSass ? 2 : 1,
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: { sourceMap: isDevelopment }
+      }
+    },
+    ...(useSass
+      ? [ {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: isDevelopment,
+          sassOptions: {
+            quietDeps: true,
+            silenceDeprecations: [ 'legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import' ],
+          }
+        }
+      } ]
+      : []
+    )
+  ];
+}

package/src/web-components/TODO json-table/demo/webpack-modules/get-jsConfig-aliases.mjs

@@ -0,0 +1,33 @@
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Funzione per ottenere gli alias direttamente leggendo il file jsconfig.json
+ * @param {string} jsconfigAbsPath - Il percorso assoluto del file jsconfig.json
+ * @returns {Record<string, string>}
+ */
+
+export function getJsConfigAliases(jsconfigAbsPath) {
+
+  const baseDir = path.dirname(jsconfigAbsPath);
+
+  const fileContent = fs.readFileSync(jsconfigAbsPath, 'utf-8');
+  const jsconfig = JSON.parse(fileContent);
+
+  const aliases = {};
+  const paths = jsconfig.compilerOptions?.paths || {};
+
+  for (const item in paths) {
+    // Rimuove la wildcard /* alla fine della chiave (alias)
+    const key = item.replace(/(\/\*)$/, '');
+
+    // Prende il primo valore (path) e rimuove la wildcard /*
+    const targetPath = paths[item][0].replace(/(\/\*)$/, '');
+
+    const absolutePath = path.resolve(baseDir, targetPath);
+
+    aliases[key] = absolutePath;
+  }
+
+  return aliases;
+}

package/src/web-components/TODO json-table/demo/webpack-modules/svg-rules.mjs

@@ -0,0 +1,108 @@
+/**
+ * Funzione per definire le regole per SVG
+ * @returns {import('webpack').RuleSetRule[]}
+ */
+
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+
+export function svgRules({
+  useSvgo = true,
+  useSvgr = false,
+  svgoConfig = null,
+  favicons_path_regexp = null,
+}) {
+
+  const this_filename = fileURLToPath(import.meta.url)
+    ,this_dirname = path.dirname(this_filename);
+
+  if(svgoConfig == null) {
+    useSvgo = false;
+  }
+
+  return [{
+    test: /(\.svg)$/i,
+    exclude: favicons_path_regexp?? undefined,
+    oneOf: [
+      // 1. svg inline dataUri per css (con `?cssInline`)
+      {
+        resourceQuery: /cssInline/, // ex inline-dataURI
+        type: 'asset/source',
+        use: [
+          // Loader di ottimizzazione SVGO
+          ...(useSvgo? [ {
+            loader: 'svgo-loader',
+            options: svgoConfig,
+          } ] : []),
+
+          // Loader wrapper per Data URI compatto (Mini-SVG-Data-URI-Loader)
+          {
+            loader: path.resolve(this_dirname, './mini-svg-data-uri-loader.cjs'),
+          },
+        ],
+      },
+
+      // as react component -> https://react-svgr.com/docs/webpack/
+      ...(useSvgr
+        ? [{
+          resourceQuery: /react/,
+          issuer: /\.[jt]sx?$/,
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                ...(useSvgo
+                  ? {
+                    svgo: true, // false: Disable SVGO inside SVGR if svgo-loader already ran
+                    svgoConfig: svgoConfig,
+                  }
+                  : {
+                    svgo: false
+                  }
+
+                )
+                // Altre opzioni utili di SVGR
+                // titleProp: true,
+                // ref: true,
+              }
+            },
+            // {
+            //   loader: 'svgo-loader',
+            //   options: svgoConfig,
+            // },
+          ],
+        }]
+        : []
+      ),
+
+      // svg inline (con `?inline`)
+      {
+        resourceQuery: /inline/,
+        type: 'asset/source',
+        // Ottimizzazione SVGO
+        use: useSvgo ? [ { loader: 'svgo-loader', options: svgoConfig } ] : [],
+      },
+
+      // svg file (copy image files to build folder)
+      {
+        type: 'asset/resource',
+        exclude: [ /cssInline/, /inline/ ],
+        sideEffects: true,
+        generator: {
+          filename: 'imgs/[name].[contenthash][ext]'
+        },
+
+        // TODO presumibilmente errore sui file già ottimizzati
+        // Ottimizzazione SVGO
+        // use: useSvgo ? [
+        //   {
+        //     loader: 'svgo-loader',
+        //     options: svgoConfig,
+        //   },
+        // ] : []
+      }
+    ]
+  }];
+}

package/src/web-components/TODO json-table/demo/webpack-modules/svgo.config.mjs

@@ -0,0 +1,26 @@
+// svgo.config.js
+import addViewBox from 'svgo-add-viewbox';
+
+// https://svgo.dev/docs/plugins/
+export default {
+  multipass: true,
+  plugins: [
+    'removeDoctype'
+    , { ...addViewBox, params: { overwrite: false } }
+    , { name: 'cleanupIds', params: { remove: true, minify: true } }
+    , 'removeComments'
+    , 'removeTitle'
+    , 'removeDimensions'
+    , 'collapseGroups'
+    , { name: 'cleanupNumericValues', params: { floatPrecision: 4 } }
+    , { name: 'convertColors', params: { names2hex: true, rgb2hex: true } }
+    , 'removeStyleElement'
+    , 'removeEmptyContainers'
+    , { name: 'removeAttrs', params: { attrs: ['(filter|fill|stroke|class|style|data.*)'/* , 'svg:(width|height)' */] } }
+    // , { name: 'removeAttrs', params: { attrs: [ '(filter|fill|stroke|fill-rule|clip-rule|stroke-linecap|stroke-linejoin|stroke-width|transform|style|class|data.*)', 'svg:(width|height)' ] } }
+    , 'removeUselessDefs',
+    //, { name: 'addAttributesToSVGElement0, params: {attribute: "#{$attr}"}}
+    // , { name: 'addClassesToSVGElement', params: { className: 'line-icon'  } }
+    'removeUselessStrokeAndFill',
+  ]
+};