@natachah/vanilla-frontend 0.0.3 → 0.0.5

package/docs/pages/components/dropdown.html

@@ -94,6 +94,24 @@
 
         <p>To work properly the <code>&lt;button&gt;</code> of the dropdown must have an <code>aria-controls=&quot;IdOfTheContent&quot;</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
 
+        <p>You can also add some buttons into the list to make them look as a vertical group.</p>
+
+        <doc-demo>
+            <div class="dropdown demo-dropdown">
+                <button aria-controls="mySecondDropdown" aria-expanded="false" aria-pressed="false">
+                    Dropdown
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
+                    </svg>
+                </button>
+                <ul id="mySecondDropdown" tabindex="0" style="--button-background: var(--color-body);" hidden>
+                    <li><button>Button longer</button></li>
+                    <li><button>Button</button></li>
+                    <li><button>Button</button></li>
+                </ul>
+            </div>
+        </doc-demo>
+
         <h2>States</h2>
 
         <p>The <code>&lt;button&gt;</code> inside the dropdown will work as the default button component.</p>
@@ -208,7 +226,7 @@
 
         <doc-code data-type="js">
             new Toggle(myDropdown, {
-                closable:false
+            closable:false
             })
         </doc-code>
 
@@ -243,8 +261,8 @@
         <doc-code data-type="js">
             const dropdown = document.getElementById('myDropdown')
             dropdown.addEventListener('dropdown:changed', (e) => {
-                const value = e.detail.isOpen
-                console.log(value)
+            const value = e.detail.isOpen
+            console.log(value)
             })
         </doc-code>
 

package/docs/pages/javascript/sortable.html

@@ -48,23 +48,23 @@
         </div>
 
         <h2 id="handle">Handle</h2>
-        <p>You can decide which part of the item is draggable with the <code>data-handle</code> attribute</p>
+        <p>You can decide which part of the item is draggable with the <code>data-handle="sortable"</code> attribute</p>
         <doc-demo>
             <ul class="demo-sortable">
                 <li draggable=" false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         HANDLE
                     </span>
                     Lorem, ipsum.
                 </li>
                 <li draggable="false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         HANDLE
                     </span>
                     Impedit, quod!
                 </li>
                 <li draggable="false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         HANDLE
                     </span>
                     Repudiandae, rerum.
@@ -75,19 +75,19 @@
         <doc-code>
             <ul id="mySortableListWithHandle">
                 <li draggable="false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         Handle
                     </span>
                     Lorem, ipsum.
                 </li>
                 <li draggable="false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         Handle
                     </span>
                     Impedit, quod!
                 </li>
                 <li draggable="false">
-                    <span data-handle>
+                    <span data-handle="sortable">
                         Handle
                     </span>
                     Repudiandae, rerum.
@@ -135,9 +135,9 @@
         <doc-code data-type="js">
             const mySortable = document.getElementById('mySortableList')
             mySortable.addEventListener('sortable:drag', (e) => {
-                const theCollectionOfItems = e.detail.items
-                const thecurrentItem = e.detail.current
-                ...
+            const theCollectionOfItems = e.detail.items
+            const thecurrentItem = e.detail.current
+            ...
             })
         </doc-code>
 

package/docs/pages/javascript/tabpanel.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Javascript > Tabpanel</title>
+</head>
+
+<body data-preload>
+    <doc-layout>
+
+        <h1>Tabpanel</h1>
+        <p>The tabpanel component make you able to make some elements visible by some <code>&lt;button&gt;</code>.</p>
+        <p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>
+
+
+
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="js">JS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <div id="myPanel">
+                    <div role="tablist">
+                        <button role="tab" aria-controls="one">One</button>
+                        <button role="tab" aria-controls="two">Two</button>
+                    </div>
+                    <div id="one" role="tabpanel">
+                        This is the first panel
+                    </div>
+                    <div id="two" role="tabpanel">
+                        This is the seconde panel
+                    </div>
+                </div>
+            </doc-code>
+            <doc-code id="js" data-type="js" role="tabpanel">
+                import Tabpanel from '@natachah/vanilla-frontend/js/_tabpanel.js'
+                const tabpanel = document.getElementById('myPanel')
+                if (tabpanel) new Tabpanel(tabpanel)
+            </doc-code>
+        </div>
+
+        <blockquote class="tip">
+            <p>These website use the Tabpanel to show you the code of each component !</p>
+        </blockquote>
+
+        <h2>Javascript</h2>
+        <p>To enable this component you need to import the javascript file and create a new Tabpanel object.</p>
+
+        <h3>Events</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Event</th>
+                    <th>Description</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Event">
+                        <p>tabpanel:changed</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired when the panel as been changed</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>current</code> as a <code>HTMLElement</code> of the current button</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <doc-code data-type="js">
+            const myPanel = document.getElementById('myPanel')
+            myPanel.addEventListener('tabpanel:changed', (e) => {
+            const thecurrentButton = e.detail.current
+            console.log('It has changed !')
+            })
+        </doc-code>
+
+
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+
+</html>

