juxscript 1.1.239 → 1.1.243

package/lib/components/checkbox.ts

@@ -1,260 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change'] as const;
-
-export interface CheckboxOptions {
-    checked?: boolean;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (checked: boolean) => boolean | string;
-}
-
-interface CheckboxState extends BaseState {
-    checked: boolean;
-    value: string;
-}
-
-export class Checkbox extends BaseComponent<CheckboxState> {
-    constructor(id: string, options: CheckboxOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            checked: options.checked ?? false,
-            value: options.value ?? 'on'
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    checked(value: boolean): this {
-        return this.setValue(value);
-    }
-
-    value(value: string): this {
-        this.state.value = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): boolean {
-        return this.state.checked;
-    }
-
-    setValue(value: boolean): this {
-        this.state.checked = value;
-        if (this._inputElement) {
-            (this._inputElement as HTMLInputElement).checked = value;
-        }
-        return this;
-    }
-
-    validate(): boolean {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-
-        if (result === true) {
-            this._clearError();
-            return true;
-        } else {
-            this._showError(result as string);
-            return false;
-        }
-    }
-
-    isValid(): boolean {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-
-    protected _validateValue(checked: boolean): boolean | string {
-        const { required } = this.state;
-
-        if (required && !checked) {
-            return 'This field must be checked';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(checked);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        const { checked, value, required, disabled, name } = this.state;
-
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = 'jux-checkbox-input';
-        input.id = `${this._id}-input`;
-        input.name = name!;
-        input.value = value;
-        input.checked = checked;
-        input.required = required!;
-        input.disabled = disabled!;
-
-        return input;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { style, class: className } = this.state;
-
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-checkbox';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Checkbox container
-        const checkboxContainer = document.createElement('label');
-        checkboxContainer.className = 'jux-checkbox-container';
-        checkboxContainer.htmlFor = `${this._id}-input`;
-
-        // Input element
-        const inputEl = this._buildInputElement() as HTMLInputElement;
-        this._inputElement = inputEl;
-        checkboxContainer.appendChild(inputEl);
-
-        // Checkmark (custom styled)
-        const checkmark = document.createElement('span');
-        checkmark.className = 'jux-checkbox-checkmark';
-        checkmark.appendChild(renderIcon('check'));
-        checkboxContainer.appendChild(checkmark);
-
-        // Label text
-        if (this.state.label) {
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-checkbox-label-text';
-            labelText.textContent = this.state.label;
-            if (this.state.required) {
-                const requiredSpan = document.createElement('span');
-                requiredSpan.className = 'jux-input-required';
-                requiredSpan.textContent = ' *';
-                labelText.appendChild(requiredSpan);
-            }
-            checkboxContainer.appendChild(labelText);
-        }
-
-        wrapper.appendChild(checkboxContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-
-        // Wire checkbox-specific sync (maps 'checked' to 'value' property for consistency)
-        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
-
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-
-            const transformToState = toState || ((v: boolean) => v);
-            const transformToComponent = toComponent || ((v: any) => Boolean(v));
-
-            let isUpdating = false;
-
-            // State → Component
-            stateObj.subscribe((val: any) => {
-                if (isUpdating) return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-
-            // Component → State
-            inputEl.addEventListener('change', (e) => {
-                if (isUpdating) return;
-                isUpdating = true;
-
-                const checked = (inputEl as HTMLInputElement).checked;
-                this.state.checked = checked;
-                this._clearError();
-
-                const transformed = transformToState(checked);
-                stateObj.set(transformed);
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked, e, this);
-
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        } else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', (e) => {
-                this.state.checked = inputEl.checked;
-                this._clearError();
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked, e, this);
-            });
-        }
-
-        // Always add blur validation
-        inputEl.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                this.validate();
-            }
-        });
-
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v: any) => String(v));
-            labelSync.stateObj.subscribe((val: any) => {
-                this.label(transform(val));
-            });
-        }
-
-        container.appendChild(wrapper);
-        return this;
-    }
-}
-
-export function checkbox(id: string, options: CheckboxOptions = {}): Checkbox {
-    return new Checkbox(id, options);
-}

package/lib/components/code.d.ts

