mypgs 1.5.0 → 1.6.0

package/templates/html/components/menu.html

@@ -16,6 +16,12 @@
                 <li><a href="/servizi/due">Servizio due</a></li>
             </ul>
         </li>
+        <li>
+            <a href="/about">
+                <i class="fa-solid fa-info-circle" aria-hidden="true"></i>
+                <span>about</span>
+            </a>
+        </li>
     </ul>
 </nav>
 
@@ -37,5 +43,11 @@
                 <li><a href="/servizi/due">Servizio due</a></li>
             </ul>
         </li>
+        <li>
+            <a href="/about">
+                <i class="fa-solid fa-info-circle" aria-hidden="true"></i>
+                <span>about</span>
+            </a>
+        </li>
     </ul>
-</nav>
+</nav>

package/templates/html/components/{searchbar.html → search.html}

@@ -1,23 +1,25 @@
-<form pgs="buttonNohover searchbar" autocomplete="off" action="" method="get">
+<form pgs="buttonNohover search" autocomplete="off" action="" method="get">
     <button type="submit" title="Cerca"><i class="fa-solid fa-search"></i></button>
     <input type="search" name="s" placeholder="Cerca" value="">
+    <ul pgs="search-suggestions"></ul>
 </form>
 
-<div pgs="modal searchbar-modal" pgs-option="containerPGS[header]">
+<div pgs="modal search-modal" pgs-option="containerPGS[header]">
 
     <button type="button" pgs="modal-button buttonIcon" title="Cerca">
         <i class="fa-solid fa-search"></i>
     </button>
 
     <dialog>
-        <div pgs="flexRow section searchbar-mobile">
+        <div pgs="flexRow section search-mobile">
 
-            <form pgs="buttonNohover searchbar" autocomplete="off" action="/" method="get">
+            <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
                 <button type="submit" title="Cerca">
                     <i class="fa-solid fa-search"></i>
                 </button>
 
                 <input type="search" name="s" placeholder="Cerca" value="">
+                <ul pgs="search-suggestions"></ul>
             </form>
 
             <button type="button" pgs="modal-close buttonIcon">
@@ -26,4 +28,4 @@
 
         </div>
     </dialog>
-</div>
+</div>

package/templates/html/demo.js

@@ -1,11 +1,4 @@
 
