@natachah/vanilla-frontend 0.4.0 → 0.4.1

package/docs/pages/quick-start/customization.html

@@ -28,109 +28,112 @@
         <doc-code data-type="css">
             :root {
 
-                // Typography
-                --font-size: 16px;
-                --line-height: 1.5;
-                --font-family: Arial;
-                --font-weight: normal;
-                --font-weight-light: 300;
-                --font-weight-medium: 500;
-                --font-weight-bold: 600;
-
-                --font-size-h1: 2.25em; // 36px
-                --font-size-h2: 2.00em; // 32px
-                --font-size-h3: 1.75em; // 28px
-                --font-size-h4: 1.50em; // 24px
-                --font-size-h5: 1.25em; // 20px
-                --font-size-h6: 1.125em; // 18px
-                --font-size-large: 1.25em;
-                --font-size-medium: 1.125em;
-                --font-size-small: .875em;
-
-                // Anchor
-                --decoration: none;
-
-                // Layouts
-                --padding-inline: .75em;
-                --padding-block: .5em;
-
-                // Border
-                --border-size: 1px;
-                --border-style: solid;
-                --border-radius: .25rem;
-
-                // Outline (:focus)
-                --outline-size: 3px;
-                --outline-style: solid;
-                --outline-offset: 0;
-                //--outline-color: var(--color-primary); To override default behavior
-
-                // Backdrop
-                --backdrop-color: rgba(255, 255, 255, .5);
-
-                // Hover (color-mix)
-                --hover-color: black;
-                --hover-percent: 5%;
-
-                // Active (color-mix)
-                --active-color: black;
-                --active-percent: 10%;
-
-                // Focus (color-mix)
-                --focus-color: currentColor;
-                --focus-percent: 50%;
-
-                // Disabled
-                --disabled-opacity: 50%;
-
-                // Colors
-                --color-body: white;
-                --color-font: black;
-                --color-primary: #B790E5;
-                --color-error: #DC3030;
-                --color-success: #008A00;
-                --color-warning: #FFA500;
-
-                // Contrasts
-                --color-warning-contrast: black;
-
-                // Form
-                --form-border-color: currentColor;
-                --form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
-
-                // Icons
-                --icon-external: url('data:image/svg+xml,...');
-                --icon-date: url('data:image/svg+xml,...');
-                --icon-time: url('data:image/svg+xml,...');
-                --icon-file: url('data:image/svg+xml,...');
-                --icon-select: url('data:image/svg+xml,...');
-                --icon-radio: url('data:image/svg+xml,...');
-                --icon-check: url('data:image/svg+xml,...');
-                --icon-switch: var(--icon-radio);
-
-                // Layout
-                --layout-width: 1280px;
-                --layout-gap-block: 1rem;
-                --layout-gap-inline: 1rem;
-                --layout-columns: 1;
-
-                @media (min-width: 720px) {
-                    --layout-columns: 6;
-                    --layout-gap-block: 1rem;
-                    --layout-gap-inline: 1rem;
-                }
-
-                @media (min-width: 1024px) {
-                    --layout-columns: 12;
-                    --layout-gap-block: 2rem;
-                    --layout-gap-inline: 2rem;
-                }
-
-                @media (min-width: 1440px) {
-                    --layout-columns: 12;
-                    --layout-gap-block: 4rem;
-                    --layout-gap-inline: 2rem;
-                }
+            // Typography
+            --font-size: 16px;
+            --line-height: 1.5;
+            --font-family: Arial;
+            --font-weight: normal;
+            --font-weight-light: 300;
+            --font-weight-medium: 500;
+            --font-weight-bold: 600;
+
+            --font-size-h1: 2.25em; // 36px
+            --font-size-h2: 2.00em; // 32px
+            --font-size-h3: 1.75em; // 28px
+            --font-size-h4: 1.50em; // 24px
+            --font-size-h5: 1.25em; // 20px
+            --font-size-h6: 1.125em; // 18px
+            --font-size-large: 1.25em;
+            --font-size-medium: 1.125em;
+            --font-size-small: .875em;
+
+            --word-spacing: normal;
+            --letter-spacing: normal;
+
+            // Anchor
+            --decoration: none;
+
+            // Layouts
+            --padding-inline: .75em;
+            --padding-block: .5em;
+
+            // Border
+            --border-size: 1px;
+            --border-style: solid;
+            --border-radius: .25rem;
+
+            // Outline (:focus)
+            --outline-size: 3px;
+            --outline-style: solid;
+            --outline-offset: 0;
+            //--outline-color: var(--color-primary); To override default behavior
+
+            // Backdrop
+            --backdrop-color: rgba(255, 255, 255, .5);
+
+            // Hover (color-mix)
+            --hover-color: black;
+            --hover-percent: 5%;
+
+            // Active (color-mix)
+            --active-color: black;
+            --active-percent: 10%;
+
+            // Focus (color-mix)
+            --focus-color: currentColor;
+            --focus-percent: 50%;
+
+            // Disabled
+            --disabled-opacity: 50%;
+
+            // Colors
+            --color-body: white;
+            --color-font: black;
+            --color-primary: #B790E5;
+            --color-error: #DC3030;
+            --color-success: #008A00;
+            --color-warning: #FFA500;
+
+            // Contrasts
+            --color-warning-contrast: black;
+
+            // Form
+            --form-border-color: currentColor;
+            --form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
+
+            // Icons
+            --icon-external: url('data:image/svg+xml,...');
+            --icon-date: url('data:image/svg+xml,...');
+            --icon-time: url('data:image/svg+xml,...');
+            --icon-file: url('data:image/svg+xml,...');
+            --icon-select: url('data:image/svg+xml,...');
+            --icon-radio: url('data:image/svg+xml,...');
+            --icon-check: url('data:image/svg+xml,...');
+            --icon-switch: var(--icon-radio);
+
+            // Layout
+            --layout-width: 1280px;
+            --layout-gap-block: 1rem;
+            --layout-gap-inline: 1rem;
+            --layout-columns: 1;
+
+            @media (min-width: 720px) {
+            --layout-columns: 6;
+            --layout-gap-block: 1rem;
+            --layout-gap-inline: 1rem;
+            }
+
+            @media (min-width: 1024px) {
+            --layout-columns: 12;
+            --layout-gap-block: 2rem;
+            --layout-gap-inline: 2rem;
+            }
+
+            @media (min-width: 1440px) {
+            --layout-columns: 12;
+            --layout-gap-block: 4rem;
+            --layout-gap-inline: 2rem;
+            }
 
             }
         </doc-code>
