@dodlhuat/basix 1.3.1 → 1.3.3

package/js/table.js

@@ -1,7 +1,19 @@
 import { Select } from "./select.js";
+/** Dynamic data table with sorting, filtering, and pagination. */
 class Table {
+    container;
+    data;
+    columns;
+    pageSize;
+    currentPage;
+    sortColumn;
+    sortDirection;
+    filterText;
+    tableBody;
+    tableHeader;
+    paginationContainer;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -32,14 +44,12 @@ class Table {
         const tbody = table.querySelector('tbody');
         if (!thead || !tbody)
             return;
-        // Parse columns from header
         const ths = thead.querySelectorAll('th');
         this.columns = Array.from(ths).map((th, index) => ({
             key: `col${index}`,
             label: th.textContent?.trim() || '',
             sortable: true
         }));
-        // Parse data from body rows
         const trs = tbody.querySelectorAll('tr');
         this.data = Array.from(trs).map(tr => {
             const row = {};
@@ -51,7 +61,6 @@ class Table {
             });
             return row;
         });
-        // Clear the existing static table
         this.container.innerHTML = '';
     }
     /**
@@ -68,7 +77,6 @@ class Table {
     renderControls() {
         const controlsDiv = document.createElement('div');
         controlsDiv.className = 'table-controls';
-        // Search input
         const searchInput = document.createElement('input');
         searchInput.type = 'text';
         searchInput.placeholder = 'Search...';
@@ -77,7 +85,6 @@ class Table {
             this.handleSearch(e.target.value);
         }, { signal: this.abortController.signal });
         controlsDiv.appendChild(searchInput);
-        // Page size selector
         const selectGroup = document.createElement('div');
         selectGroup.className = 'select-group';
         const label = document.createElement('label');
@@ -110,7 +117,6 @@ class Table {
         const table = document.createElement('table');
         const thead = document.createElement('thead');
         const tbody = document.createElement('tbody');
-        // Create header row
         const tr = document.createElement('tr');
         this.columns.forEach(col => {
             const th = document.createElement('th');
@@ -127,7 +133,6 @@ class Table {
         table.appendChild(tbody);
         wrapper.appendChild(table);
         this.container.appendChild(wrapper);
-        // Create pagination container
         const paginationDiv = document.createElement('div');
         paginationDiv.className = 'pagination';
         this.container.appendChild(paginationDiv);
@@ -140,7 +145,6 @@ class Table {
      */
     getFilteredAndSortedData() {
         let processedData = [...this.data];
-        // Apply filter
         if (this.filterText) {
             const lowerFilter = this.filterText.toLowerCase();
             processedData = processedData.filter(row => {
@@ -150,12 +154,10 @@ class Table {
                 });
             });
         }
