@massimo-cassandro/minimo 1.4.11 → 1.4.13

package/README.md

@@ -6,11 +6,21 @@ My light framework + utilities
 
 ```bash
 npm i @massimo-cassandro/minimo
+
+# optional:
+npm i -D @massimo-cassandro/eslint-config
+npm i -D @massimo-cassandro/stylelint-config
 ```
 
 > Note: **minimo** is designed to be used with WebPack using the configuration you can find in the [webpack-setup folder](./webpack-setup/) of this repository. If changes are made (for example, to how SVG files are imported), things may not work as expected.
 >
-> For a complete install of all required modules, use the install script at `./webpack-setup/starter-install.sh`.
+
+For a complete install of all required webpack modules, use the install script at `./webpack-setup/starter-install.sh` launching:
+
+```bash
+zsh ./node_modules/@massimo-cassandro/minimo/webpack-setup/starter-install.sh
+```
+
 
 ---
 

package/design-tokens/switch.minimo.tokens.jsonc

@@ -0,0 +1,32 @@
+// -----------------------------------------------------------------------
+// Generated file — do not edit manually.
+// This file is produced by the design-token build pipeline.
+// Source of truth: the token files in the project source directory.
+// Re-generate with: node build-tokens.mjs --config <path/to/config>
+// -----------------------------------------------------------------------
+{
+  "switch": {
+    "background": {
+      "color": {
+        "$type": "color",
+        "$value": "{neutral.100}"
+      }
+    },
+    "cursor": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{body.background.color}"
+        }
+      }
+    },
+    "checked": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{primary.100}"
+        }
+      }
+    }
+  }
+}

package/design-tokens-src/switch.minimo.tokens.mjs

@@ -0,0 +1,29 @@
+export default {
+  switch: {
+    background: {
+      color: {
+        $value: '{neutral.100}',
+        $type: 'color'
+      }
+    },
+
+    cursor: {
+      background: {
+        color: {
+          $value: '{body.background.color}',
+          $type: 'color'
+        }
+      },
+    },
+
+    checked: {
+      background: {
+        color: {
+          $value: '{primary.100}',
+          $type: 'color'
+        }
+      },
+    }
+
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -44,8 +44,9 @@
     }
   },
   "devDependencies": {
-    "@massimo-cassandro/dev-updater": "^3.0.4",
-    "@massimo-cassandro/eslint-config": "^3.0.7",
-    "@massimo-cassandro/stylelint-config": "^2.3.7"
+    "@massimo-cassandro/dev-updater": "^3.0.6",
+    "@massimo-cassandro/eslint-config": "^3.0.9",
+    "@massimo-cassandro/stylelint-config": "^2.3.9",
+    "style-dictionary": "^5.4.4"
   }
-}
+}

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

@@ -0,0 +1,152 @@
+import { domBuilder, classnames } from '../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(--size-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-popup/modal-popup.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);
+  scale: 0;
+  transition: scale .2s ease-out;
+
+  /* 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(--size-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(--size-md) 0;
+  }
+  .padding-none & {
+    padding: 0;
+  }
+  /* stylelint-enable selector-class-pattern */
+}
+
+.modalSpinner {
+  position: relative;
+  padding-block-start: var(--size-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(--size-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);
+  }
+}
+

package/src/css/forms/forms.css

@@ -119,6 +119,7 @@ input[type='checkbox'] {
 
 /* da bs5 */
 /* versione con label a destra */
+/* TODO rivedere. sostituire float con flex? */
 .form-check {
   display: block;
   padding-left: 1.5em;
@@ -128,7 +129,7 @@ input[type='checkbox'] {
     float: left;
     display: inline-block;
     width: auto;
-    margin: 4px 0  0 -1.5em;
+    margin: 4px 0 0 -1.5em;
   }
 }
 

package/src/css/forms/switch.css

@@ -0,0 +1,105 @@
+/* TODO completare, aggiungere focus, vedere soluzione bootstrap
+
+
+.form-switch {
+  padding-left: $form-switch-padding-start;
+
+  .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
+    width: $form-switch-width;
+    margin-left: $form-switch-padding-start * -1;
+    background-image: var(--#{$prefix}form-switch-bg);
+    background-position: left center;
+    @include border-radius($form-switch-border-radius, 0);
+    @include transition($form-switch-transition);
+
+    &:focus {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+    }
+
+    &:checked {
+      background-position: $form-switch-checked-bg-position;
+
+      @if $enable-gradients {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+      }
+    }
+  }
+
+  &.form-check-reverse {
+    padding-right: $form-switch-padding-start;
+    padding-left: 0;
+
+    .form-check-input {
+      margin-right: $form-switch-padding-start * -1;
+      margin-left: 0;
+    }
+  }
+}
+
+
+*/
+
+/*
+<div class="switch">
+  <input type="checkbox">
+  <span class="switch-track"></span>
+  <label>Abilita notifiche</label>
+</div>
+*/
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-track {
+  position: relative;
+  width: 2.5em;
+  height: 1.5em;
+  background-color: var(--switch-background-color);
+  border-radius: 1.5em;
+  transition: background-color 0.2s;
+}
+
+.switch label {
+  margin-left: .5em;
+  user-select: none;
+}
+
+.switch-track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 2em;
+  height: 2em;
+  background: var(--switch-cursor-background-color);
+  border-radius: 50%;
+  transition: translate 0.2s;
+}
+
+.switch input:checked + .switch-track {
+  background-color: var(--switch-checked-background-color);
+}
+
+.switch input:checked + .switch-track::after {
+  translate: 20px 0;
+}
+
+/* accessibilità */
+.switch input:focus-visible + .switch-track {
+  outline: 2px solid var(--switch-checked-background-color);
+  outline-offset: 2px;
+}

