juxscript 1.1.239 → 1.1.243

package/lib/components/link.js

@@ -1,216 +0,0 @@
-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

@@ -1,268 +0,0 @@
-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'
-    });
-}

package/lib/components/list.d.ts

@@ -1,83 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface ListItem {
-    id?: string;
-    icon?: string;
-    title?: string;
-    body?: string;
-    type?: 'success' | 'warning' | 'error' | 'info' | 'default' | string;
-    metadata?: string;
-    itemClass?: string;
-    disabled?: boolean;
-    selected?: boolean;
-    data?: any;
-}
-export interface ListOptions {
-    items?: (ListItem | string)[];
-    header?: string;
-    gap?: string;
-    direction?: 'vertical' | 'horizontal';
-    selectable?: boolean;
-    multiSelect?: boolean;
-    selectedIndex?: number | null;
-    selectedIndices?: number[];
-    onItemClick?: (item: ListItem, index: number, e: Event) => void;
-    onItemDoubleClick?: (item: ListItem, index: number, e: Event) => void;
-    onSelectionChange?: (selectedItems: ListItem[], selectedIndices: number[]) => void;
-    ordered?: boolean;
-    striped?: boolean;
-    hoverable?: boolean;
-    bordered?: boolean;
-    style?: string;
-    class?: string;
-}
-type ListState = {
-    items: ListItem[];
-    header: string;
-    gap: string;
-    direction: string;
-    selectable: boolean;
-    multiSelect: boolean;
-    selectedIndex: number | null;
-    selectedIndices: number[];
-    ordered: boolean;
-    striped: boolean;
-    hoverable: boolean;
-    bordered: boolean;
-    style: string;
-    class: string;
-};
-export declare class List extends BaseComponent<ListState> {
-    private _onItemClick;
-    private _onItemDoubleClick;
-    private _onSelectionChange;
-    private _listElement;
-    constructor(id: string, options?: ListOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    items(value: (ListItem | string)[]): this;
-    addItem(value: ListItem | string): this;
-    removeItem(index: number): this;
-    updateItem(index: number, updates: Partial<ListItem>): this;
-    clearItems(): this;
-    itemClass(className: string): this;
-    ordered(value: boolean): this;
-    selectable(value: boolean): this;
-    multiSelect(value: boolean): this;
-    striped(value: boolean): this;
-    hoverable(value: boolean): this;
-    bordered(value: boolean): this;
-    selectItem(index: number): this;
-    deselectItem(index: number): this;
-    clearSelection(): this;
-    getSelectedItems(): ListItem[];
-    getSelectedIndices(): number[];
-    private _updateList;
-    private _updateSelection;
-    private _triggerSelectionChange;
-    private _renderItems;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-export declare function list(id: string, options?: ListOptions): List;
-export {};
-//# sourceMappingURL=list.d.ts.map

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

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