@@ -1,52 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface CodeOptions {
-    content?: string;
-    language?: string;
-    showLineNumbers?: boolean;
-    startLine?: number;
-    highlightLines?: number[];
-    style?: string;
-    class?: string;
-}
-type CodeState = {
-    content: string;
-    language: string;
-    showLineNumbers: boolean;
-    startLine: number;
-    highlightLines: number[];
-    style: string;
-    class: string;
-};
-export declare class Code extends BaseComponent<CodeState> {
-    private _codeContainer;
-    private static _syntaxCSSInjected;
-    constructor(id: string, options?: CodeOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    update(prop: string, value: any): void;
-    content(value: string): this;
-    language(value: string): this;
-    showLineNumbers(value: boolean): this;
-    startLine(value: number): this;
-    highlightLines(lines: number[]): this;
-    /**
-     * Parse code content into individual lines with tokens
-     */
-    private _parseLines;
-    /**
-     * Rebuild all line elements
-     */
-    private _rebuildLines;
-    /**
-     * Create a single line element with parsed tokens
-     */
-    private _createLineElement;
-    /**
-     * Update highlighted lines without full rebuild
-     */
-    private _updateHighlights;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function code(id: string, options?: CodeOptions): Code;
-export {};
-//# sourceMappingURL=code.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IASrC;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAoBrB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0B1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/code.js

@@ -1,201 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Code extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            content: options.content ?? '',
-            language: options.language ?? 'javascript',
-            showLineNumbers: options.showLineNumbers ?? true,
-            startLine: options.startLine ?? 1,
-            highlightLines: options.highlightLines ?? [],
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._codeContainer = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    update(prop, value) {
-        super.update(prop, value);
-        if (!this._codeContainer)
-            return;
-        switch (prop) {
-            case 'content':
-                this._rebuildLines();
-                break;
-            case 'showLineNumbers':
-                this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
-                break;
-            case 'highlightLines':
-                this._updateHighlights();
-                break;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    content(value) {
-        this.state.content = value;
-        return this;
-    }
-    language(value) {
-        this.state.language = value;
-        return this;
-    }
-    showLineNumbers(value) {
-        this.state.showLineNumbers = value;
-        return this;
-    }
-    startLine(value) {
-        this.state.startLine = value;
-        return this;
-    }
-    highlightLines(lines) {
-        this.state.highlightLines = lines;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PARSING & RENDERING
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Parse code content into individual lines with tokens
-     */
-    _parseLines() {
-        return parseCode(this.state.content, this.state.language);
-    }
-    /**
-     * Rebuild all line elements
-     */
-    _rebuildLines() {
-        if (!this._codeContainer)
-            return;
-        const codeEl = this._codeContainer.querySelector('.jux-code-lines');
-        if (!codeEl)
-            return;
-        codeEl.innerHTML = '';
-        const parsedLines = this._parseLines();
-        const { startLine, highlightLines } = this.state;
-        parsedLines.forEach((parsedLine, index) => {
-            const lineNumber = startLine + index;
-            const isHighlighted = highlightLines.includes(lineNumber);
-            const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
-            codeEl.appendChild(lineEl);
-        });
-    }
-    /**
-     * Create a single line element with parsed tokens
-     */
-    _createLineElement(parsedLine, lineNumber, highlighted) {
-        const lineEl = document.createElement('div');
-        lineEl.className = 'jux-code-line';
-        lineEl.setAttribute('data-line', String(lineNumber));
-        if (highlighted) {
-            lineEl.classList.add('jux-code-line-highlight');
-        }
-        // Line number
-        if (this.state.showLineNumbers) {
-            const lineNum = document.createElement('span');
-            lineNum.className = 'jux-code-line-number';
-            lineNum.textContent = String(lineNumber);
-            lineEl.appendChild(lineNum);
-        }
-        // Line content with syntax highlighting
-        const lineCode = document.createElement('span');
-        lineCode.className = 'jux-code-line-content';
-        lineCode.innerHTML = renderLineWithTokens(parsedLine);
-        lineEl.appendChild(lineCode);
-        return lineEl;
-    }
-    /**
-     * Update highlighted lines without full rebuild
-     */
-    _updateHighlights() {
-        if (!this._codeContainer)
-            return;
-        const lines = this._codeContainer.querySelectorAll('.jux-code-line');
-        lines.forEach((line) => {
-            const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
-            const isHighlighted = this.state.highlightLines.includes(lineNum);
-            line.classList.toggle('jux-code-line-highlight', isHighlighted);
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        // ✅ Inject syntax CSS once globally
-        if (!Code._syntaxCSSInjected) {
-            const style = document.createElement('style');
-            style.id = 'jux-code-syntax-css';
-            style.textContent = getSyntaxHighlightCSS();
-            document.head.appendChild(style);
-            Code._syntaxCSSInjected = true;
-        }
-        const { language, showLineNumbers, style, class: className } = this.state;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-code';
-        wrapper.id = this._id;
-        if (!showLineNumbers)
-            wrapper.classList.add('jux-code-no-numbers');
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // ✅ Remove <pre>, just use a div with code styling
-        const codeEl = document.createElement('div');
-        codeEl.className = 'jux-code-lines';
-        // Build initial lines with parsed tokens
-        const parsedLines = this._parseLines();
-        const { startLine, highlightLines } = this.state;
-        parsedLines.forEach((parsedLine, index) => {
-            const lineNumber = startLine + index;
-            const isHighlighted = highlightLines.includes(lineNumber);
-            const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
-            codeEl.appendChild(lineEl);
-        });
-        wrapper.appendChild(codeEl);
-        this._wireStandardEvents(wrapper);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'content') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.content = transformed;
-                    this._rebuildLines();
-                });
-            }
-            else if (property === 'language') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.language = transformed;
-                    this._rebuildLines();
-                });
-            }
-            else if (property === 'highlightLines') {
-                const transform = toComponent || ((v) => (Array.isArray(v) ? v : []));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.highlightLines = transformed;
-                    this._updateHighlights();
-                });
-            }
-        });
-        container.appendChild(wrapper);
-        this._codeContainer = wrapper;
-        return this;
-    }
-}
-Code._syntaxCSSInjected = false;
-export function code(id, options = {}) {
-    return new Code(id, options);
-}