@dodlhuat/basix 1.1.0 → 1.2.0

package/js/index.ts

@@ -18,6 +18,10 @@ import {Dropdown, DropdownSelectDetail} from "./dropdown.js";
 import {VirtualDropdown} from "./virtual-dropdown.js";
 import {TimeSpanPicker} from "./timepicker.js";
 import {RangeSlider} from "./range-slider.js";
+import {BottomSheet} from "./bottom-sheet.js";
+import {Editor} from "./editor.js";
+import {Stepper} from "./stepper.js";
+import {ContextMenu} from "./context-menu.js";
 
 // Generate sample table data
 const generateData = (count: number): TableRow[] => {
@@ -284,7 +288,7 @@ utils.ready(() => {
     let indexNumber = 1;
     const gallery = new MasonryGallery("gallery", {
         minColumnWidth: 300,
-        fetchFunction: new Promise((resolve) => {
+        fetchFunction: () => new Promise<ImageData[]>((resolve) => {
             setTimeout(() => {
                 const images: ImageData[] = [];
 
@@ -350,11 +354,56 @@ utils.ready(() => {
         },
     });
 
+    // Initialize bottom sheet
+    const bottomSheetTrigger = document.querySelector('.show-bottom-sheet');
+    if (bottomSheetTrigger) {
+        bottomSheetTrigger.addEventListener('click', () => {
+            const buttons = '<div class="buttons"><button class="button-light">Cancel</button>&nbsp;<button>Confirm</button></div>';
+            const sheet = new BottomSheet({
+                content: '<p>This is the bottom sheet content. It slides up from the bottom and can be dismissed by dragging down, tapping the backdrop, or pressing Escape.</p>',
+                header: 'Bottom Sheet',
+                footer: buttons,
+                closeable: true,
+                snapHeight: 'auto',
+            });
+            sheet.show();
+        });
+    }
+
+    // Initialize context menu demo
+    new ContextMenu('.context-menu-target', [
+        { group: 'File' },
+        { label: 'Open', icon: 'folder_open', shortcut: '⌘O', action: () => {} },
+        { label: 'Rename', icon: 'edit', shortcut: 'F2', action: () => {} },
+        { label: 'Duplicate', icon: 'library_add', action: () => {} },
+        'separator',
+        {
+            label: 'Share',
+            icon: 'send',
+            submenu: [
+                { label: 'Copy link', icon: 'attachment', action: () => {} },
+                { label: 'Send by mail', icon: 'mail', action: () => {} },
+            ]
+        },
+        'separator',
+        { label: 'Delete', icon: 'delete', shortcut: '⌫', destructive: true, action: () => {} },
+    ]);
+
+    // Initialize stepper demo
+    const stepperEl = document.querySelector<HTMLElement>('#stepper-demo');
+    if (stepperEl) {
+        const stepper = new Stepper(stepperEl, { defaultStep: 1 });
+        document.querySelector('#stepper-next')?.addEventListener('click', () => stepper.next());
+        document.querySelector('#stepper-prev')?.addEventListener('click', () => stepper.prev());
+    }
+
     // Initialize range sliders
     RangeSlider.initAll();
 
     Tooltip.initializeAll();
 
+    new Editor({ simple: true });
+
     const timeSpanPicker = new TimeSpanPicker('timespan-1', {
         onChange: (start, end) => {
             console.log(`Start: ${start}, Ende: ${end}`);
@@ -532,6 +581,18 @@ dropdownElement?.addEventListener("dropdown-select", ((
 }) as EventListener);`,
     "js",
 );
+new CodeViewer(
+    "#usage-bottom-sheet-demo",
+    `const sheet = new BottomSheet({
+  content: '<p>Sheet content here.</p>',
+  header: 'Title',
+  footer: '<div class="buttons"><button>Confirm</button></div>',
+  closeable: true,
+  snapHeight: 'auto',
+});
+sheet.show();`,
+    "js",
+);
 new CodeViewer(
     "#usage-modal-demo",
     `const modal = new Modal(
@@ -586,6 +647,40 @@ new CodeViewer(
 </div>`,
     "html",
 );
+new CodeViewer(
+    "#usage-stepper-demo",
+    `<div class="stepper">
+  <div class="stepper-step completed">
+    <div class="stepper-indicator">
+      <svg class="icon-svg"><use href="svg-icons/icons.svg#check"/></svg>
+    </div>
+    <div class="stepper-label">
+      <span class="stepper-title">Account</span>
+    </div>
+  </div>
+  <div class="stepper-connector completed"></div>
+  <div class="stepper-step active">
+    <div class="stepper-indicator">2</div>
+    <div class="stepper-label">
+      <span class="stepper-title">Profile</span>
+    </div>
+  </div>
+  <div class="stepper-connector"></div>
+  <div class="stepper-step">
+    <div class="stepper-indicator">3</div>
+    <div class="stepper-label">
+      <span class="stepper-title">Review</span>
+    </div>
+  </div>
+</div>
+
+const stepper = new Stepper('#my-stepper');
+stepper.next();
+stepper.prev();
+stepper.goTo(2);
+stepper.setError(1);`,
+    "html",
+);
 new CodeViewer(
     "#usage-accordion-demo",
     `<div class="accordion">
@@ -690,6 +785,25 @@ new CodeViewer(
     `<span class="placeholder w-6">`,
     "html"
 );
+new CodeViewer(
+    "#usage-context-menu-demo",
+    `new ContextMenu('.my-element', [
+  { group: 'File' },
+  { label: 'Open',      icon: 'folder_open', shortcut: '⌘O', action: (t) => {} },
+  { label: 'Rename',    icon: 'edit',        shortcut: 'F2', action: (t) => {} },
+  'separator',
+  {
+    label: 'Share', icon: 'send',
+    submenu: [
+      { label: 'Copy link',   icon: 'attachment', action: (t) => {} },
+      { label: 'Send by mail', icon: 'mail',      action: (t) => {} },
+    ]
+  },
+  'separator',
+  { label: 'Delete', icon: 'delete', destructive: true, action: (t) => {} },
+]);`,
+    "javascript",
+);
 new CodeViewer(
     "#usage-table-demo",
     `const columns: TableColumn[] = [
@@ -849,7 +963,7 @@ new CodeViewer("#usage-gallery-demo-html", `<div id="gallery" class="masonry-con
             </div>`, "html");
 new CodeViewer("#usage-gallery-demo-js", `const gallery = new MasonryGallery("gallery", {
     minColumnWidth: 300,
-    fetchFunction: new Promise((resolve) => {
+    fetchFunction: () => new Promise((resolve) => {
       setTimeout(() => {
         const images: ImageData[] = [];
 

package/js/push-menu.js

@@ -1,113 +1,113 @@
-class PushMenu {
-    static init() {
-        if (this.initialized) {
-            console.warn('PushMenu: Already initialized');
-            return;
-        }
-        this.refresh();
-        if (!this.elements.navigation || !this.elements.content) {
-            throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
-        }
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
-        this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
-        this.initialized = true;
-    }
-    static handleNavigationChange() {
-        const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
-        if (!isPushed) {
-            this.elements.content?.addEventListener('click', this.clickNav);
-        }
-        else {
-            this.elements.content?.removeEventListener('click', this.clickNav);
-        }
-        this.pushToggle();
-    }
-    static pushToggle() {
-        if (!this.elements.content || !this.elements.menu) {
-            throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
-        }
-        const isPushed = this.elements.content.classList.contains('pushed');
-        this.toggleClass(this.elements.content, 'pushed', !isPushed);
-        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
-        this.toggleClass(this.elements.header, 'pushed', !isPushed);
-        this.toggleClass(this.elements.backdrop, 'pushed', !isPushed);
-        if (this.elements.controlIcon) {
-            if (isPushed) {
-                this.elements.controlIcon.classList.remove('icon-menu_open');
-                this.elements.controlIcon.classList.add('icon-menu');
-            }
-            else {
-                this.elements.controlIcon.classList.add('icon-menu_open');
-                this.elements.controlIcon.classList.remove('icon-menu');
-            }
-        }
-    }
-    static toggleClass(element, className, add) {
-        if (!element)
-            return;
-        if (add) {
-            element.classList.add(className);
-        }
-        else {
-            element.classList.remove(className);
-        }
-    }
-    static open() {
-        if (!this.elements.content?.classList.contains('pushed')) {
-            this.pushToggle();
-        }
-    }
-    static close() {
-        if (this.elements.content?.classList.contains('pushed')) {
-            this.pushToggle();
-        }
-    }
-    static isOpen() {
-        return this.elements.content?.classList.contains('pushed') ?? false;
-    }
-    static destroy() {
-        if (!this.initialized)
-            return;
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
-        this.elements.content?.removeEventListener('click', this.clickNav);
-        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
-        this.close();
-        this.elements = {
-            navigation: null,
-            content: null,
-            menu: null,
-            header: null,
-            controlIcon: null,
-            backdrop: null
-        };
-        this.initialized = false;
-    }
-    static refresh() {
-        this.elements.navigation = document.querySelector('.navigation');
-        this.elements.content = document.querySelector('.push-content');
-        this.elements.menu = document.querySelector('.push-menu');
-        this.elements.header = document.querySelector('.main-header');
-        this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
-        this.elements.backdrop = document.querySelector('.push-menu-backdrop');
-    }
-}
-PushMenu.elements = {
-    navigation: null,
-    content: null,
-    menu: null,
-    header: null,
-    controlIcon: null,
-    backdrop: null
-};
-PushMenu.initialized = false;
-PushMenu.clickNav = () => {
-    const navigation = PushMenu.elements.navigation;
-    navigation?.click();
-};
-PushMenu.handleBackdropClick = () => {
-    if (PushMenu.isOpen()) {
-        const navigation = PushMenu.elements.navigation;
-        navigation?.click();
-    }
-};
-export { PushMenu };
+class PushMenu {
+    static init() {
+        if (this.initialized) {
+            console.warn('PushMenu: Already initialized');
+            return;
+        }
+        this.refresh();
+        if (!this.elements.navigation || !this.elements.content) {
+            throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
+        }
+        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
+        this.initialized = true;
+    }
+    static handleNavigationChange() {
+        const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
+        if (!isPushed) {
+            this.elements.content?.addEventListener('click', this.clickNav);
+        }
+        else {
+            this.elements.content?.removeEventListener('click', this.clickNav);
+        }
+        this.pushToggle();
+    }
+    static pushToggle() {
+        if (!this.elements.content || !this.elements.menu) {
+            throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
+        }
+        const isPushed = this.elements.content.classList.contains('pushed');
+        this.toggleClass(this.elements.content, 'pushed', !isPushed);
+        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
+        this.toggleClass(this.elements.header, 'pushed', !isPushed);
+        this.toggleClass(this.elements.backdrop, 'pushed', !isPushed);
+        if (this.elements.controlIcon) {
+            if (isPushed) {
+                this.elements.controlIcon.classList.remove('icon-menu_open');
+                this.elements.controlIcon.classList.add('icon-menu');
+            }
+            else {
+                this.elements.controlIcon.classList.add('icon-menu_open');
+                this.elements.controlIcon.classList.remove('icon-menu');
+            }
+        }
+    }
+    static toggleClass(element, className, add) {
+        if (!element)
+            return;
+        if (add) {
+            element.classList.add(className);
+        }
+        else {
+            element.classList.remove(className);
+        }
+    }
+    static open() {
+        if (!this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+    static close() {
+        if (this.elements.content?.classList.contains('pushed')) {
+            this.pushToggle();
+        }
+    }
+    static isOpen() {
+        return this.elements.content?.classList.contains('pushed') ?? false;
+    }
+    static destroy() {
+        if (!this.initialized)
+            return;
+        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.content?.removeEventListener('click', this.clickNav);
+        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
+        this.close();
+        this.elements = {
+            navigation: null,
+            content: null,
+            menu: null,
+            header: null,
+            controlIcon: null,
+            backdrop: null
+        };
+        this.initialized = false;
+    }
+    static refresh() {
+        this.elements.navigation = document.querySelector('.navigation');
+        this.elements.content = document.querySelector('.push-content');
+        this.elements.menu = document.querySelector('.push-menu');
+        this.elements.header = document.querySelector('.main-header');
+        this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
+        this.elements.backdrop = document.querySelector('.push-menu-backdrop');
+    }
+}
+PushMenu.elements = {
+    navigation: null,
+    content: null,
+    menu: null,
+    header: null,
+    controlIcon: null,
+    backdrop: null
+};
+PushMenu.initialized = false;
+PushMenu.clickNav = () => {
+    const navigation = PushMenu.elements.navigation;
+    navigation?.click();
+};
+PushMenu.handleBackdropClick = () => {
+    if (PushMenu.isOpen()) {
+        const navigation = PushMenu.elements.navigation;
+        navigation?.click();
+    }
+};
+export { PushMenu };

package/js/stepper.js

@@ -0,0 +1,80 @@
+class Stepper {
+    constructor(elementOrSelector, options = {}) {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!element)
+            throw new Error(`Stepper: element not found`);
+        this.container = element;
+        this.steps = Array.from(this.container.querySelectorAll('.stepper-step'));
+        this.connectors = Array.from(this.container.querySelectorAll('.stepper-connector'));
+        this.onChange = options.onChange;
+        this.current = options.defaultStep ?? 0;
+        if (this.steps.length === 0) {
+            console.warn('Stepper: no .stepper-step elements found');
+            return;
+        }
+        if (options.clickable) {
+            this.container.classList.add('stepper-clickable');
+            this.steps.forEach((step, i) => {
+                step.addEventListener('click', () => this.goTo(i));
+            });
+        }
+        this.render();
+    }
+    render() {
+        this.steps.forEach((step, i) => {
+            step.classList.remove('active', 'completed');
+            if (i < this.current)
+                step.classList.add('completed');
+            else if (i === this.current)
+                step.classList.add('active');
+        });
+        this.connectors.forEach((connector, i) => {
+            connector.classList.toggle('completed', i < this.current);
+        });
+    }
+    next() {
+        if (this.current < this.steps.length - 1) {
+            this.goTo(this.current + 1);
+        }
+    }
+    prev() {
+        if (this.current > 0) {
+            this.goTo(this.current - 1);
+        }
+    }
+    goTo(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        const previous = this.current;
+        this.current = index;
+        this.render();
+        if (this.onChange && previous !== index) {
+            this.onChange(index, previous);
+        }
+    }
+    setError(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        this.steps[index].classList.add('error');
+    }
+    clearError(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        this.steps[index].classList.remove('error');
+    }
+    getStep() {
+        return this.current;
+    }
+    getStepCount() {
+        return this.steps.length;
+    }
+    isFirst() {
+        return this.current === 0;
+    }
+    isLast() {
+        return this.current === this.steps.length - 1;
+    }
+}
+export { Stepper };

package/js/stepper.ts

@@ -0,0 +1,104 @@
+interface StepperOptions {
+    defaultStep?: number;
+    clickable?: boolean;
+    onChange?: (current: number, previous: number) => void;
+}
+
+class Stepper {
+    private container: HTMLElement;
+    private steps: HTMLElement[];
+    private connectors: HTMLElement[];
+    private current: number;
+    private readonly onChange?: (current: number, previous: number) => void;
+
+    constructor(elementOrSelector: string | HTMLElement, options: StepperOptions = {}) {
+        const element = typeof elementOrSelector === 'string'
+            ? document.querySelector<HTMLElement>(elementOrSelector)
+            : elementOrSelector;
+
+        if (!element) throw new Error(`Stepper: element not found`);
+
+        this.container = element;
+        this.steps = Array.from(this.container.querySelectorAll<HTMLElement>('.stepper-step'));
+        this.connectors = Array.from(this.container.querySelectorAll<HTMLElement>('.stepper-connector'));
+        this.onChange = options.onChange;
+        this.current = options.defaultStep ?? 0;
+
+        if (this.steps.length === 0) {
+            console.warn('Stepper: no .stepper-step elements found');
+            return;
+        }
+
+        if (options.clickable) {
+            this.container.classList.add('stepper-clickable');
+            this.steps.forEach((step, i) => {
+                step.addEventListener('click', () => this.goTo(i));
+            });
+        }
+
+        this.render();
+    }
+
+    private render(): void {
+        this.steps.forEach((step, i) => {
+            step.classList.remove('active', 'completed');
+
+            if (i < this.current) step.classList.add('completed');
+            else if (i === this.current) step.classList.add('active');
+        });
+
+        this.connectors.forEach((connector, i) => {
+            connector.classList.toggle('completed', i < this.current);
+        });
+    }
+
+    public next(): void {
+        if (this.current < this.steps.length - 1) {
+            this.goTo(this.current + 1);
+        }
+    }
+
+    public prev(): void {
+        if (this.current > 0) {
+            this.goTo(this.current - 1);
+        }
+    }
+
+    public goTo(index: number): void {
+        if (index < 0 || index >= this.steps.length) return;
+        const previous = this.current;
+        this.current = index;
+        this.render();
+        if (this.onChange && previous !== index) {
+            this.onChange(index, previous);
+        }
+    }
+
+    public setError(index: number): void {
+        if (index < 0 || index >= this.steps.length) return;
+        this.steps[index].classList.add('error');
+    }
+
+    public clearError(index: number): void {
+        if (index < 0 || index >= this.steps.length) return;
+        this.steps[index].classList.remove('error');
+    }
+
+    public getStep(): number {
+        return this.current;
+    }
+
+    public getStepCount(): number {
+        return this.steps.length;
+    }
+
+    public isFirst(): boolean {
+        return this.current === 0;
+    }
+
+    public isLast(): boolean {
+        return this.current === this.steps.length - 1;
+    }
+}
+
+export { Stepper, type StepperOptions };

package/js/timepicker.js

@@ -16,6 +16,7 @@ class TimeSpanPicker {
             this.endTimeInput.value = options.defaultEnd;
         }
         this.attachEventListeners();
+        // Render initial state if defaults provided
         if (options?.defaultStart || options?.defaultEnd) {
             this.updateUI();
         }
@@ -69,8 +70,10 @@ class TimeSpanPicker {
     formatDuration(minutes) {
         const h = Math.floor(minutes / 60);
         const m = minutes % 60;
-        if (h && m) return `${h}h ${m}m`;
-        if (h) return `${h}h`;
+        if (h && m)
+            return `${h}h ${m}m`;
+        if (h)
+            return `${h}h`;
         return `${m}m`;
     }
     updateUI() {
@@ -83,7 +86,8 @@ class TimeSpanPicker {
         picker?.classList.toggle('is-error', isError);
         if (isError) {
             this.endTimeInput.setCustomValidity('End time must be after start time');
-            if (durationEl) durationEl.textContent = '!';
+            if (durationEl)
+                durationEl.textContent = '!';
             return;
         }
         this.endTimeInput.setCustomValidity('');
@@ -96,9 +100,14 @@ class TimeSpanPicker {
             const widthPct = ((duration / 1440) * 100).toFixed(2);
             barFill.style.left = `${startPct}%`;
             barFill.style.width = `${widthPct}%`;
-        } else {
-            if (durationEl) durationEl.textContent = '';
-            if (barFill) { barFill.style.left = '0'; barFill.style.width = '0'; }
+        }
+        else {
+            if (durationEl)
+                durationEl.textContent = '';
+            if (barFill) {
+                barFill.style.left = '0';
+                barFill.style.width = '0';
+            }
         }
     }
     handleChange() {
@@ -127,8 +136,12 @@ class TimeSpanPicker {
         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'; }
+        if (durationEl)
+            durationEl.textContent = '';
+        if (barFill) {
+            barFill.style.left = '0';
+            barFill.style.width = '0';
+        }
     }
     isValid() {
         const { start, end } = this.getValue();

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "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.",
   "main": "js/index.js",
   "exports": {
     ".": "./js/index.js",
-    "./css/*": "./css/*"
+    "./css/*": "./css/*",
+    "./js/*": "./js/*"
   },
   "files": [
     "js/",

package/icons/activity-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="activity"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M14.33 20h-.21a2 2 0 0 1-1.76-1.58L9.68 6l-2.76 6.4A1 1 0 0 1 6 13H3a1 1 0 0 1 0-2h2.34l2.51-5.79a2 2 0 0 1 3.79.38L14.32 18l2.76-6.38A1 1 0 0 1 18 11h3a1 1 0 0 1 0 2h-2.34l-2.51 5.79A2 2 0 0 1 14.33 20z"/></g></g></svg>

package/icons/alert-circle-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="alert-circle"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><circle cx="12" cy="16" r="1"/><path d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/></g></g></svg>

package/icons/alert-triangle-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="alert-triangle"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M22.56 16.3L14.89 3.58a3.43 3.43 0 0 0-5.78 0L1.44 16.3a3 3 0 0 0-.05 3A3.37 3.37 0 0 0 4.33 21h15.34a3.37 3.37 0 0 0 2.94-1.66 3 3 0 0 0-.05-3.04zm-1.7 2.05a1.31 1.31 0 0 1-1.19.65H4.33a1.31 1.31 0 0 1-1.19-.65 1 1 0 0 1 0-1l7.68-12.73a1.48 1.48 0 0 1 2.36 0l7.67 12.72a1 1 0 0 1 .01 1.01z"/><circle cx="12" cy="16" r="1"/><path d="M12 8a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0V9a1 1 0 0 0-1-1z"/></g></g></svg>