mypgs 1.6.0 → 2.0.0

package/assets/javascript/components/_stepTabs.js

@@ -1,6 +1,6 @@
 const API = new WeakMap();
 
-export function PGS_stepTabs_init(root = document) {
+function PGS_stepTabs_init(root = document) {
     pgs(root).querySelectorAll("stepTabs").forEach(tabsWizard => {
         if (tabsWizard.dataset.stepTabsInitialized === "true") return;
         tabsWizard.dataset.stepTabsInitialized = "true";
@@ -32,7 +32,7 @@ export function PGS_stepTabs_init(root = document) {
                 const dot = document.createElement("button");
                 dot.type = "button";
                 pgs(dot).add("stepTabs-dots-dot");
-                dot.setAttribute("data-step", index);
+                pgs(dot).option.setValueBrackets("step", index);
                 dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
 
                 dot.addEventListener("click", () => {
@@ -97,7 +97,7 @@ export function PGS_stepTabs_init(root = document) {
         //= INIT
         goTo(0, false);
 
-        //= data-tab-locked
+        //= tab-locked
         const observer = new MutationObserver(() => {
             if (isRendering) return;
             updateControls();
@@ -135,7 +135,7 @@ export function PGS_stepTabs_init(root = document) {
 
 PGS_stepTabs_init()
 
-export function PGS_stepTabs_api(selector) {
+function PGS_stepTabs_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_steps.js

@@ -1,6 +1,6 @@
 const API = new WeakMap();
 
-export function PGS_steps_init(root = document) {
+function PGS_steps_init(root = document) {
     pgs(root).querySelectorAll("steps").forEach(steps => {
         if (API.has(steps)) return;
 
@@ -43,7 +43,7 @@ export function PGS_steps_init(root = document) {
 PGS_steps_init()
 
 //# API
-export function PGS_steps_api(selector) {
+function PGS_steps_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_summary.js

@@ -20,7 +20,7 @@ function directPgsChild(element, token) {
     return Array.from(element.children).find(child => pgs(child).contains(token));
 }
 
-export function PGS_summary_init(root = document) {
+function PGS_summary_init(root = document) {
     pgs(root).querySelectorAll("summary").forEach((summary) => {
         if (API.has(summary)) return;
 
@@ -95,7 +95,7 @@ export function PGS_summary_init(root = document) {
 PGS_summary_init();
 
 //# API
-export function PGS_summary_api(selector) {
+function PGS_summary_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/functions/_formValidate.js

@@ -1,40 +1,43 @@
+import { pgs } from "../_pgs.js";
 import { PGS_notification } from "../components/_notifications.js";
 
 
 export class PGS_formValidate {
-    constructor({ form } = {}) {
+    #message = {};
+    #insideValidatedCallback = false;
+
+    constructor(form, options = {}) {
+        if (!options || typeof options !== "object" || Array.isArray(options)) {
+            throw new TypeError("options must be an object");
+        }
+
         this.container = form;
         this._rules = [];
-        // pgs(this.container).add("formError"); 
+        this.message = {
+            fieldError: "Please complete this field.",
+            fieldsError: "Please complete all required fields.",
+            success: "Submitted successfully."
+        };
+
+        if (options.message !== undefined) this.message = options.message;
+        this.container?.setAttribute("novalidate", "");
     }
 
-    //+ ADD
-    addError(field, i) {
-        field.setAttribute("data-form-field-status", "error");
-        if (i == 0) field.scrollIntoView();
-
-        let message = field.getAttribute("data-form-field-message");
-
-        if (i == 0 && message) PGS_notification.toast.error(message);
-        else if (i == 0) PGS_notification.toast.error("Compila tutti i campi!");
+    get message() {
+        return { ...this.#message };
     }
 
-    //+ REMOVE
-    removeError(field) {
-        field.setAttribute("data-form-field-status", "");
-    }
+    set message(value) {
+        if (!value || typeof value !== "object" || Array.isArray(value)) {
+            throw new TypeError("message must be an object");
+        }
 
-    #removeErrorOnClick(allFields) {
-        allFields.forEach(element => {
-            element.addEventListener("click", e => this.removeError(element))
-        });
+        this.#message = { ...this.#message, ...value };
     }
 
-    // + --------------------------
-    // + Helpers                   
-    // + --------------------------
-    help = {
-        // supporta sia required nativo, sia data-required="true"
+    // - Helpers
+    #help = {
+        // supporta sia required nativo
         isRequired(field) {
             if (!field) return false;
 
@@ -77,26 +80,26 @@ export class PGS_formValidate {
             if (input.type === "hidden") return false;
             if (input.type === "checkbox" || input.type === "radio" || input.type === "file") return false;
 
-            // valida solo se required (o data-required="true")
-            if (!this.help.isRequired(input)) return false;
+            // valida solo se required
+            if (!this.#help.isRequired(input)) return false;
 
-            return this.help.isEmptyTextLike(input);
+            return this.#help.isEmptyTextLike(input);
         });
 
         //== TEXTAREA 
         // required vuote
         const textareas = Array.from(container.querySelectorAll("textarea")).filter((ta) => {
             if (ta.disabled) return false;
-            if (!this.help.isRequired(ta)) return false;
-            return this.help.isEmptyTextLike(ta);
+            if (!this.#help.isRequired(ta)) return false;
+            return this.#help.isEmptyTextLike(ta);
         });
 
         //== SELECT 
         // required vuoti
         const selects = Array.from(container.querySelectorAll("select")).filter((sel) => {
             if (sel.disabled) return false;
-            if (!this.help.isRequired(sel)) return false;
-            return this.help.isEmptySelect(sel);
+            if (!this.#help.isRequired(sel)) return false;
+            return this.#help.isEmptySelect(sel);
         });
 
         //== RADIO 
@@ -104,8 +107,8 @@ export class PGS_formValidate {
         const radios = Array.from(container.querySelectorAll('input[type="radio"]')).filter((r) => !r.disabled);
         const requiredRadioGroups = new Map(); // name -> [elements]
         for (const r of radios) {
-            if (!this.help.isRequired(r)) continue;
-            const name = this.help.getGroupName(r);
+            if (!this.#help.isRequired(r)) continue;
+            const name = this.#help.getGroupName(r);
             if (!name) continue;
             if (!requiredRadioGroups.has(name)) requiredRadioGroups.set(name, []);
             requiredRadioGroups.get(name).push(r);
@@ -126,9 +129,9 @@ export class PGS_formValidate {
         const requiredCheckboxSingles = [];
         const requiredCheckboxGroups = new Map(); // name -> [elements]
         for (const c of checkboxes) {
-            if (!this.help.isRequired(c)) continue;
+            if (!this.#help.isRequired(c)) continue;
 
-            const name = this.help.getGroupName(c);
+            const name = this.#help.getGroupName(c);
             if (!name) {
                 // checkbox senza name: trattala come singola required
                 if (!c.checked) requiredCheckboxSingles.push(c);
@@ -151,7 +154,7 @@ export class PGS_formValidate {
         // required: se vuoi includerlo
         const fileInputs = Array.from(container.querySelectorAll('input[type="file"]')).filter((f) => {
             if (f.disabled) return false;
-            if (!this.help.isRequired(f)) return false;
+            if (!this.#help.isRequired(f)) return false;
             return !(f.files && f.files.length > 0);
         });
 
@@ -167,12 +170,37 @@ export class PGS_formValidate {
             ruleInvalidFields
         ];
 
-        return invalidFields.flat();
+        return [...new Set(invalidFields.flat())];
+    }
+
+    //+ ADD
+    addFieldError(field, i = 0, total = 1) {
+        pgs(field).option.add("error");
+        if (i === 0) field.scrollIntoView();
+
+        if (i !== 0) return;
+
+        if (total > 1) {
+            PGS_notification.toast.error(this.message.fieldsError);
+            return;
+        }
+
+        const message = pgs(field).option.getValueBrackets("message");
+        PGS_notification.toast.error(message || this.message.fieldError);
+    }
+
+    //+ REMOVE
+    removeFieldError(field) {
+        pgs(field).option.remove("error");
+    }
+
+    // + SUCCESS
+    success(text = this.message.success) {
+        if (this.#insideValidatedCallback || this.validate() === true) PGS_notification.toast.success(text)
     }
 
-    // + -------------------------
-    // + VALIDATE                 
-    // + -------------------------
+
+    // + VALIDATE
     validate() {
         const invalid = this.#inputValue(this.container);
         const allFields = this.container.querySelectorAll("input, textarea, select")
@@ -183,34 +211,50 @@ export class PGS_formValidate {
 
         //== per radio/checkbox in gruppo: 
         // rimuovi l'errore solo sull'elemento che lo ospita (qui: se presente)
-        for (const el of allFields) { if (!invalid.includes(el)) this.removeError(el); }
+        for (const el of allFields) { if (!invalid.includes(el)) this.removeFieldError(el); }
 
         //== aggiungo errori dove serve
-        invalid.forEach((el, i) => this.addError(el, i))
+        invalid.forEach((el, i) => this.addFieldError(el, i, invalid.length))
 
         //== rimuove l'errore al click
-        this.#removeErrorOnClick(allFields)
+        allFields.forEach(element => element.addEventListener("click", e => this.removeFieldError(element)));
 
         //== status form
         if (invalid.length) {
-            this.container.setAttribute("data-form-status", "error");
+            pgs(this.container).option.remove("success").add("error");
             return false;
         } else {
-            this.container.setAttribute("data-form-status", "success");
+            pgs(this.container).option.remove("error").add("success");
             return true;
         }
     }
 
-    ifSuccess(text = "Inviato con successo") {
-        if (this.validate() == true) PGS_notification.toast.success(text)
+    // + EVENT VALIDATOR
+    validator(callback, eventName = "submit") {
+        if (typeof callback !== "function") throw new TypeError("callback must be a function");
+        if (typeof eventName !== "string" || !eventName.trim()) throw new TypeError("eventName must be a non-empty string");
+
+        this.container.addEventListener(eventName, event => {
+            event.preventDefault();
+            if (!this.validate()) return;
+
+            this.#insideValidatedCallback = true;
+
+            try {
+                this.success();
+                callback(event);
+            } finally {
+                this.#insideValidatedCallback = false;
+            }
+        });
+
+        return this;
     }
 
-    // + -------------------------
-    // + ADD RULE                 
-    // + -------------------------
-    addNewRule(container) {
-        if (typeof container !== "function") throw new Error("Rule must be a function");
-        this._rules.push(container);
+    // + ADD RULE
+    addNewRule(rule) {
+        if (typeof rule !== "function") throw new Error("Rule must be a function");
+        this._rules.push(rule);
         return this;
     }
 }

package/assets/javascript/functions/_scrollY.js

@@ -1,4 +1,4 @@
-export function PGS_scrollHorizontal(querySelector, dataSpeed) {
+export function PGS_scrollHorizontal(element, speed) {
     // Se hai più contenitori, selezionali tutti:
     // Semplice "singleton" per stimare se la sorgente è trackpad
     const TrackpadDetector = (() => {
@@ -40,10 +40,7 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
 
     //= Scorrimento orizzontale con rotella (evita il trackpad)
     
-    let el = querySelector
-    el.addEventListener('wheel', (e) => {
-        const speed = dataSpeed;
-
+    const onWheel = (e) => {
         //== lascia lo scroll naturale del trackpad
         if (TrackpadDetector.update(e)) return;
 
@@ -54,11 +51,11 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
         //== Converti delta in px per lo shift orizzontale
         let delta = e.deltaY;
         if (e.deltaMode === 1) delta *= 16;
-        else if (e.deltaMode === 2) delta *= el.clientHeight;
+        else if (e.deltaMode === 2) delta *= element.clientHeight;
 
         //== Verifica se il contenitore può ancora scrollare orizzontalmente
-        const atStart = el.scrollLeft <= 0;
-        const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+        const atStart = element.scrollLeft <= 0;
+        const atEnd = element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
         const scrollingRight = delta > 0;
         const scrollingLeft = delta < 0;
         const canScrollHoriz =
@@ -72,6 +69,9 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
         e.preventDefault();
 
         //== rotella giù => destra
-        el.scrollLeft += delta * speed;
-    }, { passive: false });
+        element.scrollLeft += delta * speed;
+    };
+
+    element.addEventListener('wheel', onWheel, { passive: false });
+    return () => element.removeEventListener('wheel', onWheel);
 }

package/assets/javascript/layout/_header.js

@@ -8,7 +8,10 @@ function PGS_header(selectHeader = document) {
 
     const headerElements = pgs(header).querySelectorAll("header-element");
 
+    if (!headerElements.length) console.log('For the header to work correctly, insert "header-element" under "header"');
     if (!headerElements.length) return;
+    
+    
 
     headerElements.forEach(selectHeader => {
 

package/assets/scss/base/_html.scss

@@ -5,14 +5,14 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+    scroll-margin-top: var(--page-topScroll);
 
     // Reset properties 
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+        scroll-margin-top: var(--page-topScroll);
     }
 
     &:root,

package/assets/scss/base/_variables.scss

@@ -19,8 +19,8 @@
     --text-shadow: 0px 0px 50px #000000;
     --backdrop: #0000003e;
     --blur: blur(20px);
-    --page-top: calc(var(--heightOfHeader) + (var(--gap-elements)*2));
-    --page-topScroll: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
+    --page-top: calc(var(--heightOfHeader) + var(--heightOfHeader));
+    --page-topScroll: calc(var(--heightOfHeaderScroll) + var(--heightOfHeader));
     --page-width: 1280px;
     --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
     --gap-texts: 1.0rem;

package/assets/scss/components/_form.scss

@@ -50,6 +50,6 @@
     @include form();
 }
 
-[pgs~=formError] {
-    @include formError();
+[pgs~=formValidate] {
+    @include formValidate();
 }

package/assets/scss/components/_notification.scss

@@ -3,34 +3,7 @@
 //= NOTIFICATION GROUP / TRIGGER
 [pgs~="notificationTrigger"] {}
 
-//= NOTIFICATION STYLE
-@mixin notification($position: center) {
-    @if ($position ==center) {
-        inset-inline: 0;
-        top: calc(var(--heightOfHeader) + 10px);
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 10px;
-        }
-    }
-
-    @else if($position ==right) {
-        top: calc(var(--heightOfHeader) + 10px);
-        right: 10px;
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 0;
-        }
-    }
-
-    @else if($position ==bottom) {
-        bottom: 10px;
-        right: 10px;
-    }
-}
-
-[pgs~="notification"],
-[pgs~="toast"] {
+[pgs~="notification"] {
     display: flex;
     flex-direction: column;
     gap: var(--gap-texts);
@@ -183,10 +156,30 @@
     }
 }
 
-[pgs~="notification"] {
+//= NOTIFICATION STYLE
+@mixin notification($position: center) {
+    $size: 1.0rem;
+
+    @if ($position ==center) {
+        inset-inline: 0;
+        top: calc(var(--heightOfHeaderScroll) + $size);
+    }
+
+    @else if($position ==right) {
+        top: calc(var(--heightOfHeaderScroll) + $size);
+        right: $size;
+    }
+
+    @else if($position ==bottom) {
+        inset-inline: 0;
+        bottom: $size;
+    }
+}
+
+[pgs~="notification"]:not([pgs-option~="toast"]) {
     @include notification(right);
 }
 
-[pgs~="toast"] {
+[pgs~="notification"][pgs-option~="toast"] {
     @include notification(center);
 }

package/assets/scss/components/_search.scss

@@ -5,9 +5,9 @@
     --search-suggestions-color: var(--color-text);
     --search-suggestions-border: var(--border-complete);
     --search-suggestions-borderRadius: var(--border-radius-input);
-    --search-suggestions-box-shadow: var(--box-shadow);
+    --search-suggestions-boxShadow: var(--box-shadow);
     --search-suggestions-gap: 0;
-    --search-suggestions-max-height: 32rem;
+    --search-suggestions-maxHeight: 32rem;
     --search-suggestions-offset: .5rem;
     --search-suggestions-padding: .5rem;
     --search-suggestions-item-padding: 1rem;
@@ -15,12 +15,12 @@
     --search-suggestions-item-selected-color: var(--color-whiteFixed);
     position: relative;
     @include flexRow(nowrap);
+    @include button_header();
     flex: 1;
     width: 100%;
     overflow: visible;
     margin-inline: auto;
     padding: 0;
-    @include button_header();
 
     @media (min-width: $mobile) {
         min-width: 21.4rem;
@@ -67,30 +67,33 @@
         outline: var(--focus-visible);
     }
 
-    &:not([pgs-state~="open"])>[pgs~="search-suggestions"] {
-        display: none;
-    }
+    @mixin _color($varColor) {
+        background: var(#{$varColor}-background);
+        color: var(#{$varColor}-color);
 
-    &[pgs-state~="open"]>[pgs~="search-suggestions"] {
-        display: flex;
+        i {
+            color: var(#{$varColor}-color);
+            --fa-primary-color: var(#{$varColor}-color);
+            --fa-secondary-color: var(#{$varColor}-color);
+        }
     }
 
-    >[pgs~="search-suggestions"] {
+    [pgs~="search-suggestions"] {
+        display: none;
         position: absolute;
         inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
         z-index: 1000;
         flex-direction: column;
         gap: var(--search-suggestions-gap);
-        max-height: var(--search-suggestions-max-height);
+        max-height: var(--search-suggestions-maxHeight);
         overflow-y: auto;
         padding: var(--search-suggestions-padding);
         margin: 0;
         list-style: none;
         border: var(--search-suggestions-border);
         border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
-        background: var(--search-suggestions-background);
-        color: var(--search-suggestions-color);
-        box-shadow: var(--search-suggestions-box-shadow);
+        box-shadow: var(--search-suggestions-boxShadow);
+        @include _color(--search-suggestions);
 
         [pgs~="search-suggestions-item"] {
             padding: var(--search-suggestions-item-padding);
@@ -100,8 +103,7 @@
 
             &[aria-selected="true"],
             &:hover {
-                background: var(--search-suggestions-item-selected-background);
-                color: var(--search-suggestions-item-selected-color);
+                @include _color(--search-suggestions-item-selected);
             }
 
             &[aria-disabled="true"] {
@@ -110,17 +112,21 @@
             }
         }
 
-        &:has([pgs~="search-suggestions-item"]:hover) [pgs~="search-suggestions-item"][aria-selected="true"] {
-            background: var(--search-suggestions-background);
-            color: var(--search-suggestions-color);
+        &:has([pgs~="search-suggestions-item"]:hover) {
+            [pgs~="search-suggestions-item"][aria-selected="true"] {
+                @include _color(--search-suggestions);
 
-            &:hover {
-                background: var(--search-suggestions-item-selected-background);
-                color: var(--search-suggestions-item-selected-color);
+                &:hover {
+                    @include _color(--search-suggestions-item-selected);
+                }
             }
         }
     }
 
+    &[pgs-state~="open"] [pgs~="search-suggestions"] {
+        display: flex;
+    }
+
     @at-root dialog #{&} {
         max-width: calc(100% - var(--padding-page) * 2);
         height: max-content;

package/assets/scss/layout/_pageShell.scss

@@ -18,9 +18,12 @@ $pageShell-test-gap: 4rem;
 }
 
 [pgs~="pageShell"] {
-    --pageShell-aside-sticky-top: 0;
+    --pageShell-width: calc(var(--pageShell-content-width) + (var(--padding-page) * 2));
+    --pageShell-content-width: var(--page-width);
     --pageShell-aside-width: #{$aside-size};
-    --pageShell-content-width: 500px;
+    --pageShell-aside-sticky-top: 0;
+    --pageShell-paddingInline: var(--padding-page);
+    --pageShell-paddingTop: var(--page-top);
     --pageShell-gap: var(--gap-elements);
     display: flex;
     flex-wrap: wrap;
@@ -29,17 +32,17 @@ $pageShell-test-gap: 4rem;
     align-items: start;
     justify-content: center;
     width: 100%;
-    max-width: calc(var(--page-width) + (var(--padding-page) * 2));
-    padding-inline: var(--padding-page);
+    max-width: var(--pageShell-width);
+    padding-inline: var(--pageShell-paddingInline);
     container-type: inline-size;
 
     [pgs~="pageShell-content"] {
         grid-area: content;
-        flex: 999 1 var(--pageShell-content-width);
-        min-width: min(100%, var(--pageShell-content-width));
-        width: min(100%, var(--page-width));
-        max-width: var(--page-width);
-        padding-top: var(--page-top);
+        flex: 999 1 $content-size;
+        min-width: min(100%, $content-size);
+        width: min(100%, var(--pageShell-content-width));
+        max-width: var(--pageShell-content-width);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
     }
 
@@ -56,7 +59,7 @@ $pageShell-test-gap: 4rem;
         overscroll-behavior: contain;
         scrollbar-gutter: stable;
         scrollbar-width: none;
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
         flex: 1 1 var(--pageShell-aside-width);
         min-width: min(100%, var(--pageShell-aside-width));
@@ -82,7 +85,7 @@ $pageShell-test-gap: 4rem;
             overscroll-behavior: contain;
             scrollbar-gutter: stable;
             scrollbar-width: none;
-            padding-top: var(--page-top);
+            padding-top: var(--pageShell-paddingTop);
             padding-bottom: calc(var(--gap-elements)*2);
 
             &::-webkit-scrollbar {
@@ -116,11 +119,11 @@ $pageShell-test-gap: 4rem;
     }
 
     &:has(> [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
     }
 
     &:has(> [pgs~="pageShell-aside"] ~ [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
     }
 
     //== RESPONSIVE ==//
@@ -150,7 +153,7 @@ $pageShell-test-gap: 4rem;
     &:has(> [pgs~="pageShell-aside"]):has(> [pgs~="pageShell-content"] + [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$aside-size} + (#{$pageShell-test-gap} * 2))) {
             display: grid;
-            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
+            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--pageShell-content-width));
             grid-template-areas:
                 "asideLeft content"
                 "asideLeft asideRight";
@@ -179,7 +182,7 @@ $pageShell-test-gap: 4rem;
     }
 
     @container (max-width: #{$content-size}) {
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
 
         [pgs~="pageShell-content"],
         [pgs~="pageShell-aside"] {