mypgs 1.5.1 → 2.0.0

package/assets/scss/components/_search.scss

@@ -0,0 +1,140 @@
+@use "../mixin/mixin" as *;
+
+[pgs~="search"] {
+    --search-suggestions-background: var(--color-box);
+    --search-suggestions-color: var(--color-text);
+    --search-suggestions-border: var(--border-complete);
+    --search-suggestions-borderRadius: var(--border-radius-input);
+    --search-suggestions-boxShadow: var(--box-shadow);
+    --search-suggestions-gap: 0;
+    --search-suggestions-maxHeight: 32rem;
+    --search-suggestions-offset: .5rem;
+    --search-suggestions-padding: .5rem;
+    --search-suggestions-item-padding: 1rem;
+    --search-suggestions-item-selected-background: var(--color-primary);
+    --search-suggestions-item-selected-color: var(--color-whiteFixed);
+    position: relative;
+    @include flexRow(nowrap);
+    @include button_header();
+    flex: 1;
+    width: 100%;
+    overflow: visible;
+    margin-inline: auto;
+    padding: 0;
+
+    @media (min-width: $mobile) {
+        min-width: 21.4rem;
+    }
+
+    button {
+        height: 100%;
+        padding-left: var(--button-size);
+        border: none;
+        border-radius: var(--border-radius-input);
+        outline: none;
+        background: none;
+        cursor: pointer;
+    }
+
+    input {
+        width: 100%;
+        min-width: 21.4rem;
+        height: 100%;
+        padding: var(--button-size);
+        padding-left: 0;
+        margin: 2px;
+        margin-left: 0;
+        border: 0;
+        border-radius: var(--border-radius-input);
+        background-color: transparent;
+        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+        font-family: var(--font);
+        font-size: 1.6rem;
+        font-weight: 600;
+        cursor: text !important;
+
+        &::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);
+    }
+
+    @mixin _color($varColor) {
+        background: var(#{$varColor}-background);
+        color: var(#{$varColor}-color);
+
+        i {
+            color: var(#{$varColor}-color);
+            --fa-primary-color: var(#{$varColor}-color);
+            --fa-secondary-color: var(#{$varColor}-color);
+        }
+    }
+
+    [pgs~="search-suggestions"] {
+        display: none;
+        position: absolute;
+        inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
+        z-index: 1000;
+        flex-direction: column;
+        gap: var(--search-suggestions-gap);
+        max-height: var(--search-suggestions-maxHeight);
+        overflow-y: auto;
+        padding: var(--search-suggestions-padding);
+        margin: 0;
+        list-style: none;
+        border: var(--search-suggestions-border);
+        border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
+        box-shadow: var(--search-suggestions-boxShadow);
+        @include _color(--search-suggestions);
+
+        [pgs~="search-suggestions-item"] {
+            padding: var(--search-suggestions-item-padding);
+            border-radius: var(--search-suggestions-borderRadius);
+            cursor: pointer;
+            flex-wrap: nowrap;
+
+            &[aria-selected="true"],
+            &:hover {
+                @include _color(--search-suggestions-item-selected);
+            }
+
+            &[aria-disabled="true"] {
+                cursor: not-allowed;
+                opacity: .5;
+            }
+        }
+
+        &:has([pgs~="search-suggestions-item"]:hover) {
+            [pgs~="search-suggestions-item"][aria-selected="true"] {
+                @include _color(--search-suggestions);
+
+                &:hover {
+                    @include _color(--search-suggestions-item-selected);
+                }
+            }
+        }
+    }
+
+    &[pgs-state~="open"] [pgs~="search-suggestions"] {
+        display: flex;
+    }
+
+    @at-root dialog #{&} {
+        max-width: calc(100% - var(--padding-page) * 2);
+        height: max-content;
+        margin-inline: auto;
+        background-color: var(--color-white);
+
+        input {
+            padding-block: 20px;
+        }
+    }
+}

package/assets/scss/index.scss

@@ -52,7 +52,7 @@
     @include meta.load-css("components/badges");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
-    @include meta.load-css("components/searchbar");
+    @include meta.load-css("components/search");
     @include meta.load-css("components/logo");
 }
 
@@ -63,4 +63,4 @@
 */
 [pgs~=initP] {
     @include meta.load-css("patterns/cookieConsent");
-}
+}

package/assets/scss/layout/_header.scss

@@ -154,4 +154,4 @@
             padding-inline: var(--header-padding-block);
         }
     }
