@dodlhuat/basix 1.2.0 → 1.2.1

package/js/docs-nav.js

@@ -0,0 +1,204 @@
+import { SidebarNav } from './sidebar-nav.js';
+import { Scrollbar } from './scrollbar.js';
+
+const NAV = [
+    {
+        label: 'Foundation',
+        items: [
+            { label: 'Layout & Grid',   href: 'foundation/layout.html' },
+            { label: 'Typography',       href: 'foundation/typography.html' },
+            { label: 'Colors & Tokens',  href: 'foundation/colors.html' },
+            { label: 'Icons',            href: 'foundation/icons.html' },
+        ],
+    },
+    {
+        label: 'Forms',
+        items: [
+            { label: 'Inputs & Forms',   href: 'forms/inputs.html' },
+            { label: 'Date Picker',      href: 'forms/datepicker.html' },
+            { label: 'Range Slider',     href: 'forms/range-slider.html' },
+            { label: 'File Uploader',    href: 'forms/file-uploader.html' },
+        ],
+    },
+    {
+        label: 'Navigation',
+        items: [
+            { label: 'Push Menu',        href: 'navigation/push-menu.html' },
+            { label: 'Flyout Menu',      href: 'navigation/flyout-menu.html' },
+            { label: 'Sidebar Nav',      href: 'navigation/sidebar-nav.html' },
+            { label: 'Dropdown',         href: 'navigation/dropdown.html' },
+            { label: 'Tabs',             href: 'navigation/tabs.html' },
+            { label: 'Breadcrumbs',      href: 'navigation/breadcrumbs.html' },
+        ],
+    },
+    {
+        label: 'Overlays',
+        items: [
+            { label: 'Modal',            href: 'overlays/modal.html' },
+            { label: 'Popover',          href: 'overlays/popover.html' },
+            { label: 'Tooltip',          href: 'overlays/tooltip.html' },
+            { label: 'Bottom Sheet',     href: 'overlays/bottom-sheet.html' },
+            { label: 'Toast',            href: 'overlays/toast.html' },
+        ],
+    },
+    {
+        label: 'Components',
+        items: [
+            { label: 'Buttons & Chips',  href: 'components/buttons.html' },
+            { label: 'Alerts & Badge',   href: 'components/alerts.html' },
+            { label: 'Accordion',        href: 'components/accordion.html' },
+            { label: 'Stepper',          href: 'components/stepper.html' },
+            { label: 'Timeline',         href: 'components/timeline.html' },
+            { label: 'Progress & Skeleton', href: 'components/progress.html' },
+            { label: 'Data Table',       href: 'components/table.html' },
+            { label: 'Tree',             href: 'components/tree.html' },
+            { label: 'Carousel',         href: 'components/carousel.html' },
+            { label: 'Gallery',          href: 'components/gallery.html' },
+            { label: 'Scrollbar',        href: 'components/scrollbar.html' },
+            { label: 'Chat Bubbles',     href: 'components/chat-bubbles.html' },
+            { label: 'Charts',           href: 'components/charts.html' },
+            { label: 'Group Picker',     href: 'components/group-picker.html' },
+            { label: 'Virtual Dropdown', href: 'components/virtual-dropdown.html' },
+            { label: 'Timespan Picker',  href: 'components/timespan-picker.html' },
+            { label: 'Rich Text Editor', href: 'components/editor.html' },
+        ],
+    },
+    {
+        label: 'Utilities',
+        items: [
+            { label: 'Theme',            href: 'utilities/theme.html' },
+            { label: 'Scroll',           href: 'utilities/scroll.html' },
+            { label: 'Context Menu',     href: 'utilities/context-menu.html' },
+        ],
+    },
+];
+
+class DocsNav {
+    constructor() {
+        this.currentPath = window.location.pathname;
+        // Compute prefix to reach docs/ root from current page.
+        // docs/index.html        → prefix = ''
+        // docs/overlays/foo.html → prefix = '../'
+        const segs = this.currentPath.split('/').filter(Boolean);
+        const docsIdx = segs.lastIndexOf('docs');
+        const depth = docsIdx >= 0 ? segs.length - docsIdx - 1 : 0;
+        this.prefix = depth > 1 ? '../'.repeat(depth - 1) : '';
+        this.render();
+        this.bindMobile();
+    }
+
+    isActive(href) {
+        // href is like 'overlays/popover.html' — match against current path
+        return this.currentPath.endsWith('/' + href.replace(/^[^/]+\//, '')) &&
+               this.currentPath.includes('/' + href.split('/')[0] + '/');
+    }
+
+    render() {
+        // Sidebar
+        const sidebar = document.getElementById('docs-sidebar');
+        if (!sidebar) return;
+
+        const logoHref = this.prefix ? this.prefix + '../index.html' : '../index.html';
+
+        sidebar.innerHTML = `
+            <a class="docs-sidebar-logo" href="${logoHref}">
+                Basix
+                <span class="docs-logo-badge">docs</span>
+            </a>
+            <div class="docs-sidebar-search">
+                <input type="search" placeholder="Search…" id="docs-search" autocomplete="off"/>
+            </div>
+            <div class="scroll-container sidebar-scroll">
+                <div class="viewport">
+                    <div class="content">
+                        <nav class="docs-nav" aria-label="Documentation navigation">
+                            <ul>${NAV.map(section => this.renderSection(section)).join('')}</ul>
+                        </nav>
+                    </div>
+                </div>
+                <div class="scrollbar">
+                    <div class="track">
+                        <div class="thumb"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        new Scrollbar(sidebar.querySelector('.sidebar-scroll'));
+
+        // Breadcrumb
+        this.renderBreadcrumb();
+
+        // Search
+        document.getElementById('docs-search')?.addEventListener('input', e => {
+            this.filter(e.target.value);
+        });
+    }
+
+    renderSection(section) {
+        return `
+            <li class="docs-nav-section">
+                <div class="docs-nav-section-label">${section.label}</div>
+                <ul>
+                    ${section.items.map(item => this.renderItem(item, section)).join('')}
+                </ul>
+            </li>`;
+    }
+
+    renderItem(item, section) {
+        const active = this.isActive(item.href) ? ' is-active' : '';
+        return `
+            <li class="docs-nav-item">
+                <a href="${this.prefix}${item.href}" class="${active}">${item.label}</a>
+            </li>`;
+    }
+
+    renderBreadcrumb() {
+        const bc = document.getElementById('docs-breadcrumb');
+        if (!bc) return;
+
+        let activeSection = null;
+        let activeItem = null;
+        for (const section of NAV) {
+            for (const item of section.items) {
+                if (this.isActive(item.href)) {
+                    activeSection = section;
+                    activeItem = item;
+                    break;
+                }
+            }
+            if (activeItem) break;
+        }
+
+        if (!activeSection || !activeItem) return;
+
+        const rootHref = this.prefix ? this.prefix + '../index.html' : '../index.html';
+        bc.innerHTML = `
+            <a href="${rootHref}">Basix</a>
+            <span class="sep">/</span>
+            <span>${activeSection.label}</span>
+            <span class="sep">/</span>
+            <span class="current">${activeItem.label}</span>
+        `;
+    }
+
+    filter(query) {
+        const q = query.toLowerCase().trim();
+        document.querySelectorAll('.docs-nav-item').forEach(item => {
+            const label = item.querySelector('a')?.textContent?.toLowerCase() ?? '';
+            item.style.display = (!q || label.includes(q)) ? '' : 'none';
+        });
+        document.querySelectorAll('.docs-nav-section').forEach(section => {
+            const visible = [...section.querySelectorAll('.docs-nav-item')]
+                .some(i => i.style.display !== 'none');
+            section.style.display = (!q || visible) ? '' : 'none';
+        });
+    }
+
+    bindMobile() {
+        const layout = document.querySelector('.sidebar-layout');
+        if (layout) new SidebarNav(layout, { toggleSelector: '#docs-mobile-toggle' });
+    }
+}
+
+export { DocsNav, NAV };

package/js/dropdown.ts

@@ -1,180 +1,180 @@
-interface DropdownOptions {
-    closeOnSelect?: boolean;
-    allowMultipleOpen?: boolean;
-}
-
-interface DropdownSelectDetail {
-    text: string;
-    element: HTMLElement;
-}
-
-class Dropdown {
-    private container: HTMLElement;
-    private trigger: HTMLElement;
-    private menu: HTMLElement;
-    private options: Required<DropdownOptions>;
-    private abortController: AbortController;
-
-    constructor(selector: string, options: DropdownOptions = {}) {
-        const container = document.querySelector<HTMLElement>(selector);
-
-        if (!container) {
-            console.error(`Dropdown container not found: ${selector}`);
-            throw new Error(`Dropdown container "${selector}" not found`);
-        }
-
-        this.container = container;
-
-        const trigger = this.container.querySelector<HTMLElement>('.dropdown-trigger');
-        const menu = this.container.querySelector<HTMLElement>('.dropdown-menu');
-
-        if (!trigger || !menu) {
-            throw new Error('Dropdown requires .dropdown-trigger and .dropdown-menu elements');
-        }
-
-        this.trigger = trigger;
-        this.menu = menu;
-
-        this.options = {
-            closeOnSelect: options.closeOnSelect ?? true,
-            allowMultipleOpen: options.allowMultipleOpen ?? false,
-        };
-
-        this.abortController = new AbortController();
-        this.init();
-    }
-
-    private init(): void {
-        this.setupItems();
-        this.attachEventListeners();
-    }
-
-    private attachEventListeners(): void {
-        const { signal } = this.abortController;
-
-        // Toggle main dropdown
-        this.trigger.addEventListener(
-            'click',
-            (e: MouseEvent) => {
-                e.stopPropagation();
-                this.toggle();
-            },
-            { signal }
-        );
-
-        // Close when clicking outside
-        document.addEventListener(
-            'click',
-            (e: MouseEvent) => {
-                if (!this.container.contains(e.target as Node)) {
-                    this.close();
-                }
-            },
-            { signal }
-        );
-
-        // Handle item clicks using event delegation
-        this.menu.addEventListener(
-            'click',
-            (e: MouseEvent) => {
-                e.stopPropagation();
-
-                const target = e.target as HTMLElement;
-                const item = target.closest<HTMLElement>('.dropdown-item');
-
-                if (!item) return;
-
-                const li = item.parentElement as HTMLLIElement;
-                const submenu = li.querySelector<HTMLUListElement>('ul');
-
-                if (submenu) {
-                    this.toggleSubmenu(li);
-                } else {
-                    this.handleSelection(item);
-                    if (this.options.closeOnSelect) {
-                        this.close();
-                    }
-                }
-            },
-            { signal }
-        );
-    }
-
-    private setupItems(): void {
-        const items = this.menu.querySelectorAll<HTMLElement>('.dropdown-item');
-
-        items.forEach((item) => {
-            const li = item.parentElement as HTMLLIElement;
-            if (li.querySelector('ul')) {
-                item.classList.add('has-children');
-            }
-        });
-    }
-
-    public toggle(): void {
-        this.container.classList.toggle('active');
-    }
-
-    public close(): void {
-        this.container.classList.remove('active');
-        this.closeAllSubmenus();
-    }
-
-    public open(): void {
-        this.container.classList.add('active');
-    }
-
-    private toggleSubmenu(li: HTMLLIElement): void {
-        const isOpening = !li.classList.contains('open');
-
-        // Close siblings if not allowing multiple open menus
-        if (isOpening && !this.options.allowMultipleOpen) {
-            const parent = li.parentElement;
-            if (parent) {
-                const siblings = Array.from(parent.children) as HTMLLIElement[];
-
-                siblings.forEach((sibling) => {
-                    if (sibling !== li && sibling.classList.contains('open')) {
-                        sibling.classList.remove('open');
-
-                        // Close deeply nested open items
-                        const deepOpenItems = sibling.querySelectorAll<HTMLLIElement>('.open');
-                        deepOpenItems.forEach((el) => el.classList.remove('open'));
-                    }
-                });
-            }
-        }
-
-        li.classList.toggle('open');
-    }
-
-    private closeAllSubmenus(): void {
-        const openItems = this.menu.querySelectorAll<HTMLLIElement>('li.open');
-        openItems.forEach((item) => item.classList.remove('open'));
-    }
-
-    private handleSelection(item: HTMLElement): void {
-        const text = item.textContent?.trim() ?? '';
-
-        // Dispatch custom event with proper typing
-        const event = new CustomEvent<DropdownSelectDetail>('dropdown-select', {
-            detail: {
-                text,
-                element: item,
-            },
-            bubbles: true,
-        });
-
-        this.container.dispatchEvent(event);
-    }
-
-    /**
-     * Cleanup method to remove event listeners
-     */
-    public destroy(): void {
-        this.abortController.abort();
-        this.close();
-    }
-}
-
+interface DropdownOptions {
+    closeOnSelect?: boolean;
+    allowMultipleOpen?: boolean;
+}
+
+interface DropdownSelectDetail {
+    text: string;
+    element: HTMLElement;
+}
+
+class Dropdown {
+    private container: HTMLElement;
+    private trigger: HTMLElement;
+    private menu: HTMLElement;
+    private options: Required<DropdownOptions>;
+    private abortController: AbortController;
+
+    constructor(selector: string, options: DropdownOptions = {}) {
+        const container = document.querySelector<HTMLElement>(selector);
+
+        if (!container) {
+            console.error(`Dropdown container not found: ${selector}`);
+            throw new Error(`Dropdown container "${selector}" not found`);
+        }
+
+        this.container = container;
+
+        const trigger = this.container.querySelector<HTMLElement>('.dropdown-trigger');
+        const menu = this.container.querySelector<HTMLElement>('.dropdown-menu');
+
+        if (!trigger || !menu) {
+            throw new Error('Dropdown requires .dropdown-trigger and .dropdown-menu elements');
+        }
+
+        this.trigger = trigger;
+        this.menu = menu;
+
+        this.options = {
+            closeOnSelect: options.closeOnSelect ?? true,
+            allowMultipleOpen: options.allowMultipleOpen ?? false,
+        };
+
+        this.abortController = new AbortController();
+        this.init();
+    }
+
+    private init(): void {
+        this.setupItems();
+        this.attachEventListeners();
+    }
+
+    private attachEventListeners(): void {
+        const { signal } = this.abortController;
+
+        // Toggle main dropdown
+        this.trigger.addEventListener(
+            'click',
+            (e: MouseEvent) => {
+                e.stopPropagation();
+                this.toggle();
+            },
+            { signal }
+        );
+
+        // Close when clicking outside
+        document.addEventListener(
+            'click',
+            (e: MouseEvent) => {
+                if (!this.container.contains(e.target as Node)) {
+                    this.close();
+                }
+            },
+            { signal }
+        );
+
+        // Handle item clicks using event delegation
+        this.menu.addEventListener(
+            'click',
+            (e: MouseEvent) => {
+                e.stopPropagation();
+
+                const target = e.target as HTMLElement;
+                const item = target.closest<HTMLElement>('.dropdown-item');
+
+                if (!item) return;
+
+                const li = item.parentElement as HTMLLIElement;
+                const submenu = li.querySelector<HTMLUListElement>('ul');
+
+                if (submenu) {
+                    this.toggleSubmenu(li);
+                } else {
+                    this.handleSelection(item);
+                    if (this.options.closeOnSelect) {
+                        this.close();
+                    }
+                }
+            },
+            { signal }
+        );
+    }
+
+    private setupItems(): void {
+        const items = this.menu.querySelectorAll<HTMLElement>('.dropdown-item');
+
+        items.forEach((item) => {
+            const li = item.parentElement as HTMLLIElement;
+            if (li.querySelector('ul')) {
+                item.classList.add('has-children');
+            }
+        });
+    }
+
+    public toggle(): void {
+        this.container.classList.toggle('active');
+    }
+
+    public close(): void {
+        this.container.classList.remove('active');
+        this.closeAllSubmenus();
+    }
+
+    public open(): void {
+        this.container.classList.add('active');
+    }
+
+    private toggleSubmenu(li: HTMLLIElement): void {
+        const isOpening = !li.classList.contains('open');
+
+        // Close siblings if not allowing multiple open menus
+        if (isOpening && !this.options.allowMultipleOpen) {
+            const parent = li.parentElement;
+            if (parent) {
+                const siblings = Array.from(parent.children) as HTMLLIElement[];
+
+                siblings.forEach((sibling) => {
+                    if (sibling !== li && sibling.classList.contains('open')) {
+                        sibling.classList.remove('open');
+
+                        // Close deeply nested open items
+                        const deepOpenItems = sibling.querySelectorAll<HTMLLIElement>('.open');
+                        deepOpenItems.forEach((el) => el.classList.remove('open'));
+                    }
+                });
+            }
+        }
+
+        li.classList.toggle('open');
+    }
+
+    private closeAllSubmenus(): void {
+        const openItems = this.menu.querySelectorAll<HTMLLIElement>('li.open');
+        openItems.forEach((item) => item.classList.remove('open'));
+    }
+
+    private handleSelection(item: HTMLElement): void {
+        const text = item.textContent?.trim() ?? '';
+
+        // Dispatch custom event with proper typing
+        const event = new CustomEvent<DropdownSelectDetail>('dropdown-select', {
+            detail: {
+                text,
+                element: item,
+            },
+            bubbles: true,
+        });
+
+        this.container.dispatchEvent(event);
+    }
+
+    /**
+     * Cleanup method to remove event listeners
+     */
+    public destroy(): void {
+        this.abortController.abort();
+        this.close();
+    }
+}
+
 export { Dropdown, DropdownSelectDetail };

package/js/editor.js

@@ -238,6 +238,15 @@ class Editor {
             case 'insertOrderedList':
                 this.insertList('ol');
                 break;
+            case 'justifyLeft':
+            case 'justifyCenter':
+            case 'justifyRight':
+                this.setAlignment(command);
+                break;
+            case 'foreColor':
+                if (value)
+                    this.setForeColor(value);
+                break;
         }
     }
     insertText(text) {
@@ -358,6 +367,41 @@ class Editor {
         }
         this.onContentChange();
     }
+    setAlignment(cmd) {
+        const align = {
+            justifyLeft: 'left', justifyCenter: 'center', justifyRight: 'right',
+        };
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const container = sel.getRangeAt(0).commonAncestorContainer;
+        let block = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        while (block && block !== this.editable && block.parentElement !== this.editable) {
+            block = block.parentElement;
+        }
+        if (block && block !== this.editable) {
+            block.style.textAlign = align[cmd];
+            this.onContentChange();
+        }
+    }
+    setForeColor(color) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (range.collapsed)
+            return;
+        const span = document.createElement('span');
+        span.style.color = color;
+        span.appendChild(range.extractContents());
+        range.insertNode(span);
+        range.selectNodeContents(span);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.onContentChange();
+    }
     sanitizeHTML(html) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
@@ -373,12 +417,12 @@ class Editor {
     }
     downloadHTML() {
         const content = this.sanitizeHTML(this.editable.innerHTML);
-        const html = `<!doctype html>
-<html lang="en">
-<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head>
-<body>
-${content}
-</body>
+        const html = `<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head>
+<body>
+${content}
+</body>
 </html>`;
         const blob = new Blob([html], { type: 'text/html' });
         const a = document.createElement('a');