@@ -142,20 +145,20 @@
             // This is the light theme (or if there is none)
             html[data-theme=light],
             html:not([data-theme]) {
-                --color-body: white;
-                --color-font: black;
+            --color-body: white;
+            --color-font: black;
             }
 
             // This is for the dark theme
             html[data-theme=dark] {
-                --color-body: black;
-                --color-font: white;
+            --color-body: black;
+            --color-font: white;
             }
 
             // This is for the dark theme
             html[data-theme=my-custom-theme] {
-                --color-body: white;
-                --color-font: orange;
+            --color-body: white;
+            --color-font: orange;
             }
         </doc-code>
 

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.4.0v
+                                0.4.1v
                             </span>
                         </li>
                         <li>

package/esbuild.mjs

@@ -5,7 +5,7 @@ import autoprefixer from 'autoprefixer'
 
 esbuild
     .build({
-        entryPoints: ["scss/vanilla-frontend.scss"],
+        entryPoints: ["scss/vanilla-frontend.scss", "js/vanilla-frontend.js"],
         entryNames: '[name]',
         outbase: "./",
         outdir: './bundles',

package/js/vanilla-frontend.js

@@ -0,0 +1,108 @@
+// If you need to create some component, you can use this
+import BaseComponent from "./utilities/_base-component"
+import ErrorMessage from "./utilities/_error"
+import Cookie from "./utilities/_cookie"
+
+// Here the helpers
+import FormHelper from "./utilities/_form-helper"
+
+// Here the components
+import Autofill from "./_autofill"
+import CheckAll from "./_check-all"
+import Comfort from "./_comfort"
+import Consent from "./_consent"
+import Dialog from "./_dialog"
+import Dropdown from "./_dropdown"
+import Drawer from "./_drawer"
+import Scroll from "./_scroll"
+import Slider from "./_slider"
+import Sortable from "./_sortable"
+import Toggle from "./_toggle"
+import Tree from "./_tree"
+
+const dialogs = document.querySelectorAll('.demo-dialog')
+if (dialogs) dialogs.forEach(dialog => new Dialog(dialog))
+
+const demoDialogFormJS = document.getElementById('demoDialogFormJs')
+if (demoDialogFormJS) {
+    demoDialogFormJS.addEventListener('dialog:submited', (e) => {
+        const value = e.detail.form.querySelector('input').value
+        document.getElementById('favorite').innerText = value
+    })
+}
+
+const dropdowns = document.querySelectorAll('.demo-dropdown')
+if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
+
+//if (sliders) sliders.forEach(slider => new Slider(slider))
+const sliderFull = document.getElementById('sliderFull')
+if (sliderFull) new Slider(sliderFull, {
+    //behavior: 'instant',
+    loop: true,
+    //autoplay: 1500
+})
+
+const sliderFade = document.getElementById('sliderFade')
+if (sliderFade) {
+    const mySliderObj = new Slider(sliderFade, {
+        behavior: 'instant',
+        loop: true,
+        autoplay: 4000
+    })
+    sliderFade.addEventListener('slider:changed', (ev) => {
+        const src = mySliderObj._slides[ev.detail.previous].querySelector('img').getAttribute('src')
+        sliderFade.style.backgroundImage = `url("${src}")`
+    })
+}
+
+const autofills = document.querySelectorAll('.demo-autofill')
+if (autofills) autofills.forEach(autofill => new Autofill(autofill))
+
+const checkboxAll = document.getElementById('demoCheckboxAll')
+if (checkboxAll) new CheckAll(checkboxAll)
+
+const demoConfort = new Comfort('demo-confort')
+
+if (document.getElementById('resetConfort')) {
+    document.getElementById('resetConfort').addEventListener('click', () => {
+        demoConfort.reset()
+    })
+}
+
+if (document.getElementById('demoCookies')) {
+    new Consent('demo-consent', 'demoCookies', 'demoCookiesPreferences')
+}
+
+const passwordButton = document.getElementById('demoPassword')
+if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))
+const demoToggleFormButton = document.getElementById('demoToggleFormButton')
+const demoToggleFormContent = document.getElementById('demoToggleFormContent')
+
+if (demoToggleFormButton && demoToggleFormContent) {
+    const fields = demoToggleFormContent.querySelectorAll('input,select,textarea')
+    new Toggle(demoToggleFormButton)
+    demoToggleFormButton.addEventListener('toggle:changed', (e) => {
+        FormHelper.toggleAttributes(fields, !demoToggleFormContent.hidden, {
+            reset: true,
+            disabled: true,
+            required: ['test'],
+            unchanged: ['test']
+        })
+    })
+}
+
+const scrollSpy = document.getElementById('demoScrollSpy')
+if (scrollSpy) {
+    new Scroll(scrollSpy, {
+        navigation: 'demoScrollNav'
+    })
+}
+
+const sortables = document.querySelectorAll('.demo-sortable')
+if (sortables) sortables.forEach(sortable => new Sortable(sortable))
+
+const toggles = document.querySelectorAll('.demo-toggle')
+if (toggles) toggles.forEach(toggle => new Toggle(toggle))
+
+const trees = document.querySelectorAll('.demo-tree')
+if (trees) trees.forEach(tree => new Tree(tree))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "type": "module",
     "description": "A vanilla frontend framework",
     "keywords": [

package/scss/base/_reset.scss

@@ -111,6 +111,8 @@ body {
     line-height: var(--line-height, 1.5);
     font-family: var(--font-family, default);
     font-weight: var(--font-weight, normal);
+    word-spacing: var(--word-spacing, normal);
+    letter-spacing: var(--letter-spacing, normal);
 
     // Define color
     color: var(--color-font, black);

package/scss/themes/_root.scss

@@ -30,6 +30,9 @@
     --font-size-medium: 1.125em;
     --font-size-small: .875em;
 
+    --word-spacing: normal;
+    --letter-spacing: normal;
+
     // Anchor
     --decoration: none;