@natachah/vanilla-frontend 0.4.1 → 1.0.0

package/docs/src/scss/demo.scss

@@ -1,77 +0,0 @@
-////
-/// ------------------------------------------------------------------
-/// Demo
-/// ------------------------------------------------------------------
-/// This is the style for demonstration bloc
-///
-/// @author Natacha Herth
-
-///
-////
-
-@use './../../../scss/abstracts/mixins' as *;
-
-// Demo for grid offset
-#flexGridDemoOffset {
-    @include flex-grid-offset-column()
-}
-
-// Demo for grid wider
-#flexGridDemoWider {
-    @include flex-grid-wider-column()
-}
-
-// Demo for fade slider
-.slider-fade-demo {
-    --image-width: 100%;
-    --image-ratio: 4/3;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    > * {
-        transition: all 2s ease-out;
-
-        &[aria-hidden=true] {
-            filter: blur(1rem);
-            opacity: 0;
-        }
-
-        &[aria-hidden=false] {
-            opacity: 1;
-        }
-    }
-}
-
-// Create a container
-.as-container {
-    container-type: inline-size;
-    min-height: 300px;
-    overflow: hidden;
-}
-
-// Demo for responsive table
-@container (max-width:800px) {
-    #demoTable {
-        @include as-responsive-table()
-    }
-}
-
-// Demo for grid
-doc-demo {
-
-    .grid,
-    .flex-grid {
-        &:not(.demo-inline) > * {
-            background-color: #eee;
-            text-align: center;
-            padding-block: 1rem;
-        }
-
-        &.demo-inline {
-            --grid-columns: 3
-        }
-
-    }
-
-}

package/docs/src/scss/layout.scss

@@ -1,83 +0,0 @@
-////
-/// ------------------------------------------------------------------
-/// Layout
-/// ------------------------------------------------------------------
-/// This is the style for the basic layout with a sidebar
-///
-/// @author Natacha Herth
-
-///
-////
-
-doc-layout {
-
-    height: 100vh;
-    display: grid;
-    grid-template-columns: 0px 1fr;
-    grid-template-rows: max-content 1fr;
-    grid-template-areas: "aside header" "aside main" "aside footer";
-    overflow: hidden;
-    transition: all .5s ease-in-out;
-
-    > header {
-        grid-area: header;
-    }
-
-    > footer {
-        grid-area: footer;
-    }
-
-    > header > nav > ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 1rem;
-    }
-
-    > main {
-        grid-area: main;
-        overflow-y: auto;
-    }
-
-    #sidebar {
-
-        --drawer-display: grid;
-        --drawer-transform: translatex(-100%);
-        --drawer-position: 0 auto 0 0;
-
-        // Set the grid for the sidebar based on the parent grid
-        grid-template-columns: 1fr;
-        grid-template-rows: max-content 1fr;
-        grid-template-areas: "welcome" "menu";
-
-        > header {
-            grid-area: welcome;
-        }
-
-        // Design the nav
-        > nav {
-            grid-area: menu;
-            overflow-y: auto;
-        }
-
-    }
-
-    * {
-        // Hide scrollbar for IE, Edge and Firefox
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-
-        //Hide scrollbar for Chrome, Safari and Opera
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    @media (min-width: 960px) {
-        &:has(#sidebar:not([hidden])) {
-            grid-template-columns: 320px 1fr;
-        }
-    }
-
-}

package/docs/src/scss/style.scss