package/src/css/margin-padding.css

@@ -64,6 +64,9 @@
 .mie {
   margin-inline-end: var(--size-base) !important;
 }
+.mie-auto {
+  margin-inline-end: auto !important;
+}
 .mie-xs {
   margin-inline-end: var(--size-xs) !important;
 }

package/src/css/table.css

@@ -58,6 +58,10 @@
     line-height: var(--table-cell-line-height);
     vertical-align: top;
     text-align: start;
+
+    .valign-middle &, &.valign-middle {
+      vertical-align: middle;
+    }
   }
 
   &.table-bordered {

package/src/custom-properties.css

@@ -273,6 +273,9 @@
   --status-warning-border-color: var(--status-warning-color);
   --status-warning-color: #fc0;
   --status-warning-fg: #4f2900;
+  --switch-background-color: var(--neutral-100);
+  --switch-checked-background-color: var(--primary-100);
+  --switch-cursor-background-color: var(--body-background-color);
   --table-body-border-width: .0625rem;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;

package/src/utilities/dom-builder/parseDomString.js

@@ -36,6 +36,9 @@ export function parseDomString(domString) {
   //   /(?: +(?<content>.*))?$/.source               // content
   // );
 
+
+// FIX non funziona se la stringa contine id e classi in quest'ordine: <TAG>.<CLASSE>#<ID>, se l'id è prima della classe, funziona
+
   const regex = new RegExp(
     /^([a-zA-Z][a-zA-Z0-9-]*)?/.source +  // tag (accetta anche nomi di web components)
     /(?:#([a-zA-Z0-9_-]+))?/.source +     // id

package/src/utilities/validation-error-class.js

@@ -1,6 +1,6 @@
 
 // uso
-// throw new ValidationError('Sono presenti cicli duplicati', campiErrore );
+// throw new ValidationError('Sono presenti valori duplicati', campiErrore );
 
 /*
 esempio:

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

@@ -579,14 +579,14 @@ class SimpleDatatableAdapter extends HTMLElement {
           // Per colonne con type 'number' o 'date' il valore viene lasciato invariato.
           const sortValue = col_item._sortValue
             ? (() => {
-                const raw = typeof col_item._sortValue === 'function'
-                  ? (col_item._sortValue(row) ?? '')
-                  : (getNestedValue(row, col_item._sortValue) ?? '');
-                const colType = col_item.type ?? 'string';
-                return (colType === 'string' && typeof raw === 'number')
-                  ? String(raw)
-                  : raw;
-              })()
+              const raw = typeof col_item._sortValue === 'function'
+                ? (col_item._sortValue(row) ?? '')
+                : (getNestedValue(row, col_item._sortValue) ?? '');
+              const colType = col_item.type ?? 'string';
+              return (colType === 'string' && typeof raw === 'number')
+                ? String(raw)
+                : raw;
+            })()
             : null;
 
 

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

@@ -51,11 +51,12 @@ export function parseCols(col_obj){
       };
 
     // campi booleani
-    } else if (col_obj.type === 'boolean') {
+    } 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) => {
@@ -65,7 +66,7 @@ export function parseCols(col_obj){
             return checkIcon;
           } else {
             td.attributes.class = classnames(td.attributes.class, 'text-danger');
-            return xIcon;
+            return col_obj._renderMode === 'bool_true_only'? '' : xIcon;
           }
         }
       };
@@ -121,13 +122,13 @@ export function parseCols(col_obj){
       return {
 
         cellClass: 'text-end text-numeric',
-        headerClass: 'text-end',
+        headerClass: 'text-end text-numeric', // NB: usata anche per il footer
       };
 
     } else if(col_obj._renderMode === 'euro_no_dec') {
       return {
         render: (value, cell) => {
-          console.log(value);
+          // console.log(value);
           if(value == null || isNaN(value)) {
             cell.attributes['data-order'] = '';
             return '\u2014';
@@ -142,7 +143,7 @@ export function parseCols(col_obj){
           }
         },
         cellClass: 'text-nowrap text-end text-numeric',
-        headerClass: 'text-end',
+        headerClass: 'text-nowrap text-end text-numeric', // NB: usata anche per il footer
         type: 'number'
       };