@natachah/vanilla-frontend 0.0.4 → 0.1.0

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

@@ -21,42 +21,45 @@
         <p>Then you can import the <b>SCSS</b> files:</p>
 
         <doc-code data-type="scss">
-            @import '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
+            @use '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
         </doc-code>
 
         <p>Or better, include only the files that you need, here the template with all files:</p>
 
         <doc-code data-type="scss">
-            // Can be overide by your own variables files
-            @import '@natachah/vanilla-frontend/scss/variables/_root';
-            @import '@natachah/vanilla-frontend/scss/variables/_setting';
-
-            // Utilities
-            @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
-            @import '@natachah/vanilla-frontend/scss/utilities/_reset';
-            @import '@natachah/vanilla-frontend/scss/utilities/_typography';
-
-            // Components
-            @import '@natachah/vanilla-frontend/scss/_badge';
-            @import '@natachah/vanilla-frontend/scss/_breadcrumb';
-            @import '@natachah/vanilla-frontend/scss/_button';
-            @import '@natachah/vanilla-frontend/scss/_card';
-            @import '@natachah/vanilla-frontend/scss/_dialog';
-            @import '@natachah/vanilla-frontend/scss/_disclosure';
-            @import '@natachah/vanilla-frontend/scss/_dropdown';
-            @import '@natachah/vanilla-frontend/scss/_form';
-            @import '@natachah/vanilla-frontend/scss/_grid';
-            @import '@natachah/vanilla-frontend/scss/_group';
-            @import '@natachah/vanilla-frontend/scss/_list';
-            @import '@natachah/vanilla-frontend/scss/_loading';
-            @import '@natachah/vanilla-frontend/scss/_media';
-            @import '@natachah/vanilla-frontend/scss/_progress';
-            @import '@natachah/vanilla-frontend/scss/_slider';
-            @import '@natachah/vanilla-frontend/scss/_table';
+            // Should be overide by your own files
+            @use '@natachah/vanilla-frontend/scss/themes/_root';
+
+            // If you need to use the mixin
+            @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
+
+            // Base files (reset, typography and media)
+            @use "@natachah/vanilla-frontend/scss/base";
+
+            // Layouts
+            @use "@natachah/vanilla-frontend/scss/layouts/grid";
+
+            // Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
+            @use '@natachah/vanilla-frontend/scss/components/_badge';
+            @use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
+            @use '@natachah/vanilla-frontend/scss/components/_button';
+            @use '@natachah/vanilla-frontend/scss/components/_card';
+            @use '@natachah/vanilla-frontend/scss/components/_dialog';
+            @use '@natachah/vanilla-frontend/scss/components/_disclosure';
+            @use '@natachah/vanilla-frontend/scss/components/_dropdown';
+            @use '@natachah/vanilla-frontend/scss/components/_form';
+            @use '@natachah/vanilla-frontend/scss/components/_grid';
+            @use '@natachah/vanilla-frontend/scss/components/_group';
+            @use '@natachah/vanilla-frontend/scss/components/_list';
+            @use '@natachah/vanilla-frontend/scss/components/_loading';
+            @use '@natachah/vanilla-frontend/scss/components/_progress';
+            @use '@natachah/vanilla-frontend/scss/components/_slider';
+            @use '@natachah/vanilla-frontend/scss/components/_table';
+
         </doc-code>
 
         <blockquote>
-            <p>There is no required files, but it's recommanded to have at least the reset and typography...</p>
+            <p>There is no required files, but it's recommanded to have at least the <b>base/*</b> and the <b>themes/root</b></p>
         </blockquote>
 
         <p>Import the <b>Javascript</b> files that you need, here the template:</p>

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

@@ -17,7 +17,7 @@
         <p>To use them, import this file:</p>
 
         <doc-code data-type="scss">
-            @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
+            @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
         </doc-code>
 
         <h2>Create an item</h2>
@@ -42,13 +42,13 @@
             /// @access public
             ///
 
