@natachah/vanilla-frontend 0.0.2

package/js/utilities/_form-helper.js

@@ -0,0 +1,101 @@
+/**
+ * ------------------------------------------------------------------
+ * Form helper
+ * ------------------------------------------------------------------
+ * This class regroup some helper function for forms
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import ErrorMessage from "./_error"
+
+export default class FormHelper {
+
+    /**
+     * Toggle the visibility of a password input
+     * 
+     * @param {HTMLElement} button - A <button> element
+     */
+    static togglePassword(button) {
+
+        // Check for errors
+        if (!(button instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('button', 'HTMLElement'))
+        if (!button.hasAttribute('aria-controls')) throw new Error(ErrorMessage.withAttribute('button', 'aria-controls'))
+
+        // Define the <input>
+        const input = document.getElementById(button.getAttribute('aria-controls'))
+
+        // If no <input> return error
+        if (!input) throw new Error(ErrorMessage.existById('input', button.getAttribute('aria-controls')))
+
+        // Define the new [type] of the <input>
+        const type = input.type === 'password' ? 'text' : 'password'
+        input.setAttribute('type', type)
+
+        // Change the [aria-pressed] attribute on the <button>
+        button.setAttribute('aria-pressed', type !== 'password')
+
+    }
+
+    /**
+     * Toggle the attributes value, disabled and required on multiple fields when is visible
+     * 
+     * @param {Object} fields - Array of fields to toggle
+     * @param {boolean} isVisible - Are the fields visible
+     * @param {Object} customOptions - Object of options
+     */
+    static toggleAttributes(fields, isVisible, customOptions = {}) {
+
+        // Check for errors
+        if (!(fields instanceof Object)) throw new Error(ErrorMessage.instanceOf('fields', 'Object'))
+        if (typeof isVisible !== 'boolean') throw new Error(ErrorMessage.typeOf('isVisible', 'boolean'))
+        if (!(customOptions instanceof Object)) throw new Error(ErrorMessage.instanceOf('customOptions', 'Object'))
+        if (customOptions.reset && !['boolean', 'object'].includes(typeof customOptions.reset)) throw new Error(ErrorMessage.typeOf('customOptions.reset', 'boolean|object'))
+        if (customOptions.disabled && !['boolean', 'object'].includes(typeof customOptions.disabled)) throw new Error(ErrorMessage.typeOf('customOptions.disabled', 'boolean|object'))
+        if (customOptions.required && !['boolean', 'object'].includes(typeof customOptions.required)) throw new Error(ErrorMessage.typeOf('customOptions.required', 'boolean|object'))
+        if (customOptions.unchanged && typeof customOptions.unchanged !== 'object') throw new Error(ErrorMessage.typeOf('customOptions.unchanged', 'object'))
+
+        // Set default options
+        const defaultOption = {
+            reset: true,        // Can be true/false/[name]
+            disabled: true,     // Can be true/false/[name]
+            required: false,    // Can be true/false/[name]
+            unchanged: []       // Array of names 
+        }
+
+        // Merge the options
+        const options = { ...defaultOption, ...customOptions }
+
+        // Do stuff for each field
+        fields.forEach(field => {
+
+            // Get the name
+            const name = field.getAttribute('name')
+
+            // Stop if the field must not change
+            if (options.unchanged.includes(name)) return
+
+            // Get the needs
+            let needReset = typeof options.reset === 'boolean' ? options.reset : options.reset.includes(name)
+            let needDisabled = typeof options.disabled === 'boolean' ? options.disabled : options.disabled.includes(name)
+            let needRequired = typeof options.required === 'boolean' ? options.required : options.required.includes(name)
+
+            // Reset the field
+            if (needReset && !isVisible) {
+                field.value = null
+                field.checked = null
+            }
+
+            // Disabled field
+            if (needDisabled) field.disabled = !isVisible
+
+            // Required field
+            if (needRequired) field.required = isVisible
+
+        })
+
+    }
+
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@natachah/vanilla-frontend",
+    "version": "0.0.2",
+    "description": "A vanilla frontend framework",
+    "keywords": [
+        "html5",
+        "css3",
+        "javascript",
+        "vanilla",
+        "frontend"
+    ],
+    "author": {
+        "name": "Natacha Herth",
+        "email": "info@natachaherth.ch"
+    },
+    "license": "MIT",
+    "scripts": {
+        "test": "vitest --coverage",
+        "code:build": "node esbuild.mjs",
+        "docs:dev": "cd docs && vite",
+        "docs:build": "cd docs && vite build",
+        "docs:preview": "cd docs && vite preview"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@gitlab.com:packages4913705/vanilla-frontend.git"
+    },
+    "devDependencies": {
+        "@testing-library/dom": "^9.3.4",
+        "@vitest/coverage-v8": "^1.3.1",
+        "autoprefixer": "^10.4.19",
+        "esbuild": "0.21.5",
+        "esbuild-sass-plugin": "^3.3.1",
+        "fast-glob": "^3.3.2",
+        "happy-dom": "^13.6.2",
+        "postcss": "^8.4.38",
+        "sass": "^1.77.5",
+        "shiki": "^1.7.0",
+        "vite": "^5.2.0",
+        "vitest": "^1.3.1"
+    }
+}

