juxscript 1.0.2 → 1.0.4

package/lib/components/dropdown.ts

@@ -0,0 +1,244 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Dropdown menu item
+ */
+export interface DropdownItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    click?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+}
+
+/**
+ * Dropdown component options
+ */
+export interface DropdownOptions {
+    items?: DropdownItem[];
+    trigger?: string;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Dropdown component state
+ */
+type DropdownState = {
+    items: DropdownItem[];
+    trigger: string;
+    position: string;
+    style: string;
+    class: string;
+    isOpen: boolean;
+};
+
+/**
+ * Dropdown Menu component - Context menus, action menus
+ * 
+ * Usage:
+ *   jux.dropdown('actions', {
+ *     trigger: 'Actions ▾',
+ *     position: 'bottom-right',
+ *     items: [
+ *       { label: 'Edit', icon: '✏️', click: () => console.log('Edit') },
+ *       { label: 'Delete', icon: '🗑️', click: () => console.log('Delete') },
+ *       { divider: true },
+ *       { label: 'Archive', click: () => console.log('Archive') }
+ *     ]
+ *   }).render('#toolbar');
+ * 
+ *   // Control programmatically
+ *   const dd = jux.dropdown('my-dropdown').render();
+ *   dd.open();
+ *   dd.close();
+ */
+export class Dropdown {
+    state: DropdownState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: DropdownOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            items: options.items ?? [],
+            trigger: options.trigger ?? 'Menu',
+            position: options.position ?? 'bottom-left',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            isOpen: false
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    items(value: DropdownItem[]): this {
+        this.state.items = value;
+        return this;
+    }
+
+    addItem(item: DropdownItem): this {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+
+    trigger(value: string): this {
+        this.state.trigger = value;
+        return this;
+    }
+
+    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this {
+        this.state.position = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Methods
+     * ------------------------- */
+
+    open(): void {
+        this.state.isOpen = true;
+        const menu = document.getElementById(`${this._id}-menu`);
+        if (menu) {
+            menu.classList.add('jux-dropdown-menu-open');
+        }
+    }
+
+    close(): void {
+        this.state.isOpen = false;
+        const menu = document.getElementById(`${this._id}-menu`);
+        if (menu) {
+            menu.classList.remove('jux-dropdown-menu-open');
+        }
+    }
+
+    toggle(): void {
+        if (this.state.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Dropdown: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { items, trigger, position, style, class: className } = this.state;
+
+        // Wrapper
+        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 = trigger;
+        triggerBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+
+        // Menu
+        const menu = document.createElement('div');
+        menu.className = `jux-dropdown-menu jux-dropdown-menu-${position}`;
+        menu.id = `${this._id}-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.disabled = item.disabled ?? false;
+
+                if (item.icon) {
+                    const icon = document.createElement('span');
+                    icon.className = 'jux-dropdown-item-icon';
+                    icon.textContent = item.icon;
+                    menuItem.appendChild(icon);
+                }
+
+                const label = document.createElement('span');
+                label.className = 'jux-dropdown-item-label';
+                label.textContent = item.label;
+                menuItem.appendChild(label);
+
+                menuItem.addEventListener('click', () => {
+                    if (item.click) {
+                        item.click();
+                    }
+                    this.close();
+                });
+
+                menu.appendChild(menuItem);
+            }
+        });
+
+        wrapper.appendChild(triggerBtn);
+        wrapper.appendChild(menu);
+        container.appendChild(wrapper);
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (!wrapper.contains(e.target as Node)) {
+                this.close();
+            }
+        });
+
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Dropdown.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function dropdown(id: string, options: DropdownOptions = {}): Dropdown {
+    return new Dropdown(id, options);
+}

package/lib/components/element.ts

@@ -0,0 +1,271 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Element component options
+ */
+export interface ElementOptions {
+    tagType?: string;
+    className?: string;
+    text?: string;
+    innerHTML?: string;
+    attributes?: Record<string, string>;
+    styles?: Record<string, string>;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Element component state
+ */
+type ElementState = {
+    tagType: string;
+    className: string;
+    text: string;
+    innerHTML: string;
+    attributes: Record<string, string>;
+    styles: Record<string, string>;
+    style: string;
+    class: string;
+};
+
+/**
+ * Element component - Create arbitrary HTML elements
+ * 
+ * Usage:
+ *   const div = jux.element('myDiv', { tagType: 'div', className: 'container' });
+ *   div.render('#target');
+ * 
+ *   const span = jux.element('mySpan')
+ *     .tagType('span')
+ *     .className('highlight')
+ *     .text('Hello World')
+ *     .render();
+ * 
+ * For reactive content, use State bindings after render:
+ *   const count = state(0);
+ *   jux.element('counter').render('#app');
+ *   count.bindText('counter', (val) => `Count: ${val}`);
+ */
+export class Element {
+    state: ElementState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: ElementOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            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 ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    /**
+     * Set the HTML tag type
+     */
+    tagType(value: string): Element {
+        this.state.tagType = value;
+        return this;
+    }
+
+    /**
+     * Set the className
+     */
+    className(value: string): Element {
+        this.state.className = value;
+        return this;
+    }
+
+    /**
+     * Add a class to existing classes
+     */
+    addClass(value: string): Element {
+        const classes = this.state.className.split(' ').filter(c => c);
+        if (!classes.includes(value)) {
+            classes.push(value);
+            this.state.className = classes.join(' ');
+        }
+        return this;
+    }
+
+    /**
+     * Remove a class from existing classes
+     */
+    removeClass(value: string): Element {
+        const classes = this.state.className.split(' ').filter(c => c && c !== value);
+        this.state.className = classes.join(' ');
+        return this;
+    }
+
+    /**
+     * Set text content (static)
+     */
+    text(value: string): Element {
+        this.state.text = value;
+        this.state.innerHTML = '';
+        return this;
+    }
+
+    /**
+     * Set HTML content (static, clears text)
+     */
+    innerHTML(value: string): Element {
+        this.state.innerHTML = value;
+        this.state.text = '';
+        return this;
+    }
+
+    /**
+     * Set a single attribute
+     */
+    attr(name: string, value: string): Element {
+        this.state.attributes = { ...this.state.attributes, [name]: value };
+        return this;
+    }
+
+    /**
+     * Set multiple attributes
+     */
+    attrs(attributes: Record<string, string>): Element {
+        this.state.attributes = { ...this.state.attributes, ...attributes };
+        return this;
+    }
+
+    /**
+     * Set inline styles
+     * @param propertyOrValue - CSS property name, style string, or style object
+     * @param value - CSS value (when first arg is property name)
+     */
+    style(propertyOrValue: string | Record<string, string>, value?: string): Element {
+        if (typeof propertyOrValue === 'string' && value !== undefined) {
+            // Called as .style('color', 'red')
+            this.state.styles = { ...this.state.styles, [propertyOrValue]: value };
+        } else if (typeof propertyOrValue === 'string') {
+            // Called as .style('color: red; background: blue')
+            this.state.style = propertyOrValue;
+        } else if (typeof propertyOrValue === 'object') {
+            // Called as .style({ color: 'red', background: 'blue' })
+            this.state.styles = { ...this.state.styles, ...propertyOrValue };
+        }
+        return this;
+    }
+
+    /**
+     * Set multiple styles as object
+     */
+    styles(styles: Record<string, string>): Element {
+        this.state.styles = { ...this.state.styles, ...styles };
+        return this;
+    }
+
+    /**
+     * Add additional classes (fluent alternative to className)
+     */
+    class(value: string): Element {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    /**
+     * Render the element to a target element
+     * @param targetId - CSS selector for target element (optional, defaults to body)
+     */
+    render(targetId?: string): Element {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Element: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
+
+        // Create the element
+        const element = document.createElement(tagType);
+
+        // Set ID to component ID
+        element.id = this._id;
+
+        // Set className
+        if (className) {
+            element.className = className;
+        }
+
+        if (classValue) {
+            element.className = element.className ? `${element.className} ${classValue}` : classValue;
+        }
+
+        // Set content (innerHTML takes precedence over text)
+        if (innerHTML) {
+            element.innerHTML = innerHTML;
+        } else if (text) {
+            element.textContent = text;
+        }
+
+        // Set attributes
+        Object.entries(attributes).forEach(([name, value]) => {
+            element.setAttribute(name, value);
+        });
+
+        // Set styles (object)
+        Object.entries(styles).forEach(([property, value]) => {
+            element.style.setProperty(property, value);
+        });
+
+        // Set style (string)
+        if (style) {
+            element.setAttribute('style', style);
+        }
+
+        container.appendChild(element);
+        return this;
+    }
+
+    /**
+     * Render to another Jux component's container
+     * 
+     * Usage:
+     *   const container = jux.element('myContainer');
+     *   const child = jux.element('myChild').renderTo(container);
+     */
+    renderTo(juxComponent: Element): Element {
+        if (!juxComponent || typeof juxComponent !== 'object') {
+            throw new Error('Element.renderTo: Invalid component - not an object');
+        }
+
+        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+            throw new Error('Element.renderTo: Invalid component - missing _id (not a Jux component)');
+        }
+
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function element(id: string, options: ElementOptions = {}): Element {
+    return new Element(id, options);
+}