juxscript 1.1.4 → 1.1.6

package/lib/components/dropdown.ts

@@ -0,0 +1,186 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['select'] as const;
+
+export interface DropdownItem {
+    label?: string;
+    icon?: string;
+    divider?: boolean;
+    click?: () => void;
+}
+
+export interface DropdownOptions {
+    triggerLabel?: string;
+    items?: DropdownItem[];
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    style?: string;
+    class?: string;
+}
+
+type DropdownState = {
+    triggerLabel: string;
+    items: DropdownItem[];
+    position: string;
+    open: boolean;
+    style: string;
+    class: string;
+};
+
+export class Dropdown extends BaseComponent<DropdownState> {
+    private _dropdown: HTMLElement | null = null;
+    private _menu: HTMLElement | null = null;
+
+    constructor(id: string, options: DropdownOptions = {}) {
+        super(id, {
+            triggerLabel: options.triggerLabel ?? 'Menu',
+            items: options.items ?? [],
+            position: options.position ?? 'bottom-left',
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    triggerLabel(value: string): this {
+        this.state.triggerLabel = value;
+        return this;
+    }
+
+    items(value: DropdownItem[]): this {
+        this.state.items = value;
+        return this;
+    }
+
+    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this {
+        this.state.position = value;
+        return this;
+    }
+
+    open(): this {
+        this.state.open = true;
+        if (this._menu) {
+            this._menu.style.display = 'block';
+        }
+        return this;
+    }
+
+    close(): this {
+        this.state.open = false;
+        if (this._menu) {
+            this._menu.style.display = 'none';
+        }
+        return this;
+    }
+
+    toggle(): this {
+        return this.state.open ? this.close() : this.open();
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { triggerLabel, items, position, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dropdown';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Trigger button
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dropdown-trigger';
+        triggerBtn.textContent = triggerLabel;
+        triggerBtn.type = 'button';
+
+        // Dropdown menu
+        const menu = document.createElement('div');
+        menu.className = `jux-dropdown-menu jux-dropdown-${position}`;
+        menu.style.display = 'none';
+        this._menu = menu;
+
+        items.forEach(item => {
+            if (item.divider) {
+                const divider = document.createElement('div');
+                divider.className = 'jux-dropdown-divider';
+                menu.appendChild(divider);
+            } else {
+                const menuItem = document.createElement('button');
+                menuItem.className = 'jux-dropdown-item';
+                menuItem.type = 'button';
+
+                if (item.icon) {
+                    const icon = document.createElement('span');
+                    icon.className = 'jux-dropdown-icon';
+                    icon.textContent = item.icon;
+                    menuItem.appendChild(icon);
+                }
+
+                if (item.label) {
+                    const label = document.createElement('span');
+                    label.textContent = item.label;
+                    menuItem.appendChild(label);
+                }
+
+                menuItem.addEventListener('click', () => {
+                    // 🎯 Fire the select callback event
+                    this._triggerCallback('select', item);
+
+                    // Then fire item-specific click handler
+                    if (item.click) {
+                        item.click();
+                    }
+
+                    this.close();
+                });
+
+                menu.appendChild(menuItem);
+            }
+        });
+
+        // Toggle on trigger click
+        triggerBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (this._dropdown && !this._dropdown.contains(e.target as Node)) {
+                this.close();
+            }
+        });
+
+        wrapper.appendChild(triggerBtn);
+        wrapper.appendChild(menu);
+
+        this._wireStandardEvents(wrapper);
+
+        container.appendChild(wrapper);
+        this._dropdown = wrapper;
+
+        return this;
+    }
+}
+
+export function dropdown(id: string, options: DropdownOptions = {}): Dropdown {
+    return new Dropdown(id, options);
+}

package/lib/components/element.d.ts

@@ -0,0 +1,50 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface ElementOptions {
+    tagType?: string;
+    className?: string;
+    text?: string;
+    innerHTML?: string;
+    attributes?: Record<string, string>;
+    styles?: Record<string, string>;
+    style?: string;
+    class?: string;
+}
+type ElementState = {
+    tagType: string;
+    className: string;
+    text: string;
+    innerHTML: string;
+    attributes: Record<string, string>;
+    styles: Record<string, string>;
+    style: string;
+    class: string;
+};
+export declare class Element extends BaseComponent<ElementState> {
+    private _element;
+    constructor(id: string, options?: ElementOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    tagType(value: string): Element;
+    className(value: string): Element;
+    text(value: string): Element;
+    innerHTML(value: string): Element;
+    write(content: string, asHTML?: boolean, newLine?: boolean): Element;
+    prepend(content: string, asHTML?: boolean, newLine?: boolean): Element;
+    clear(): Element;
+    /**
+     * Append child component or HTML element
+     */
+    append(child: any): Element;
+    render(targetId?: string): this;
+}
+export declare function element(id: string, options?: ElementOptions): Element;
+export declare function header(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function footer(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function main(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function aside(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function section(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function article(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function div(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export declare function span(id: string, options?: Omit<ElementOptions, 'tagType'>): Element;
+export {};
+//# sourceMappingURL=element.d.ts.map

package/lib/components/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.ts"],"names":[],"mappings":"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"}

package/lib/components/element.js

@@ -0,0 +1,206 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = []; // Element has no trigger events
+const CALLBACK_EVENTS = []; // Element has no callback events
+export class Element extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            tagType: options.tagType ?? 'div',
+            className: options.className ?? '',
+            text: options.text ?? '',
+            innerHTML: options.innerHTML ?? '',
+            attributes: options.attributes ?? {},
+            styles: options.styles ?? {},
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._element = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading()
+    // - focus(), blur()
+    // - remove()
+    // - bind(), sync(), renderTo()
+    tagType(value) {
+        this.state.tagType = value;
+        return this;
+    }
+    className(value) {
+        this.state.className = value;
+        return this;
+    }
+    text(value) {
+        this.state.text = value;
+        this.state.innerHTML = '';
+        return this;
+    }
+    innerHTML(value) {
+        this.state.innerHTML = value;
+        this.state.text = '';
+        return this;
+    }
+    write(content, asHTML = false, newLine = false) {
+        if (!this._element) {
+            console.warn(`Element.write: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
+        if (asHTML) {
+            this._element.insertAdjacentHTML('beforeend', contentWithBreak);
+        }
+        else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.appendChild(textNode);
+        }
+        return this;
+    }
+    prepend(content, asHTML = false, newLine = false) {
+        if (!this._element) {
+            console.warn(`Element.prepend: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
+        if (asHTML) {
+            this._element.insertAdjacentHTML('afterbegin', contentWithBreak);
+        }
+        else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.insertBefore(textNode, this._element.firstChild);
+        }
+        return this;
+    }
+    clear() {
+        if (!this._element) {
+            console.warn(`Element.clear: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+        this._element.innerHTML = '';
+        return this;
+    }
+    /**
+     * Append child component or HTML element
+     */
+    append(child) {
+        if (!this._element) {
+            console.warn(`Element.append: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+        if (child instanceof HTMLElement) {
+            this._element.appendChild(child);
+        }
+        else if (child?._element) {
+            // Another Jux component
+            this._element.appendChild(child._element);
+        }
+        else if (typeof child === 'string') {
+            const div = document.createElement('div');
+            div.innerHTML = child;
+            this._element.appendChild(div.firstChild || div);
+        }
+        return this;
+    }
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
+        // Build element
+        const element = document.createElement(tagType);
+        element.id = this._id;
+        if (className)
+            element.className = className;
+        if (classValue)
+            element.className = `${element.className} ${classValue}`.trim();
+        if (text) {
+            element.textContent = text;
+        }
+        else if (innerHTML) {
+            element.innerHTML = innerHTML;
+        }
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
+        });
+        const styleString = Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
+        if (styleString || style) {
+            element.setAttribute('style', `${styleString}; ${style}`.trim());
+        }
+        // Wire events using inherited method
+        this._wireStandardEvents(element);
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            const transform = toComponent || ((v) => v);
+            stateObj.subscribe((val) => {
+                const transformed = transform(val);
+                if (property === 'text') {
+                    element.textContent = String(transformed);
+                    this.state.text = String(transformed);
+                }
+                else if (property === 'innerHTML') {
+                    element.innerHTML = String(transformed);
+                    this.state.innerHTML = String(transformed);
+                }
+                else if (property === 'class') {
+                    element.className = String(transformed);
+                    this.state.class = String(transformed);
+                }
+            });
+        });
+        container.appendChild(element);
+        this._element = element;
+        return this;
+    }
+}
+export function element(id, options = {}) {
+    return new Element(id, options);
+}
+// Semantic HTML element factories with default classes
+export function header(id, options = {}) {
+    const defaultClass = 'jux-header';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'header', class: mergedClass });
+}
+export function footer(id, options = {}) {
+    const defaultClass = 'jux-footer';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'footer', class: mergedClass });
+}
+export function main(id, options = {}) {
+    const defaultClass = 'jux-main';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'main', class: mergedClass });
+}
+export function aside(id, options = {}) {
+    const defaultClass = 'jux-aside';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'aside', class: mergedClass });
+}
+export function section(id, options = {}) {
+    const defaultClass = 'jux-section';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'section', class: mergedClass });
+}
+export function article(id, options = {}) {
+    const defaultClass = 'jux-article';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'article', class: mergedClass });
+}
+export function div(id, options = {}) {
+    return new Element(id, { ...options, tagType: 'div' });
+}
+export function span(id, options = {}) {
+    return new Element(id, { ...options, tagType: 'span' });
+}