package/scss/_badge.scss

@@ -0,0 +1,37 @@
+////
+/// ------------------------------------------------------------------
+/// Badge
+/// ------------------------------------------------------------------
+/// Create the badge component
+///
+/// @example <span class="badge">...</span>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+@use "sass:map";
+
+$custom: (
+    background: color-mix(in srgb, transparent, var(--hover-color) var(--hover-percent)),
+    padding-block: .25em,
+    padding-inline: .375em
+);
+
+// Change default properties
+$properties: map.merge($default-item-properties, $custom);
+
+.badge {
+
+    // Customization for badge
+    display: inline-block;
+    font-size: var(--badge-font-size, var(--font-size-small));
+    line-height: 1;
+
+    // Define as an item
+    @include as-item('badge', (), $properties);
+
+}

package/scss/_button.scss

@@ -0,0 +1,34 @@
+////
+/// ------------------------------------------------------------------
+/// Button
+/// ------------------------------------------------------------------
+/// Create the button component
+///
+/// @example <button>Button</button> or <a href="#" role="button">Button</a>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+button,
+[type=button],
+[type=reset],
+[type=submit],
+[role=button] {
+
+    // Customization for button
+    display: inline-block;
+
+    // Define as an item
+    @include as-item('button', ('focus', 'hover', 'active', 'disabled'));
+
+    // Set as :disabled for link without href
+    &:is(a):not([href]) {
+        pointer-events: none;
+        opacity: var(--button-disabled-opacity, var(--disabled-opacity));
+    }
+
+}

package/scss/_card.scss

@@ -0,0 +1,122 @@
+////
+/// ------------------------------------------------------------------
+/// Card
+/// ------------------------------------------------------------------
+/// Create the card component
+///
+/// @example <div class="card">...</div>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+@use "sass:map";
+
+$custom: (
+    padding-block: 1rem,
+    padding-inline: 1rem
+);
+
+// Change default properties
+$properties: map.merge($default-item-properties, $custom);
+
+.card {
+
+    // Design as item
+    @include as-item('card', (), $properties);
+
+    // Design the layout
+    > header,
+    > footer,
+    > picture,
+    > .list,
+    > .accordion,
+    > .group {
+        margin-inline: calc(var(--card-padding-inline, map.get($custom, padding-inline)) * -1);
+    }
+
+    > header,
+    > footer {
+        padding: calc(var(--card-padding-block, map.get($custom, padding-block)) / 2) var(--card-padding-inline, map.get($custom, padding-inline));
+    }
+
+    > header,
+    > :first-child:is(picture, .list, .group) {
+        margin-top: calc(var(--card-padding-block, map.get($custom, padding-block)) * -1);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-bottom: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
+    }
+
+    > footer,
+    > :last-child:is(picture, .list, .group) {
+        margin-bottom: calc(var(--card-padding-block, map.get($custom, padding-block)) * -1);
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
+    }
+
+    > :not(:first-child, :last-child):is(picture, .list, .group) {
+        border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
+        border-bottom: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
+    }
+
+    > picture {
+        max-width: inherit;
+        overflow: hidden;
+
+        > img {
+            width: 100%;
+        }
+    }
+
+    > .list {
+
+        > *,
+        > * > a {
+            border-inline: none !important;
+            border-radius: inherit !important;
+        }
+
+        > *:first-child,
+        > *:first-child > a {
+            border-top: none !important;
+        }
+
+        > *:last-child,
+        > *:last-child > a {
+            border-bottom: none !important;
+        }
+
+    }
+
+    > .group {
+
+        > * {
+            width: 100%;
+            border-radius: inherit;
+
+            &:first-child {
+                border-left: none;
+            }
+
+            &:last-child {
+                border-right: none;
+            }
+
+        }
+
+        &:is(:first-child) > * {
+            border-top: none;
+        }
+
+        &:is(:last-child) > * {
+            border-bottom: none;
+        }
+
+    }
+
+}

