@dodlhuat/basix 1.3.2 → 1.3.4

package/js/timepicker.js

@@ -1,72 +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.dragState = null;
-        this.handleChange = () => {
-            this.updateUI();
-            const start = this.startTimeInput.value;
-            const end = this.endTimeInput.value;
-            if (this.onChange && start && end) {
-                this.onChange(start, end);
-            }
-        };
-        this.onStartHandleDown = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.beginDrag('start');
-        };
-        this.onEndHandleDown = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.beginDrag('end');
-        };
-        this.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);
-        };
-        this.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);
-        };
-        this.onPointerUp = () => {
-            if (!this.dragState)
-                return;
-            this.dragState = null;
-            this.barEl.classList.remove('is-dragging');
-            document.removeEventListener('pointermove', this.onPointerMove);
-            document.removeEventListener('pointerup', this.onPointerUp);
-        };
         const element = typeof elementOrSelector === 'string'
             ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
@@ -127,6 +75,14 @@ class TimeSpanPicker {
       </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.handleChange);
         this.endTimeInput.addEventListener('change', this.handleChange);
@@ -160,6 +116,64 @@ class TimeSpanPicker {
         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;

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;
@@ -19,6 +21,7 @@ declare class Toast {
     show(ms?: number): void;
     hide: () => void;
     private startTimer;
+    destroy(): void;
     private buildTemplate;
 }
 export { Toast };

package/js/toast.js

@@ -1,21 +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(() => {
-                this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
-                this.toastElement?.remove();
-                this.toastElement = null;
-            }, 150);
-        };
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header ?? '';
@@ -52,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) {
@@ -68,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.2",
+  "version": "1.3.4",
   "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"
   }
 }