@dodlhuat/basix 1.3.4 → 1.4.0

package/js/table.js

@@ -1,5 +1,4 @@
-import { Select } from "./select.js";
-/** Dynamic data table with sorting, filtering, and pagination. */
+import { Select } from './select.js';
 class Table {
     container;
     data;
@@ -21,9 +20,9 @@ class Table {
             throw new Error(`Table: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        this.data = options.data || [];
-        this.columns = options.columns || [];
-        this.pageSize = options.pageSize || 10;
+        this.data = options.data ?? [];
+        this.columns = options.columns ?? [];
+        this.pageSize = options.pageSize ?? 10;
         this.currentPage = 1;
         this.sortColumn = null;
         this.sortDirection = 'asc';
@@ -33,9 +32,6 @@ class Table {
         }
         this.init();
     }
-    /**
-     * Parses an existing HTML table in the DOM to extract data and columns
-     */
     parseTableFromDOM() {
         const table = this.container.querySelector('table');
         if (!table)
@@ -63,17 +59,11 @@ class Table {
         });
         this.container.innerHTML = '';
     }
-    /**
-     * Initializes the table by rendering controls, structure, and content
-     */
     init() {
         this.renderControls();
         this.renderTableStructure();
         this.render();
     }
-    /**
-     * Renders the search and page size controls
-     */
     renderControls() {
         const controlsDiv = document.createElement('div');
         controlsDiv.className = 'table-controls';
@@ -108,9 +98,6 @@ class Table {
         this.container.appendChild(controlsDiv);
         new Select('#' + pageSizeSelect.id);
     }
-    /**
-     * Creates the table structure (table, thead, tbody, pagination container)
-     */
     renderTableStructure() {
         const wrapper = document.createElement('div');
         wrapper.className = 'table-wrapper';
@@ -140,9 +127,6 @@ class Table {
         this.tableHeader = thead;
         this.paginationContainer = paginationDiv;
     }
-    /**
-     * Returns filtered and sorted data based on current state
-     */
     getFilteredAndSortedData() {
         let processedData = [...this.data];
         if (this.filterText) {
@@ -173,9 +157,6 @@ class Table {
         }
         return processedData;
     }
-    /**
-     * Renders the table body, pagination, and header sort indicators
-     */
     render() {
         const processedData = this.getFilteredAndSortedData();
         const totalItems = processedData.length;
@@ -193,9 +174,6 @@ class Table {
         this.renderPagination(totalItems, totalPages, startIndex, endIndex);
         this.updateHeaderSortIcons();
     }
-    /**
-     * Renders the table body rows
-     */
     renderBody(data) {
         this.tableBody.innerHTML = '';
         if (data.length === 0) {
@@ -219,9 +197,6 @@ class Table {
             this.tableBody.appendChild(tr);
         });
     }
-    /**
-     * Updates the sort direction indicators in table headers
-     */
     updateHeaderSortIcons() {
         const ths = this.tableHeader.querySelectorAll('th');
         ths.forEach(th => {
@@ -231,9 +206,6 @@ class Table {
             }
         });
     }
-    /**
-     * Renders pagination controls and info
-     */
     renderPagination(totalItems, totalPages, startIndex, endIndex) {
         this.paginationContainer.innerHTML = '';
         if (totalItems === 0)
@@ -270,17 +242,11 @@ class Table {
         buttonsDiv.appendChild(nextBtn);
         this.paginationContainer.appendChild(buttonsDiv);
     }
-    /**
-     * Handles search input changes
-     */
     handleSearch(text) {
         this.filterText = text;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Handles column header clicks for sorting
-     */
     handleSort(key) {
         if (this.sortColumn === key) {
             this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
@@ -291,24 +257,15 @@ class Table {
         }
         this.render();
     }
-    /**
-     * Handles page size changes
-     */
     handlePageSizeChange(size) {
         this.pageSize = size;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Sets the current page and re-renders
-     */
     setPage(page) {
         this.currentPage = page;
         this.render();
     }
-    /**
-     * Assigns a unique ID to an element, incrementing if necessary
-     */
     assignUniqueId(element, baseId) {
         if (!element || !baseId)
             return null;
@@ -327,25 +284,16 @@ class Table {
         element.id = uniqueId;
         return uniqueId;
     }
-    /**
-     * Public API: Updates the table data and re-renders
-     */
     setData(data) {
         this.data = data;
         this.currentPage = 1;
         this.render();
     }
-    /**
-     * Public API: Updates the columns and re-renders
-     */
     setColumns(columns) {
         this.columns = columns;
         this.container.innerHTML = '';
         this.init();
     }
-    /**
-     * Public API: Gets the current filtered and sorted data
-     */
     getData() {
         return this.getFilteredAndSortedData();
     }

package/js/tabs.d.ts

@@ -1,59 +1,28 @@
 type TabLayout = 'horizontal' | 'vertical';
 type MenuPosition = 'top' | 'bottom' | 'left' | 'right';
-/** Configuration options for a Tabs instance. */
 interface TabsOptions {
     layout?: TabLayout;
     defaultTab?: number;
     menuPos?: MenuPosition;
     onChange?: (index: number) => void;
 }
-/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 declare class Tabs {
     private container;
     private options;
     private tabItems;
     private tabPanels;
     private currentTab;
+    private abortController;
     constructor(elementOrSelector: string | HTMLElement, options?: TabsOptions);
-    /**
-     * Initializes the tabs component
-     */
     private init;
-    /**
-     * Binds click events to tab items
-     */
     private bindEvents;
-    /**
-     * Handles keyboard navigation (Arrow keys, Home, End)
-     */
     private handleKeyboardNavigation;
-    /**
-     * Activates a tab by index
-     */
     private activateTab;
-    /**
-     * Public API: Programmatically activate a tab
-     */
     goToTab(index: number): void;
-    /**
-     * Public API: Get the currently active tab index
-     */
     getCurrentTab(): number;
-    /**
-     * Public API: Get the total number of tabs
-     */
     getTabCount(): number;
-    /**
-     * Public API: Enable a tab
-     */
     enableTab(index: number): void;
-    /**
-     * Public API: Disable a tab
-     */
     disableTab(index: number): void;
-    /**
-     * Public API: Destroy the tabs instance and clean up
-     */
     destroy(): void;
 }
 export { Tabs };

package/js/tabs.js

@@ -1,10 +1,10 @@
-/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 class Tabs {
     container;
     options;
     tabItems;
     tabPanels;
     currentTab;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -13,11 +13,11 @@ class Tabs {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        const layout = options.layout || 'horizontal';
+        const layout = options.layout ?? 'horizontal';
         this.options = {
             layout,
             defaultTab: options.defaultTab ?? 0,
-            menuPos: options.menuPos || (layout === 'vertical' ? 'left' : 'top'),
+            menuPos: options.menuPos ?? (layout === 'vertical' ? 'left' : 'top'),
             onChange: options.onChange
         };
         this.currentTab = this.options.defaultTab;
@@ -25,9 +25,6 @@ class Tabs {
         this.tabPanels = this.container.querySelectorAll('.tab-panel');
         this.init();
     }
-    /**
-     * Initializes the tabs component
-     */
     init() {
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
@@ -48,19 +45,17 @@ class Tabs {
         this.bindEvents();
         this.activateTab(this.options.defaultTab);
     }
-    /**
-     * Binds click events to tab items
-     */
     bindEvents() {
+        const sig = { signal: this.abortController.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.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
@@ -70,9 +65,6 @@ class Tabs {
             panel.setAttribute('aria-hidden', index === this.options.defaultTab ? 'false' : 'true');
         });
     }
-    /**
-     * Handles keyboard navigation (Arrow keys, Home, End)
-     */
     handleKeyboardNavigation(e, currentIndex) {
         let newIndex = currentIndex;
         const isVertical = this.options.layout === 'vertical';
@@ -117,9 +109,6 @@ class Tabs {
             this.tabItems[newIndex].focus();
         }
     }
-    /**
-     * Activates a tab by index
-     */
     activateTab(index) {
         if (index < 0 || index >= this.tabItems.length) {
             console.warn(`Invalid tab index: ${index}`);
@@ -145,30 +134,18 @@ class Tabs {
             this.options.onChange(index);
         }
     }
-    /**
-     * Public API: Programmatically activate a tab
-     */
     goToTab(index) {
         this.activateTab(index);
         if (this.tabItems[index]) {
             this.tabItems[index].focus();
         }
     }
-    /**
-     * Public API: Get the currently active tab index
-     */
     getCurrentTab() {
         return this.currentTab;
     }
-    /**
-     * Public API: Get the total number of tabs
-     */
     getTabCount() {
         return this.tabItems.length;
     }
-    /**
-     * Public API: Enable a tab
-     */
     enableTab(index) {
         if (index < 0 || index >= this.tabItems.length)
             return;
@@ -177,9 +154,6 @@ class Tabs {
         tab.removeAttribute('aria-disabled');
         tab.style.pointerEvents = '';
     }
-    /**
-     * Public API: Disable a tab
-     */
     disableTab(index) {
         if (index < 0 || index >= this.tabItems.length)
             return;
@@ -194,14 +168,8 @@ class Tabs {
             }
         }
     }
-    /**
-     * Public API: Destroy the tabs instance and clean up
-     */
     destroy() {
-        this.tabItems.forEach((item) => {
-            const newItem = item.cloneNode(true);
-            item.parentNode?.replaceChild(newItem, item);
-        });
+        this.abortController.abort();
         this.container.classList.remove('tabs-vertical');
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');

package/js/theme.d.ts

@@ -1,66 +1,22 @@
 type ThemeMode = 'light' | 'dark';
-/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 declare class Theme {
     private static readonly STORAGE_KEY;
     private static root;
     private static elements;
     private static mediaQuery;
-    /**
-     * Initializes the theme system with toggle functionality and system preference detection
-     */
     static init(): void;
-    /**
-     * Safely retrieves the saved theme from localStorage
-     */
     private static getSavedTheme;
-    /**
-     * Safely saves the theme to localStorage
-     */
     private static saveTheme;
-    /**
-     * Gets the system-preferred theme
-     */
     private static getSystemTheme;
-    /**
-     * Gets the current active theme
-     */
     private static getCurrentTheme;
-    /**
-     * Applies a theme to the document
-     */
     private static applyTheme;
-    /**
-     * Toggles between light and dark theme
-     */
     private static toggleTheme;
-    /**
-     * Binds click event to toggle button
-     */
     private static bindToggleClick;
-    /**
-     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
-     */
     private static bindKeyboardShortcut;
-    /**
-     * Binds listener for system theme changes
-     * Only applies if user hasn't explicitly saved a preference
-     */
     private static bindSystemThemeChange;
-    /**
-     * Public API: Get the current theme
-     */
     static getTheme(): ThemeMode;
-    /**
-     * Public API: Set the theme programmatically
-     */
     static setTheme(theme: ThemeMode): void;
-    /**
-     * Public API: Reset to system preference
-     */
     static resetToSystem(): void;
-    /**
-     * Public API: Check if user has a saved preference
-     */
     static hasSavedPreference(): boolean;
 }
 export { Theme };

package/js/theme.js

@@ -1,12 +1,8 @@
-/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 class Theme {
     static STORAGE_KEY = 'theme';
     static root;
     static elements = null;
     static mediaQuery = null;
-    /**
-     * Initializes the theme system with toggle functionality and system preference detection
-     */
     static init() {
         this.root = document.documentElement;
         const toggleBtn = document.getElementById('theme-toggle');
@@ -31,9 +27,6 @@ class Theme {
         this.bindKeyboardShortcut();
         this.bindSystemThemeChange();
     }
-    /**
-     * Safely retrieves the saved theme from localStorage
-     */
     static getSavedTheme() {
         try {
             const saved = localStorage.getItem(this.STORAGE_KEY);
@@ -44,9 +37,6 @@ class Theme {
             return null;
         }
     }
-    /**
-     * Safely saves the theme to localStorage
-     */
     static saveTheme(theme) {
         try {
             localStorage.setItem(this.STORAGE_KEY, theme);
@@ -55,22 +45,13 @@ class Theme {
             console.warn('localStorage.setItem failed', e);
         }
     }
-    /**
-     * Gets the system-preferred theme
-     */
     static getSystemTheme() {
         return this.mediaQuery?.matches ? 'dark' : 'light';
     }
-    /**
-     * Gets the current active theme
-     */
     static getCurrentTheme() {
         const current = this.root.getAttribute('data-theme');
         return current === 'dark' ? 'dark' : 'light';
     }
-    /**
-     * Applies a theme to the document
-     */
     static applyTheme(theme) {
         if (!this.elements)
             return;
@@ -99,9 +80,6 @@ class Theme {
             }
         }
     }
-    /**
-     * Toggles between light and dark theme
-     */
     static toggleTheme() {
         if (!this.elements)
             return;
@@ -118,9 +96,6 @@ class Theme {
             }
         }
     }
-    /**
-     * Binds click event to toggle button
-     */
     static bindToggleClick() {
         if (!this.elements)
             return;
@@ -128,9 +103,6 @@ class Theme {
             this.toggleTheme();
         });
     }
-    /**
-     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
-     */
     static bindKeyboardShortcut() {
         window.addEventListener('keydown', (ev) => {
             const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
@@ -141,10 +113,6 @@ class Theme {
             }
         });
     }
-    /**
-     * Binds listener for system theme changes
-     * Only applies if user hasn't explicitly saved a preference
-     */
     static bindSystemThemeChange() {
         if (!this.mediaQuery)
             return;
@@ -161,22 +129,13 @@ class Theme {
             this.mediaQuery.addListener(handler);
         }
     }
-    /**
-     * Public API: Get the current theme
-     */
     static getTheme() {
         return this.getCurrentTheme();
     }
-    /**
-     * Public API: Set the theme programmatically
-     */
     static setTheme(theme) {
         this.saveTheme(theme);
         this.applyTheme(theme);
     }
-    /**
-     * Public API: Reset to system preference
-     */
     static resetToSystem() {
         try {
             localStorage.removeItem(this.STORAGE_KEY);
@@ -187,9 +146,6 @@ class Theme {
             console.warn('Failed to reset theme', e);
         }
     }
-    /**
-     * Public API: Check if user has a saved preference
-     */
     static hasSavedPreference() {
         return this.getSavedTheme() !== null;
     }

package/js/timepicker.d.ts

@@ -1,17 +1,14 @@
-/** A start/end time pair as HH:MM strings. */
 interface TimeSpan {
     start: string;
     end: string;
 }
-/** Configuration options for a TimeSpanPicker instance. */
 interface TimeSpanPickerOptions {
     onChange?: (start: string, end: string) => void;
     defaultStart?: string;
     defaultEnd?: string;
     fromString?: string;
-    toString?: string;
+    toLabel?: string;
 }
-/** Interactive time-range picker with a draggable bar and dual time inputs. */
 declare class TimeSpanPicker {
     private container;
     private startTimeInput;

package/js/timepicker.js

@@ -1,4 +1,3 @@
-/** Interactive time-range picker with a draggable bar and dual time inputs. */
 class TimeSpanPicker {
     container;
     startTimeInput;
@@ -27,7 +26,7 @@ class TimeSpanPicker {
         this.onChange = options?.onChange;
         this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.fromString = options?.fromString ?? 'From';
-        this.toLabel = options?.toString ?? 'To';
+        this.toLabel = options?.toLabel ?? 'To';
         this.render();
         this.startTimeInput = this.queryEl('.timespan-start');
         this.endTimeInput = this.queryEl('.timespan-end');

package/js/toast.d.ts

@@ -1,12 +1,10 @@
 type ToastType = 'success' | 'error' | 'warning' | 'info';
-/** Options for creating a Toast notification. */
 interface ToastOptions {
     content: string;
     header?: string;
     type?: ToastType;
     closeable?: boolean;
 }
-/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 declare class Toast {
     private readonly content;
     private readonly header;

package/js/toast.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 class Toast {
     content;
     header;

package/js/tooltip.d.ts

@@ -1,14 +1,10 @@
-/** Configuration options for a Tooltip instance. */
 interface TooltipOptions {
     position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
     offset?: number;
     delay?: number;
     className?: string;
-    /** Set to true when content is trusted HTML (e.g. from data-tooltip-id).
-     *  Defaults to false — content is treated as plain text and escaped. */
     isHtml?: boolean;
 }
-/** Lightweight tooltip that positions itself relative to a trigger element. */
 declare class Tooltip {
     private static activeTooltip;
     private static idCounter;

package/js/tooltip.js

@@ -1,5 +1,4 @@
 import { computePosition } from './position.js';
-/** Lightweight tooltip that positions itself relative to a trigger element. */
 class Tooltip {
     static activeTooltip = null;
     static idCounter = 0;

package/js/tree.d.ts

@@ -1,9 +1,7 @@
 type NodeType = 'file' | 'folder';
-/** Configuration options for a TreeComponent instance. */
 interface TreeOptions {
     onSelect?: (node: TreeNode) => void;
 }
-/** Represents a single node in a tree structure, either a file or folder. */
 declare class TreeNode {
     label: string;
     type: NodeType;
@@ -14,7 +12,6 @@ declare class TreeNode {
     childrenContainer: HTMLUListElement | null;
     constructor(label: string, type?: NodeType, children?: TreeNode[]);
 }
-/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 declare class TreeComponent {
     private container;
     private data;

package/js/tree.js

@@ -1,4 +1,3 @@
-/** Represents a single node in a tree structure, either a file or folder. */
 class TreeNode {
     label;
     type;
@@ -17,7 +16,6 @@ class TreeNode {
         this.childrenContainer = null;
     }
 }
-/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 class TreeComponent {
     container;
     data;
@@ -81,18 +79,18 @@ class TreeComponent {
         iconDiv.className = 'tree-icon';
         if (type === 'folder') {
             iconDiv.innerHTML = `
-        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
+                <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
         }
         else {
             iconDiv.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
         }
         return iconDiv;
     }