mypgs 1.0.0 → 1.1.2

package/templates/layout/md-header.html

@@ -1,26 +1,46 @@
 <header pgs="header">
 	<div pgs="header-element">
 		<div pgs="header-element-alwaysOn">
+			<a aria-label="Logo" pgs="logo" href="/">
+				<span pgs="logo-text">MyPGS</span>
+			</a>
 		</div>
 
 		<div pgs="header-element-onlyDesktop">
+			<nav pgs="menuHorizontal" aria-label="Menu principale">
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="#componenti">Componenti</a></li>
+					<li><a href="#layout">Layout</a></li>
+				</ul>
+			</nav>
 		</div>
 
 		<div pgs="header-element-onlyMobile">
 		</div>
 
 		<div pgs="header-element-alwaysOnLast">
+			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+				<i class="fa-solid fa-moon"></i>
+			</button>
 		</div>
 
 		<div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
 
-			<button pgs="buttonIcon modal-button modal-close header-element-hamburger-button" type="button" title="menu">
+			<button pgs="buttonIcon modal-button header-element-hamburger-button" type="button" title="Menu">
 				<span pgs="header-element-hamburger-row"></span>
 				<span pgs="header-element-hamburger-row"></span>
 			</button>
 
 			<dialog pgs="header-mobile-dialog" pgs-option="right ">
 				<div pgs="modal-dialog-content header-mobile-content">
+					<nav pgs="menuVertical" aria-label="Menu mobile">
+						<ul>
+							<li><a href="/">Home</a></li>
+							<li><a href="#componenti">Componenti</a></li>
+							<li><a href="#layout">Layout</a></li>
+						</ul>
+					</nav>
 				</div>
 			</dialog>
 		</div>
@@ -40,4 +60,4 @@
 			document.querySelector("[pgs~=header-element]").setAttribute("data-header-mobileActive", "true");
 		}
 	</script>
-</header>
+</header>

package/templates/layout/md-pageShell.html

@@ -0,0 +1,22 @@
+<div pgs="pageShell">
+    <aside pgs="pageShell-asideLeft aside">
+        <nav pgs="menuVertical" aria-label="Navigazione laterale">
+            <ul>
+                <li><a href="#sezione-uno">Sezione uno</a></li>
+                <li><a href="#sezione-due">Sezione due</a></li>
+            </ul>
+        </nav>
+    </aside>
+
+    <main pgs="pageShell-content main">
+        <section pgs="section flexColumnElements" id="sezione-uno">
+            <p>Contenuto principale della pagina.</p>
+        </section>
+    </main>
+
+    <aside pgs="pageShell-asideRight aside">
+        <div pgs="card flexColumnTexts">
+            <p>Box laterale</p>
+        </div>
+    </aside>
+</div>

package/templates/layout/md-section.html

@@ -0,0 +1,25 @@
+<section pgs="section flexColumnElements">
+    <div pgs="container flexColumnTexts">
+        <h2>Sezione standard</h2>
+        <p>Contenuto centrato dentro una sezione MyPGS.</p>
+    </div>
+</section>
+
+<section pgs="sectionFull flexColumnElements">
+    <div pgs="grid-3">
+        <article pgs="card flexColumnTexts">
+            <h3>Colonna uno</h3>
+            <p>Contenuto della prima colonna.</p>
+        </article>
+
+        <article pgs="card flexColumnTexts">
+            <h3>Colonna due</h3>
+            <p>Contenuto della seconda colonna.</p>
+        </article>
+
+        <article pgs="card flexColumnTexts">
+            <h3>Colonna tre</h3>
+            <p>Contenuto della terza colonna.</p>
+        </article>
+    </div>
+</section>

package/assets/javascript/components/_tabs.js

