npm - mypgs - Versions diffs - 1.0.0 → 1.1.5 - Mend

mypgs 1.0.0 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md +124 -11
package/assets/javascript/_pgs.js +18 -3
package/assets/javascript/components/_dropdown.js +3 -2
package/assets/javascript/components/_slides.js +3 -3
package/assets/javascript/components/_stepTabs.js +157 -0
package/assets/javascript/index.js +1 -1
package/assets/javascript/pgs.d.ts +47 -16
package/assets/scss/base/_body.scss +3 -2
package/assets/scss/base/_general.scss +46 -43
package/assets/scss/base/_heading.scss +17 -15
package/assets/scss/components/_accordion.scss +1 -0
package/assets/scss/components/_dropdown.scss +19 -26
package/assets/scss/components/_notification.scss +4 -4
package/assets/scss/components/_searchbar.scss +2 -2
package/assets/scss/components/_slides.scss +5 -4
package/assets/scss/components/_stepTabs.scss +58 -0
package/assets/scss/components/_steps.scss +4 -3
package/assets/scss/components/_table.scss +1 -1
package/assets/scss/components/_tooltip.scss +11 -6
package/assets/scss/index.scss +29 -32
package/assets/scss/layout/_gap.scss +3 -0
package/assets/scss/mixin/_mx-button.scss +64 -41
package/assets/scss/mixin/_mx-menu.scss +1 -1
package/dist/css/index.css +2149 -1729
package/dist/css/index.css.map +1 -1
package/dist/css/index.min.css +1 -1
package/dist/index.d.ts +45 -15
package/dist/javascript/index.js +139 -100
package/dist/javascript/index.js.map +1 -1
package/dist/javascript/index.min.js +1 -1
package/package.json +2 -2
package/pgs-html-suggestions.vsix +0 -0
package/templates/components/md-accordion.html +23 -0
package/templates/components/md-breadcumbs.html +8 -8
package/templates/components/md-button.html +29 -0
package/templates/components/md-card.html +23 -0
package/templates/components/md-dropdown.html +16 -0
package/templates/components/md-form.html +26 -0
package/templates/components/md-logo.html +7 -0
package/templates/components/md-menu.html +39 -5
package/templates/components/md-modal.html +19 -0
package/templates/components/md-notification.html +4 -1
package/templates/components/md-searchbar.html +6 -1
package/templates/components/md-slides.html +33 -0
package/templates/components/md-stepTabs.html +36 -0
package/templates/components/md-steps.html +25 -0
package/templates/components/md-table.html +24 -0
package/templates/components/md-tooltip.html +1 -0
package/templates/demo.css +51 -0
package/templates/demo.html +24 -0
package/templates/demo.js +141 -0
package/templates/layout/md-body.html +1 -1
package/templates/layout/md-cookieConsent.html +2 -2
package/templates/layout/md-footer.html +21 -2
package/templates/layout/md-header.html +22 -2
package/templates/layout/md-pageShell.html +22 -0
package/templates/layout/md-section.html +25 -0
package/assets/javascript/components/_tabs.js +0 -134
package/assets/scss/components/_tabs.scss +0 -69

package/README.md CHANGED Viewed

@@ -1,8 +1,12 @@
 # MyPGS
-Libreria frontend con asset JavaScript e CSS precompilati per i componenti e i pattern MyPGS.
+Libreria frontend condivisa per componenti, layout e pattern basati sull'attributo `pgs`.
-## Installazione
+Contiene sorgenti SCSS, mixin, comportamenti JavaScript, template HTML di esempio e asset compilati pronti all'uso. Puo' essere usata sia importando direttamente CSS e JavaScript compilati, sia importando gli SCSS sorgenti dentro il build del progetto che la utilizza.
+## Installazione come dipendenza
+Da registry npm, se pubblicata:
 ```bash
 npm install mypgs
@@ -10,24 +14,133 @@ npm install mypgs
 ## Utilizzo
-Importa gli asset compilati nel tuo progetto:
+### JavaScript
+Importa la libreria nell'entrypoint JavaScript del progetto:
 ```js
