@massimo-cassandro/minimo 1.4.12 → 1.5.0

package/design-tokens/modal-popup.minimo.tokens.jsonc

@@ -0,0 +1,38 @@
+// -----------------------------------------------------------------------
+// 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>
+// -----------------------------------------------------------------------
+{
+  "modal-popup": {
+    "drop-shadow": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "12px",
+          "spread": "2px",
+          "color": "rgba(0 0 0 / .25)"
+        }
+      ]
+    },
+    "backdrop-color": {
+      "$type": "color",
+      "$value": "rgb(0 0 0 / .6)"
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{size.base}"
+      }
+    },
+    "btn-close": {
+      "size": {
+        "$type": "dimension",
+        "$value": "1.6rem"
+      }
+    }
+  }
+}

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/modal-popup.minimo.tokens.mjs

@@ -0,0 +1,34 @@
+export default {
+  'modal-popup': {
+    'drop-shadow': {
+      $type: 'shadow',
+      $value: [
+        {
+          offsetX: '0',
+          offsetY: '0',
+          blur: '12px',
+          spread: '2px',
+          color: 'rgba(0 0 0 / .25)'
+        }
+      ]
+    },
+    'backdrop-color': {
+      $value: 'rgb(0 0 0 / .6)',
+      $type: 'color',
+    },
+    border: {
+      radius: {
+        $type: 'dimension',
+        $value: '{size.base}',
+      }
+    },
+
+    'btn-close': {
+      size: {
+        $type: 'dimension',
+        $value: '1.6rem'
+      }
+
+    }
+  }
+};

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.12",
+  "version": "1.5.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -46,6 +46,7 @@
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^3.0.6",
     "@massimo-cassandro/eslint-config": "^3.0.9",
-    "@massimo-cassandro/stylelint-config": "^2.3.9"
+    "@massimo-cassandro/stylelint-config": "^2.3.9",
+    "style-dictionary": "^5.4.4"
   }
 }

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

@@ -0,0 +1,200 @@
+import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../utilities/classnames.js';
+import { spinner } from '../spinner/spinner.js';
+import * as styles from './modal-popup.module.css';
+
+
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+
+let dialogEl, dialogContentEl;
+
+function closeDialog() {
+  dialogEl.classList.remove(styles.on);
+
+  dialogEl.addEventListener('transitionend', () => {
+    dialogEl.close();
+  }, { once: true });
+}
+
+/**
+ * modalPopup
+ * Mostra un popup con il contenuto indicato
+ * il contentuo può essere in forma di:
+ *  - array domBuilder oppure plain text oppure HTML (parametro `content`)
+ *  - contenuto caricato via Ajax  (parametri `ajaxUrl` e `ajaxCallback`)
+ *  - iframe (parametro `iframeUrl`)
+ *
+ * in presenza di più impostazioni in conflitto, viene scelta la prima opzione utile
+ * nell'ordine di priorità riportato nella lista precedente.
+ */
+
+export function modalPopup({
+
+  /** dialog extra class */
+  dialogExtraClassName = null,
+
+  /** extra classname added to  dialogInner */
+  contentExtraClassName = null,
+
+  /** iframe url */
+  iframeUrl = null,
+
+  /** content: plain text, html or  domBuilder array */
+  content = null,
+
+  /** url ajax e relatuva funzione di callback.
+   * Quest'ultima viene invocata con argomenti i dati restituiti dalla chiamata ajax
+   * e con l''elemento contenitore (`ajaxCallback(data, dialogContentEl)`)
+  */
+  ajaxUrl = null,
+  ajaxCallback = null,
+
+  /** eventuale callback da invocare alla chiusra del dialog
+   * Viene invocato con il le'elento dialog (`closeCallback(dialogEl)`)
+   * NB: `dialogEl` viene eliminato subito dopo
+   */
+  closeCallback = null,
+  addScrollbarPadding = false, // aggiunge un padding extra a destra per la barra di scorrimento
+
+  /** header content: plain text or HTML */
+  headerContent = null,
+
+  /** footer content: plain text or HTML  */
+  footerContent = null,
+}) {
+
+
+
+  if(content == null && (ajaxUrl == null || ajaxCallback == null) && iframeUrl == null) {
+    throw '[modalContent] parametri `content`, `ajaxUrl`/ `ajaxCallback` e `iframeUrl` mancanti';
+  }
+
+  let mode;
+  if(content != null && Array.isArray(content)) {
+    mode = 'domBuilder';
+
+  } else if (content != null) {
+    mode = 'html';
+
+  } else if (ajaxUrl != null && ajaxCallback != null) {
+    mode = 'ajax';
+
+  } else {
+    mode = 'iframe';
+  }
+
+  domBuilder([
+    {
+      tag: 'dialog',
+      className: classnames(styles.dialog, dialogExtraClassName, addScrollbarPadding && styles.scrollBarPadding),
+      attrs: {
+        'closedby': 'any'
+      },
+      callback: el => dialogEl = el,
+      children: [
+        {
+          tag: 'button',
+          className: classnames('btn-close', styles.closeButton),
+          attrs: {
+            type: 'button',
+            'aria-label': 'Chiudi'
+          }
+        },
+        {
+          className: styles.contentWrapper,
+          children: [
+            {
+              classname: styles.header,
+              condition: headerContent != null,
+              content: headerContent
+            },
+            {
+              className: classnames(styles.content, contentExtraClassName),
+
+              content: mode === 'html'
+                ? content
+                : mode === 'ajax'
+                  ? spinner()
+                  : null,
+
+              children: [
+                ...(mode === 'domBuilder'? content : []),
+                {
+                  condition: mode === 'iframe',
+                  className: styles.iframe,
+                  tag: 'iframe',
+                  attrs: {
+                    src: iframeUrl
+                  }
+                }
+              ],
+              callback: el => {
+                dialogContentEl = el;
+
+                if(mode === 'ajax') {
+                  try {
+
+                    (async () => {
+                      const response = await fetch(ajaxUrl),
+                        data = await response.json();
+
+                      ajaxCallback(data, dialogContentEl);
+                    })();
+
+                  } catch(err) {
+                    /* eslint-disable no-console */
+                    console.error(ajaxUrl);
+                    console.error(err);
+                    /* eslint-enable no-console */
+                  }
+                }
+
+              },
+            },
+            {
+              classname: styles.footer,
+              condition: footerContent != null,
+              content: footerContent
+            },
+          ]
+        }
+      ]
+    }
+  ], document.body);
+
+
+  // listener sul pulsante di chiusura
+  dialogEl.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
+    closeDialog();
+  }, false);
+
+  // // Esc e clic sul backdrop
+  // dialogEl.addEventListener('cancel', (e) => {
+  //   e.preventDefault();
+  //   closeDialog();
+  // }, false);
+
+
+
+  dialogEl.addEventListener('close', () => {
+
+    document.body.classList.remove('overflow-hidden');
+
+    if(closeCallback) {
+      closeCallback(dialogEl);
+    }
+    dialogEl.remove();
+
+  }, false);
+
+
+  document.body.classList.add('overflow-hidden');
+  dialogEl.showModal();
+  dialogEl.focus();
+
+  dialogEl.classList.add(styles.on);
+
+
+  return dialogEl;
+
+}

