@massimo-cassandro/minimo 0.10.11 → 0.11.1

package/src/components/snackbar/snackbar.js

@@ -12,94 +12,88 @@ References
 
 */
 
+// TODO snackbar action
+// TODO gestione snackbar multiple (NO stacking)
+
+
 export function snackbar(message, options = {}){
 
   options = {
 
     status       : null, // danger, warning, info, success
-    duration     : 4000, // ms or false/null to avoid autoclose
+    duration     : 6000, // ms or false/null to avoid autoclose
     close_btn    : true, // true | false
 
-    // TODO snackbar action
     action       : null, // null or function
     action_text  : null, // null or string
 
     ...options
   };
 
-  domBuilder([
+  let _popover, _timeoutID;
+
+  const removePopover = () => {
+    if (_popover?.matches(':popover-open')) {
+      if (_timeoutID) clearTimeout(_timeoutID);
+
+      _popover.classList.add(styles.isHiding);
+
+      _popover.addEventListener('animationend', () => {
+        _popover.hidePopover();
+        _popover.remove();
+      }, { once: true });
+    }
+  };
+
+  _popover = domBuilder([
     {
-      className: classnames(styles.snackbar, options.status? styles[`status-${options.status}`] : null),
+      className: classnames(styles.snackbarOuter, options.status? styles[`status-${options.status}`] : null),
       attrs: {
         popover: 'manual',
-        role: options.action? 'alert' : 'status'
+        role: (options.action || ['danger','warning'].includes(options.status)) ? 'alert' : 'status'
       },
       children: [
         {
-          className: styles.text,
-          content: message
-        },
-        {
-          tag: 'button',
-          attrs: {
-            type: 'button',
-          },
-          className: classnames('btn-reset', styles.action),
-          content: options.action_text?? '_action-text_',
-          condition: options.action && (typeof options.action === 'function'),
-          // callback: el => {}
-        },
-        {
-          tag: 'button',
-          className: classnames('btn-close', styles.closeBtn),
-          attrs: {
-            type: 'button',
-          },
+          className: styles.snackbar,
+          children: [
+            {
+              // className: styles.text,
+              content: message
+            },
+            {
+              condition: options.action != null && (typeof options.action === 'function'),
+              tag: 'button',
+              attrs: {
+                type: 'button',
+              },
+              className: classnames('btn-reset', styles.action),
+              content: options.action_text?? '_action-text_',
+            },
+            {
+              tag: 'button',
+              className: classnames('btn-close', styles.closeBtn),
+              attrs: {
+                type: 'button',
+              },
+              callback: el => el.addEventListener('click', () => removePopover())
+            }
+          ]
         }
       ]
     }
   ], document.body);
 
-}
-
-/*
-export const NotificationCore = {
-
-  createNotificationElement(message, options = {}) {
-
+  _popover.showPopover();
 
 
-    const show = () => {
-      document.body.appendChild(el);
-      el.showPopover();
-      setTimeout(() => hide(), duration);
-    };
+  if(options.duration) {
+    _timeoutID = setTimeout(removePopover, options.duration);
 
-    const hide = () => {
-      if (el.matches(':popover-open')) {
-        el.hidePopover();
-        el.remove(); // Pulizia del DOM
-      }
-    };
+    // mette in pausa il timeout sull'hover
+    _popover.addEventListener('mouseenter', () => clearTimeout(_timeoutID));
+    _popover.addEventListener('mouseleave', () => {
+      _timeoutID = setTimeout(removePopover, options.duration);
+    });
 
-    return { el, show, hide };
   }
-};
-
-
-
-
-toast
-
-import { NotificationCore } from './notifications.js';
-
-export const toast = (message, type = 'info') => {
-  const { el, show } = NotificationCore.createBase(message, { type, duration: 4000 });
-
-  el.classList.add('ui-toast');
-
-  show();
-};
-
-
- */
+}

package/src/components/snackbar/snackbar.module.css

@@ -1,75 +1,105 @@
 /* purgecss start ignore */
 
-.snackbar {
+.snackbarOuter {
+  position: fixed;
+  inset-block: auto var(--size-md);
+  /* inset-inline: 0 auto; */
+  z-index: var(--z-index-snackbar);
+  inline-size: 20dvw;
+  min-inline-size: min(100%, 37ch);
+  padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
+  margin-inline: auto;
+  background-color: var(--snackbar-outer-background-color);
+  border: var(--snackbar-outer-border);
+  border-radius: var(--snackbar-outer-border-radius);
+  box-shadow: var(--snackbar-outer-drop-shadow);
+  animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
+
+  &.isHiding {
+    animation: slide-out .25s ease-in forwards;
+  }
 
 }
 
-.text {}
-.action {}
-.closeBtn {}
+.snackbar {
+  display: flex;
+  gap: var(--size-xs);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--size-xs) var(--size-sm);
+  font-size: var(--snackbar-font-size);
+  color: var(--snackbar-text-color);
+  background-color: var(--snackbar-background-color);
+  border-radius: var(--snackbar-border-radius);
+
+  &::backdrop {
+    display: none;
+  }
 
+  * {
+    overflow-wrap: break-word;
+  }
+}
 
-/* purgecss end ignore */
+/* .text {} */
 
+.action {
+  margin-inline-start: auto;
+}
+.closeBtn {
+  --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */
 
-/*
+  --btn-close-background-color: var(--snackbar-btn-close-background-color);
+  --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
+  --btn-close-icon-bar-size: 2px;
 
 
+  --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
+  --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
+  --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);
 
+  --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
+  --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
+  --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);
 
+  --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
+  --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);
 
-.toastWrapper {
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline: 0;
-  z-index: 1;
 
-  display: grid;
-  gap: 1vh;
-  justify-content: center;
-  justify-items: stretch;
-  padding-block-end: 5vh;
+  border: none;
 
-  pointer-events: none;
+  &:active {
+    scale: .6;
+  }
 }
 
-.toast {
-  --_bg-lightness: 90%;
-  --_travel-distance: 0;
-
-  max-inline-size: min(25ch, 90vw);
-  padding-block: .5ch;
-  padding-inline: 1ch;
-
-  font-size: var(--toast-font-size);
-  color: var(--toast-text-color);
-  background: hsl(0 0% var(--_bg-lightness) / 90%);
-  border-radius: var(--toast-border-radius);
-  animation:
-    fade-in .3s ease,
-    slide-in .3s ease,
-    fade-out .3s ease var(--toast-duration);
-
-  will-change: transform;
-
-  @media (--dark) {
-    --_bg-lightness: 20%;
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(100% + var(--size-md));
   }
-
-  @media (--motionOK) {
-    --_travel-distance: 5vh;
+  to {
+    opacity: 1;
+    translate: 0 0;
   }
 }
 
-@keyframes fade-in {
-  from { opacity: 0; }
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+  to {
+    opacity: 0;
+    translate: 0 calc(100% + var(--size-md));
+  }
 }
 
-@keyframes fade-out {
-  to { opacity: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .snackbarOuter,
+  .snackbarOuter.isHiding {
+    animation: none;
+  }
 }
 
-@keyframes slide-in {
-  from { transform: translateY(var(--_travel-distance, 10px)); }
-}
- */
+/* purgecss end ignore */

package/src/css/buttons/btn-close.css

@@ -24,14 +24,15 @@
   &::before, &::after {
     position: absolute;
     top: 50%;
-    left: 0; /* calc(var(--btn-close-icon-bar-size) / 2); */
+    left: 50%;
     display: block;
     width: var(--_icon-bar-width);
     height: var(--btn-close-icon-bar-size);
     content: '';
     background: currentColor;
     transform-origin: center;
-    translate: var(--btn-close-padding) -50%;
+    /* translate: var(--btn-close-padding) -50%; */
+    translate: -50% -50%;
   }
   &::before {
     rotate: 45deg;

package/src/css/forms/forms.css

@@ -3,6 +3,7 @@
 /* TODO multiselect */
 /* TODO classe grid specifica per i form ?? (.form-grid?) */
 /* TODO customizable select */
+/* TODO form-check: rifare come flex, separare? */
 
 .form-group:has([required]):not(:has([disabled])) {
 

package/src/custom-properties.css

@@ -12,13 +12,14 @@
   --badge-lg-font-weight: var(--badge-font-weight);
   --body-background-color: #fff;
   --body-text: var(--text-color);
+  --box-shadow-base: 0 0 .75rem 0 rgb(0 0 0 / .25);
   --btn-border-radius: var(--form-control-border-radius);
   --btn-border-width: var(--form-control-border-width);
   --btn-close-active-background-color: var(--btn-close-background-color);
   --btn-close-active-icon-color: var(--link-active-color);
   --btn-close-background-color: var(--body-background-color);
   --btn-close-border-color: var(--btn-close-icon-color);
-  --btn-close-border-radius: 3.125rem;
+  --btn-close-border-radius: 50%;
   --btn-close-border-width: .125rem;
   --btn-close-focus-outline-color: var(--link-focus-outline-color);
   --btn-close-focus-outline-offset: .125rem;
@@ -227,10 +228,26 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
-  --snackbar-border-radius: var(--radius-sm);
-  --snackbar-duration: 5s;
+  --snackbar-background-color: var(--secondary-100);
+  --snackbar-border-radius: var(--radius-xs);
+  --snackbar-btn-close-active-background-color: transparent;
+  --snackbar-btn-close-active-icon-color: var(--snackbar-text-color);
+  --snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
+  --snackbar-btn-close-focus-outline-offset: .125rem;
+  --snackbar-btn-close-focus-outline-width: .125rem;
+  --snackbar-btn-close-hover-background-color: color-mix(in srgb, var(--snackbar-text-color) 40%, transparent);
+  --snackbar-btn-close-hover-border-color: transparent;
+  --snackbar-btn-close-hover-icon-color: var(--snackbar-background-color);
+  --snackbar-btn-close-icon-color: var(--snackbar-text-color);
+  --snackbar-btn-close-size: 1rem;
   --snackbar-font-size: var(--font-size-sm);
-  --snackbar-text-color: var(--text-color);
+  --snackbar-outer-background-color: var(--secondary-100);
+  --snackbar-outer-border: none;
+  --snackbar-outer-border-radius: var(--radius-xs);
+  --snackbar-outer-drop-shadow: var(--box-shadow-base);
+  --snackbar-outer-padding-block: 0;
+  --snackbar-outer-padding-inline: 0;
+  --snackbar-text-color: var(--secondary-100-fg);
   --spinner-color: var(--primary-100);
   --spinner-size: var(--size-lg);
   --spinner-stroke-width: .125rem;
@@ -266,4 +283,5 @@
   --text-selected-background-color: #ddd;
   --text-selected-color: var(--body-text);
   --z-index-overlay: 99;
+  --z-index-snackbar: 100;
 }

package/src/web-components/s-datatable-component/docs.md

@@ -0,0 +1,187 @@
+# `s-datatable` web-component for simple-datatatble
+
+</https://fiduswriter.github.io/simple-datatables/documentation/>
+
+
+## Utilizzo da markup
+
+```html
+ <s-datatable
+   json="/api/data.json"
+   cols='[{"_heading":"Nome","_field":"name"}, ...]'
+   perPage="10"
+ ></s-datatable>
+ 
+ <!-- Alternativa: dati inline via attributo (utile per SSR/Twig/Blade).
+      Se presenti entrambi, `data` ha la precedenza su `json`. -->
+ <s-datatable
+   data='[{"name":"Mario","city":"Roma"}, ...]'
+   cols='[{"_heading":"Nome","_field":"name"}, ...]'
+   perPage="10"
+ ></s-datatable>
+ ```
+ 
+## Utilizzo da script
+
+```javascript
+const el = document.querySelector('s-datatable');
+// oppure: const el = document.createElement('s-datatable');
+
+el.init({
+  json: '/api/data.json',
+  cols: [{ _heading: 'Nome', _field: 'name' }, ...],
+  perPage: 10
+});
+
+// Alternativa: dati inline (array di oggetti) al posto di json
+el.init({
+  data: [{ name: 'Mario', city: 'Roma' }, ...],
+  cols: [{ _heading: 'Nome', _field: 'name' }, ...],
+});
+// Se presenti entrambi, `data` ha la precedenza su `json`.
+
+// Se appena creato, appendere dopo init():
+document.body.appendChild(el);
+```
+ 
+## Utilizzo misto – attributi HTML + script
+
+I parametri non inclusi in init() vengono letti dall'attributo HTML corrispondente. Si possono quindi separare configurazione statica (`cols`, `perPage`) nel markup e dati dinamici (json) nello script:
+
+```html 
+<s-datatable
+  id="table-utenti"
+  cols='[{"_heading":"Nome","_field":"name"},{"_heading":"Città","_field":"city"}]'
+  perPage="20"
+></s-datatable>
+```
+ 
+```javascript
+el.init({ json: '/api/utenti.json' }); // → json da script, cols e perPage da attributo
+```
+ 
+Ordine di precedenza: config (script) > attributo HTML > default interno.
+
+Per ignorare esplicitamente un attributo e ricadere sul default, passare `null` nel config:
+
+```javascript
+el.init({ json: '/api/data.json', cols: null }); // → cols = null, l'attributo viene saltato
+```
+ 
+## Reazione ad eventi esterni
+
+Il componente ascolta tre CustomEvent che altri componenti possono emettere sul `document` (o su qualsiasi antenato del componente nel DOM):
+ 
+### `datatable:search`
+
+Applica una ricerca su una o più colonne.
+
+`detail: { term: string, columns?: number[] }`
+
+Esempio – ricerca globale:
+
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:search', {
+  detail: { term: 'mario' }
+}));
+```
+
+Esempio – ricerca su colonna 0 e 2:
+
+```javascript
+  document.dispatchEvent(new CustomEvent('datatable:search', {
+    detail: { term: 'mario', columns: [0, 2] }
+  }));
+```
+
+### `datatable:multisearch`
+     
+Applica più filtri contemporaneamente (uno per colonna).
+
+`detail: { queries: Array<{ terms: string[], columns?: number[] }> }`
+ 
+Esempio – filtra colonna 1 per "mario" E colonna 3 per "roma":
+
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:multisearch', {
+  detail: {
+    queries: [
+      { terms: ['gino'], columns: [1] },
+      { terms: ['roma'],  columns: [3] }
+    ]
+  }
+}));
+```
+ 
+### `datatable:reload`
+
+Ricarica i dati da un nuovo URL JSON (o dallo stesso URL originale se json è omesso), opzionalmente con nuove colonne o dati inline.
+
+`detail: { json?: string, data?: Array, cols?: Array }`
+
+Esempio – reload stesso URL:
+
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:reload', {
+  detail: {}
+}));
+```
+
+Esempio – nuovo endpoint + nuove colonne:
+
+
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:reload', {
+  detail: {
+    json: '/api/data-filtered.json',
+    cols: [{ _heading: 'Nome', _field: 'name' }]
+  }
+}));
+```
+
+Esempio – dati inline (senza fetch):
+
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:reload', {
+  detail: {
+    data: [{ name: 'Mario', city: 'Roma' }],
+    cols: [{ _heading: 'Nome', _field: 'name' }]
+  }
+}));
+```
+ 
+
+## Targeting – se nella pagina ci sono più istanze di s-datatable
+
+
+Aggiungere l'attributo `id` al componente e includere `target` nel detail:
+ 
+`<s-datatable id="table-utenti" ...></s-datatable>`
+ 
+```javascript
+document.dispatchEvent(new CustomEvent('datatable:search', {
+  detail: { term: 'mario', target: 'table-utenti' }
+}));
+```
+
+Se `target` è assente, l'evento viene raccolto da TUTTE le istanze.
+
+## Esempio parametro `cols`
+
+```javascript
+{
+
+  cols: [
+    {
+      _field         // chiave campo json (anche composta es: `key1.key2`),
+      _heading       // testo th
+      _title         // testo `title` del `th`
+      _renderMode    // preset rendering predefiniti
+      _renderTpl     // stringa mustache-like per la composizione della cella (chiavi indicate forma `[[chiave]]`)
+      type           // parametri simple-datatable (senza `_`)
+      searchable     // ...
+      sortable       // ...
+      // ...
+    }
+  ]
+}