-            @include as-item($name, $states: (), $properties: $default-item-properties)
+            @include as-item($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <p>This mixin also include the <b>outline</b> and <b>color</b> variations. It also create some CSS custom properties with the <code>$name</code> value as <code>--{$name}-color</code> with fallback values from the <code>$properties</code>.</p>
 
         <blockquote class="warning">
-            <p>The default properties are set inside the <code>$default-item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
+            <p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
         </blockquote>
 
         <h2>Create a list</h2>
@@ -64,13 +64,31 @@
             /// @access public
             ///
 
-            @include as-list($name, $states: (), $properties: $default-item-properties)
+            @include as-list($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <blockquote>
             <p>This mixin is used for the <b>list</b> and <b>dropdown</b> components</p>
         </blockquote>
 
+        <h2>Add header and footer to an item</h2>
+
+        <p>This mixin will create a header and a footer with negativ margin, some padding and a divider border.</p>
+
+        <doc-code data-type="scss">
+            /// Create a basic item with an header and a footer style
+            ///
+            /// @param {string} $name - Name of the component
+            /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+            /// @access public
+            ///
+            @mixin with-header-and-footer($name, $properties: default.$item-properties)
+        </doc-code>
+
+        <blockquote>
+            <p>This mixin is used in <b>Dialog</b> components</p>
+        </blockquote>
+
         <h2>Set outline variation</h2>
 
         <p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
@@ -95,7 +113,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    my-component-name
+                my-component-name
                 );
             </doc-code>
         </div>
@@ -126,7 +144,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    my-component-name: (primary, other-color)
+                my-component-name: (primary, other-color)
                 );
             </doc-code>
         </div>
@@ -167,9 +185,9 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 @container (max-width:800px) {
-                    table {
-                        @include as-responsive-table()
-                    }
+                table {
+                @include as-responsive-table()
+                }
                 }
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
@@ -201,11 +219,11 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 #wider {
-                    @include flex-grid-wider-column(3)
+                @include flex-grid-wider-column(3)
                 }
 
                 #offset {
-                    @include flex-grid-offset-column(2)
+                @include flex-grid-offset-column(2)
                 }
             </doc-code>
         </div>

package/docs/src/js/demo.js

@@ -5,7 +5,7 @@
  * This is the code for the demonstration code
  * 
  * @author Natacha Herth
- * @version 0.0.1
+
  * @copyright Natacha Herth, design & web development
  * 
  */

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.0.1
+                                0.1.0
                             </span>
                         </li>
                         <li>
@@ -55,11 +55,15 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/quick-start/mixins.html">SCSS Mixins</a></li>
                         <li><a href="/pages/quick-start/conventions.html">Conventions</a></li>
                     </ul>
-                    <h2>Layout</h2>
+                    <h2>Base</h2>
                     <ul>
-                        <li><a href="/pages/layout/reset.html">Reset</a></li>
-                        <li><a href="/pages/layout/typography.html">Typography</a></li>
-                        <li><a href="/pages/layout/grid.html">Grid</a></li>
+                        <li><a href="/pages/base/reset.html">Reset</a></li>
+                        <li><a href="/pages/base/typography.html">Typography</a></li>
+                        <li><a href="/pages/base/media.html">Media</a></li>
+                    </ul>
+                    <h2>Layouts</h2>
+                    <ul>
+                        <li><a href="/pages/layouts/grid.html">Grid</a></li>
                     </ul>
                     <h2>Components</h2>
                     <ul>
@@ -73,7 +77,6 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/components/form.html">Form</a></li>
                         <li><a href="/pages/components/list.html">List</a></li>
                         <li><a href="/pages/components/loading.html">Loading</a></li>
-                        <li><a href="/pages/components/media.html">Media</a></li>
                         <li><a href="/pages/components/progress.html">Progress</a></li>
                         <li><a href="/pages/components/slider.html">Slider</a></li>
                         <li><a href="/pages/components/table.html">Table</a></li>

package/docs/src/scss/demo.scss

@@ -5,11 +5,11 @@
 /// This is the style for demonstration bloc
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 // Demo for grid offset
 #flexGridDemoOffset {