@@ -1,134 +0,0 @@
-const API = new WeakMap();
-PGS_tabs()
-
-export function PGS_tabs() {
-    pgs(document).querySelectorAll("tabs").forEach(tabsWizard => {
-
-        //= INIT
-        // if (tabsWizard.getAttribute("data-initialize") == "true") return;
-        // tabsWizard.setAttribute("data-initialize", "true");
-
-        //= SELECTOR
-        const prev = pgs(tabsWizard).querySelector("tabs-prev")
-        const next = pgs(tabsWizard).querySelector("tabs-next")
-        const restart = pgs(tabsWizard).querySelector("tabs-restart")
-        const dots = pgs(tabsWizard).querySelector("tabs-dots")
-        const tabsContainer = pgs(tabsWizard).querySelector("tabs-container");
-        const allTab = pgs(tabsContainer).querySelectorAll("tab");
-
-        //= SETTING
-        const total = allTab.length;
-        const defaultTabLocked = Array.from(allTab).filter(tab => tab.getAttribute("data-tab-locked") === "true")
-        let current = 0;
-        prev.disabled = true;
-
-        //- 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";
-                dot.className = "tab-dot";
-                dot.setAttribute("data-step", index);
-                dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
-
-                dot.addEventListener("click", () => {
-                    if (dot.classList.contains("is-completed")) {
-                        goTo(index, true);
-                    }
-                });
-
-                dots.appendChild(dot);
-                tabDots.push(dot);
-            });
-        }
-
-        //+ DOTS
-        function updateDots() {
-            tabDots.forEach((dot, i) => {
-                dot.classList.toggle("is-active", i === current);
-                dot.classList.toggle("is-completed", i < current);
-            });
-        }
-
-        //+ Step
-        function goTo(index) {
-            current = Math.min(Math.max(index, 0), total - 1);
-            const tab = allTab[current]
-
-            prev.disabled = (current === 0);
-            next.disabled = (current === total - 1 || tab.getAttribute("data-tab-locked") === "true");
-
-            allTab.forEach((tab, i) => tab.classList.toggle("is-active", i === current));
-            tab?.focus();
-            tabsWizard?.scrollIntoView({ behavior: "smooth", block: "start" });
-            updateDots();
-            tabsWizard.dispatchEvent(new CustomEvent('tabs:change', { detail: { current, total } }));
-        }
-
-        //+ restart
-        function restartTab() {
-            goTo(0);
-            defaultTabLocked.forEach(tab => tab.setAttribute("data-tab-locked", "true"));
-        }
-
-        //= INIT
-        goTo(0);
-
-        //= data-tab-locked
-        const observer = new MutationObserver(() => goTo(current));
-        allTab?.forEach(tabEl => observer.observe(tabEl, { attributes: true, attributeFilter: ["data-tab-locked"], }));
-
-
-        //= Click su Avanti/Indietro
-        prev?.addEventListener("click", e => goTo(current - 1));
-        next?.addEventListener("click", e => goTo(current + 1));
-        restart?.addEventListener("click", e => restartTab(), { capture: true });
-
-        //-(API) 
-        // tabsWizard.addEventListener("tabs: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] && (allTab[step].setAttribute("data-tab-locked", lock.toString()), 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("tabs:go", { detail: { step: 2 } }));
-    
-    // next
-    w.dispatchEvent(new CustomEvent("tabs:next"));
-    
-    // prev
-    w.dispatchEvent(new CustomEvent("tabs:prev"));
-    
-    // reset a 0 senza relock
-    w.dispatchEvent(new CustomEvent("tabs:reset"));
-    
-    // lock step 3
-    w.dispatchEvent(new CustomEvent("tabs:toggle-lock", { detail: { step: 3, lock: true } }));
-    
-    // unlock step 3
-    w.dispatchEvent(new CustomEvent("tabs:toggle-lock", { detail: { step: 3, lock: false } }));
-    
-    // leggi stato
-    w.dispatchEvent(new CustomEvent("tabs:get", { detail: { reply: (state) => console.log(state) } }));
-*/

package/assets/scss/components/_tabs.scss

@@ -1,69 +0,0 @@
-[pgs~=tabs] {
-    [pgs~=tabs-container] {
-        [pgs~=tab] {
-            display: none;
-
-            &.is-active {
-                display: flex;
-            }
-        }
-    }
-
-    [pgs~=tabs-next] {
-        --button-background: var(--color-primary);
-        color: var(--color-whiteFixed);
-        --button-padding: var(--button-size) var(--button-size) var(--button-size) calc(var(--button-size) + var(--button-size) / 2);
-    }
-
-    [pgs~=tabs-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;
-        }
-
-        .tab-dot {
-            padding: 12px;
-            border-radius: 50%;
-            aspect-ratio: 1;
-            border: none;
-            background: light-dark(var(--color-background), var(--color-box-transparent));
-            transition: all 0.2s ease;
-
-            i {
-                --fa-size: 2.2rem;
-                --fa-primary-color: var(--color-black);
-                --fa-secondary-color: var(--color-black);
-                color: var(--color-black);
-            }
-        }
-
-        .tab-dot.is-completed {
-            cursor: pointer;
-            background: var(--color-primary-soft);
-        }
-
-        .tab-dot.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);
-            }
-        }
-    }
-}