juxscript 1.0.19 → 1.0.21

package/lib/components/element.ts

@@ -1,8 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;  // Element has no trigger events
+const CALLBACK_EVENTS = [] as const; // Element has no callback events
 
-/**
- * Element component options
- */
 export interface ElementOptions {
     tagType?: string;
     className?: string;
@@ -14,9 +15,6 @@ export interface ElementOptions {
     class?: string;
 }
 
-/**
- * Element component state
- */
 type ElementState = {
     tagType: string;
     className: string;
@@ -28,35 +26,11 @@ type ElementState = {
     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;
+export class Element extends BaseComponent<ElementState> {
+    private _element: HTMLElement | null = null;
 
     constructor(id: string, options: ElementOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             tagType: options.tagType ?? 'div',
             className: options.className ?? '',
             text: options.text ?? '',
@@ -65,207 +39,289 @@ export class Element {
             styles: options.styles ?? {},
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        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()
 
-    /**
-     * 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;
-    }
+    write(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        if (!this._element) {
+            console.warn(`Element.write: Element "${this._id}" not yet rendered`);
+            return this;
+        }
 
-    /**
-     * Set multiple attributes
-     */
-    attrs(attributes: Record<string, string>): Element {
-        this.state.attributes = { ...this.state.attributes, ...attributes };
-        return this;
-    }
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
 
-    /**
-     * 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 };
+        if (asHTML) {
+            this._element.insertAdjacentHTML('beforeend', contentWithBreak);
+        } else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.appendChild(textNode);
         }
+
         return this;
     }
 
-    /**
-     * Set multiple styles as object
-     */
-    styles(styles: Record<string, string>): Element {
-        this.state.styles = { ...this.state.styles, ...styles };
+    prepend(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        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;
     }
 
-    /**
-     * Add additional classes (fluent alternative to className)
-     */
-    class(value: string): Element {
-        this.state.class = value;
+    clear(): Element {
+        if (!this._element) {
+            console.warn(`Element.clear: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        this._element.innerHTML = '';
         return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
-
     /**
-     * Render the element to a target element
-     * @param targetId - CSS selector for target element (optional, defaults to body)
+     * Append child component or HTML element
      */
-    render(targetId?: string): Element {
-        let container: HTMLElement;
+    append(child: any): Element {
+        if (!this._element) {
+            console.warn(`Element.append: Element "${this._id}" not yet rendered`);
+            return this;
+        }
 
-        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);
+        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);
         }
 
-        this.container = container;
+        return this;
+    }
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
         const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
 
-        // Create the element
+        // Build 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;
-        }
+        if (className) element.className = className;
+        if (classValue) element.className = `${element.className} ${classValue}`.trim();
 
-        // Set content (innerHTML takes precedence over text)
-        if (innerHTML) {
-            element.innerHTML = innerHTML;
-        } else if (text) {
+        if (text) {
             element.textContent = text;
+        } else if (innerHTML) {
+            element.innerHTML = innerHTML;
         }
 
-        // Set attributes
-        Object.entries(attributes).forEach(([name, value]) => {
-            element.setAttribute(name, value);
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
         });
 
-        // Set styles (object)
-        Object.entries(styles).forEach(([property, value]) => {
-            element.style.setProperty(property, value);
-        });
+        const styleString = Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
 
-        // Set style (string)
-        if (style) {
-            element.setAttribute('style', style);
+        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: any) => v);
+
+            stateObj.subscribe((val: any) => {
+                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;
+
+        // Inject base semantic styles if this is a semantic element
+        this._injectSemanticStyles();
+
         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');
-        }
+    private _injectSemanticStyles(): void {
+        const styleId = 'jux-semantic-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            /* Jux Semantic Element Base Styles */
+            .jux-header {
+                display: block;
+                width: 100%;
+                background: var(--jux-header-bg, #ffffff);
+                border-bottom: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-header-padding, 1rem 2rem);
+                position: sticky;
+                top: 0;
+                z-index: 1000;
+            }
 
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('Element.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
+            .jux-footer {
+                display: block;
+                width: 100%;
+                background: var(--jux-footer-bg, #f9fafb);
+                border-top: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-footer-padding, 2rem);
+                margin-top: auto;
+            }
 
-        return this.render(`#${juxComponent._id}`);
+            .jux-main {
+                display: block;
+                flex: 1;
+                width: 100%;
+                padding: var(--jux-main-padding, 2rem);
+                min-height: calc(100vh - 200px);
+            }
+
+            .jux-aside {
+                display: block;
+                background: var(--jux-aside-bg, #f9fafb);
+                border-right: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-aside-padding, 1.5rem);
+            }
+
+            .jux-section {
+                display: block;
+                margin-bottom: var(--jux-section-margin, 2rem);
+            }
+
+            .jux-article {
+                display: block;
+                max-width: var(--jux-article-max-width, 65ch);
+                margin: 0 auto;
+            }
+        `;
+        document.head.appendChild(style);
     }
 }
 
-/**
- * Factory helper
- */
 export function element(id: string, options: ElementOptions = {}): Element {
     return new Element(id, options);
-}
+}
+
+// Semantic HTML element factories with default classes
+export function header(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    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: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'div' });
+}
+
+export function span(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'span' });
+}
+