-import "mypgs";
-import "mypgs/style.css";
+import * as mypgs from "mypgs";
+```
+L'entrypoint di MyPGS inizializza:
+- helper globale `pgs`
+- dark mode
+- gestione oggetti PGS
+- accordion
+- dropdown
+- menu
+- modali
+- slides
+- steps
+- step tabs
+- notifiche
+- header
+- cookie consent
+Il bundle finale viene generato dal progetto che importa `mypgs`, in base alla propria configurazione Webpack o al proprio bundler.
+### SCSS
+Per integrare MyPGS nel build SCSS del progetto, importa mixin e stili sorgenti da `node_modules`:
+```scss
+@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
+@import "../../node_modules/mypgs/assets/scss/index.scss";
 ```
-Lo script inizializza le funzionalita' globali della libreria ed espone `pgs` su `globalThis`.
+Se servono solo i mixin, importa solo il file dedicato:
+```scss
+@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
+```
+Molti layout, componenti e pattern sono inclusi sotto `[pgs~=initP]`, quindi il markup principale deve abilitare la libreria così:
+```html
+<html pgs="htmlBase initP">
+<body pgs="bodyBase bodyImg bodyText bodyHeading">
+```
+## Markup PGS
+I componenti vengono attivati usando token nell'attributo `pgs`, per esempio:
+```html
+<nav pgs="menuHorizontal"></nav>
+<button pgs="button modal-button"></button>
+<div pgs="accordion">
+  <button pgs="accordion-button"></button>
+  <div pgs="accordion-content"></div>
+</div>
+```
+Gli stessi token devono restare coerenti tra markup, SCSS e JavaScript.
 ## Contenuto del pacchetto
-- `dist/javascript/index.js`
-- `dist/javascript/index.min.js`
-- `dist/css/index.css`
-- `dist/css/index.min.css`
+- `assets/scss/`: sorgenti SCSS, mixin, base, layout, componenti e pattern
+- `assets/javascript/`: sorgenti JavaScript dei comportamenti PGS
+- `templates/`: esempi HTML dei componenti e dei layout
+- `dist/javascript/index.js`: bundle JavaScript non minificato
+- `dist/javascript/index.min.js`: bundle JavaScript minificato
+- `dist/css/index.css`: CSS compilato non minificato
+- `dist/css/index.min.css`: CSS compilato minificato
+- `dist/index.d.ts`: dichiarazioni TypeScript esportate dal pacchetto
+## Export npm
+Il pacchetto espone:
+```json
+{
+  ".": "./dist/javascript/index.js",
+  "./style.css": "./dist/css/index.css",
+  "./style.min.css": "./dist/css/index.min.css"
+}
+```
+Uso diretto degli asset compilati:
+```js
+import "mypgs";
+import "mypgs/style.css";
+```
+In alternativa, puoi importare gli SCSS sorgenti direttamente nel build del progetto quando vuoi ottenere un unico CSS finale.
 ## Sviluppo
+Build una tantum:
 ```bash