package/docs/src/scss/layout.scss

@@ -5,7 +5,7 @@
 /// This is the style for the basic layout with a sidebar
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 

package/docs/src/scss/style.scss

@@ -5,11 +5,11 @@
 /// This is the style for the website
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 :root {
 

package/esbuild.mjs

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

package/js/_autofill.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to automatic filling some fields from another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_check-all.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/check a list of checkboxes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_comfort.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving theme and style changes for visual comfort
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_consent.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving the consent to comply the GDPR
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dialog.js

@@ -5,7 +5,6 @@
  * This class enable the functionalities for open/close/submit an HTML dialog
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dropdown.js

@@ -6,7 +6,6 @@
  * This component is a simpler version of the Toggle
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_scroll.js

@@ -5,7 +5,6 @@
  * This script enable an HTML element to scroll to a position and to spy some buttons
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_sidebar.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_slider.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to make an element slider
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * keep check on the scrollend event: https://caniuse.com/?search=scrollend

package/js/_sortable.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to sort a list or a table
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 
@@ -27,9 +26,11 @@ export default class Sortable extends BaseComponent {
         super(el, options, 'sortable')
 
         // Define the properties
-        this._withHandle = this._element.querySelector('[data-handle]') ? true : false
+        this._withHandle = this._element.querySelector('[data-handle=sortable]') ? true : false
         this._current = null
 
+        console.log(this)
+
         // Init the event listener
         this.#init()
 
@@ -49,7 +50,7 @@ export default class Sortable extends BaseComponent {
         this.items.forEach((item) => {
 
             // Toggle the [dragable] attribute
-            item.addEventListener('mousedown', (e) => { if (!this._withHandle || e.target.hasAttribute('data-handle')) item.draggable = true })
+            item.addEventListener('mousedown', (e) => { if (!this._withHandle || (e.target.hasAttribute('data-handle') && e.target.getAttribute('data-handle') === 'sortable')) item.draggable = true })
             item.addEventListener('mouseup', () => item.draggable = false)
 
             // Drag and drop events

package/js/_tabpanel.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_toggle.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/collapse some element by another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * NOTE: Check availability of the ariaControlsElements to select the #ids

package/js/_tree.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to expand/contract element as a tree
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 
@@ -28,7 +27,7 @@ export default class Tree extends BaseComponent {
         // Define the properties
         this._type = this._element.role == 'tree' ? 'list' : 'grid'
 
-        this._withHandle = this._element.querySelector('[data-handle]') ? true : false
+        this._withHandle = this._element.querySelector('[data-handle=tree]') ? true : false
 
         this._items = this._element.querySelectorAll('[aria-expanded]')
 
@@ -45,7 +44,7 @@ export default class Tree extends BaseComponent {
     #init() {
 
         this._items.forEach(item => item.addEventListener('click', (e) => {
-            if (!this._withHandle || e.target.hasAttribute('data-handle')) {
+            if (!this._withHandle || (e.target.hasAttribute('data-handle') && e.target.getAttribute('data-handle') === 'tree')) {
                 e.stopPropagation()
                 this.toggle(item)
             }

package/js/tests/sortable.test.js

@@ -34,9 +34,9 @@ beforeAll(() => {
         '<li draggable="false">Three</li>' +
         '</ul>' +
         '<table id="fakeTable">' +
-        '<tr draggable="false"><td data-handle>DRAG</td><td>One</td></tr>' +
-        '<tr draggable="false"><td data-handle>DRAG</td><td>Two</td></tr>' +
-        '<tr draggable="false"><td data-handle>DRAG</td><td>Three</td></tr>' +
+        '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>One</td></tr>' +
+        '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>Two</td></tr>' +
+        '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>Three</td></tr>' +
         '</table>'
 
     fakeListSortable = new Sortable(document.getElementById('fakeList'))
@@ -70,7 +70,7 @@ describe('Mousedown & Mouseup', () => {
 
     test('With handle & Mouseup toggle the [draggable] attribute', () => {
         const item = document.querySelector('#fakeTable tr')
-        const handle = document.querySelector('#fakeTable tr:first-child [data-handle]')
+        const handle = document.querySelector('#fakeTable tr:first-child [data-handle=sortable]')
         const customMousedown = new MouseEvent('mousedown')
         Object.defineProperty(customMousedown, 'target', { value: handle }) // Define the mousedown event with custom target
         expect(item.draggable).toBeFalsy()

package/js/tests/tree.test.js

@@ -41,8 +41,8 @@ beforeAll(() => {
         '</ul>' +
         '<table id="fakeGridTree" role="treegrid">' +
         '<tr aria-level="1"><td></td></tr>' +
-        '<tr aria-level="1" aria-expanded="false" aria-owns="lvl2"><td data-handle></td></tr>' +
-        '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-owns="lvl3" hidden><td data-handle></td></tr>' +
+        '<tr aria-level="1" aria-expanded="false" aria-owns="lvl2"><td data-handle="tree"></td></tr>' +
+        '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-owns="lvl3" hidden><td data-handle="tree"></td></tr>' +
         '<tr id="lvl3" aria-level="3" hidden><td></td></tr>' +
         '<tr aria-level="1"><td></td></tr>' +
         '</table>'
@@ -53,7 +53,7 @@ beforeAll(() => {
     fakeRow = fakeGridTree._element.querySelector('tr[aria-level="1"][aria-expanded]')
 
     customClick = new MouseEvent('click')
-    Object.defineProperty(customClick, 'target', { value: fakeRow.querySelector('[data-handle]') }) // Define the click event with custom target
+    Object.defineProperty(customClick, 'target', { value: fakeRow.querySelector('[data-handle=tree]') }) // Define the click event with custom target
 
 })
 
@@ -130,10 +130,10 @@ describe('#Toggle()', () => {
             const lvl3 = document.getElementById('lvl3')
 
             const customClickLvl2 = new MouseEvent('click')
-            Object.defineProperty(customClickLvl2, 'target', { value: lvl2.querySelector('[data-handle]') }) // Define the click event with custom target
+            Object.defineProperty(customClickLvl2, 'target', { value: lvl2.querySelector('[data-handle=tree]') }) // Define the click event with custom target
 
             const customClickLvl3 = new MouseEvent('click')
-            Object.defineProperty(customClickLvl3, 'target', { value: lvl3.querySelector('[data-handle]') }) // Define the click event with custom target
+            Object.defineProperty(customClickLvl3, 'target', { value: lvl3.querySelector('[data-handle=tree]') }) // Define the click event with custom target
 
             fireEvent(fakeRow, customClick)
             fireEvent(lvl2, customClickLvl2)

package/js/utilities/_base-component.js

@@ -5,7 +5,6 @@
  * This class regroup common functionalities for other classes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_cookie.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_error.js

@@ -5,7 +5,6 @@
  * This make global error message
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_form-helper.js

@@ -5,7 +5,6 @@
  * This class regroup some helper function for forms
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.0.4",
+    "version": "0.1.0",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",
@@ -29,7 +29,7 @@
         "@testing-library/dom": "^9.3.4",
         "@vitest/coverage-v8": "^1.3.1",
         "autoprefixer": "^10.4.19",
-        "esbuild": "0.21.5",
+        "esbuild": "^0.21.5",
         "esbuild-sass-plugin": "^3.3.1",
         "fast-glob": "^3.3.2",
         "happy-dom": "^13.6.2",

package/scss/abstracts/_default.scss

@@ -0,0 +1,21 @@
+////
+/// ------------------------------------------------------------------
+/// Default values for items
+/// ------------------------------------------------------------------
+/// Setting variables
+///
+/// @group abstracts
+/// @author Natacha Herth
+/// 
+////
+
+$item-properties: (
+    color: var(--color-font),
+    background: transparent,
+    border-size: var(--border-size),
+    border-style: var(--border-style),
+    border-color: transparent,
+    border-radius: var(--border-radius),
+    padding-inline: var(--padding-inline),
+    padding-block: var(--padding-block)
+);