juxscript 1.1.82 → 1.1.87

package/lib/components/stack/BaseStack.js

@@ -0,0 +1,373 @@
+import { BaseComponent } from '../base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+/**
+ * BaseStack - Foundation for all stack layout components
+ * Provides common styling, child management, and progressive effects
+ */
+export class BaseStack extends BaseComponent {
+    constructor(id, children, options = {}) {
+        // Convert children object to array, preserving order
+        const childArray = Array.isArray(children)
+            ? children
+            : Object.values(children);
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            spacing: options.spacing ?? 'default',
+            align: options.align,
+            justify: options.justify,
+            divider: options.divider ?? false,
+            responsive: options.responsive ?? false,
+            children: childArray,
+            childStyles: undefined
+        });
+        this._inlineStyles = new Map(); // ✅ Internal style storage
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT LAYOUT API
+     * ═════════════════════════════════════════════════════════════════ */
+    spacing(value) {
+        this.state.spacing = value;
+        return this;
+    }
+    align(value) {
+        this.state.align = value;
+        return this;
+    }
+    justify(value) {
+        this.state.justify = value;
+        return this;
+    }
+    divider(value = true) {
+        this.state.divider = value;
+        return this;
+    }
+    responsive(value = true) {
+        this.state.responsive = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT STYLE API - Comprehensive CSS properties
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Internal helper to add individual CSS properties
+     */
+    _addStyle(property, value) {
+        this._inlineStyles.set(property, value);
+        this._updateStyleAttribute();
+        return this;
+    }
+    /**
+     * Build and apply the complete style attribute
+     */
+    _updateStyleAttribute() {
+        const styleString = Array.from(this._inlineStyles.entries())
+            .map(([prop, val]) => `${prop}: ${val}`)
+            .join('; ');
+        this.state.style = styleString;
+    }
+    // Box Model
+    padding(value) {
+        return this._addStyle('padding', value);
+    }
+    margin(value) {
+        return this._addStyle('margin', value);
+    }
+    border(value) {
+        return this._addStyle('border', value);
+    }
+    borderRadius(value) {
+        return this._addStyle('border-radius', value);
+    }
+    // Sizing
+    width(value) {
+        return this._addStyle('width', value);
+    }
+    height(value) {
+        return this._addStyle('height', value);
+    }
+    minWidth(value) {
+        return this._addStyle('min-width', value);
+    }
+    maxWidth(value) {
+        return this._addStyle('max-width', value);
+    }
+    minHeight(value) {
+        return this._addStyle('min-height', value);
+    }
+    maxHeight(value) {
+        return this._addStyle('max-height', value);
+    }
+    // Visual
+    background(value) {
+        return this._addStyle('background', value);
+    }
+    backgroundColor(value) {
+        return this._addStyle('background-color', value);
+    }
+    boxShadow(value) {
+        return this._addStyle('box-shadow', value);
+    }
+    opacity(value) {
+        return this._addStyle('opacity', String(value));
+    }
+    // Positioning
+    position(value) {
+        return this._addStyle('position', value);
+    }
+    top(value) {
+        return this._addStyle('top', value);
+    }
+    right(value) {
+        return this._addStyle('right', value);
+    }
+    bottom(value) {
+        return this._addStyle('bottom', value);
+    }
+    left(value) {
+        return this._addStyle('left', value);
+    }
+    zIndex(value) {
+        return this._addStyle('z-index', String(value));
+    }
+    // Overflow
+    overflow(value) {
+        return this._addStyle('overflow', value);
+    }
+    overflowX(value) {
+        return this._addStyle('overflow-x', value);
+    }
+    overflowY(value) {
+        return this._addStyle('overflow-y', value);
+    }
+    // Display
+    display(value) {
+        return this._addStyle('display', value);
+    }
+    // Cursor
+    cursor(value) {
+        return this._addStyle('cursor', value);
+    }
+    // Transform
+    transform(value) {
+        return this._addStyle('transform', value);
+    }
+    transformOrigin(value) {
+        return this._addStyle('transform-origin', value);
+    }
+    // Transition & Animation
+    transition(value) {
+        return this._addStyle('transition', value);
+    }
+    animation(value) {
+        return this._addStyle('animation', value);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PROGRESSIVE CHILD STYLING
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Apply custom styles to each child progressively
+     */
+    childStyle(stylesOrFunction) {
+        this.state.childStyles = stylesOrFunction;
+        return this;
+    }
+    /**
+     * Cascade effect - offset children progressively
+     */
+    cascade(baseOffset = 20, axis = 'both') {
+        this.state.childStyles = (index) => {
+            const offset = baseOffset * index;
+            if (axis === 'horizontal' || axis === 'x') {
+                return `margin-left: ${offset}px;`;
+            }
+            else if (axis === 'vertical' || axis === 'y') {
+                return `margin-top: ${offset}px;`;
+            }
+            else {
+                return `margin-left: ${offset}px; margin-top: ${offset}px;`;
+            }
+        };
+        return this;
+    }
+    /**
+     * Fan effect - rotate children progressively
+     */
+    fan(angle = 5, origin = 'bottom center') {
+        this.state.childStyles = (index) => {
+            const rotation = angle * index;
+            return `transform: rotate(${rotation}deg); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+    /**
+     * Scale progression - shrink/grow children
+     */
+    scaleProgressive(startScale = 1, step = 0.05, origin = 'center') {
+        this.state.childStyles = (index) => {
+            const scale = startScale - (step * index);
+            return `transform: scale(${scale}); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+    /**
+     * Fade effect - progressive opacity
+     */
+    fade(startOpacity = 1, step = 0.15) {
+        this.state.childStyles = (index) => {
+            const opacity = Math.max(0.1, startOpacity - (step * index));
+            return `opacity: ${opacity};`;
+        };
+        return this;
+    }
+    /**
+     * Blur effect - progressive blur
+     */
+    blur(startBlur = 0, step = 2) {
+        this.state.childStyles = (index) => {
+            const blur = startBlur + (step * index);
+            return `filter: blur(${blur}px);`;
+        };
+        return this;
+    }
+    /**
+     * Stagger animation delays
+     */
+    stagger(baseDelay = 100) {
+        this.state.childStyles = (index) => {
+            const delay = baseDelay * index;
+            return `animation-delay: ${delay}ms;`;
+        };
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    buildClasses() {
+        const { spacing, align, justify, divider, responsive } = this.state;
+        const classes = [this.baseClassName];
+        // Spacing modifier
+        if (spacing !== 'default') {
+            classes.push(`${this.baseClassName}-${spacing}`);
+        }
+        // Alignment
+        if (align) {
+            classes.push(`jux-stack-${align}`);
+        }
+        // Justification
+        if (justify) {
+            classes.push(`jux-stack-justify-${justify}`);
+        }
+        // Divider
+        if (divider) {
+            classes.push(`${this.baseClassName}-divider`);
+        }
+        // Responsive
+        if (responsive) {
+            classes.push(`${this.baseClassName}-responsive`);
+        }
+        // Custom classes
+        if (this.state.class) {
+            classes.push(this.state.class);
+        }
+        return classes.join(' ');
+    }
+    renderChild(child, index) {
+        // Already a string
+        if (typeof child === 'string') {
+            return this.wrapChildWithStyle(child, index);
+        }
+        // JUX component with render method
+        if (child && typeof child.render === 'function') {
+            // Create temporary container
+            const temp = document.createElement('div');
+            child.render(temp);
+            if (child.container) {
+                let html = child.container.outerHTML;
+                child.container = null; // Reset for reuse
+                return this.injectChildStyle(html, index);
+            }
+        }
+        // DOM element
+        if (child && child.outerHTML) {
+            return this.injectChildStyle(child.outerHTML, index);
+        }
+        // Object with render method that returns string/element
+        if (child && typeof child.render === 'function') {
+            const rendered = child.render();
+            if (typeof rendered === 'string') {
+                return this.wrapChildWithStyle(rendered, index);
+            }
+            if (rendered && rendered.outerHTML) {
+                return this.injectChildStyle(rendered.outerHTML, index);
+            }
+        }
+        // Fallback to string
+        return this.wrapChildWithStyle(String(child), index);
+    }
+    wrapChildWithStyle(html, index) {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return `<div style="${style}">${html}</div>`;
+        }
+        return html;
+    }
+    injectChildStyle(html, index) {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return html.replace(/^<(\w+)/, `<$1 style="${style}"`);
+        }
+        return html;
+    }
+    getChildStyle(index) {
+        const { childStyles } = this.state;
+        if (!childStyles)
+            return '';
+        if (typeof childStyles === 'function') {
+            return childStyles(index);
+        }
+        if (Array.isArray(childStyles)) {
+            return childStyles[index] || '';
+        }
+        return '';
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const wrapper = document.createElement('div');
+        wrapper.className = this.buildClasses();
+        wrapper.id = this._id;
+        if (this.state.style) {
+            wrapper.setAttribute('style', this.state.style);
+        }
+        // Render all children
+        this.state.children.forEach((child, index) => {
+            const childHtml = this.renderChild(child, index);
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = childHtml;
+            if (tempDiv.firstChild) {
+                wrapper.appendChild(tempDiv.firstChild);
+            }
+        });
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        return this;
+    }
+    update(prop, value) {
+        // Stack components are typically static
+    }
+}