-        // Apply sort
         if (this.sortColumn) {
             processedData.sort((a, b) => {
                 const valA = a[this.sortColumn];
                 const valB = b[this.sortColumn];
-                // Handle null/undefined values
                 if (valA == null && valB == null)
                     return 0;
                 if (valA == null)
@@ -178,7 +180,6 @@ class Table {
         const processedData = this.getFilteredAndSortedData();
         const totalItems = processedData.length;
         const totalPages = Math.ceil(totalItems / this.pageSize);
-        // Ensure current page is valid
         if (this.currentPage > totalPages && totalPages > 0) {
             this.currentPage = totalPages;
         }
@@ -212,7 +213,7 @@ class Table {
             this.columns.forEach(col => {
                 const td = document.createElement('td');
                 td.textContent = String(row[col.key] ?? '');
-                td.setAttribute('data-label', col.label); // For mobile view
+                td.setAttribute('data-label', col.label);
                 tr.appendChild(td);
             });
             this.tableBody.appendChild(tr);
@@ -237,28 +238,23 @@ class Table {
         this.paginationContainer.innerHTML = '';
         if (totalItems === 0)
             return;
-        // Info text
         const info = document.createElement('div');
         info.className = 'pagination-info';
         info.textContent = `Showing ${startIndex + 1} to ${endIndex} of ${totalItems} entries`;
         this.paginationContainer.appendChild(info);
-        // Pagination buttons
         const buttonsDiv = document.createElement('div');
         buttonsDiv.className = 'pagination-buttons';
-        // Previous button
         const prevBtn = document.createElement('button');
         prevBtn.className = 'page-btn';
         prevBtn.textContent = 'Previous';
         prevBtn.disabled = this.currentPage === 1;
         prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1));
         buttonsDiv.appendChild(prevBtn);
-        // Calculate page range to display (max 5 pages)
         let startPage = Math.max(1, this.currentPage - 2);
         let endPage = Math.min(totalPages, startPage + 4);
         if (endPage - startPage < 4) {
             startPage = Math.max(1, endPage - 4);
         }
-        // Page number buttons
         for (let i = startPage; i <= endPage; i++) {
             const btn = document.createElement('button');
             btn.className = `page-btn ${i === this.currentPage ? 'active' : ''}`;
@@ -266,7 +262,6 @@ class Table {
             btn.addEventListener('click', () => this.setPage(i));
             buttonsDiv.appendChild(btn);
         }
-        // Next button
         const nextBtn = document.createElement('button');
         nextBtn.className = 'page-btn';
         nextBtn.textContent = 'Next';
@@ -280,7 +275,7 @@ class Table {
      */
     handleSearch(text) {
         this.filterText = text;
-        this.currentPage = 1; // Reset to first page on search
+        this.currentPage = 1;
         this.render();
     }
     /**
@@ -288,7 +283,6 @@ class Table {
      */
     handleSort(key) {
         if (this.sortColumn === key) {
-            // Toggle sort direction
             this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
         }
         else {
@@ -320,7 +314,6 @@ class Table {
             return null;
         let id = baseId;
         let counter = 1;
-        // If baseId already ends with a number, extract it
         const match = baseId.match(/^(.*?)(\d+)$/);
         if (match) {
             id = match[1];

package/js/tabs.d.ts

@@ -1,11 +1,13 @@
 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;

package/js/tabs.js

@@ -1,4 +1,10 @@
+/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 class Tabs {
+    container;
+    options;
+    tabItems;
+    tabPanels;
+    currentTab;
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -7,7 +13,6 @@ class Tabs {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        // Set default options
         const layout = options.layout || 'horizontal';
         this.options = {
             layout,
@@ -24,13 +29,11 @@ class Tabs {
      * Initializes the tabs component
      */
     init() {
-        // Apply layout class
         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');
-        // Validate that we have tabs and panels
         if (this.tabItems.length === 0) {
             console.warn('No tab items found in container');
             return;
@@ -54,17 +57,14 @@ class Tabs {
                 e.preventDefault();
                 this.activateTab(index);
             });
-            // Add keyboard navigation for accessibility
             item.addEventListener('keydown', (e) => {
                 const keyEvent = e;
                 this.handleKeyboardNavigation(keyEvent, index);
             });
-            // Set ARIA attributes
             item.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
         });
-        // Set ARIA attributes for panels
         this.tabPanels.forEach((panel, index) => {
             panel.setAttribute('role', 'tabpanel');
             panel.setAttribute('aria-hidden', index === this.options.defaultTab ? 'false' : 'true');
@@ -125,7 +125,6 @@ class Tabs {
             console.warn(`Invalid tab index: ${index}`);
             return;
         }
-        // Remove active class from all
         this.tabItems.forEach((item, i) => {
             item.classList.remove('active');
             item.setAttribute('tabindex', '-1');
@@ -135,7 +134,6 @@ class Tabs {
             panel.classList.remove('active');
             panel.setAttribute('aria-hidden', 'true');
         });
-        // Add active class to selected
         this.tabItems[index].classList.add('active');
         this.tabItems[index].setAttribute('tabindex', '0');
         this.tabItems[index].setAttribute('aria-selected', 'true');
@@ -143,7 +141,6 @@ class Tabs {
         this.tabPanels[index].setAttribute('aria-hidden', 'false');
         const previousTab = this.currentTab;
         this.currentTab = index;
-        // Call onChange callback if provided
         if (this.options.onChange && previousTab !== index) {
             this.options.onChange(index);
         }
@@ -153,7 +150,6 @@ class Tabs {
      */
     goToTab(index) {
         this.activateTab(index);
-        // Focus the tab for keyboard users
         if (this.tabItems[index]) {
             this.tabItems[index].focus();
         }
@@ -191,7 +187,6 @@ class Tabs {
         tab.classList.add('disabled');
         tab.setAttribute('aria-disabled', 'true');
         tab.style.pointerEvents = 'none';
-        // If disabling the current tab, switch to the first enabled tab
         if (index === this.currentTab) {
             const firstEnabled = Array.from(this.tabItems).findIndex((item) => !item.classList.contains('disabled'));
             if (firstEnabled !== -1) {
@@ -203,14 +198,11 @@ class Tabs {
      * Public API: Destroy the tabs instance and clean up
      */
     destroy() {
-        // Remove event listeners by cloning and replacing nodes
         this.tabItems.forEach((item) => {
             const newItem = item.cloneNode(true);
             item.parentNode?.replaceChild(newItem, item);
         });
-        // Remove classes
         this.container.classList.remove('tabs-vertical');
-        // Remove ARIA attributes
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');
             item.removeAttribute('tabindex');

package/js/theme.d.ts

@@ -1,4 +1,5 @@
 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;

package/js/theme.js

@@ -1,14 +1,17 @@
+/** 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;
-        // Get DOM elements
         const toggleBtn = document.getElementById('theme-toggle');
         const icon = document.getElementById('theme-icon');
         const status = document.getElementById('status');
-        // Validate required elements
         if (!toggleBtn || !icon) {
             console.error('Theme toggle: missing DOM elements', { toggleBtn, icon });
             if (status) {
@@ -17,16 +20,13 @@ class Theme {
             return;
         }
         this.elements = { toggleBtn, icon, status };
-        // Initialize media query
         if (window.matchMedia) {
             this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         }
-        // Apply initial theme
         const savedTheme = this.getSavedTheme();
         const systemTheme = this.getSystemTheme();
         const initialTheme = savedTheme || systemTheme;
         this.applyTheme(initialTheme);
-        // Bind event listeners
         this.bindToggleClick();
         this.bindKeyboardShortcut();
         this.bindSystemThemeChange();
@@ -77,10 +77,8 @@ class Theme {
         this.root.setAttribute('data-theme', theme);
         const isDark = theme === 'dark';
         const { toggleBtn, icon } = this.elements;
-        // Update button state
         toggleBtn.setAttribute('aria-pressed', String(isDark));
         toggleBtn.setAttribute('aria-label', `Switch to ${isDark ? 'light' : 'dark'} mode`);
-        // Update icon — SVG sprite via <use> or font icon via class
         const useEl = icon.querySelector('use');
         if (useEl) {
             const iconName = isDark ? icon.dataset.iconDark : icon.dataset.iconLight;
@@ -151,17 +149,14 @@ class Theme {
         if (!this.mediaQuery)
             return;
         const handler = (e) => {
-            // Only apply system theme if user hasn't saved a preference
             if (!this.getSavedTheme()) {
                 const matches = 'matches' in e ? e.matches : e.matches;
                 this.applyTheme(matches ? 'dark' : 'light');
             }
         };
-        // Modern API
         if ('addEventListener' in this.mediaQuery) {
             this.mediaQuery.addEventListener('change', handler);
         }
-        // Legacy API (deprecated but still supported in older browsers)
         else if ('addListener' in this.mediaQuery) {
             this.mediaQuery.addListener(handler);
         }
@@ -199,7 +194,4 @@ class Theme {
         return this.getSavedTheme() !== null;
     }
 }
-Theme.STORAGE_KEY = 'theme';
-Theme.elements = null;
-Theme.mediaQuery = null;
 export { Theme };

package/js/timepicker.d.ts

@@ -1,7 +1,9 @@
+/** 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;
@@ -9,6 +11,7 @@ interface TimeSpanPickerOptions {
     fromString?: string;
     toString?: string;
 }
+/** Interactive time-range picker with a draggable bar and dual time inputs. */
 declare class TimeSpanPicker {
     private container;
     private startTimeInput;
@@ -16,17 +19,31 @@ declare class TimeSpanPicker {
     private onChange?;
     private readonly uid;
     private fromString;
-    private toString;
+    private toLabel;
+    private pickerEl;
+    private durationEl;
+    private barEl;
+    private barFillEl;
+    private startHandleEl;
+    private endHandleEl;
+    private dragState;
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
-    private queryInput;
+    private queryEl;
     private render;
-    private readonly handleStartChange;
-    private readonly handleEndChange;
+    private readonly handleChange;
     private attachEventListeners;
+    private attachBarListeners;
+    private beginDrag;
+    private readonly onStartHandleDown;
+    private readonly onEndHandleDown;
+    private readonly onFillDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
     private toMinutes;
+    private minutesToTime;
+    private snap;
     private formatDuration;
     private updateUI;
-    private handleChange;
     getValue(): TimeSpan;
     setValue(start: string, end: string): void;
     reset(): void;