package/scss/_dialog.scss

@@ -0,0 +1,116 @@
+////
+/// ------------------------------------------------------------------
+/// Dialog
+/// ------------------------------------------------------------------
+/// Create the dialog component
+///
+/// @example <dialog>My dialog</dialog>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+@use "sass:map";
+
+$custom: (
+    background: var(--color-body),
+    padding-block: 2rem,
+    padding-inline: 2rem
+);
+
+// Change default properties
+$properties: map.merge($default-item-properties, $custom);
+
+dialog {
+
+    // Position the dialog
+    position: fixed;
+    inset: var(--dialog-position, 0);
+
+    // Define the CSS
+    margin: auto;
+    width: var(--dialog-width, 576px);
+    height: var(--dialog-height, fit-content);
+    max-width: var(--dialog-max-width, 100dvw);
+    max-height: var(--dialog-max-height, 100dvh);
+    overflow: auto;
+
+    // Design as item
+    @include as-item('dialog', (), $properties);
+
+    // Animate the dialog
+    @media screen and (prefers-reduced-motion: no-preference) {
+        animation: var(--dialog-close-animation, close-dialog 0.25s ease-in-out);
+    }
+
+    // Display dialog when open
+    // Because of the [inert] attribute on the body, require the pointer-events
+    &[open] {
+        z-index: var(--dialog-index, 1);
+        pointer-events: auto;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+            animation: var(--dialog-open-animation, open-dialog 0.25s ease-in-out);
+        }
+    }
+
+    // Design the backdrop, can't be updated per dialog
+    &::backdrop {
+        background: var(--dialog-backdrop-background, var(--backdrop-color, rgba(black, .75)));
+        backdrop-filter: var(--dialog-backdrop-filter, var(--backdrop-filter, blur(.5rem)));
+        -webkit-backdrop-filter: var(--dialog-backdrop-filter, var(--backdrop-filter, blur(.5rem)));
+    }
+
+    // Design the layout
+    > header,
+    > footer {
+        margin-inline: calc(var(--dialog-padding-inline, map.get($custom, padding-inline)) * -1);
+        padding: calc(var(--dialog-padding-block, map.get($custom, padding-block)) / 2) var(--dialog-padding-inline, map.get($custom, padding-inline));
+    }
+
+    > header {
+        margin-top: calc(var(--dialog-padding-block, map.get($custom, padding-block)) * -1);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-bottom: var(--dialog-divider-size, var(--dialog-border-size, var(--border-size))) var(--dialog-divider-style, var(--dialog-border-style, var(--border-style))) var(--dialog-divider-color, var(--dialog-border-color, transparent));
+    }
+
+    > footer {
+        margin-bottom: calc(var(--dialog-padding-block, map.get($custom, padding-block)) * -1);
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        border-top: var(--dialog-divider-size, var(--dialog-border-size, var(--border-size))) var(--dialog-divider-style, var(--dialog-border-style, var(--border-style))) var(--dialog-divider-color, var(--dialog-border-color, transparent));
+    }
+
+}
+
+@keyframes open-dialog {
+    from {
+        opacity: 0;
+        transform: var(--dialog-open-transform, translateY(100px));
+        display: none;
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        display: block;
+    }
+}
+
+// NOT work on FF
+@keyframes close-dialog {
+    from {
+        opacity: 1;
+        transform: none;
+        display: block;
+    }
+
+    to {
+        opacity: 0;
+        transform: var(--dialog-close-transform, translateY(100px));
+        display: none;
+    }
+}

