juxscript 1.1.112 → 1.1.115

package/lib/components/link.js

@@ -0,0 +1,216 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['click'];
+export class Link extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            href: options.href ?? `/${id}`,
+            text: options.text ?? formatIdAsLabel(id),
+            icon: options.icon ?? '',
+            iconPosition: options.iconPosition ?? 'left',
+            target: options.target ?? '_self',
+            external: options.external ?? false,
+            active: options.active ?? false
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    href(value) {
+        this.state.href = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.href = value;
+        }
+        return this;
+    }
+    text(value) {
+        this.state.text = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link) {
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode)
+                    textNode.textContent = value;
+            }
+        }
+        return this;
+    }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    iconPosition(value) {
+        this.state.iconPosition = value;
+        return this;
+    }
+    target(value) {
+        this.state.target = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.target = value;
+        }
+        return this;
+    }
+    external(value = true) {
+        this.state.external = value;
+        if (value) {
+            this.state.target = '_blank';
+        }
+        return this;
+    }
+    active(value = true) {
+        this.state.active = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`);
+            if (link)
+                link.classList.toggle('jux-link-active', value);
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { href, text, icon, iconPosition, target, external, active, disabled, style, class: className } = this.state;
+        const link = document.createElement('a');
+        link.id = this._id;
+        link.className = 'jux-link';
+        if (active)
+            link.classList.add('jux-link-active');
+        if (disabled)
+            link.classList.add('jux-link-disabled');
+        if (className)
+            link.className += ` ${className}`;
+        if (style)
+            link.setAttribute('style', style);
+        link.href = href;
+        link.target = target;
+        // Add rel for external links
+        if (external || target === '_blank') {
+            link.rel = 'noopener noreferrer';
+        }
+        // Mark as external link for router to ignore
+        if (external) {
+            link.dataset.router = 'false';
+        }
+        // Icon (left position)
+        if (icon && iconPosition === 'left') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-left';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+        // Text
+        const textEl = document.createElement('span');
+        textEl.className = 'jux-link-text';
+        textEl.textContent = text;
+        link.appendChild(textEl);
+        // Icon (right position)
+        if (icon && iconPosition === 'right') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-right';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+        // Wire events
+        this._wireStandardEvents(link);
+        // Fire click callback
+        link.addEventListener('click', (e) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            this._triggerCallback('click', href);
+        });
+        // Sync href changes
+        const hrefSync = this._syncBindings.find(b => b.property === 'href');
+        if (hrefSync) {
+            const transform = hrefSync.toComponent || ((v) => String(v));
+            hrefSync.stateObj.subscribe((val) => {
+                this.href(transform(val));
+            });
+        }
+        // Sync text changes
+        const textSync = this._syncBindings.find(b => b.property === 'text');
+        if (textSync) {
+            const transform = textSync.toComponent || ((v) => String(v));
+            textSync.stateObj.subscribe((val) => {
+                this.text(transform(val));
+            });
+        }
+        container.appendChild(link);
+        requestAnimationFrame(() => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+    update(prop, value) {
+        if (!this.container)
+            return;
+        const link = this.container.querySelector(`#${this._id}`);
+        if (!link)
+            return;
+        switch (prop) {
+            case 'href':
+                link.href = value;
+                break;
+            case 'text':
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode)
+                    textNode.textContent = value;
+                break;
+            case 'active':
+                link.classList.toggle('jux-link-active', value);
+                break;
+            case 'disabled':
+                link.classList.toggle('jux-link-disabled', value);
+                break;
+            case 'target':
+                link.target = value;
+                break;
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+export function link(id, options = {}) {
+    return new Link(id, options);
+}
+// Convenience helpers
+export function navLink(id, text) {
+    return new Link(id, {
+        href: `/${id}`,
+        text: text || formatIdAsLabel(id)
+    });
+}
+export function externalLink(id, href, text) {
+    return new Link(id, {
+        href,
+        text: text || formatIdAsLabel(id),
+        external: true,
+        icon: 'external-link',
+        iconPosition: 'right'
+    });
+}

package/lib/components/link.ts

@@ -0,0 +1,268 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;
+
+export interface LinkOptions {
+    href?: string;
+    text?: string;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    external?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    style?: string;
+    class?: string;
+}
+
+interface LinkState extends BaseState {
+    href: string;
+    text: string;
+    icon: string;
+    iconPosition: 'left' | 'right';
+    target: string;
+    external: boolean;
+    active: boolean;
+}
+
+export class Link extends BaseComponent<LinkState> {
+    constructor(id: string, options: LinkOptions = {}) {
+        super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            href: options.href ?? `/${id}`,
+            text: options.text ?? formatIdAsLabel(id),
+            icon: options.icon ?? '',
+            iconPosition: options.iconPosition ?? 'left',
+            target: options.target ?? '_self',
+            external: options.external ?? false,
+            active: options.active ?? false
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    href(value: string): this {
+        this.state.href = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.href = value;
+        }
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) {
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode) textNode.textContent = value;
+            }
+        }
+        return this;
+    }
+
+    icon(value: string): this {
+        this.state.icon = value;
+        return this;
+    }
+
+    iconPosition(value: 'left' | 'right'): this {
+        this.state.iconPosition = value;
+        return this;
+    }
+
+    target(value: '_self' | '_blank' | '_parent' | '_top'): this {
+        this.state.target = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.target = value;
+        }
+        return this;
+    }
+
+    external(value: boolean = true): this {
+        this.state.external = value;
+        if (value) {
+            this.state.target = '_blank';
+        }
+        return this;
+    }
+
+    active(value: boolean = true): this {
+        this.state.active = value;
+        if (this.container) {
+            const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+            if (link) link.classList.toggle('jux-link-active', value);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+
+        const { href, text, icon, iconPosition, target, external, active, disabled, style, class: className } = this.state;
+
+        const link = document.createElement('a');
+        link.id = this._id;
+        link.className = 'jux-link';
+        if (active) link.classList.add('jux-link-active');
+        if (disabled) link.classList.add('jux-link-disabled');
+        if (className) link.className += ` ${className}`;
+        if (style) link.setAttribute('style', style);
+
+        link.href = href;
+        link.target = target;
+
+        // Add rel for external links
+        if (external || target === '_blank') {
+            link.rel = 'noopener noreferrer';
+        }
+
+        // Mark as external link for router to ignore
+        if (external) {
+            link.dataset.router = 'false';
+        }
+
+        // Icon (left position)
+        if (icon && iconPosition === 'left') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-left';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+
+        // Text
+        const textEl = document.createElement('span');
+        textEl.className = 'jux-link-text';
+        textEl.textContent = text;
+        link.appendChild(textEl);
+
+        // Icon (right position)
+        if (icon && iconPosition === 'right') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-link-icon jux-link-icon-right';
+            iconEl.appendChild(renderIcon(icon));
+            link.appendChild(iconEl);
+        }
+
+        // Wire events
+        this._wireStandardEvents(link);
+
+        // Fire click callback
+        link.addEventListener('click', (e) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            this._triggerCallback('click', href);
+        });
+
+        // Sync href changes
+        const hrefSync = this._syncBindings.find(b => b.property === 'href');
+        if (hrefSync) {
+            const transform = hrefSync.toComponent || ((v: any) => String(v));
+            hrefSync.stateObj.subscribe((val: any) => {
+                this.href(transform(val));
+            });
+        }
+
+        // Sync text changes
+        const textSync = this._syncBindings.find(b => b.property === 'text');
+        if (textSync) {
+            const transform = textSync.toComponent || ((v: any) => String(v));
+            textSync.stateObj.subscribe((val: any) => {
+                this.text(transform(val));
+            });
+        }
+
+        container.appendChild(link);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+
+    update(prop: string, value: any): void {
+        if (!this.container) return;
+
+        const link = this.container.querySelector(`#${this._id}`) as HTMLAnchorElement;
+        if (!link) return;
+
+        switch (prop) {
+            case 'href':
+                link.href = value;
+                break;
+
+            case 'text':
+                const textNode = link.querySelector('.jux-link-text');
+                if (textNode) textNode.textContent = value;
+                break;
+
+            case 'active':
+                link.classList.toggle('jux-link-active', value);
+                break;
+
+            case 'disabled':
+                link.classList.toggle('jux-link-disabled', value);
+                break;
+
+            case 'target':
+                link.target = value;
+                break;
+
+            default:
+                super.update(prop, value);
+                break;
+        }
+    }
+}
+
+export function link(id: string, options: LinkOptions = {}): Link {
+    return new Link(id, options);
+}
+
+// Convenience helpers
+export function navLink(id: string, text?: string): Link {
+    return new Link(id, {
+        href: `/${id}`,
+        text: text || formatIdAsLabel(id)
+    });
+}
+
+export function externalLink(id: string, href: string, text?: string): Link {
+    return new Link(id, {
+        href,
+        text: text || formatIdAsLabel(id),
+        external: true,
+        icon: 'external-link',
+        iconPosition: 'right'
+    });
+}