@dodlhuat/basix 1.3.1 → 1.3.3

package/js/timepicker.js

@@ -1,7 +1,20 @@
+/** Interactive time-range picker with a draggable bar and dual time inputs. */
 class TimeSpanPicker {
+    container;
+    startTimeInput;
+    endTimeInput;
+    onChange;
+    uid;
+    fromString;
+    toLabel;
+    pickerEl;
+    durationEl;
+    barEl;
+    barFillEl;
+    startHandleEl;
+    endHandleEl;
+    dragState = null;
     constructor(elementOrSelector, options) {
-        this.handleStartChange = () => { this.handleChange(); };
-        this.handleEndChange = () => { this.handleChange(); };
         const element = typeof elementOrSelector === 'string'
             ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
@@ -14,28 +27,25 @@ class TimeSpanPicker {
         this.onChange = options?.onChange;
         this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.fromString = options?.fromString ?? 'From';
-        this.toString = options?.toString ?? 'To';
+        this.toLabel = options?.toString ?? 'To';
         this.render();
-        this.startTimeInput = this.queryInput('.timespan-start');
-        this.endTimeInput = this.queryInput('.timespan-end');
-        if (options?.defaultStart) {
+        this.startTimeInput = this.queryEl('.timespan-start');
+        this.endTimeInput = this.queryEl('.timespan-end');
+        if (options?.defaultStart)
             this.startTimeInput.value = options.defaultStart;
-        }
-        if (options?.defaultEnd) {
+        if (options?.defaultEnd)
             this.endTimeInput.value = options.defaultEnd;
-        }
         this.attachEventListeners();
-        // Render initial state if defaults provided
+        this.attachBarListeners();
         if (options?.defaultStart || options?.defaultEnd) {
             this.updateUI();
         }
     }
-    queryInput(selector) {
-        const input = this.container.querySelector(selector);
-        if (!input) {
-            throw new Error(`Input with selector "${selector}" not found`);
-        }
-        return input;
+    queryEl(selector) {
+        const el = this.container.querySelector(selector);
+        if (!el)
+            throw new Error(`TimeSpanPicker: "${selector}" not found`);
+        return el;
     }
     render() {
         const startId = `${this.uid}-start`;
@@ -53,23 +63,129 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="${endId}">${this.toString}</label>
+          <label for="${endId}">${this.toLabel}</label>
           <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
-        <div class="timespan-bar-fill"></div>
+        <div class="timespan-bar-fill">
+          <div class="timespan-handle timespan-handle-start"></div>
+          <div class="timespan-handle timespan-handle-end"></div>
+        </div>
       </div>
     `;
     }
+    handleChange = () => {
+        this.updateUI();
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+        if (this.onChange && start && end) {
+            this.onChange(start, end);
+        }
+    };
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', this.handleStartChange);
-        this.endTimeInput.addEventListener('change', this.handleEndChange);
+        this.startTimeInput.addEventListener('change', this.handleChange);
+        this.endTimeInput.addEventListener('change', this.handleChange);
     }
+    attachBarListeners() {
+        this.pickerEl = this.queryEl('.timespan-picker');
+        this.durationEl = this.queryEl('.timespan-duration');
+        this.barEl = this.queryEl('.timespan-bar');
+        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);
+    }
+    beginDrag(type, clickOffsetMins = 0, rect) {
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+        if (!start || !end)
+            return;
+        const barRect = rect ?? this.barEl.getBoundingClientRect();
+        this.dragState = {
+            type,
+            barLeft: barRect.left,
+            barWidth: barRect.width,
+            startMins: this.toMinutes(start),
+            endMins: this.toMinutes(end),
+            clickOffsetMins,
+        };
+        this.barEl.classList.add('is-dragging');
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+    onStartHandleDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.beginDrag('start');
+    };
+    onEndHandleDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.beginDrag('end');
+    };
+    onFillDown = (e) => {
+        if (e.target.classList.contains('timespan-handle'))
+            return;
+        e.preventDefault();
+        const start = this.startTimeInput.value;
+        if (!start)
+            return;
+        const rect = this.barEl.getBoundingClientRect();
+        const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
+        this.beginDrag('move', clickMins - this.toMinutes(start), rect);
+    };
+    onPointerMove = (e) => {
+        if (!this.dragState)
+            return;
+        e.preventDefault();
+        const { type, barLeft, barWidth, startMins, endMins, clickOffsetMins } = this.dragState;
+        const pct = Math.max(0, Math.min(1, (e.clientX - barLeft) / barWidth));
+        const rawMins = pct * 1440;
+        let start = this.startTimeInput.value;
+        let end = this.endTimeInput.value;
+        if (type === 'start') {
+            start = this.minutesToTime(Math.max(0, Math.min(endMins - 5, this.snap(rawMins))));
+            this.startTimeInput.value = start;
+        }
+        else if (type === 'end') {
+            end = this.minutesToTime(Math.max(startMins + 5, Math.min(1440, this.snap(rawMins))));
+            this.endTimeInput.value = end;
+        }
+        else {
+            const duration = endMins - startMins;
+            const newStartMins = Math.max(0, Math.min(1440 - duration, this.snap(rawMins - clickOffsetMins)));
+            start = this.minutesToTime(newStartMins);
+            end = this.minutesToTime(newStartMins + duration);
+            this.startTimeInput.value = start;
+            this.endTimeInput.value = end;
+        }
+        this.updateUI();
+        if (this.onChange)
+            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);
+    };
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;
     }
+    minutesToTime(minutes) {
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+    }
+    snap(mins) {
+        return Math.round(mins / 5) * 5;
+    }
     formatDuration(minutes) {
         const h = Math.floor(minutes / 60);
         const m = minutes % 60;
@@ -80,44 +196,31 @@ class TimeSpanPicker {
         return `${m}m`;
     }
     updateUI() {
-        const picker = this.container.querySelector('.timespan-picker');
-        const durationEl = this.container.querySelector('.timespan-duration');
-        const barFill = this.container.querySelector('.timespan-bar-fill');
         const start = this.startTimeInput.value;
         const end = this.endTimeInput.value;
         const isError = !!(start && end && start >= end);
-        picker?.classList.toggle('is-error', isError);
+        this.pickerEl.classList.toggle('is-error', isError);
         if (isError) {
             this.endTimeInput.setCustomValidity('End time must be after start time');
-            if (durationEl)
-                durationEl.textContent = '!';
+            this.durationEl.textContent = '!';
+            this.barFillEl.classList.remove('is-active');
             return;
         }
         this.endTimeInput.setCustomValidity('');
-        if (start && end && durationEl && barFill) {
+        if (start && end) {
             const startMins = this.toMinutes(start);
             const endMins = this.toMinutes(end);
             const duration = endMins - startMins;
-            durationEl.textContent = this.formatDuration(duration);
-            const startPct = ((startMins / 1440) * 100).toFixed(2);
-            const widthPct = ((duration / 1440) * 100).toFixed(2);
-            barFill.style.left = `${startPct}%`;
-            barFill.style.width = `${widthPct}%`;
+            this.durationEl.textContent = this.formatDuration(duration);
+            this.barFillEl.style.left = `${((startMins / 1440) * 100).toFixed(2)}%`;
+            this.barFillEl.style.width = `${((duration / 1440) * 100).toFixed(2)}%`;
+            this.barFillEl.classList.add('is-active');
         }
         else {
-            if (durationEl)
-                durationEl.textContent = '';
-            if (barFill) {
-                barFill.style.left = '0';
-                barFill.style.width = '0';
-            }
-        }
-    }
-    handleChange() {
-        this.updateUI();
-        const { start, end } = this.getValue();
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
+            this.durationEl.textContent = '';
+            this.barFillEl.style.left = '0';
+            this.barFillEl.style.width = '0';
+            this.barFillEl.classList.remove('is-active');
         }
     }
     getValue() {
@@ -135,24 +238,24 @@ class TimeSpanPicker {
         this.startTimeInput.value = '';
         this.endTimeInput.value = '';
         this.endTimeInput.setCustomValidity('');
-        const picker = this.container.querySelector('.timespan-picker');
-        const durationEl = this.container.querySelector('.timespan-duration');
-        const barFill = this.container.querySelector('.timespan-bar-fill');
-        picker?.classList.remove('is-error');
-        if (durationEl)
-            durationEl.textContent = '';
-        if (barFill) {
-            barFill.style.left = '0';
-            barFill.style.width = '0';
-        }
+        this.pickerEl.classList.remove('is-error');
+        this.durationEl.textContent = '';
+        this.barFillEl.style.left = '0';
+        this.barFillEl.style.width = '0';
+        this.barFillEl.classList.remove('is-active');
     }
     isValid() {
         const { start, end } = this.getValue();
         return !!(start && end && start < end);
     }
     destroy() {
-        this.startTimeInput.removeEventListener('change', this.handleStartChange);
-        this.endTimeInput.removeEventListener('change', this.handleEndChange);
+        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);
     }
 }
 export { TimeSpanPicker };

package/js/toast.d.ts

@@ -1,10 +1,12 @@
 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;
@@ -18,8 +20,8 @@ declare class Toast {
     constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
     show(ms?: number): void;
     hide: () => void;
-    private handleClose;
     private startTimer;
+    destroy(): void;
     private buildTemplate;
 }
 export { Toast };

package/js/toast.js

@@ -1,27 +1,15 @@
 import { escapeHtml } from './utils.js';
+/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 class Toast {
+    content;
+    header;
+    type;
+    closeable;
+    closureIcon = '<div class="icon icon-close close"></div>';
+    template;
+    toastElement = null;
+    timerId = null;
     constructor(contentOrOptions, header = '', type, closeable = true) {
-        this.closureIcon = '<div class="icon icon-close close"></div>';
-        this.toastElement = null;
-        this.timerId = null;
-        this.hide = () => {
-            if (this.timerId !== null) {
-                clearTimeout(this.timerId);
-                this.timerId = null;
-            }
-            this.toastElement?.classList.remove('show');
-            setTimeout(() => {
-                const closeButton = this.toastElement?.querySelector('.close');
-                if (closeButton) {
-                    closeButton.removeEventListener('click', this.handleClose);
-                }
-                this.toastElement?.remove();
-                this.toastElement = null;
-            }, 150);
-        };
-        this.handleClose = () => {
-            this.hide();
-        };
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header ?? '';
@@ -50,7 +38,7 @@ class Toast {
                 this.toastElement?.classList.add('show');
                 const closeButton = this.toastElement?.querySelector('.close');
                 if (closeButton) {
-                    closeButton.addEventListener('click', this.handleClose);
+                    closeButton.addEventListener('click', this.hide);
                 }
                 if (ms !== undefined && ms > 0) {
                     this.startTimer(ms);
@@ -58,6 +46,18 @@ class Toast {
             });
         });
     }
+    hide = () => {
+        if (this.timerId !== null) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+        this.toastElement?.classList.remove('show');
+        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) {
@@ -74,6 +74,9 @@ class Toast {
             }
         }, stepSize);
     }
+    destroy() {
+        this.hide();
+    }
     buildTemplate() {
         const parts = ['<div class="bar"></div>'];
         if (this.closeable) {

package/js/tooltip.d.ts

@@ -1,3 +1,4 @@
+/** Configuration options for a Tooltip instance. */
 interface TooltipOptions {
     position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
     offset?: number;
@@ -7,6 +8,7 @@ interface TooltipOptions {
      *  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,22 +1,15 @@
-// tooltip.ts
 import { computePosition } from './position.js';
+/** Lightweight tooltip that positions itself relative to a trigger element. */
 class Tooltip {
+    static activeTooltip = null;
+    static idCounter = 0;
+    trigger;
+    content;
+    options;
+    tooltipElement = null;
+    showTimeout = null;
+    isVisible = false;
     constructor(trigger, content, options = {}) {
-        this.tooltipElement = null;
-        this.showTimeout = null;
-        this.isVisible = false;
-        this.handleMouseEnter = () => {
-            this.show();
-        };
-        this.handleMouseLeave = () => {
-            this.hide();
-        };
-        this.handleFocus = () => {
-            this.show();
-        };
-        this.handleBlur = () => {
-            this.hide();
-        };
         this.trigger = trigger;
         this.content = content;
         this.options = {
@@ -38,7 +31,6 @@ class Tooltip {
                 new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
-        // Also support content from separate elements
         const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
         advancedTriggers.forEach(trigger => {
             const contentId = trigger.getAttribute('data-tooltip-id');
@@ -127,6 +119,18 @@ class Tooltip {
         this.trigger.addEventListener('focus', this.handleFocus);
         this.trigger.addEventListener('blur', this.handleBlur);
     }
+    handleMouseEnter = () => {
+        this.show();
+    };
+    handleMouseLeave = () => {
+        this.hide();
+    };
+    handleFocus = () => {
+        this.show();
+    };
+    handleBlur = () => {
+        this.hide();
+    };
     destroy() {
         this.hide();
         this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
@@ -143,6 +147,4 @@ class Tooltip {
         this.trigger.removeAttribute('data-previous-describedby');
     }
 }
-Tooltip.activeTooltip = null;
-Tooltip.idCounter = 0;
 export { Tooltip };

package/js/tree.d.ts

@@ -1,7 +1,9 @@
 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;
@@ -12,6 +14,7 @@ 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,12 @@
+/** Represents a single node in a tree structure, either a file or folder. */
 class TreeNode {
+    label;
+    type;
+    children;
+    expanded;
+    selected;
+    element;
+    childrenContainer;
     constructor(label, type = 'file', children = []) {
         this.label = label;
         this.type = type;
@@ -9,7 +17,12 @@ class TreeNode {
         this.childrenContainer = null;
     }
 }
+/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 class TreeComponent {
+    container;
+    data;
+    selectedNode;
+    options;
     constructor(elementOrSelector, data, options = {}) {
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)

package/js/utils.d.ts

@@ -1,6 +1,4 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
+/** Shape of the `utils` helper object. */
 interface Utils {
     ready(fn: () => void): void;
     value(element: HTMLElement): string;

package/js/utils.js

@@ -1,6 +1,3 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
 const utils = {
     /**
      * Execute a function when the DOM is ready

package/js/virtual-dropdown.d.ts

@@ -1,7 +1,9 @@
+/** A single selectable option for a VirtualDropdown. */
 interface DropdownOption {
     label: string;
     value: string | number;
 }
+/** Configuration for a VirtualDropdown instance. */
 interface VirtualDropdownConfig {
     container: string | HTMLElement;
     options: DropdownOption[];
@@ -12,6 +14,7 @@ interface VirtualDropdownConfig {
     itemHeight?: number;
     onSelect?: (selectedValues: Array<string | number>) => void;
 }
+/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 declare class VirtualDropdown {
     private readonly container;
     private readonly options;

package/js/virtual-dropdown.js

@@ -1,5 +1,30 @@
 import { escapeHtml } from './utils.js';
+/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 class VirtualDropdown {
+    container;
+    options;
+    multiSelect;
+    searchable;
+    placeholder;
+    renderLimit;
+    itemHeight;
+    onSelect;
+    // Unique CSS anchor name for this instance — prevents conflicts when
+    // multiple dropdowns exist on the same page.
+    anchorName;
+    trigger;
+    triggerText;
+    menu;
+    listWrapper;
+    scroller;
+    spacer;
+    content;
+    searchInput;
+    selectedValues;
+    filteredOptions;
+    isOpen;
+    scrollTop;
+    boundHandlers;
     constructor(config) {
         const containerElement = typeof config.container === 'string'
             ? document.querySelector(config.container)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.3.1",
+  "version": "1.3.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/*",
@@ -33,6 +33,6 @@
   },
   "homepage": "https://github.com/dodlhuat/basix#readme",
   "devDependencies": {
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.0"
   }
 }