@natachah/vanilla-frontend 0.1.16 → 0.1.17

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.1.16
+                                0.1.17
                             </span>
                         </li>
                         <li>

package/js/_sortable.js

@@ -26,7 +26,6 @@ export default class Sortable extends BaseComponent {
         super(el, options, 'sortable')
 
         // Define the properties
-        this._items = null
         this._withHandle = this._element.querySelector('[data-handle=sortable]') ? true : false
         this._current = null
 
@@ -57,6 +56,17 @@ export default class Sortable extends BaseComponent {
 
     }
 
+    /**
+     * Get the list of the items
+     * This is used for the emmitEvent
+     * 
+     * @return {object}
+     */
+    get _items() {
+        return this._element.querySelectorAll('[draggable]')
+    }
+
+
     /**
      * Init the items and the event listeners
      * 
@@ -65,7 +75,7 @@ export default class Sortable extends BaseComponent {
     #initEvents() {
 
         // Get the items
-        this._items = this._element.querySelectorAll('[draggable]')
+        //this._items = this._element.querySelectorAll('[draggable]')
 
         // Add the events
         this._items.forEach(item => {
@@ -148,7 +158,7 @@ export default class Sortable extends BaseComponent {
         item.setAttribute('aria-grabbed', true)
 
         // Run custom event
-        this.emmitEvent('drag', { items: this.items, current: item })
+        this.emmitEvent('drag', { items: this._items, current: item })
 
     }
 
@@ -208,7 +218,7 @@ export default class Sortable extends BaseComponent {
         item.draggable = false
 
         // Run custom event
-        this.emmitEvent('drop', { items: this.items, current: item })
+        this.emmitEvent('drop', { items: this._items, current: item })
 
     }
 

package/js/tests/sortable.test.js

@@ -29,9 +29,9 @@ beforeAll(() => {
 
     document.body.innerHTML =
         '<ul id="fakeList">' +
-        '<li id="first" draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>One</li>' +
-        '<li draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>Two</li>' +
-        '<li draggable="false"><button data-go="up">UP</button><button data-go="down">Down</button>Three</li>' +
+        '<li id="first" draggable="false">One</li>' +
+        '<li draggable="false">Two</li>' +
+        '<li draggable="false">Three</li>' +
         '</ul>' +
         '<table id="fakeTable">' +
         '<tr draggable="false"><td data-handle="sortable">DRAG</td><td>One</td></tr>' +
@@ -101,7 +101,7 @@ describe('Drag()', () => {
         expect(eventSpy).not.toHaveBeenCalled()
         fireEvent(fakeListItem, new MouseEvent('mousedown'))
         fireEvent(fakeListItem, new MouseEvent('dragstart'))
-        expect(eventSpy).toHaveBeenCalledWith('drag', { current: fakeListItem, items: fakeListSortable.items })
+        expect(eventSpy).toHaveBeenCalledWith('drag', { current: fakeListItem, items: fakeListSortable._items })
     })
 
 })
@@ -119,7 +119,7 @@ describe('Drop()', () => {
         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 })
+        expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable._items })
     })
 
 })

package/package.json

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