package/docs/pages/javascript/tree.html

@@ -136,12 +136,12 @@
         </blockquote>
 
         <h2>Handle</h2>
-        <p>You can decide which part of the item toggle the open/close method with the <code>data-handle</code> attribute</p>
+        <p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>
         <doc-demo>
             <ul class="demo-tree" role="tree">
                 <li role="treeitem">
                     <span aria-expanded="false" aria-owns="sublist">
-                        <span data-handle>
+                        <span data-handle="tree">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                 <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                             </svg>
@@ -162,7 +162,7 @@
                 ...
                 <li role="treeitem">
                     <span aria-expanded="false" aria-owns="treelist">
-                        <span data-handle>
+                        <span data-handle="tree">
                             HANDLE
                         </span>
                         Inventore, perspiciatis
@@ -209,8 +209,8 @@
         <doc-code data-type="js">
             const myTree = document.getElementById('myTree')
             myTree.addEventListener('tree:changed', (e) => {
-                const isOpen = e.detail.isOpen
-                ...
+            const isOpen = e.detail.isOpen
+            ...
             })
         </doc-code>
 

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

@@ -89,6 +89,7 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/javascript/scroll.html">Scroll</a></li>
                         <li><a href="/pages/javascript/sidebar.html">Sidebar</a></li>
                         <li><a href="/pages/javascript/sortable.html">Sortable</a></li>
+                        <li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
                         <li><a href="/pages/javascript/toggle.html">Toggle</a></li>
                         <li><a href="/pages/javascript/tree.html">Tree</a></li>
                     </ul>

package/js/_sortable.js

@@ -27,9 +27,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 +51,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
@@ -126,6 +128,9 @@ export default class Sortable extends BaseComponent {
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
 
+        // Do nothing if there is NO current
+        if (!this._current) return
+
         // Reset the current property
         this._current = null
 

package/js/_tree.js

@@ -28,7 +28,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 +45,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()
@@ -116,7 +116,8 @@ describe('#Drop()', () => {
 
     test('Emmit the sortable:drop event', () => {
         const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
-        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeListItem, new MouseEvent('mousedown')) // First drag item
+        fireEvent(fakeListItem, new MouseEvent('dragstart')) // First drag item
         fireEvent(fakeListItem, new MouseEvent('dragend'))
         expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
     })

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",

package/scss/utilities/_mixin.scss

@@ -125,7 +125,7 @@
         margin: 0;
 
         // Simple item
-        &:not(:has(> a:first-child:last-child)) {
+        &:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
             @include as-item($name, (), $properties);
         }
 
@@ -135,15 +135,23 @@
             @include as-item($name, $states, $properties);
         }
 
+        // Item with button
+        &:has(> button:first-child:last-child) > button {
+            width: 100%;
+            text-align: left;
+        }
+
         // Remove extra border
         & + *,
-        & + * > a {
+        & + * > a,
+        & + * > button {
             border-top: none !important;
         }
 
         // Remove radius on middle child
         &:not(:first-child, :last-child),
-        &:not(:first-child, :last-child) > a {
+        &:not(:first-child, :last-child) > a,
+        &:not(:first-child, :last-child) > button {
             border-radius: 0 !important;
         }
 
@@ -152,14 +160,16 @@
 
             // Remove radius bottom on first child
             &:first-child,
-            &:first-child > a {
+            &:first-child > a,
+            &:first-child > button {
                 border-end-start-radius: 0 !important;
                 border-end-end-radius: 0 !important;
             }
 
             // Remove radius top on last child
             &:last-child,
-            &:last-child > a {
+            &:last-child > a,
+            &:last-child > button {
                 border-start-start-radius: 0 !important;
                 border-start-end-radius: 0 !important;
             }