mypgs 1.1.5 → 1.3.2

package/assets/javascript/components/_slides.js

@@ -162,10 +162,13 @@ class PGS_Slides {
                 const last = children[children.length - 1];
                 return last?.classList.contains("view") || false;
             },
+            refresh: () => {
+                PGS_slides_init(this.selector.parentNode || document);
+                return API.get(this.selector);
+            },
         });
     }
 }
-PGS_slides_init();
 
 //# INIT 
 export function PGS_slides_init(root = document) {
@@ -177,7 +180,15 @@ export function PGS_slides_init(root = document) {
     });
 }
 
+PGS_slides_init();
+
 //# API 
 export function PGS_slides_api(selector) {
     return API.get(selector);
 }
+
+export const PGS_slides = {
+    PGS_name: "PGS_slides",
+    init: PGS_slides_init,
+    api: PGS_slides_api
+};

package/assets/javascript/components/_stepTabs.js

@@ -1,8 +1,7 @@
 const API = new WeakMap();
-PGS_stepTabs()
 
-export function PGS_stepTabs() {
-    pgs(document).querySelectorAll("stepTabs").forEach(tabsWizard => {
+export function PGS_stepTabs_init(root = document) {
+    pgs(root).querySelectorAll("stepTabs").forEach(tabsWizard => {
         if (tabsWizard.dataset.stepTabsInitialized === "true") return;
         tabsWizard.dataset.stepTabsInitialized = "true";
 
@@ -117,21 +116,35 @@ export function PGS_stepTabs() {
         //-(API) 
         // tabsWizard.addEventListener("stepTabs:reset", () => restartTab());
         API.set(tabsWizard, {
+            element: tabsWizard,
+            container: tabsContainer,
             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)),
+            refresh: () => {
+                PGS_stepTabs_init(tabsWizard.parentNode || document);
+                return API.get(tabsWizard);
+            },
             getCurrent: () => current,
             getState: () => ({ current, total }),
         });
     });
 }
 
-export function PGS_tabs_api(selector) {
+PGS_stepTabs_init()
+
+export function PGS_stepTabs_api(selector) {
     return API.get(selector);
 }
 
+export const PGS_stepTabs = {
+    PGS_name: "PGS_stepTabs",
+    init: PGS_stepTabs_init,
+    api: PGS_stepTabs_api
+};
+
 /* 
     / EXAMPLE
     // vai allo step 2

package/assets/javascript/components/_steps.js

@@ -1,6 +1,8 @@
+const API = new WeakMap();
 
-export function PGS_ol() {
-    pgs(document).querySelectorAll("steps").forEach(steps => {
+export function PGS_steps_init(root = document) {
+    pgs(root).querySelectorAll("steps").forEach(steps => {
+        if (API.has(steps)) return;
 
         pgs(steps).querySelectorAll("steps-step").forEach((li, index) => {
             
@@ -16,12 +18,37 @@ export function PGS_ol() {
             }
             
             //= line
-            const line = document.createElement("span");
-            pgs(line).add("steps-step-line")
-            li.insertAdjacentElement("afterbegin", line);
+            if (!pgs(li).querySelector("steps-step-line")) {
+                const line = document.createElement("span");
+                pgs(line).add("steps-step-line")
+                li.insertAdjacentElement("afterbegin", line);
+            }
+        });
+
+        API.set(steps, {
+            element: steps,
+            steps: () => Array.from(pgs(steps).querySelectorAll("steps-step")),
+            getStep: (index) => pgs(steps).querySelectorAll("steps-step")[index],
+            getTotal: () => pgs(steps).querySelectorAll("steps-step").length,
+            refresh: () => {
+                API.delete(steps);
+                PGS_steps_init(steps.parentNode || document);
+                return API.get(steps);
+            },
         });
     });
 }
 
 //# INIT PGS_ol
-PGS_ol()
+PGS_steps_init()
+
+//# API
+export function PGS_steps_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_steps = {
+    PGS_name: "PGS_steps",
+    init: PGS_steps_init,
+    api: PGS_steps_api
+};

package/assets/javascript/functions/_formValidate.js

@@ -1,4 +1,4 @@
-import { PGS_toast } from "../functions/_notifications.js";
+import { PGS_notification } from "../components/_notifications.js";
 
 
 export class PGS_formValidate {
@@ -15,8 +15,8 @@ export class PGS_formValidate {
 
         let message = field.getAttribute("data-form-field-message");
 
-        if (i == 0 && message) PGS_toast.error(message);
-        else if (i == 0) PGS_toast.error("Compila tutti i campi!");
+        if (i == 0 && message) PGS_notification.toast.error(message);
+        else if (i == 0) PGS_notification.toast.error("Compila tutti i campi!");
     }
 
     //+ REMOVE
@@ -202,7 +202,7 @@ export class PGS_formValidate {
     }
 
     ifSuccess(text = "Inviato con successo") {
-        if (this.validate() == true) PGS_toast.success(text)
+        if (this.validate() == true) PGS_notification.toast.success(text)
     }
 
     // + -------------------------
@@ -214,4 +214,3 @@ export class PGS_formValidate {
         return this;
     }
 }
-

package/assets/javascript/index.js

@@ -1,5 +1,6 @@
 //= PGS
-import "./_pgs.js";
+import { pgs } from "./_pgs.js";
+export { pgs } from "./_pgs.js";
 
 //= BASE
 import "./base/_darkmode.js";
@@ -8,13 +9,16 @@ import "./base/_object.js";
 //= CN 
 import "./components/_accordion.js";
 import "./components/_dropdown.js";
-import "./components/_exeNotifications.js";
 import "./components/_menu.js"
 import "./components/_modals.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
 import "./components/_stepTabs.js";
+import "./components/_notifications.js";
 
-//= patterns 
+//= IMPORT REGISTRY
+import "./_imports.js";
+
+//= PATTERNS 
 import "./patterns/_header.js";
-import "./patterns/_cookieConsent.js";
+import "./patterns/_cookieConsent.js";

package/assets/javascript/patterns/_header.js

@@ -4,7 +4,7 @@ const headerElements = pgs(header).querySelectorAll("header-element");
 headerElements.forEach(element => PGS_header(element));
 
 //= HEADER
-export function PGS_header(selectHeader) {
+function PGS_header(selectHeader) {
 
     //= INIT
     if (selectHeader.getAttribute("data-initialize") == "true") return;

package/assets/javascript/pgs.d.ts

@@ -44,6 +44,8 @@ declare global {
     (root: Document): PgsDocumentApi;
     (root: Element): PgsElementApi;
     (root: Document | Element): PgsApi;
+    registerImport(...modules: unknown[]): PgsFunction;
+    import(...names: string[]): Record<string, any>;
   }
 
   interface PgsBag extends PgsElementApi {}
@@ -51,4 +53,6 @@ declare global {
   var pgs: PgsFunction;
 }
 
-export {};
+export function pgs(root: Document): PgsDocumentApi;
+export function pgs(root: Element): PgsElementApi;
+export function pgs(root: Document | Element): PgsApi;

package/assets/scss/components/_logo.scss

@@ -6,7 +6,7 @@
     --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 
     //== DARKMODE
-    @at-root [data-darkmode=true] #{&}[pgs~="logo-darkmode"] [pgs~="logo-image"] {
+    @at-root [data-darkmode=true] [pgs~="logo-darkmode"] [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
     

package/assets/scss/layout/_pageShell.scss

@@ -1,5 +1,4 @@
 //# pageShell
-
 [pgs~="pageShell"] {
     --pageShell-aside-left-width: 400px;
     --pageShell-aside-right-width: 400px;
@@ -11,12 +10,7 @@
     --pageShell-aside-sticky-bottom: var(--pageShell-gap);
     --pageShell-aside-count: 0;
     --pageShell-gap-count: 0;
-    --pageShell-max-width: calc(
-        var(--pageShell-content-max-width) +
-        var(--pageShell-aside-width-total) +
-        (var(--pageShell-gap) * var(--pageShell-gap-count))
-    );
-
+    --pageShell-max-width: calc(var(--pageShell-content-max-width) + var(--pageShell-aside-width-total) + (var(--pageShell-gap) * var(--pageShell-gap-count)));
     display: grid;
     grid-template-columns: minmax(0, var(--pageShell-content-max-width));
     grid-template-areas: "content";
@@ -33,8 +27,7 @@
         --pageShell-aside-count: 1;
         --pageShell-gap-count: 1;
         grid-template-columns:
-            var(--pageShell-aside-left-width)
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width));
+            var(--pageShell-aside-left-width) minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width));
         grid-template-areas: "aside-left content";
     }
 
@@ -43,8 +36,7 @@
         --pageShell-aside-count: 1;
         --pageShell-gap-count: 1;
         grid-template-columns:
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
-            var(--pageShell-aside-right-width);
+            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width)) var(--pageShell-aside-right-width);
         grid-template-areas: "content aside-right";
     }
 
@@ -53,16 +45,15 @@
         --pageShell-aside-count: 2;
         --pageShell-gap-count: 2;
         grid-template-columns:
-            var(--pageShell-aside-left-width)
-            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
-            var(--pageShell-aside-right-width);
+            var(--pageShell-aside-left-width) minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width)) var(--pageShell-aside-right-width);
         grid-template-areas: "aside-left content aside-right";
     }
-    
+
     [pgs~="pageShell-content"] {
         grid-area: content;
         width: 100%;
         min-width: 0;
+        padding-block: var(--page-top);
     }
 
     [pgs~="pageShell-asideLeft"],
@@ -71,13 +62,16 @@
         align-items: flex-start;
         isolation: isolate;
         position: sticky;
-        top: var(--pageShell-aside-sticky-top);
+        // top: var(--pageShell-aside-sticky-top);
+        top: 0;
         width: 100%;
-        max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
+        max-height: 100svh;
         overflow-y: auto;
         overscroll-behavior: contain;
         scrollbar-gutter: stable;
         scrollbar-width: none;
+        padding-block: var(--page-top);
+        padding-bottom: var(--padding-2);
 
         &::-webkit-scrollbar {
             display: none;
@@ -88,7 +82,6 @@
         }
     }
 
-
     [pgs~="pageShell-asideLeft"] {
         grid-area: aside-left;
         max-width: var(--pageShell-aside-left-width);
@@ -119,7 +112,7 @@
     }
 
     //- laptop 
-    @media (max-width: $laptop){
+    @media (max-width: $laptop) {
         &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
             grid-template-columns: minmax(0, var(--pageShell-content-max-width));
             grid-template-areas:
@@ -153,11 +146,13 @@
     }
 
     @media (max-width: $tablet) {
+
         [pgs~="pageShell-asideLeft"],
         [pgs~="pageShell-asideRight"],
         [pgs~="pageShell-content"] {
             width: 100%;
             max-width: none;
+            padding-block: unset;
         }
 
         [pgs~="pageShell-asideLeft"],
@@ -168,4 +163,4 @@
             overflow: visible;
         }
     }
-}
+}

package/dist/css/index.css

@@ -2299,11 +2299,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --pageShell-aside-sticky-bottom: var(--pageShell-gap);
   --pageShell-aside-count: 0;
   --pageShell-gap-count: 0;
-  --pageShell-max-width: calc(
-      var(--pageShell-content-max-width) +
-      var(--pageShell-aside-width-total) +
-      (var(--pageShell-gap) * var(--pageShell-gap-count))
-  );
+  --pageShell-max-width: calc(var(--pageShell-content-max-width) + var(--pageShell-aside-width-total) + (var(--pageShell-gap) * var(--pageShell-gap-count)));
   display: grid;
   grid-template-columns: minmax(0, var(--pageShell-content-max-width));
   grid-template-areas: "content";
@@ -2340,6 +2336,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   grid-area: content;
   width: 100%;
   min-width: 0;
+  padding-block: var(--page-top);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -2349,13 +2346,15 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: flex-start;
   isolation: isolate;
   position: sticky;
-  top: var(--pageShell-aside-sticky-top);
+  top: 0;
   width: 100%;
-  max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
+  max-height: 100svh;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
+  padding-block: var(--page-top);
+  padding-bottom: var(--padding-2);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft]::-webkit-scrollbar,
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight]::-webkit-scrollbar {
@@ -2415,6 +2414,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
     width: 100%;
     max-width: none;
+    padding-block: unset;
   }
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -7053,7 +7053,7 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
   --logo-height: var(--header-size, 6.0rem);
   --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 }
-[data-darkmode=true] [pgs~=initP] [pgs~=logo][pgs~=logo-darkmode] [pgs~=logo-image] {
+[data-darkmode=true] [pgs~=logo-darkmode] [pgs~=logo-image] {
   filter: var(--logo-finter);
 }