mypgs 1.0.0 → 1.1.2

package/assets/javascript/_pgs.js

@@ -138,15 +138,30 @@ export function pgs(root) {
             return api;
         };
 
-        api.toggle = function (value) {
+        api.toggle = function (value, force) {
             const v = String(value).trim();
             if (!v) return false;
-
             const current = read();
-            if (current.includes(v)) {
+            const exists = current.includes(v);
+
+            if (force !== undefined) {
+                if (force && !exists) {
+                    current.push(v);
+                    write(current);
+                }
+
+                if (!force && exists) {
+                    write(current.filter(x => x !== v));
+                }
+
+                return !!force;
+            }
+
+            if (exists) {
                 write(current.filter(x => x !== v));
                 return false;
             }
+            
             current.push(v);
             write(current);
             return true;

package/assets/javascript/components/_slides.js

@@ -30,8 +30,8 @@ class PGS_Slides {
 
         //== PULSANTI
         if (!pgs(EL).querySelector('slides-prec') && !pgs(EL).querySelector('slides-next')) {
-            EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec button" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
-            EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next button" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
+            EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec buttonIcon" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
+            EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next buttonIcon" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
         }
 
         //== DOTS
@@ -89,7 +89,7 @@ class PGS_Slides {
             const isView = visiblePercent >= 0.98;
 
             //== SCROLL ANIMATION
-            if (!pgs(LI.target).option.contains('notScrollAnimation')) {
+            if (!pgs(LI.target).option.contains('notScrollAnimation') && LI.target.firstElementChild) {
                 LI.target.firstElementChild.style.setProperty('--visible-percent', `${visiblePercent}`);
             };
 

package/assets/javascript/components/_stepTabs.js

@@ -0,0 +1,157 @@
+const API = new WeakMap();
+PGS_stepTabs()
+
+export function PGS_stepTabs() {
+    pgs(document).querySelectorAll("stepTabs").forEach(tabsWizard => {
+        if (tabsWizard.dataset.stepTabsInitialized === "true") return;
+        tabsWizard.dataset.stepTabsInitialized = "true";
+
+        //= SELECTOR
+        const prev = pgs(tabsWizard).querySelector("stepTabs-prev")
+        const next = pgs(tabsWizard).querySelector("stepTabs-next")
+        const restart = pgs(tabsWizard).querySelector("stepTabs-restart")
+        const dots = pgs(tabsWizard).querySelector("stepTabs-dots")
+        const tabsContainer = pgs(tabsWizard).querySelector("stepTabs-container");
+        const allTab = pgs(tabsContainer).querySelectorAll("tab");
+
+        //= SETTING
+        const total = allTab.length;
+        const defaultTabLocked = Array.from(allTab).filter(tab => pgs(tab).state.contains("is-locked"))        
+        let current = 0;
+        if (prev) prev.disabled = true;
+        let isRendering = false;
+
+        if (!tabsContainer || total === 0) return;
+
+        //- CREAZIONE DOTS
+        const tabDots = [];
+        if (dots) {
+            dots.innerHTML = "";
+
+            allTab.forEach((tab, index) => {
+                const iconClass = tab.getAttribute("data-tab-icon") || "fa-circle";
+                const dot = document.createElement("button");
+                dot.type = "button";
+                pgs(dot).add("stepTabs-dots-dot");
+                dot.setAttribute("data-step", index);
+                dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
+
+                dot.addEventListener("click", () => {
+                    if (pgs(dot).state.contains("is-completed")) {
+                        goTo(index, true);
+                    }
+                });
+
+                dots.appendChild(dot);
+                tabDots.push(dot);
+            });
+        }
+
+        //+ DOTS
+        function updateDots() {
+            tabDots.forEach((dot, i) => {
+                setState(dot, "is-active", i === current);
+                setState(dot, "is-completed", i < current);
+            });
+        }
+
+        //+ STATE
+        function setState(element, state, active) {
+            if (!element) return;
+            const hasState = pgs(element).state.contains(state);
+            if (active === hasState) return;
+            pgs(element).state.toggle(state, active);
+        }
+
+        //+ CONTROLS
+        function updateControls() {
+            const tab = allTab[current];
+            if (prev) prev.disabled = current === 0;
+            if (next) next.disabled = current === total - 1 || pgs(tab).state.contains("is-locked");
+        }
+
+        //+ Step
+        function goTo(index, scroll = true) {
+            current = Math.min(Math.max(index, 0), total - 1);
+            const tab = allTab[current]
+
+            isRendering = true;
+            allTab.forEach((tab, i) => setState(tab, "is-active", i === current));
+            updateControls();
+            updateDots();
+            isRendering = false;
+
+            if (scroll && !tabsWizard.closest("dialog")) {
+                tab?.focus();
+                tabsWizard?.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+
+            tabsWizard.dispatchEvent(new CustomEvent('stepTabs:change', { detail: { current, total } }));
+        }
+
+        //+ restart
+        function restartTab() {
+            goTo(0);
+            defaultTabLocked.forEach(tab => pgs(tab).state.add("is-locked"));
+        }
+
+        //= INIT
+        goTo(0, false);
+
+        //= data-tab-locked
+        const observer = new MutationObserver(() => {
+            if (isRendering) return;
+            updateControls();
+        });
+        allTab?.forEach(tabEl => observer.observe(tabEl, { attributes: true, attributeFilter: ["pgs-state"], }));
+
+        //= Click su Avanti/Indietro
+        prev?.addEventListener("click", e => goTo(current - 1));
+        next?.addEventListener("click", e => {
+            updateControls();
+            if (next.disabled) return;
+            goTo(current + 1);
+        });
+        restart?.addEventListener("click", e => restartTab(), { capture: true });
+
+        //-(API) 
+        // tabsWizard.addEventListener("stepTabs:reset", () => restartTab());
+        API.set(tabsWizard, {
+            restart: restartTab,
+            goTo,
+            next: () => goTo(current + 1),
+            prev: () => goTo(current - 1),
+            toggleLock: (step, lock = true) => typeof step === "number" && allTab[step] && (pgs(allTab[step]).state.toggle("is-locked", lock), goTo(current)),
+            getCurrent: () => current,
+            getState: () => ({ current, total }),
+        });
+    });
+}
+
+export function PGS_tabs_api(selector) {
+    return API.get(selector);
+}
+
+/* 
+    / EXAMPLE
+    // vai allo step 2
+    w.dispatchEvent(new CustomEvent("stepTabs:go", { detail: { step: 2 } }));
+    
+    // next
+    w.dispatchEvent(new CustomEvent("stepTabs:next"));
+    
+    // prev
+    w.dispatchEvent(new CustomEvent("stepTabs:prev"));
+    
+    // reset a 0 senza relock
+    w.dispatchEvent(new CustomEvent("stepTabs:reset"));
+    
+    // lock step 3
+    w.dispatchEvent(new CustomEvent("stepTabs:toggle-lock", { detail: { step: 3, lock: true } }));
+    
+    // unlock step 3
+    w.dispatchEvent(new CustomEvent("stepTabs:toggle-lock", { detail: { step: 3, lock: false } }));
+    
+    // leggi stato
+    w.dispatchEvent(new CustomEvent("stepTabs:get", { detail: { reply: (state) => console.log(state) } }));
+*/

package/assets/javascript/index.js

@@ -13,7 +13,7 @@ import "./components/_menu.js"
 import "./components/_modals.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
-import "./components/_tabs.js";
+import "./components/_stepTabs.js";
 
 //= patterns 
 import "./patterns/_header.js";

package/assets/scss/base/_body.scss

@@ -43,7 +43,7 @@
 //== IMG
 [pgs~="bodyImg"] {
     i {
-        line-height: 1.2 !important;
+        line-height: 1.2;
         font-size: var(--fa-size);
         transition: color 300ms;
 
@@ -113,9 +113,10 @@
     a {
         text-decoration: none;
         overflow-wrap: anywhere;
+        color: var(--color-black);
 
         &:hover {
-            color: color-mix(in srgb, var(--color-link) 100%, var(--color-whiteFixed) 50%);
+            color: color-mix(in srgb, var(--color-link) 100%, var(--color-white) 50%);
             text-decoration: underline;
         }
 

package/assets/scss/base/_general.scss

@@ -1,58 +1,61 @@
 //# GENERAL
-[pgs~=card],
-[pgs~=cardImg] {
-    @include card();
+[pgs~=initP] {
 
-    [pgs~=card-img] {
-        @include card-insideImg();
+    [pgs~=card],
+    [pgs~=cardImg] {
+        @include card();
+
+        [pgs~=card-img] {
+            @include card-insideImg();
+        }
     }
-}
 
-[pgs~=boxtext] {
-    @include boxtext();
-}
+    [pgs~=boxtext] {
+        @include boxtext();
+    }
 
-[pgs~=darkmode] {
-    color-scheme: dark;
-}
+    [pgs~=darkmode] {
+        color-scheme: dark;
+    }
 
-[pgs~=lightmode] {
-    color-scheme: light;
-}
+    [pgs~=lightmode] {
+        color-scheme: light;
+    }
 
-[pgs~=imgCover] {
-    object-fit: cover;
-}
+    [pgs~=imgCover] {
+        object-fit: cover;
+    }
 
-[pgs~=imgContain] {
-    object-fit: contain;
-}
+    [pgs~=imgContain] {
+        object-fit: contain;
+    }
 
-[pgs~=borderRadius] {
-    border-radius: var(--border-radius);
-}
+    [pgs~=borderRadius] {
+        border-radius: var(--border-radius);
+    }
 
-[pgs~=borderRadiusInput] {
-    border-radius: var(--border-radius-input);
-}
+    [pgs~=borderRadiusInput] {
+        border-radius: var(--border-radius-input);
+    }
 
-[pgs~=borderRadiusExternal] {
-    border-radius: var(--border-radius-external);
-}
+    [pgs~=borderRadiusExternal] {
+        border-radius: var(--border-radius-external);
+    }
 
-[pgs~=blur] {
-    backdrop-filter: var(--blur);
-}
+    [pgs~=blur] {
+        backdrop-filter: var(--blur);
+    }
 
-[pgs~=appearanceNone] {
-    all: unset;
-    appearance: none;
-}
+    [pgs~=appearanceNone] {
+        all: unset;
+        appearance: none;
+    }
 
-[pgs~=pointer] {
-    cursor: pointer;
-}
+    [pgs~=pointer] {
+        cursor: pointer;
+    }
 
-[pgs~=hidden] {
-    display: none !important;
-}
+    [pgs~=hidden] {
+        display: none !important;
+    }
+}

package/assets/scss/base/_heading.scss

@@ -1,20 +1,22 @@
 //# HEADING
-[pgs~=h1] {
-    @include h1();
-}
+[pgs~=initP] {
+    [pgs~=h1] {
+        @include h1();
+    }
 
-[pgs~=h2] {
-    @include h2();
-}
+    [pgs~=h2] {
+        @include h2();
+    }
 
-[pgs~=h3] {
-    @include h3();
-}
+    [pgs~=h3] {
+        @include h3();
+    }
 
-[pgs~=h4] {
-    @include h4();
-}
+    [pgs~=h4] {
+        @include h4();
+    }
 
-[pgs~=h5] {
-    @include h5();
-}
+    [pgs~=h5] {
+        @include h5();
+    }
+}

package/assets/scss/components/_accordion.scss

@@ -29,6 +29,7 @@
         line-height: inherit;
         text-align: inherit;
         border-radius: var(--border-radius-input);
+        align-items: center;
         width: 100%;
         $url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z'/%3E%3C/svg%3E");
 

package/assets/scss/components/_notification.scss

@@ -161,25 +161,25 @@
         }
     }
 
-    [pgs-state="success"] {
+    [pgs-state~="success"] {
         --notification-background: var(--color-success-background);
         --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
         --notification-shadow: var(--color-success);
     }
 
-    [pgs-state="error"] {
+    [pgs-state~="error"] {
         --notification-background: var(--color-error-background);
         --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
         --notification-shadow: var(--color-error);
     }
 
-    [pgs-state="warning"] {
+    [pgs-state~="warning"] {
         --notification-background: var(--color-warning-background);
         --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
         --notification-shadow: var(--color-warning);
     }
 
-    [pgs-state="info"] {
+    [pgs-state~="info"] {
         --notification-background: var(--color-box);
     }
 }

package/assets/scss/components/_searchbar.scss

@@ -39,10 +39,10 @@
         width: 100%;
         min-width: 21.4rem;
         background-color: transparent;
-        color: ourContrastColor(var(--button-background));
+        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
         
         &::placeholder {
-            color: ourContrastColor(var(--button-background));
+            color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
             opacity: .6;
         }
 

package/assets/scss/components/_slides.scss

@@ -43,13 +43,11 @@
             }
 
             // &:has([pgs~="slides-container"] .view) {
-
             //     &::before,
             //     &::after {
             //         opacity: 1;
             //     }
             // }
-
             &:has([pgs~="slides-container"] li:first-child.view) {
                 &::before {
                     opacity: 0;
@@ -114,8 +112,6 @@
         position: absolute;
         z-index: 4;
         --button-background: var(--color-box);
-        padding: var(--gap-texts);
-        aspect-ratio: 1;
         top: 50%;
         translate: 0 -50%;
 
@@ -141,6 +137,11 @@
                 margin: 0;
             }
         }
+
+        //- mobile 
+        @media (max-width: $mobile) {
+            display: none;
+        }
     }
 
     //= DOTS

package/assets/scss/components/_stepTabs.scss

@@ -0,0 +1,58 @@
+[pgs~=stepTabs] {
+    [pgs~=stepTabs-container] {
+        [pgs~=tab] {
+            display: none;
+
+            &[pgs-state~=is-active] {
+                display: flex;
+            }
+        }
+    }
+
+    [pgs~=stepTabs-next] {
+        --button-background: var(--color-primary);
+        --button-color: var(--color-whiteFixed);
+    }
+
+    [pgs~=stepTabs-dots] {
+        display: flex;
+        gap: var(--gap-texts);
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        margin-inline: 10%;
+        margin-block: var(--gap-texts);
+        isolation: isolate;
+
+        &::before {
+            content: "";
+            width: 100%;
+            border-bottom: var(--border-complete);
+            position: absolute;
+            top: 50%;
+            z-index: -1;
+        }
+
+        [pgs~=stepTabs-dots-dot] {
+            @include button(false, true);
+            border-radius: 50%;
+            --fa-size: 1.8rem;
+
+            &[pgs-state~=is-completed] {
+                cursor: pointer;
+                background: var(--color-primary-soft);
+            }
+
+            &[pgs-state~=is-active] {
+                background: var(--color-primary);
+                scale: 1.2;
+
+                i {
+                    --fa-primary-color: var(--color-whiteFixed);
+                    --fa-secondary-color: var(--color-whiteFixed);
+                    color: var(--color-whiteFixed);
+                }
+            }
+        }
+    }
+}

package/assets/scss/components/_steps.scss

@@ -7,8 +7,9 @@ ol[pgs~="steps"] {
         align-items: start;
         position: relative;
         --steps-circle-size: 50px;
-        --steps-line-size: 4px;
-        --steps-line-color: var(--color-primary-soft);
+        --steps-circle-color: var(--color-primary-soft);
+        --steps-line-size: 2px;
+        --steps-line-color: var(--color-gray);
 
         //== CONTENT
         [pgs~=steps-step-content] {
@@ -23,7 +24,7 @@ ol[pgs~="steps"] {
         [pgs~=steps-step-circle] {
             min-width: var(--steps-circle-size);
             aspect-ratio: 1;
-            background: var(--color-primary-soft);
+            background: var(--steps-circle-color);
             display: flex;
             align-items: center;
             justify-content: center;

package/assets/scss/components/_table.scss

@@ -9,7 +9,7 @@
         --table-row-background-odd: var(--border-box);
         --table-row-color: var(--color-black);
 
-        --table-row-hover-background: var(--color-secondary);
+        --table-row-hover-background: var(--color-secondary-soft);
         --table-row-hover-color: var(--color-blackFixed);
         
         width: 100%;

package/assets/scss/components/_tooltip.scss

@@ -3,11 +3,8 @@
     --dropdown-maxwidth: 400px;
 
     [pgs~="tooltip-button"][pgs~="dropdown-button"] {
-        --button-background: var(--color-black);
-
-        i {
-            --fa-size: .9rem;
-        }
+        // --button-background: var(--color-black);
+        --fa-size: .9rem;
     }
 
     [pgs~="tooltip-content"][pgs~="dropdown-content"]:popover-open {

package/assets/scss/index.scss

@@ -1,12 +1,10 @@
 //+ MIXIN
 @import "./mixin/mixin.scss";
-
 /*
 |--------------------------------------------------------------------------
 | Base
 |--------------------------------------------------------------------------
 */
-
 @import "base/variables";
 @import "base/color";
 @import "base/reset";
@@ -15,50 +13,49 @@
 @import "base/heading";
 @import "base/general";
 
-
 /*
 |--------------------------------------------------------------------------
 | Layout
 |--------------------------------------------------------------------------
 */
-
-@import "layout/layout";
-@import "layout/flex";
-@import "layout/grid";
-@import "layout/pageShell";
-@import "layout/gap";
-
-
+[pgs~=initP] {
+    @import "layout/layout";
+    @import "layout/flex";
+    @import "layout/grid";
+    @import "layout/pageShell";
+    @import "layout/gap";
+}
 
 /*
 |--------------------------------------------------------------------------
 | Components
 |--------------------------------------------------------------------------
 */
-
-@import "components/button";
-@import "components/form";
-@import "components/menu";
-@import "components/accordion";
-@import "components/breadcumbs";
-@import "components/dropdown";
-@import "components/modals";
-@import "components/slides";
-@import "components/steps";
-@import "components/table";
-@import "components/tabs";
-@import "components/notification";
-@import "components/tooltip";
-@import "components/searchbar";
-@import "components/logo";
-
+[pgs~=initP] {
+    @import "components/button";
+    @import "components/form";
+    @import "components/menu";
+    @import "components/accordion";
+    @import "components/breadcumbs";
+    @import "components/dropdown";
+    @import "components/modals";
+    @import "components/slides";
+    @import "components/steps";
+    @import "components/table";
+    @import "components/stepTabs";
+    @import "components/notification";
+    @import "components/tooltip";
+    @import "components/searchbar";
+    @import "components/logo";
+}
 
 /*
 |--------------------------------------------------------------------------
 | Patterns
 |--------------------------------------------------------------------------
 */
-
-@import "patterns/header";
-@import "patterns/footer";
-@import "patterns/cookieConsent";
+[pgs~=initP] {
+    @import "patterns/header";
+    @import "patterns/footer";
+    @import "patterns/cookieConsent";
+}