juxscript 1.1.111 → 1.1.113

package/lib/components/image.js

@@ -0,0 +1,204 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['load', 'error'];
+export class Image extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            src: options.src ?? '',
+            alt: options.alt ?? formatIdAsLabel(id),
+            objectFit: options.objectFit ?? 'cover',
+            loadingType: options.loading ?? 'lazy',
+            crossOrigin: options.crossOrigin,
+            isLoaded: false,
+            hasError: false
+        });
+        // Apply width/height if provided
+        if (options.width) {
+            this.state.style = this.state.style ? `${this.state.style}; width: ${options.width}` : `width: ${options.width}`;
+        }
+        if (options.height) {
+            this.state.style = this.state.style ? `${this.state.style}; height: ${options.height}` : `height: ${options.height}`;
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    src(value) {
+        this.state.src = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`);
+            if (img) {
+                img.src = value;
+                this.state.isLoaded = false;
+                this.state.hasError = false;
+            }
+        }
+        return this;
+    }
+    alt(value) {
+        this.state.alt = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`);
+            if (img)
+                img.alt = value;
+        }
+        return this;
+    }
+    objectFit(value) {
+        this.state.objectFit = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`);
+            if (img)
+                img.style.objectFit = value;
+        }
+        return this;
+    }
+    lazy() {
+        this.state.loadingType = 'lazy';
+        return this;
+    }
+    eager() {
+        this.state.loadingType = 'eager';
+        return this;
+    }
+    crossOrigin(value) {
+        this.state.crossOrigin = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * STATE GETTERS
+     * ═════════════════════════════════════════════════════════════════ */
+    isLoaded() {
+        return this.state.isLoaded;
+    }
+    hasError() {
+        return this.state.hasError;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { src, alt, objectFit, loadingType, crossOrigin, style, class: className } = this.state;
+        const img = document.createElement('img');
+        img.id = this._id;
+        img.className = 'jux-image';
+        if (className)
+            img.className += ` ${className}`;
+        if (style)
+            img.setAttribute('style', style);
+        img.src = src;
+        img.alt = alt;
+        img.style.objectFit = objectFit;
+        img.loading = loadingType;
+        if (crossOrigin) {
+            img.crossOrigin = crossOrigin;
+        }
+        // Wire load event
+        img.addEventListener('load', () => {
+            this.state.isLoaded = true;
+            this.state.hasError = false;
+            this._triggerCallback('load', img);
+        });
+        // Wire error event
+        img.addEventListener('error', () => {
+            this.state.isLoaded = false;
+            this.state.hasError = true;
+            this._triggerCallback('error', img);
+        });
+        // Wire standard events (click, mouseover, etc.)
+        this._wireStandardEvents(img);
+        // Sync src changes
+        const srcSync = this._syncBindings.find(b => b.property === 'src');
+        if (srcSync) {
+            const transform = srcSync.toComponent || ((v) => String(v));
+            srcSync.stateObj.subscribe((val) => {
+                this.src(transform(val));
+            });
+        }
+        // Sync alt changes
+        const altSync = this._syncBindings.find(b => b.property === 'alt');
+        if (altSync) {
+            const transform = altSync.toComponent || ((v) => String(v));
+            altSync.stateObj.subscribe((val) => {
+                this.alt(transform(val));
+            });
+        }
+        container.appendChild(img);
+        return this;
+    }
+    update(prop, value) {
+        if (!this.container)
+            return;
+        const img = this.container.querySelector(`#${this._id}`);
+        if (!img)
+            return;
+        // Handle image-specific updates
+        switch (prop) {
+            case 'src':
+                img.src = value;
+                this.state.isLoaded = false;
+                this.state.hasError = false;
+                break;
+            case 'alt':
+                img.alt = value;
+                break;
+            case 'objectFit':
+                img.style.objectFit = value;
+                break;
+            case 'loadingType':
+                img.loading = value;
+                break;
+            case 'crossOrigin':
+                img.crossOrigin = value;
+                break;
+            // Base properties handled by BaseComponent.update()
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+export function image(id, options = {}) {
+    return new Image(id, options);
+}
+// Convenience helper for avatar/profile images
+export function avatar(id, src, alt) {
+    return new Image(id, {
+        src,
+        alt: alt || 'Avatar',
+        objectFit: 'cover',
+        style: 'border-radius: 50%'
+    });
+}
+// Convenience helper for logo images
+export function logo(id, src, alt) {
+    return new Image(id, {
+        src,
+        alt: alt || 'Logo',
+        objectFit: 'contain'
+    });
+}
+// Convenience helper for thumbnail images
+export function thumbnail(id, src, alt) {
+    return new Image(id, {
+        src,
+        alt: alt || 'Thumbnail',
+        objectFit: 'cover',
+        loading: 'lazy'
+    });
+}

package/lib/components/image.ts

@@ -0,0 +1,260 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['load', 'error'] as const;
+
+export interface ImageOptions {
+    src?: string;
+    alt?: string;
+    width?: string;
+    height?: string;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    loading?: 'lazy' | 'eager';
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    style?: string;
+    class?: string;
+}
+
+interface ImageState extends BaseState {
+    src: string;
+    alt: string;
+    objectFit: string;
+    loadingType: string;
+    crossOrigin?: string;
+    isLoaded: boolean;
+    hasError: boolean;
+}
+
+export class Image extends BaseComponent<ImageState> {
+    constructor(id: string, options: ImageOptions = {}) {
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            src: options.src ?? '',
+            alt: options.alt ?? formatIdAsLabel(id),
+            objectFit: options.objectFit ?? 'cover',
+            loadingType: options.loading ?? 'lazy',
+            crossOrigin: options.crossOrigin,
+            isLoaded: false,
+            hasError: false
+        });
+
+        // Apply width/height if provided
+        if (options.width) {
+            this.state.style = this.state.style ? `${this.state.style}; width: ${options.width}` : `width: ${options.width}`;
+        }
+        if (options.height) {
+            this.state.style = this.state.style ? `${this.state.style}; height: ${options.height}` : `height: ${options.height}`;
+        }
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    src(value: string): this {
+        this.state.src = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
+            if (img) {
+                img.src = value;
+                this.state.isLoaded = false;
+                this.state.hasError = false;
+            }
+        }
+        return this;
+    }
+
+    alt(value: string): this {
+        this.state.alt = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
+            if (img) img.alt = value;
+        }
+        return this;
+    }
+
+    objectFit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'): this {
+        this.state.objectFit = value;
+        if (this.container) {
+            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
+            if (img) img.style.objectFit = value;
+        }
+        return this;
+    }
+
+    lazy(): this {
+        this.state.loadingType = 'lazy';
+        return this;
+    }
+
+    eager(): this {
+        this.state.loadingType = 'eager';
+        return this;
+    }
+
+    crossOrigin(value: 'anonymous' | 'use-credentials'): this {
+        this.state.crossOrigin = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STATE GETTERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    isLoaded(): boolean {
+        return this.state.isLoaded;
+    }
+
+    hasError(): boolean {
+        return this.state.hasError;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+
+        const { src, alt, objectFit, loadingType, crossOrigin, style, class: className } = this.state;
+
+        const img = document.createElement('img');
+        img.id = this._id;
+        img.className = 'jux-image';
+        if (className) img.className += ` ${className}`;
+        if (style) img.setAttribute('style', style);
+
+        img.src = src;
+        img.alt = alt;
+        img.style.objectFit = objectFit;
+        img.loading = loadingType as 'lazy' | 'eager';
+
+        if (crossOrigin) {
+            img.crossOrigin = crossOrigin;
+        }
+
+        // Wire load event
+        img.addEventListener('load', () => {
+            this.state.isLoaded = true;
+            this.state.hasError = false;
+            this._triggerCallback('load', img);
+        });
+
+        // Wire error event
+        img.addEventListener('error', () => {
+            this.state.isLoaded = false;
+            this.state.hasError = true;
+            this._triggerCallback('error', img);
+        });
+
+        // Wire standard events (click, mouseover, etc.)
+        this._wireStandardEvents(img);
+
+        // Sync src changes
+        const srcSync = this._syncBindings.find(b => b.property === 'src');
+        if (srcSync) {
+            const transform = srcSync.toComponent || ((v: any) => String(v));
+            srcSync.stateObj.subscribe((val: any) => {
+                this.src(transform(val));
+            });
+        }
+
+        // Sync alt changes
+        const altSync = this._syncBindings.find(b => b.property === 'alt');
+        if (altSync) {
+            const transform = altSync.toComponent || ((v: any) => String(v));
+            altSync.stateObj.subscribe((val: any) => {
+                this.alt(transform(val));
+            });
+        }
+
+        container.appendChild(img);
+
+        return this;
+    }
+
+    update(prop: string, value: any): void {
+        if (!this.container) return;
+
+        const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
+        if (!img) return;
+
+        // Handle image-specific updates
+        switch (prop) {
+            case 'src':
+                img.src = value;
+                this.state.isLoaded = false;
+                this.state.hasError = false;
+                break;
+
+            case 'alt':
+                img.alt = value;
+                break;
+
+            case 'objectFit':
+                img.style.objectFit = value;
+                break;
+
+            case 'loadingType':
+                img.loading = value as 'lazy' | 'eager';
+                break;
+
+            case 'crossOrigin':
+                img.crossOrigin = value;
+                break;
+
+            // Base properties handled by BaseComponent.update()
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+
+export function image(id: string, options: ImageOptions = {}): Image {
+    return new Image(id, options);
+}
+
+// Convenience helper for avatar/profile images
+export function avatar(id: string, src: string, alt?: string): Image {
+    return new Image(id, {
+        src,
+        alt: alt || 'Avatar',
+        objectFit: 'cover',
+        style: 'border-radius: 50%'
+    });
+}
+
+// Convenience helper for logo images
+export function logo(id: string, src: string, alt?: string): Image {
+    return new Image(id, {
+        src,
+        alt: alt || 'Logo',
+        objectFit: 'contain'
+    });
+}
+
+// Convenience helper for thumbnail images
+export function thumbnail(id: string, src: string, alt?: string): Image {
+    return new Image(id, {
+        src,
+        alt: alt || 'Thumbnail',
+        objectFit: 'cover',
+        loading: 'lazy'
+    });
+}

package/lib/components/layer.d.ts

@@ -0,0 +1,72 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface LayerOptions {
+    preset?: LayerPreset;
+    opacity?: number;
+    zIndex?: number;
+    blur?: number;
+    content?: string | BaseComponent<any>;
+    style?: string;
+    class?: string;
+}
+interface LayerState extends BaseState {
+    preset?: string;
+    content?: string;
+}
+/**
+ * Gradient preset names from gradients.css
+ */
+export type LayerPreset = 'ocean' | 'sunset' | 'forest' | 'fire' | 'ice' | 'candy' | 'emerald' | 'midnight' | 'peach' | 'royal' | 'coral' | 'mint' | 'grape' | 'cherry' | 'sky' | 'aurora' | 'tropical' | 'cosmic' | 'neon' | 'volcano' | 'radial-sun' | 'radial-moon' | 'radial-blue' | 'radial-purple' | 'radial-fire' | 'radial-ocean' | 'radial-emerald' | 'radial-sunset' | 'conic-rainbow' | 'conic-sunset' | 'conic-ocean' | 'conic-fire' | 'conic-neon' | 'dark-space' | 'dark-navy' | 'dark-purple' | 'dark-forest' | 'dark-crimson' | 'dark-slate' | 'overlay-dark' | 'overlay-light' | 'overlay-blue' | 'overlay-purple' | 'overlay-sunset' | 'mesh-purple' | 'mesh-ocean' | 'mesh-fire' | 'mesh-neon' | 'pastel-pink' | 'pastel-blue' | 'pastel-green' | 'pastel-purple' | 'pastel-peach' | 'pastel-lavender' | 'animated' | 'animated-fast' | 'animated-slow';
+export declare class Layer extends BaseComponent<LayerState> {
+    constructor(id: string, options?: LayerOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    /**
+     * Set layer opacity
+     */
+    opacity(value: number): this;
+    /**
+     * Set layer z-index
+     */
+    zIndex(value: number): this;
+    /**
+     * Apply a gradient preset from gradients.css
+     */
+    preset(value: LayerPreset): this;
+    /**
+     * Set layer content (text or component)
+     */
+    content(value: string | BaseComponent<any>): this;
+    /**
+     * Apply backdrop blur (for overlay effects)
+     */
+    backdropBlur(value: number): this;
+    /**
+     * Make layer cover entire parent (position: absolute with inset: 0)
+     */
+    fullCover(): this;
+    /**
+     * Make layer fixed to viewport
+     */
+    fixed(): this;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    update(prop: string, value: any): void;
+}
+export declare function layer(id: string, options?: LayerOptions): Layer;
+/**
+ * Create a gradient layer with preset
+ */
+export declare function gradient(id: string, preset: LayerPreset, options?: Omit<LayerOptions, 'preset'>): Layer;
+/**
+ * Create a dark overlay (for hero images, etc.)
+ */
+export declare function overlay(id: string, opacity?: number): Layer;
+/**
+ * Create a blur overlay (glassmorphism effect)
+ */
+export declare function glassLayer(id: string, blur?: number, opacity?: number): Layer;
+/**
+ * Create an animated gradient background
+ */
+export declare function animatedGradient(id: string, speed?: 'fast' | 'normal' | 'slow'): Layer;
+export {};
+//# sourceMappingURL=layer.d.ts.map

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

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