package/src/components/modal-popup/modal-popup.module.css

@@ -0,0 +1,88 @@
+/*
+NB:
+`--_modal-popup-width` and `--_modal-popup-height` are used with a fallback value
+but can be set with a desired value caso per caso
+
+*/
+.dialog {
+
+  position: fixed;
+
+  display: block;
+
+  width: var(--_modal-popup-width, max-content);
+  min-width: 400px;
+  max-width: 98dvw;
+  height: var(--_modal-popup-height, max-content);
+  min-height: 300px;
+  max-height: 90dvh;
+  padding: 0;
+  margin: auto;
+  overflow: visible;
+  background-color: var(--body-background-color);
+  border: none;
+  border-radius: var(--modal-popup-border-radius);
+  box-shadow: var(--modal-popup-drop-shadow);
+  scale: 0;
+  transition: scale .2s ease-out;
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--modal-popup-backdrop-color);
+  }
+
+  &.on {
+    scale: 1;
+  }
+
+}
+
+.closeButton  {
+
+  position: absolute;
+  top: calc(-1 * var(--modal-popup-btn-close-size) / 3);
+  right: calc(-1 * var(--modal-popup-btn-close-size) / 3);
+}
+
+.contentWrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+
+.content {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: var(--size-base) var(--size-sm) var(--size-sm);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+
+  .scrollBarPadding & {
+    padding-inline-end: var(--size-md);
+  }
+
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overscroll-behavior: contain;
+  border: none;
+}
+
+
+.header {
+
+}
+
+.footer {
+
+}

package/src/components/spinner/spinner.js

@@ -0,0 +1,8 @@
+import * as styles from './spinner.module.css';
+
+// NB la classe spinner è legata al tipo di spinner che si decide di usare, il cui file va incluso
+// TODO sistema per coinfigurare il tipo di spinner da utilizzare, per permettere l'uso di più tipi di spinner nello stesso progetto
+
+export function spinner() {
+  return `<div class="${styles.spinnerWrapper}"><div class="spinner">Loading...</div></div>`;
+}

package/src/components/spinner/spinner.module.css

@@ -0,0 +1,5 @@
+.spinnerWrapper {
+  display: grid;
+  place-content: center;
+  padding: 2rem;
+}

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

@@ -59,7 +59,7 @@
     vertical-align: top;
     text-align: start;
 
-    .valign-middle & {
+    .valign-middle &, &.valign-middle {
       vertical-align: middle;
     }
   }

package/src/custom-properties.css

@@ -190,6 +190,10 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
+  --modal-popup-backdrop-color: rgb(0 0 0 / .6);
+  --modal-popup-border-radius: var(--size-base);
+  --modal-popup-btn-close-size: 1.6rem;
+  --modal-popup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
   --neutral-100: #666;
   --neutral-100-fg: #fff;
   --overlay-color: rgb(0 0 0 / .6);
@@ -273,6 +277,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/minimo.css

@@ -41,3 +41,6 @@
 @import '@minimo/css/position.css';
 @import '@minimo/css/visibility.css';
 
+
+/* spinner: include the css of the choosen spinner only */
+@import '@minimo/components/spinner/spinner-circle-basic.css';

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/src/parse-cols.js

@@ -120,7 +120,7 @@ export function parseCols(col_obj){
 
     } else if(col_obj._renderMode === 'numeric') {
       return {
-
+// TODO implementare merge con classi presenti nei parametri definiti dall'utente
         cellClass: 'text-end text-numeric',
         headerClass: 'text-end text-numeric', // NB: usata anche per il footer
       };