package/scss/_disclosure.scss

@@ -0,0 +1,101 @@
+////
+/// ------------------------------------------------------------------
+/// Disclosure
+/// ------------------------------------------------------------------
+/// Create the disclosure component
+///
+/// @example <details><summary>Click</summary><div>My disclosure</div></details>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+details {
+
+    > summary {
+
+        // Define as an item
+        @include as-item('disclosure', ('focus', 'hover'));
+
+        // Animate the SVG
+        @media screen and (prefers-reduced-motion: no-preference) {
+            > svg {
+                transition: var(--disclosure-transition, all .25s ease-in-out);
+            }
+        }
+
+    }
+
+    // Define as an item
+    > div {
+        @include as-item('disclosure');
+    }
+
+    &[open] summary {
+
+        // Define manually the :active state
+        color: var(--disclosure-active-color, var(--disclosure-color, var(--color-font)));
+        background-color: var(--disclosure-active-background, color-mix(in srgb, var(--disclosure-background, transparent), var(--active-color) var(--active-percent)));
+        border-color: var(--disclosure-active-border-color, var(--disclosure-border-color, transparent));
+
+        // Transform the SVG
+        > svg {
+            transform: var(--disclosure-svg-transform, rotate(90deg));
+        }
+
+    }
+
+    // Include the color variation on the parent
+    @include with-color-variations('disclosure');
+
+}
+
+.accordion {
+
+    // Remove extra border
+    > details + details > summary,
+    > details > div {
+        border-top: none !important;
+    }
+
+    // Remove extra radius
+    > details:not(:first-child, :last-child) > summary,
+    > details:not(:last-child) > div {
+        border-radius: 0;
+    }
+
+    // Remove radius on last element
+    > details:last-child[open] {
+
+        > summary {
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
+        }
+
+        > div {
+            border-start-start-radius: 0;
+            border-start-end-radius: 0;
+        }
+
+    }
+
+    > details:not(:only-child) {
+
+        // Remove radius bottom on first child
+        &:first-child > summary {
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
+        }
+
+        // Remove radius top on last child
+        &:last-child > summary {
+            border-start-start-radius: 0;
+            border-start-end-radius: 0;
+        }
+
+    }
+
+}

package/scss/_dropdown.scss

@@ -0,0 +1,68 @@
+////
+/// ------------------------------------------------------------------
+/// Dropdown
+/// ------------------------------------------------------------------
+/// Create the dropdown component
+///
+/// @example <div class="dropdown"><button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">Button</button><ul id="myDropdown" hidden>...</ul></div>
+///
+/// @require {mixin} as-list
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+@use "sass:map";
+
+$custom: (
+    background: var(--color-body)
+);
+
+// Change default properties
+$properties: map.merge($default-item-properties, $custom);
+
+
+.dropdown {
+
+    position: relative;
+    display: inline-block;
+
+    > [aria-controls] {
+
+        width: 100%;
+        white-space: nowrap;
+
+        // Animate the SVG
+        @media screen and (prefers-reduced-motion: no-preference) {
+            > svg {
+                transition: var(--dropdown-transition, all .25s ease-in-out);
+            }
+        }
+
+        &[aria-expanded=true] > svg {
+            transform: var(--dropdown-svg-transform, rotate(-180deg));
+        }
+
+    }
+
+    > *:not([aria-controls]) {
+
+        // Make it overflow
+        position: absolute;
+        z-index: var(--dropdown-index, 1);
+        top: calc(100% + var(--dropdown-offset, .5rem));
+
+        // Simple bloc
+        &:not(ul, li) {
+            @include as-item('dropdown', (), $properties);
+        }
+
+        // As list
+        &:is(ul, ol) {
+            @include as-list('dropdown', ('focus', 'hover', 'active', 'disabled'), $properties);
+        }
+
+    }
+
+}