@dodlhuat/basix 1.4.1 → 1.4.3

package/js/tree.js

@@ -22,9 +22,7 @@ class TreeComponent {
     selectedNode;
     options;
     constructor(elementOrSelector, data, options = {}) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`TreeComponent: Element not found for selector "${elementOrSelector}"`);
         }
@@ -32,14 +30,11 @@ class TreeComponent {
         this.data = data;
         this.selectedNode = null;
         this.options = options;
-        this.init();
-    }
-    init() {
         this.render();
     }
     render() {
         this.container.innerHTML = '';
-        this.data.forEach(node => {
+        this.data.forEach((node) => {
             this.renderNode(node, this.container);
         });
     }
@@ -107,7 +102,7 @@ class TreeComponent {
             childrenUl.classList.add('expanded');
             childrenUl.style.height = 'auto';
         }
-        node.children.forEach(child => {
+        node.children.forEach((child) => {
             this.renderNode(child, childrenUl);
         });
         return childrenUl;
@@ -126,13 +121,13 @@ class TreeComponent {
         }
     }
     expandChildren(container) {
-        container.style.height = container.scrollHeight + 'px';
+        container.style.height = `${container.scrollHeight}px`;
         container.addEventListener('transitionend', () => {
             container.style.height = 'auto';
         }, { once: true });
     }
     collapseChildren(container) {
-        container.style.height = container.offsetHeight + 'px';
+        container.style.height = `${container.offsetHeight}px`;
         requestAnimationFrame(() => {
             container.style.height = '0';
         });
@@ -172,7 +167,7 @@ class TreeComponent {
         });
     }
     traverseNodes(nodes, callback) {
-        nodes.forEach(node => {
+        nodes.forEach((node) => {
             callback(node);
             if (node.children.length > 0) {
                 this.traverseNodes(node.children, callback);

package/js/utils.js

@@ -9,10 +9,10 @@ const utils = {
     },
     value(element) {
         if (element.hasAttribute('value')) {
-            return element.getAttribute('value') || '';
+            return element.getAttribute('value');
         }
         if (element.hasAttribute('data-value')) {
-            return element.getAttribute('data-value') || '';
+            return element.getAttribute('data-value');
         }
         return element.innerText;
     },
@@ -26,11 +26,11 @@ const utils = {
         return undefined;
     },
     isList(element) {
-        return NodeList.prototype.isPrototypeOf(element);
+        return element instanceof NodeList;
     },
     isHidden(element) {
         return element.offsetParent === null;
-    }
+    },
 };
 function escapeHtml(text) {
     const div = document.createElement('div');
@@ -40,11 +40,10 @@ function escapeHtml(text) {
 function sanitizeHtml(html) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
-    doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
-    doc.querySelectorAll('*').forEach(el => {
+    doc.querySelectorAll('script, style, iframe, object, embed').forEach((el) => el.remove());
+    doc.querySelectorAll('*').forEach((el) => {
         for (const attr of Array.from(el.attributes)) {
-            if (attr.name.startsWith('on') ||
-                attr.value.trim().toLowerCase().startsWith('javascript:')) {
+            if (attr.name.startsWith('on') || attr.value.trim().toLowerCase().startsWith('javascript:')) {
                 el.removeAttribute(attr.name);
             }
         }

package/js/virtual-dropdown.d.ts

@@ -34,7 +34,7 @@ declare class VirtualDropdown {
     private filteredOptions;
     private isOpen;
     private scrollTop;
-    private abortController;
+    private listeners;
     constructor(config: VirtualDropdownConfig);
     private init;
     private renderBase;

package/js/virtual-dropdown.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class VirtualDropdown {
     container;
     options;
@@ -21,11 +22,9 @@ class VirtualDropdown {
     filteredOptions;
     isOpen;
     scrollTop;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(config) {
-        const containerElement = typeof config.container === 'string'
-            ? document.querySelector(config.container)
-            : config.container;
+        const containerElement = typeof config.container === 'string' ? document.querySelector(config.container) : config.container;
         if (!containerElement) {
             throw new Error('Container element not found');
         }
@@ -34,8 +33,8 @@ class VirtualDropdown {
         this.multiSelect = config.multiSelect ?? false;
         this.searchable = config.searchable ?? false;
         this.placeholder = config.placeholder || 'Select...';
-        this.renderLimit = config.renderLimit || 20;
-        this.itemHeight = config.itemHeight || 40;
+        this.renderLimit = config.renderLimit ?? 20;
+        this.itemHeight = config.itemHeight ?? 40;
         this.onSelect = config.onSelect ?? null;
         this.anchorName = `--vd-${Math.random().toString(36).slice(2, 9)}`;
         this.selectedValues = new Set();
@@ -87,7 +86,7 @@ class VirtualDropdown {
         return element;
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.trigger.addEventListener('click', () => this.toggle(), sig);
         this.trigger.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
@@ -122,7 +121,12 @@ class VirtualDropdown {
         }, sig);
     }
     toggle() {
-        this.isOpen ? this.close() : this.open();
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     }
     open() {
         this.isOpen = true;
@@ -146,7 +150,7 @@ class VirtualDropdown {
         }
         else {
             const lowerQuery = query.toLowerCase();
-            this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lowerQuery));
+            this.filteredOptions = this.options.filter((opt) => opt.label.toLowerCase().includes(lowerQuery));
         }
         this.listWrapper.scrollTop = 0;
         this.scrollTop = 0;
@@ -180,29 +184,25 @@ class VirtualDropdown {
         `;
         })
             .join('');
-        this.content.querySelectorAll('.dropdown-item').forEach(item => {
-            const handleItemClick = (e) => {
+        this.content.querySelectorAll('.dropdown-item').forEach((item) => {
+            item.addEventListener('click', (e) => {
                 e.stopPropagation();
                 const value = item.dataset.value;
-                if (value) {
+                if (value)
                     this.handleSelect(value);
-                }
-            };
-            const handleItemKeydown = (e) => {
+            });
+            item.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     const value = item.dataset.value;
-                    if (value) {
+                    if (value)
                         this.handleSelect(value);
-                    }
                 }
-            };
-            item.addEventListener('click', handleItemClick);
-            item.addEventListener('keydown', handleItemKeydown);
+            });
         });
     }
     handleSelect(valueString) {
-        const selectedOpt = this.filteredOptions.find(o => String(o.value) === valueString);
+        const selectedOpt = this.filteredOptions.find((o) => String(o.value) === valueString);
         if (!selectedOpt)
             return;
         const val = selectedOpt.value;
@@ -221,9 +221,7 @@ class VirtualDropdown {
             this.close();
         }
         this.updateTrigger();
-        if (this.onSelect) {
-            this.onSelect(Array.from(this.selectedValues));
-        }
+        this.onSelect?.(Array.from(this.selectedValues));
     }
     updateTrigger() {
         if (this.selectedValues.size === 0) {
@@ -238,7 +236,7 @@ class VirtualDropdown {
             }
             else {
                 const val = Array.from(this.selectedValues)[0];
-                const opt = this.options.find(o => o.value === val);
+                const opt = this.options.find((o) => o.value === val);
                 this.triggerText.textContent = opt ? opt.label : String(val);
             }
         }
@@ -248,8 +246,8 @@ class VirtualDropdown {
     }
     setValue(values) {
         this.selectedValues.clear();
-        values.forEach(val => {
-            if (this.options.some(opt => opt.value === val)) {
+        values.forEach((val) => {
+            if (this.options.some((opt) => opt.value === val)) {
                 this.selectedValues.add(val);
             }
         });
@@ -268,7 +266,7 @@ class VirtualDropdown {
     destroy() {
         if (this.isOpen)
             this.menu.hidePopover();
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
         this.container.classList.remove('custom-dropdown', 'open');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",