@dodlhuat/basix 1.4.2 → 1.4.3

package/js/tabs.js

@@ -1,14 +1,13 @@
+import { ListenerGroup } from './listeners.js';
 class Tabs {
     container;
     options;
     tabItems;
     tabPanels;
     currentTab;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
@@ -18,7 +17,7 @@ class Tabs {
             layout,
             defaultTab: options.defaultTab ?? 0,
             menuPos: options.menuPos ?? (layout === 'vertical' ? 'left' : 'top'),
-            onChange: options.onChange
+            onChange: options.onChange,
         };
         this.currentTab = this.options.defaultTab;
         this.tabItems = this.container.querySelectorAll('.tab-item');
@@ -29,8 +28,6 @@ class Tabs {
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
         }
-        this.tabItems = this.container.querySelectorAll('.tab-item');
-        this.tabPanels = this.container.querySelectorAll('.tab-panel');
         if (this.tabItems.length === 0) {
             console.warn('No tab items found in container');
             return;
@@ -46,16 +43,13 @@ class Tabs {
         this.activateTab(this.options.defaultTab);
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.tabItems.forEach((item, index) => {
             item.addEventListener('click', (e) => {
                 e.preventDefault();
                 this.activateTab(index);
             }, sig);
-            item.addEventListener('keydown', (e) => {
-                const keyEvent = e;
-                this.handleKeyboardNavigation(keyEvent, index);
-            }, sig);
+            item.addEventListener('keydown', (e) => this.handleKeyboardNavigation(e, index), sig);
             item.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
@@ -114,7 +108,7 @@ class Tabs {
             console.warn(`Invalid tab index: ${index}`);
             return;
         }
-        this.tabItems.forEach((item, i) => {
+        this.tabItems.forEach((item) => {
             item.classList.remove('active');
             item.setAttribute('tabindex', '-1');
             item.setAttribute('aria-selected', 'false');
@@ -130,9 +124,8 @@ class Tabs {
         this.tabPanels[index].setAttribute('aria-hidden', 'false');
         const previousTab = this.currentTab;
         this.currentTab = index;
-        if (this.options.onChange && previousTab !== index) {
-            this.options.onChange(index);
-        }
+        if (previousTab !== index)
+            this.options.onChange?.(index);
     }
     goToTab(index) {
         this.activateTab(index);
@@ -169,7 +162,7 @@ class Tabs {
         }
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.classList.remove('tabs-vertical');
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');

package/js/theme.d.ts

@@ -1,6 +1,7 @@
 type ThemeMode = 'light' | 'dark';
 declare class Theme {
     private static readonly STORAGE_KEY;
+    private static readonly isMac;
     private static root;
     private static elements;
     private static mediaQuery;

package/js/theme.js

@@ -1,5 +1,6 @@
 class Theme {
     static STORAGE_KEY = 'theme';
+    static isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
     static root;
     static elements = null;
     static mediaQuery = null;
@@ -99,14 +100,11 @@ class Theme {
     static bindToggleClick() {
         if (!this.elements)
             return;
-        this.elements.toggleBtn.addEventListener('click', () => {
-            this.toggleTheme();
-        });
+        this.elements.toggleBtn.addEventListener('click', () => this.toggleTheme());
     }
     static bindKeyboardShortcut() {
         window.addEventListener('keydown', (ev) => {
-            const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
-            const modifierPressed = isMac ? ev.metaKey : ev.ctrlKey;
+            const modifierPressed = Theme.isMac ? ev.metaKey : ev.ctrlKey;
             if (modifierPressed && ev.key.toLowerCase() === 'j') {
                 ev.preventDefault();
                 this.toggleTheme();
@@ -116,18 +114,11 @@ class Theme {
     static bindSystemThemeChange() {
         if (!this.mediaQuery)
             return;
-        const handler = (e) => {
+        this.mediaQuery.addEventListener('change', (e) => {
             if (!this.getSavedTheme()) {
-                const matches = 'matches' in e ? e.matches : e.matches;
-                this.applyTheme(matches ? 'dark' : 'light');
+                this.applyTheme(e.matches ? 'dark' : 'light');
             }
-        };
-        if ('addEventListener' in this.mediaQuery) {
-            this.mediaQuery.addEventListener('change', handler);
-        }
-        else if ('addListener' in this.mediaQuery) {
-            this.mediaQuery.addListener(handler);
-        }
+        });
     }
     static getTheme() {
         return this.getCurrentTheme();

package/js/timepicker.d.ts

@@ -24,18 +24,20 @@ declare class TimeSpanPicker {
     private startHandleEl;
     private endHandleEl;
     private dragState;
+    private listeners;
+    private dragListeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
     private queryEl;
     private render;
-    private readonly handleChange;
+    private handleChange;
     private attachEventListeners;
     private attachBarListeners;
     private beginDrag;
-    private readonly onStartHandleDown;
-    private readonly onEndHandleDown;
-    private readonly onFillDown;
-    private readonly onPointerMove;
-    private readonly onPointerUp;
+    private onStartHandleDown;
+    private onEndHandleDown;
+    private onFillDown;
+    private onPointerMove;
+    private onPointerUp;
     private toMinutes;
     private minutesToTime;
     private snap;

package/js/timepicker.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class TimeSpanPicker {
     container;
     startTimeInput;
@@ -13,11 +14,13 @@ class TimeSpanPicker {
     startHandleEl;
     endHandleEl;
     dragState = null;
+    listeners = new ListenerGroup();
+    dragListeners = null;
     constructor(elementOrSelector, options) {
         const element = typeof elementOrSelector === 'string'
-            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+            ? elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
-                : document.getElementById(elementOrSelector))
+                : document.getElementById(elementOrSelector)
             : elementOrSelector;
         if (!element) {
             throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
@@ -74,17 +77,17 @@ class TimeSpanPicker {
       </div>
     `;
     }
-    handleChange = () => {
+    handleChange() {
         this.updateUI();
         const start = this.startTimeInput.value;
         const end = this.endTimeInput.value;
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
-        }
-    };
+        if (start && end)
+            this.onChange?.(start, end);
+    }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', this.handleChange);
-        this.endTimeInput.addEventListener('change', this.handleChange);
+        const sig = { signal: this.listeners.signal };
+        this.startTimeInput.addEventListener('change', () => this.handleChange(), sig);
+        this.endTimeInput.addEventListener('change', () => this.handleChange(), sig);
     }
     attachBarListeners() {
         this.pickerEl = this.queryEl('.timespan-picker');
@@ -93,9 +96,10 @@ class TimeSpanPicker {
         this.barFillEl = this.queryEl('.timespan-bar-fill');
         this.startHandleEl = this.queryEl('.timespan-handle-start');
         this.endHandleEl = this.queryEl('.timespan-handle-end');
-        this.startHandleEl.addEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.addEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.addEventListener('pointerdown', this.onFillDown);
+        const sig = { signal: this.listeners.signal };
+        this.startHandleEl.addEventListener('pointerdown', (e) => this.onStartHandleDown(e), sig);
+        this.endHandleEl.addEventListener('pointerdown', (e) => this.onEndHandleDown(e), sig);
+        this.barFillEl.addEventListener('pointerdown', (e) => this.onFillDown(e), sig);
     }
     beginDrag(type, clickOffsetMins = 0, rect) {
         const start = this.startTimeInput.value;
@@ -112,20 +116,22 @@ class TimeSpanPicker {
             clickOffsetMins,
         };
         this.barEl.classList.add('is-dragging');
-        document.addEventListener('pointermove', this.onPointerMove);
-        document.addEventListener('pointerup', this.onPointerUp);
+        this.dragListeners = new ListenerGroup();
+        const dragSig = { signal: this.dragListeners.signal };
+        document.addEventListener('pointermove', (e) => this.onPointerMove(e), dragSig);
+        document.addEventListener('pointerup', () => this.onPointerUp(), dragSig);
     }
-    onStartHandleDown = (e) => {
+    onStartHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('start');
-    };
-    onEndHandleDown = (e) => {
+    }
+    onEndHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('end');
-    };
-    onFillDown = (e) => {
+    }
+    onFillDown(e) {
         if (e.target.classList.contains('timespan-handle'))
             return;
         e.preventDefault();
@@ -135,8 +141,8 @@ class TimeSpanPicker {
         const rect = this.barEl.getBoundingClientRect();
         const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
         this.beginDrag('move', clickMins - this.toMinutes(start), rect);
-    };
-    onPointerMove = (e) => {
+    }
+    onPointerMove(e) {
         if (!this.dragState)
             return;
         e.preventDefault();
@@ -162,17 +168,16 @@ class TimeSpanPicker {
             this.endTimeInput.value = end;
         }
         this.updateUI();
-        if (this.onChange)
-            this.onChange(start, end);
-    };
-    onPointerUp = () => {
+        this.onChange?.(start, end);
+    }
+    onPointerUp() {
         if (!this.dragState)
             return;
         this.dragState = null;
         this.barEl.classList.remove('is-dragging');
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
-    };
+        this.dragListeners?.destroy();
+        this.dragListeners = null;
+    }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;
@@ -225,7 +230,7 @@ class TimeSpanPicker {
     getValue() {
         return {
             start: this.startTimeInput.value,
-            end: this.endTimeInput.value
+            end: this.endTimeInput.value,
         };
     }
     setValue(start, end) {
@@ -248,13 +253,8 @@ class TimeSpanPicker {
         return !!(start && end && start < end);
     }
     destroy() {
-        this.startTimeInput.removeEventListener('change', this.handleChange);
-        this.endTimeInput.removeEventListener('change', this.handleChange);
-        this.startHandleEl.removeEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.removeEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.removeEventListener('pointerdown', this.onFillDown);
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
+        this.listeners.destroy();
+        this.dragListeners?.destroy();
     }
 }
 export { TimeSpanPicker };

package/js/toast.d.ts

@@ -14,10 +14,11 @@ declare class Toast {
     private readonly template;
     private toastElement;
     private timerId;
+    private openListeners;
     constructor(options: ToastOptions);
     constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
     show(ms?: number): void;
-    hide: () => void;
+    hide(): void;
     private startTimer;
     destroy(): void;
     private buildTemplate;

package/js/toast.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class Toast {
     content;
     header;
@@ -8,6 +9,7 @@ class Toast {
     template;
     toastElement = null;
     timerId = null;
+    openListeners = null;
     constructor(contentOrOptions, header = '', type, closeable = true) {
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
@@ -37,7 +39,8 @@ class Toast {
                 this.toastElement?.classList.add('show');
                 const closeButton = this.toastElement?.querySelector('.close');
                 if (closeButton) {
-                    closeButton.addEventListener('click', this.hide);
+                    this.openListeners = new ListenerGroup();
+                    closeButton.addEventListener('click', () => this.hide(), { signal: this.openListeners.signal });
                 }
                 if (ms !== undefined && ms > 0) {
                     this.startTimer(ms);
@@ -45,18 +48,19 @@ class Toast {
             });
         });
     }
-    hide = () => {
+    hide() {
         if (this.timerId !== null) {
             clearTimeout(this.timerId);
             this.timerId = null;
         }
         this.toastElement?.classList.remove('show');
+        this.openListeners?.destroy();
+        this.openListeners = null;
         setTimeout(() => {
-            this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
             this.toastElement?.remove();
             this.toastElement = null;
         }, 150);
-    };
+    }
     startTimer(ms, elapsed = 0) {
         const stepSize = 250;
         if (elapsed >= ms) {

package/js/tooltip.d.ts

@@ -14,6 +14,7 @@ declare class Tooltip {
     private tooltipElement;
     private showTimeout;
     private isVisible;
+    private listeners;
     constructor(trigger: HTMLElement, content: string, options?: TooltipOptions);
     static initializeAll(): void;
     show(): void;
@@ -22,10 +23,6 @@ declare class Tooltip {
     private createTooltip;
     private position;
     private attachEvents;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleFocus;
-    private handleBlur;
     destroy(): void;
 }
 export { Tooltip };

package/js/tooltip.js

@@ -1,4 +1,5 @@
 import { computePosition } from './position.js';
+import { ListenerGroup } from './listeners.js';
 class Tooltip {
     static activeTooltip = null;
     static idCounter = 0;
@@ -8,6 +9,7 @@ class Tooltip {
     tooltipElement = null;
     showTimeout = null;
     isVisible = false;
+    listeners = new ListenerGroup();
     constructor(trigger, content, options = {}) {
         this.trigger = trigger;
         this.content = content;
@@ -22,7 +24,7 @@ class Tooltip {
     }
     static initializeAll() {
         const triggers = document.querySelectorAll('[data-tooltip]');
-        triggers.forEach(trigger => {
+        triggers.forEach((trigger) => {
             const content = trigger.getAttribute('data-tooltip');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -31,7 +33,7 @@ class Tooltip {
             }
         });
         const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
-        advancedTriggers.forEach(trigger => {
+        advancedTriggers.forEach((trigger) => {
             const contentId = trigger.getAttribute('data-tooltip-id');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -107,35 +109,24 @@ class Tooltip {
     position() {
         if (!this.tooltipElement)
             return;
-        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), { placement: this.options.position, offset: this.options.offset });
+        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), {
+            placement: this.options.position,
+            offset: this.options.offset,
+        });
         this.tooltipElement.style.left = `${left}px`;
         this.tooltipElement.style.top = `${top}px`;
         this.tooltipElement.setAttribute('data-position', placement);
     }
     attachEvents() {
-        this.trigger.addEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.addEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.addEventListener('focus', this.handleFocus);
-        this.trigger.addEventListener('blur', this.handleBlur);
+        const sig = { signal: this.listeners.signal };
+        this.trigger.addEventListener('mouseenter', () => this.show(), sig);
+        this.trigger.addEventListener('mouseleave', () => this.hide(), sig);
+        this.trigger.addEventListener('focus', () => this.show(), sig);
+        this.trigger.addEventListener('blur', () => this.hide(), sig);
     }
-    handleMouseEnter = () => {
-        this.show();
-    };
-    handleMouseLeave = () => {
-        this.hide();
-    };
-    handleFocus = () => {
-        this.show();
-    };
-    handleBlur = () => {
-        this.hide();
-    };
     destroy() {
         this.hide();
-        this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.removeEventListener('focus', this.handleFocus);
-        this.trigger.removeEventListener('blur', this.handleBlur);
+        this.listeners.destroy();
         const previousDescribedBy = this.trigger.getAttribute('data-previous-describedby');
         if (previousDescribedBy) {
             this.trigger.setAttribute('aria-describedby', previousDescribedBy);

package/js/tree.d.ts

@@ -18,7 +18,6 @@ declare class TreeComponent {
     private selectedNode;
     private readonly options;
     constructor(elementOrSelector: string | HTMLElement, data: TreeNode[], options?: TreeOptions);
-    private init;
     render(): void;
     private renderNode;
     private createIconElement;

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;