@@ -1,278 +0,0 @@
-////
-/// ------------------------------------------------------------------
-/// Style
-/// ------------------------------------------------------------------
-/// This is the style for the website
-///
-/// @author Natacha Herth
-
-///
-////
-
-@use './../../../scss/abstracts/mixins' as *;
-
-:root {
-
-    --doc-header-padding-block: 1rem;
-    --doc-main-padding-block: 2rem;
-    --doc-sidebar-padding-inline: 2rem;
-    --doc-main-padding-inline: 4rem;
-
-    --doc-bloc-padding: 1.5rem;
-    --doc-bloc-radius: .75rem;
-    --doc-code-background: #282c34;
-    --doc-border-color: #e2e2e2;
-
-    --color-font: #535353;
-    --heading-color: #3c3c3c;
-    --dialog-index: 3;
-    --line-height: 1.75;
-    --heading-line-height: 1.5;
-
-}
-
-doc-layout {
-
-    > header {
-
-        // For the icon link
-        --nav-color: rgba(0, 0, 0, .5);
-        --nav-hover-color: black;
-
-        // Display inline
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--doc-header-padding-block) var(--doc-main-padding-inline);
-        border-bottom: 1px solid var(--doc-border-color);
-    }
-
-    > #sidebar {
-
-        background-color: var(--color-body, white);
-        border-right: 1px solid var(--doc-border-color);
-
-        > header {
-
-            padding: var(--doc-header-padding-block) var(--doc-sidebar-padding-inline);
-            font-size: var(--font-size-h3);
-
-            svg {
-                transition: all .25s ease-in-out;
-                color: var(--color-primary)
-            }
-
-            a {
-                display: block;
-                width: 100%;
-                white-space: nowrap; // For bug when hide sidebar ≠ change the height of header
-
-                &:hover svg {
-                    transform: rotate(25deg);
-                }
-            }
-
-        }
-
-        > nav {
-
-            --nav-direction: column;
-            --nav-align: start;
-            --nav-gap: .25rem;
-            --nav-hover-color: var(--color-primary);
-
-            // Display flex to make sure copyright will always at the bottom
-            display: flex;
-            flex-direction: column;
-            padding: var(--doc-main-padding-block) var(--doc-sidebar-padding-inline);
-
-            > h2 {
-                margin-bottom: .25em;
-                font-size: var(--font-size);
-                font-weight: bold;
-            }
-
-            > ul:not(:last-child) {
-                margin-bottom: 1.5rem;
-            }
-
-        }
-
-        #copyright {
-            font-size: var(--font-size-small);
-            text-align: center;
-            margin-top: auto;
-            padding-block: .5rem;
-            font-style: italic;
-        }
-
-    }
-
-    > main {
-
-        container-type: inline-size;
-        padding: var(--doc-main-padding-block) var(--doc-main-padding-inline);
-
-        :not(doc-demo) a {
-            --anchor-color: var(--color-primary);
-            --anchor-decoration: underline;
-        }
-
-        > h2 {
-            margin-block: 2em .25em;
-            padding-top: .5em;
-            border-top: 1px solid var(--doc-border-color);
-
-            &:before {
-                content: '# ';
-            }
-        }
-
-        > h3 {
-            margin-block: 1em .25em;
-        }
-
-        > h2 + *,
-        > h3 + * {
-            margin-top: 0 !important;
-        }
-
-        > p,
-        > ul,
-        > hr,
-        > blockquote,
-        > table,
-        > doc-demo,
-        > doc-code,
-        > .code-group {
-            margin-block: 1.75rem;
-        }
-
-        > blockquote {
-
-            border-left: 3px solid var(--blockquote-color, var(--color-primary));
-            padding-left: var(--doc-bloc-padding);
-
-            &:is(.tip, .warning, .todo) {
-
-                background-color: color-mix(in srgb, var(--blockquote-color), transparent 90%);
-                border-radius: var(--doc-bloc-radius);
-                border-left: none;
-                padding: var(--doc-bloc-padding);
-
-                &:before {
-                    font-weight: bold;
-                    text-transform: uppercase;
-                    color: var(--blockquote-color);
-                    content: attr(class);
-                }
-
-            }
-
-            &.tip {
-                --blockquote-color: var(--color-primary);
-            }
-
-            &.warning {
-                --blockquote-color: var(--color-warning);
-            }
-
-            &.todo {
-                --blockquote-color: var(--color-error);
-            }
-
-        }
-
-        > table {
-            th {
-                font-weight: bold;
-            }
-
-            tr:nth-child(odd) td {
-                background-color: rgba(0, 0, 0, .05);
-            }
-        }
-
-        > doc-demo {
-            display: block;
-            padding: var(--doc-bloc-padding);
-            border-radius: var(--doc-bloc-radius);
-            border: 1px solid var(--doc-border-color);
-        }
-
-        // Simple code bloc => add the type on the bottom
-        > doc-code {
-
-            display: block;
-            position: relative;
-            padding: var(--doc-bloc-padding);
-            background-color: var(--doc-code-background);
-            border-radius: var(--doc-bloc-radius);
-
-            &::before {
-                content: attr(data-type, 'html');
-                position: absolute;
-                bottom: .5rem;
-                right: .75rem;
-                font-size: 12px;
-                color: white;
-                opacity: .5;
-            }
-
-        }
-
-        // Tab nav code bloc
-        > .code-group {
-
-            position: relative;
-            padding: calc(var(--doc-bloc-padding) / 2) var(--doc-bloc-padding);
-            background-color: var(--doc-code-background);
-            border-radius: var(--doc-bloc-radius);
-
-            doc-code:not([hidden]) {
-                display: block;
-                padding: .5rem;
-            }
-
-            [role=tablist] {
-                --button-color: white;
-                --button-active-color: var(--color-primary);
-                --button-hover-background: rgba(255, 255, 255, .25);
-                --button-padding-inline: .5rem;
-                --button-padding-block: .25rem;
-                font-size: 12px;
-                margin-bottom: .25rem;
-            }
-
-        }
-
-    }
-
-}
-
-@media (max-width:630px) {
-    :root {
-        --doc-header-padding-block: 1rem;
-        --doc-main-padding-block: 1rem;
-        --doc-sidebar-padding-inline: 1rem;
-        --doc-main-padding-inline: 1.5rem;
-
-        --font-size: 14px;
-        --line-height: 1.5;
-        --heading-line-height: 1.25;
-    }
-}
-
-@container (max-width:576px) {
-    table {
-
-        --table-padding-block: 0.125em;
-
-        @include as-responsive-table();
-
-        td[data-label]:before {
-            font-weight: bold;
-        }
-
-    }
-}