-if (localStorage.getItem("screenIsDarkMode") === "true") {
-    document.body.classList.add("darkmode");
-    document.querySelector(":root").setAttribute("data-darkmode", "true");
-    document.body.setAttribute("data-darkmode", "true");
-}
-
-
 const templateFiles = [
     "components/summary.html",
     "components/menu.html",
@@ -21,7 +14,7 @@ const templateFiles = [
     "components/tooltip.html",
     "components/form.html",
     "components/logo.html",
-    "components/searchbar.html",
+    "components/search.html",
     "components/slides.html",
     "components/steps.html",
     "components/table.html",

package/templates/html/layout/header.html

@@ -46,15 +46,21 @@
 	<!-- //# HEADER BOTTOM -->
 
 	<script>
+		const addPgsState = (element, state) => {
+			if (!element) return;
+
+			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
+			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
+		};
+
 		if (localStorage.getItem("screenIsDarkMode") === "true") {
-			document.body.classList.add("darkmode");
-			document.querySelector(":root").setAttribute("data-darkmode", "true");
-			document.body.setAttribute("data-darkmode", "true");
+			addPgsState(document.documentElement, "darkmode");
+			addPgsState(document.body, "darkmode");
 		}
 
 		if (window.innerWidth < 600) {
-			pgs(document.querySelector("header")).state.add("mobileActive");
-			pgs(document.querySelector("[pgs~=header-element]")).state.add("mobileActive");
+			addPgsState(document.querySelector("header"), "mobileActive");
+			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
 		}
 	</script>
 </header>

package/templates/react/components/logo.jsx

@@ -1,6 +1,6 @@
 export default function Logo() {
     return (
-        <a aria-label="Logo" pgs="logo logo-darkmode" href="/">
+        <a aria-label="Logo" pgs="logo" pgs-option="logoDarkmode" href="/">
             <img pgs="logo-image" src="https://placehold.co/240x80?text=MyPGS" alt="MyPGS" />
         </a>
     );

package/templates/react/components/{searchbar.jsx → search.jsx}

@@ -1,27 +1,29 @@
-export default function Searchbar() {
+export default function Search() {
     return (
-        <form pgs="buttonNohover searchbar" autoComplete="off" action="" method="get">
+        <form pgs="buttonNohover search" autoComplete="off" action="" method="get">
             <button type="submit" title="Cerca"><i className="fa-solid fa-search"></i></button>
             <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+            <ul pgs="search-suggestions"></ul>
         </form>
     );
 }
-export default function SearchbarModal() {
-    return (
 
-        <div pgs="modal searchbar-modal" pgs-option="containerPGS[header]">
+export function SearchModal() {
+    return (
+        <div pgs="modal search-modal" pgs-option="containerPGS[header]">
             <button type="button" pgs="modal-button buttonIcon" title="Cerca">
                 <i className="fa-solid fa-search"></i>
             </button>
 
             <dialog>
-                <div pgs="flexRow section searchbar-mobile">
-                    <form pgs="buttonNohover searchbar" autoComplete="off" action="/" method="get">
+                <div pgs="flexRow section search-mobile">
+                    <form pgs="buttonNohover search" autoComplete="off" action="/" method="get">
                         <button type="submit" title="Cerca">
                             <i className="fa-solid fa-search"></i>
                         </button>
 
                         <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+                        <ul pgs="search-suggestions"></ul>
                     </form>
 
                     <button type="button" pgs="modal-close buttonIcon">

package/templates/react/patterns/header.jsx

@@ -2,16 +2,22 @@ import { useEffect } from "react";
 
 export default function Header() {
     useEffect(() => {
-        if (localStorage.getItem("screenIsDarkMode") === "true") {
-            document.body.classList.add("darkmode");
-            document.querySelector(":root")?.setAttribute("data-darkmode", "true");
-            document.body.setAttribute("data-darkmode", "true");
-        }
-
-        if (window.innerWidth < 600 && window.pgs) {
-            window.pgs(document.querySelector("header")).state.add("mobileActive");
-            window.pgs(document.querySelector("[pgs~=header-element]")).state.add("mobileActive");
-        }
+		const addPgsState = (element, state) => {
+			if (!element) return;
+
+			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
+			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
+		};
+
+		if (localStorage.getItem("screenIsDarkMode") === "true") {
+			addPgsState(document.documentElement, "darkmode");
+			addPgsState(document.body, "darkmode");
+		}
+
+		if (window.innerWidth < 600) {
+			addPgsState(document.querySelector("header"), "mobileActive");
+			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
+		}
     }, []);
 
     return (

package/assets/scss/components/_searchbar.scss

@@ -1,70 +0,0 @@
-@use "../mixin/mixin" as *;
-
-//= SEARCH BAR
-[pgs~="searchbar"] {
-    position: relative;
-    flex: 1;
-    width: 100%;
-    overflow: hidden;
-    margin-inline: auto;
-    @include button_header();
-    padding: 0;
-    gap: 0;
-
-    //+ mobile 
-    @media (min-width: $mobile) {
-        min-width: 21.4rem;
-    }
-
-    button {
-        outline: none;
-        border: none;
-        background: none;
-        padding-left: var(--button-size);
-        aspect-ratio: 1;
-        height: 100%;
-        border-radius: var(--border-radius-input);
-        cursor: pointer;
-    }
-
-    input {
-        cursor: text !important;
-        border: 0;
-        padding: var(--button-size);
-        margin: 2px;
-        margin-left: 0;
-        font-family: var(--font);
-        font-weight: 600;
-        font-size: 1.6rem;
-        border-radius: var(--border-radius-input);
-        height: 100%;
-        width: 100%;
-        min-width: 21.4rem;
-        background-color: transparent;
-        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-        
-        &::placeholder {
-            color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-            opacity: .6;
-        }
-
-        &:focus-visible {
-            outline: unset;
-        }
-    }
-
-    &:has(input:focus-visible){
-        outline: var(--focus-visible);
-    }
-
-    @at-root dialog #{&} {
-        margin-inline: auto;
-        max-width: calc(100% - var(--padding-page) * 2);
-        height: max-content;
-        background-color: var(--color-white);
-
-        input {
-            padding-block: 20px;
-        }
-    }
-}

package/react.d.ts

@@ -1,11 +0,0 @@
-import "react";
-
-declare module "react" {
-  interface HTMLAttributes<T> {
-    /** Use pgsHtml in JSX/TSX. The Vite plugin converts it to pgs. */
-    pgs?: never;
-    pgsHtml?: string;
-  }
-}
-
-export {};

package/react.js

@@ -1 +0,0 @@
-export {};