-npm run build
+npm run start
 ```
+Build in watch mode:
+```bash
+npm run "start watch"
+```
+Per preparare un archivio locale installabile in un altro progetto:
+```bash
+npm pack
+```
+Quando modifichi MyPGS e vuoi provarlo in un progetto che la usa:
+1. ricompila MyPGS con `npm run start`
+2. crea un nuovo archivio con `npm pack`
+3. copia o aggiorna il `.tgz` usato dal progetto
+4. esegui `npm install` nel progetto
+5. ricompila il progetto
+## Convenzioni
+- Usa l'attributo `pgs` per collegare markup, CSS e JavaScript.
+- Mantieni i token PGS coerenti tra template HTML, componenti, moduli e script.
+- Metti in MyPGS solo stili e comportamenti riutilizzabili.
+- Mantieni nel progetto finale gli stili e le personalizzazioni specifiche.
+- Esporta in `dist/` prima di creare il pacchetto locale `.tgz`.

package/assets/javascript/_pgs.js CHANGED Viewed

@@ -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/_dropdown.js CHANGED Viewed

@@ -34,9 +34,10 @@ export function pgs_dropdown() {
             CSS.supports("position-anchor: --dropdown-anchor") &&
             CSS.supports("position-area: bottom") &&
             CSS.supports("top: anchor(bottom)");
+        const USE_FALLBACK_POSITIONING = pgs(DROPDOWN).contains("tooltip") || !HAS_ANCHOR_POSITIONING;
         const updatePopoverPosition = () => {
-            if (HAS_ANCHOR_POSITIONING) return;
+            if (!USE_FALLBACK_POSITIONING) return;
             const buttonRect = BUTTON.getBoundingClientRect();
             const style = getComputedStyle(DROPDOWN);
@@ -71,7 +72,7 @@ export function pgs_dropdown() {
         };
         BUTTON.addEventListener("click", e => {
-            if (HAS_ANCHOR_POSITIONING) return;
+            if (!USE_FALLBACK_POSITIONING) return;
             e.preventDefault();
             if (CONTENT.matches(":popover-open")) {

package/assets/javascript/components/_slides.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 = pgs(tab).option.getValueBrackets("tabIcon") || "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 CHANGED Viewed

@@ -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/javascript/pgs.d.ts CHANGED Viewed

@@ -1,23 +1,54 @@
 declare global {
-  interface PgsBag {
-    add: (...values: string[]) => void;
-    remove: (...values: string[]) => void;
-    toggle: (value: string) => boolean;
-    contains: (value: string) => boolean;
-    value: string;
-    querySelector: (value: string | string[]) => Element | null;
-    querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
+  type PgsSelectorValue = string | string[];
+  type PgsStateValue = string | string[];
+  interface PgsQueryableApi {
+    querySelector(value: PgsSelectorValue): Element | null;
+    querySelectorAll(value: PgsSelectorValue): NodeListOf<Element>;
+  }
+  interface PgsStateApi {
+    (...values: PgsStateValue[]): PgsStateApi;
+    add(...values: PgsStateValue[]): PgsStateApi;
+    remove(...values: PgsStateValue[]): PgsStateApi;
+    toggle(value: string, force?: boolean): boolean;
+    contains(value: string): boolean;
+    value: string | null;
   }
-  interface Element {
-    pgs: PgsBag;
+  interface PgsOptionApi {
+    contains(key: string): boolean;
+    getValueBrackets(key: string): string | undefined;
+    value: string | null;
   }
-  interface Document {
-    pgs: {
-      querySelector: (value: string | string[]) => Element | null;
-      querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
-    };
+  interface PgsElementApi extends PgsQueryableApi {
+    (): PgsElementApi;
+    add(...values: string[]): PgsElementApi;
+    remove(...values: string[]): PgsElementApi;
+    toggle(value: string, force?: boolean): boolean;
+    contains(value: string): boolean;
+    value: string | null;
+    state: PgsStateApi;
+    option: PgsOptionApi;
+    modules: PgsOptionApi;
   }
+  interface PgsDocumentApi extends PgsQueryableApi {
+    (): PgsDocumentApi;
+  }
+  type PgsApi = PgsElementApi | PgsDocumentApi;
+  interface PgsFunction {
+    (root: Document): PgsDocumentApi;
+    (root: Element): PgsElementApi;
+    (root: Document | Element): PgsApi;
+  }
+  interface PgsBag extends PgsElementApi {}
+  var pgs: PgsFunction;
 }
-export {};
+export {};

package/assets/scss/base/_body.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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");