package/docs/vite.config.mjs

@@ -1,23 +0,0 @@
-import { defineConfig } from 'vite'
-import glob from 'fast-glob'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-export default defineConfig({
-    build: {
-        target: 'esnext', //browsers can handle the latest ES features
-        cssCodeSplit: true,
-        rollupOptions: {
-            input: Object.fromEntries(
-                glob.sync(['./*.html', './pages/**/*.html']).map(file => [
-                    // This remove `pages/` as well as the file extension from each
-                    // file, so e.g. pages/nested/foo.html becomes nested/foo
-                    path.relative(__dirname, file.slice(0, file.length - path.extname(file).length)),
-                    // This expands the relative paths to absolute paths, so e.g.
-                    // src/nested/foo becomes /project/src/nested/foo.js
-                    fileURLToPath(new URL(file, import.meta.url)),
-                ]),
-            ),
-        },
-    }
-})

package/esbuild.mjs

@@ -1,25 +0,0 @@
-import esbuild from "esbuild"
-import { sassPlugin } from "esbuild-sass-plugin"
-import postcss from 'postcss'
-import autoprefixer from 'autoprefixer'
-
-esbuild
-    .build({
-        entryPoints: ["scss/vanilla-frontend.scss", "js/vanilla-frontend.js"],
-        entryNames: '[name]',
-        outbase: "./",
-        outdir: './bundles',
-        bundle: true,
-        metafile: true,
-        minify: true,
-        plugins: [
-            sassPlugin({
-                async transform(source) {
-                    const { css } = await postcss([autoprefixer]).process(source)
-                    return css
-                },
-            }),
-        ],
-    })
-    .then(() => console.log("⚡ Build complete! ⚡"))
-    .catch(() => process.exit(1))

package/vitest.config.js

@@ -1,8 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-    test: {
-        environment: 'happy-dom',
-        globals: true,
-    }
-})