-}
+}

package/assets/scss/layout/_pageShell.scss

@@ -18,9 +18,12 @@ $pageShell-test-gap: 4rem;
 }
 
 [pgs~="pageShell"] {
-    --pageShell-aside-sticky-top: 0;
+    --pageShell-width: calc(var(--pageShell-content-width) + (var(--padding-page) * 2));
+    --pageShell-content-width: var(--page-width);
     --pageShell-aside-width: #{$aside-size};
-    --pageShell-content-width: 500px;
+    --pageShell-aside-sticky-top: 0;
+    --pageShell-paddingInline: var(--padding-page);
+    --pageShell-paddingTop: var(--page-top);
     --pageShell-gap: var(--gap-elements);
     display: flex;
     flex-wrap: wrap;
@@ -29,17 +32,17 @@ $pageShell-test-gap: 4rem;
     align-items: start;
     justify-content: center;
     width: 100%;
-    max-width: calc(var(--page-width) + (var(--padding-page) * 2));
-    padding-inline: var(--padding-page);
+    max-width: var(--pageShell-width);
+    padding-inline: var(--pageShell-paddingInline);
     container-type: inline-size;
 
     [pgs~="pageShell-content"] {
         grid-area: content;
-        flex: 999 1 var(--pageShell-content-width);
-        min-width: min(100%, var(--pageShell-content-width));
-        width: min(100%, var(--page-width));
-        max-width: var(--page-width);
-        padding-top: var(--page-top);
+        flex: 999 1 $content-size;
+        min-width: min(100%, $content-size);
+        width: min(100%, var(--pageShell-content-width));
+        max-width: var(--pageShell-content-width);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
     }
 
@@ -49,13 +52,14 @@ $pageShell-test-gap: 4rem;
         isolation: isolate;
         position: sticky;
         top: var(--pageShell-aside-sticky-top);
+        transition: top 0.3s ease;
         width: 100%;
         max-height: 100svh;
         overflow-y: auto;
         overscroll-behavior: contain;
         scrollbar-gutter: stable;
         scrollbar-width: none;
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
         flex: 1 1 var(--pageShell-aside-width);
         min-width: min(100%, var(--pageShell-aside-width));
@@ -81,7 +85,7 @@ $pageShell-test-gap: 4rem;
             overscroll-behavior: contain;
             scrollbar-gutter: stable;
             scrollbar-width: none;
-            padding-top: var(--page-top);
+            padding-top: var(--pageShell-paddingTop);
             padding-bottom: calc(var(--gap-elements)*2);
 
             &::-webkit-scrollbar {
@@ -115,11 +119,11 @@ $pageShell-test-gap: 4rem;
     }
 
     &:has(> [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
     }
 
     &:has(> [pgs~="pageShell-aside"] ~ [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
     }
 
     //== RESPONSIVE ==//
@@ -149,7 +153,7 @@ $pageShell-test-gap: 4rem;
     &:has(> [pgs~="pageShell-aside"]):has(> [pgs~="pageShell-content"] + [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$aside-size} + (#{$pageShell-test-gap} * 2))) {
             display: grid;
-            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
+            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--pageShell-content-width));
             grid-template-areas:
                 "asideLeft content"
                 "asideLeft asideRight";
@@ -178,7 +182,7 @@ $pageShell-test-gap: 4rem;
     }
 
     @container (max-width: #{$content-size}) {
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
 
         [pgs~="pageShell-content"],
         [pgs~="pageShell-aside"] {

package/assets/scss/mixin/_mx-form.scss

@@ -486,17 +486,17 @@
     }
 }
 
-//== formError
-@mixin formError() {
+//== formValidate
+@mixin formValidate() {
 
     //=== ERROR
-    &[data-form-status="error"] {
-        [data-form-field-status="error"] {
+    &[pgs-option~="error"] {
+        [pgs-option~="error"] {
             &:not([type=checkbox], [type=radio]) {
                 outline: solid 3px var(--color-error) !important;
 
                 &::before {
-                    content: "Questo campo è obbligatorio";
+                    content: "This field is required";
                     color: var(--color-error);
                     font-weight: 500;
                     font-size: 1.7rem;
@@ -507,7 +507,7 @@
         // button[type=submit] {
         //     --button-background: var(--color-error);
         // }
-        label:has(+[data-form-field-status="error"], [data-form-field-status="error"]) {
+        label:has(+[pgs-option~="error"], [pgs-option~="error"]) {
             &:has(input[type=checkbox]) {
                 background-color: var(--color-error) !important;
                 padding: 6px;
@@ -516,7 +516,7 @@
             }
         }
 
-        fieldset:has(input[type=radio][data-form-field-status="error"]) {
+        fieldset:has(input[type=radio][pgs-option~="error"]) {
             legend {
                 --label-background: var(--color-error) !important;
             }

package/{templates/html → demo}/demo.html

@@ -9,7 +9,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/css/index.css">
+    <link rel="stylesheet" href="../dist/css/index.css">
     <link rel="stylesheet" href="demo.css">
 </head>
 

package/demo/demo.js

@@ -0,0 +1,240 @@
+//# DEMO PAGE
+
+//= demo Renderer HTML
+const demoRenderer = {
+    templateFiles: [
+        "components/form.html",
+        "components/search.html",
+        "components/summary.html",
+        "components/menu.html",
+        "components/tooltip.html",
+        "components/modal.html",
+        "components/stepTabs.html",
+        "components/accordion.html",
+        "components/badges.html",
+        "components/breadcumbs.html",
+        "components/button.html",
+        "components/card.html",
+        "components/dropdown.html",
+        "components/tooltip.html",
+        "components/logo.html",
+        "components/slides.html",
+        "components/steps.html",
+        "components/table.html",
+        "components/notification.html",
+        "patterns/cookieConsent.html",
+        "layout/body.html",
+        "layout/flex.html",
+        "layout/grid.html",
+        "layout/footer.html",
+        "layout/header.html",
+        "layout/section.html",
+        "layout/pageShell.html",
+    ],
+
+    getTemplateTitle(path) {
+        return path.replace(".html", "").replace("/", " / ");
+    },
+
+    stripTemplateDocumentation(html) {
+        return html.replace(/^\uFEFF?<!--[\t\r\n ]*\/\*\*[\s\S]*?\*\/[\t\r\n ]*-->[\t\r\n ]*/, "");
+    },
+
+    renderSourceTemplate(section, html) {
+        const pre = document.createElement("pre");
+        const code = document.createElement("code");
+        code.textContent = html.trim();
+        pre.append(code);
+        section.append(pre);
+    },
+
+    renderTemplate(section, path, html) {
+        const content = document.createElement("div");
+        content.setAttribute("pgs", "container flexColumnElements");
+        content.innerHTML = html;
+        section.append(content);
+    },
+
+    renderLayout(root, path, html) {
+        const template = document.createElement("template");
+        template.innerHTML = html.trim();
+        root.append(template.content.cloneNode(true));
+    },
+
+    renderTitle(section, path) {
+        const title = document.createElement("p");
+        title.classList.add("template-title");
+        title.innerHTML = "<strong>" + this.getTemplateTitle(path) + "</strong>";
+        section.append(title);
+    },
+
+    async loadTemplate(path) {
+        const response = await fetch(`../templates/html/${path}`);
+        if (!response.ok) throw new Error(`${path}: ${response.status}`);
+        return this.stripTemplateDocumentation(await response.text());
+    },
+
+    loadPgsJavascript() {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+            script.src = "../dist/javascript/index.js";
+            script.addEventListener("load", resolve, { once: true });
+            script.addEventListener("error", () => reject(new Error("Bundle PGS non caricato")), { once: true });
+            document.body.append(script);
+        });
+    },
+
+    async boot() {
+        const BEEFORE = document.getElementById("templates-demo-before");
+        const MAIN = document.getElementById("templates-demo-main");
+        const AFTER = document.getElementById("templates-demo-after");
+
+        for (const path of this.templateFiles) {
+            const isHeader = path === "layout/header.html";
+            const isfooter = path === "layout/footer.html";
+            const isBody = path === "layout/body.html";
+
+            if (isHeader || isfooter) {
+                try {
+                    const html = await this.loadTemplate(path);
+                    this.renderLayout(isHeader ? BEEFORE : AFTER, path, html);
+                } catch (error) {
+                    const message = document.createElement("p");
+                    message.textContent = `Template non caricato: ${error.message}`;
+                    (isHeader ? BEEFORE : AFTER).append(message);
+                }
+                continue;
+            }
+
+            let section;
+            const isSection = path !== "layout/section.html" && path !== "layout/pageShell.html"
+            isSection ? section = document.createElement("section") : section = document.createElement("div");
+
+            if (isSection) section.setAttribute("pgs", "section flexColumnElements");
+
+            section.dataset.template = path;
+            this.renderTitle(section, path);
+
+            if (isBody) {
+                const html = await this.loadTemplate(path);
+                this.renderSourceTemplate(section, html);
+                MAIN.append(section);
+                continue;
+            }
+
+            try {
+                const html = await this.loadTemplate(path);
+                this.renderTemplate(section, path, html);
+            } catch (error) {
+                const message = document.createElement("p");
+                message.textContent = `Template non caricato: ${error.message}`;
+                section.append(message);
+            }
+
+            MAIN.append(section);
+            if (!isSection) {
+                section.style.display = "contents";
+                Array.from(section.children).forEach(child => child.style.width = "100%");
+            }
+        }
+
+        try {
+            //+ ADD FUNCTION
+            await this.loadPgsJavascript();
+            configureSearchDemo();
+            configureFormDemo();
+        } catch (error) {
+            console.error("Demo PGS non inizializzata.", error);
+        }
+    },
+};
+
+//= Search Demo
+function configureSearchDemo() {
+    const pgsApi = globalThis.pgs;
+    const section = document.querySelector('[data-template="components/search.html"]');
+    if (!pgsApi?.search || !section) return;
+
+    pgsApi(section).querySelectorAll("search").forEach(search => {
+        pgsApi.search.api(search)?.configure({
+            minLength: 2,
+            debounce: 250,
+            source: async ({ query, signal, limit }) => {
+                const url = new URL("https://it.wikipedia.org/w/api.php");
+                url.search = new URLSearchParams({
+                    action: "opensearch",
+                    search: query,
+                    limit: String(limit),
+                    namespace: "0",
+                    format: "json",
+                    origin: "*",
+                });
+
+                const response = await fetch(url, { signal });
+                if (!response.ok) throw new Error(`Wikipedia HTTP ${response.status}`);
+
+                const payload = await response.json();
+                const suggestions = Array.isArray(payload?.[1]) ? payload[1] : [];
+                const descriptions = Array.isArray(payload?.[2]) ? payload[2] : [];
+                const links = Array.isArray(payload?.[3]) ? payload[3] : [];
+
+                return suggestions.map((suggestion, index) => ({
+                    label: suggestion,
+                    value: suggestion,
+                    data: {
+                        description: descriptions[index] ?? "",
+                        url: links[index] ?? "",
+                    },
+                }));
+            },
+        });
+    });
+
+    const note = document.createElement("small");
+    note.append("Suggerimenti dimostrativi forniti da ");
+    const link = document.createElement("a");
+    link.href = "https://www.mediawiki.org/wiki/API:Opensearch/it";
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = "Wikipedia OpenSearch";
+    note.append(link, ". Prova a scrivere prodotti di o come fare.");
+    section.append(note);
+}
+
+//= Form Demo
+function configureFormDemo() {
+    const pgsApi = globalThis.pgs;
+    const section = document.querySelector('[data-template="components/form.html"]');
+    const form = section?.querySelector('[pgs~="form"]');
+    if (!form) return;
+
+    const password = form.querySelector('input[name="password"]');
+    const confirmPassword = form.querySelector('input[name="confirmPassword"]');
+    if (!password || !confirmPassword) return;
+
+    const formValidate = new pgsApi.formValidate(form, {
+        message: {
+            fieldError: "Completa questo campo",
+            fieldsError: "Completa tutti i campi obbligatori",
+            success: "Inviato con successo"
+        }
+    });
+
+    //== new roules
+    formValidate.addNewRule(() => {
+        if (password.value && confirmPassword.value && password.value !== confirmPassword.value) {
+            pgsApi(confirmPassword).option.setValueBrackets("message", "Le password non coincidono");
+            return [confirmPassword, password];
+        }
+    });
+
+    //== validate
+    formValidate.validator(event => {
+        const values = Object.fromEntries(new FormData(form));
+
+        //// Sostituisci questo log con l'invio dei dati al tuo backend.
+        console.log(values);
+    }, "submit");
+}
+
+demoRenderer.boot();