juxscript 1.1.239 → 1.1.243

package/lib/components/input.js

@@ -1,362 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change', 'input'];
-export class Input extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            // ✅ BaseState properties
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            // ✅ Form-specific BaseState properties
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate if not provided
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            // ✅ Input-specific properties
-            type: options.type ?? 'text',
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? '',
-            icon: options.icon ?? '',
-            rows: options.rows ?? 3,
-            min: options.min,
-            max: options.max,
-            step: options.step,
-            minLength: options.minLength,
-            maxLength: options.maxLength,
-            pattern: options.pattern
-        });
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    type(value) {
-        this.state.type = value;
-        return this;
-    }
-    value(value) {
-        return this.setValue(String(value));
-    }
-    placeholder(value) {
-        this.state.placeholder = value;
-        return this;
-    }
-    icon(value) {
-        this.state.icon = value;
-        return this;
-    }
-    rows(value) {
-        this.state.rows = value;
-        return this;
-    }
-    min(value) {
-        this.state.min = value;
-        return this;
-    }
-    max(value) {
-        this.state.max = value;
-        return this;
-    }
-    step(value) {
-        this.state.step = value;
-        return this;
-    }
-    minLength(value) {
-        this.state.minLength = value;
-        return this;
-    }
-    maxLength(value) {
-        this.state.maxLength = value;
-        return this;
-    }
-    pattern(value) {
-        this.state.pattern = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION (Override BaseComponent methods)
-     * ═════════════════════════════════════════════════════════════════ */
-    getValue() {
-        return this.state.value;
-    }
-    setValue(value) {
-        this.state.value = value;
-        if (this._inputElement) {
-            this._inputElement.value = value;
-        }
-        return this;
-    }
-    getNumericValue() {
-        const num = Number(this.state.value);
-        return isNaN(num) ? null : num;
-    }
-    validate() {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-        if (result === true) {
-            this._clearError();
-            return true;
-        }
-        else {
-            this._showError(result);
-            return false;
-        }
-    }
-    isValid() {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-    _validateValue(value) {
-        const { required, type, min, max, minLength, maxLength, pattern } = this.state;
-        if (required && !value.trim()) {
-            return 'This field is required';
-        }
-        if (type === 'number' && value) {
-            const numValue = Number(value);
-            if (isNaN(numValue)) {
-                return 'Must be a valid number';
-            }
-            if (min !== undefined && numValue < min) {
-                return `Must be at least ${min}`;
-            }
-            if (max !== undefined && numValue > max) {
-                return `Must be at most ${max}`;
-            }
-        }
-        if ((type === 'text' || type === 'textarea') && value) {
-            if (minLength !== undefined && value.length < minLength) {
-                return `Must be at least ${minLength} characters`;
-            }
-            if (maxLength !== undefined && value.length > maxLength) {
-                return `Must be at most ${maxLength} characters`;
-            }
-        }
-        if (pattern && value) {
-            const regex = new RegExp(pattern);
-            if (!regex.test(value)) {
-                return 'Invalid format';
-            }
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-        return true;
-    }
-    _buildInputElement() {
-        const { type, value, placeholder, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern } = this.state;
-        let inputEl;
-        if (type === 'textarea') {
-            inputEl = document.createElement('textarea');
-            inputEl.rows = rows;
-            if (minLength !== undefined)
-                inputEl.minLength = minLength;
-            if (maxLength !== undefined)
-                inputEl.maxLength = maxLength;
-        }
-        else {
-            inputEl = document.createElement('input');
-            inputEl.type = type;
-            if (type === 'number') {
-                if (min !== undefined)
-                    inputEl.min = String(min);
-                if (max !== undefined)
-                    inputEl.max = String(max);
-                if (step !== undefined)
-                    inputEl.step = String(step);
-            }
-            if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
-                if (minLength !== undefined)
-                    inputEl.minLength = minLength;
-                if (maxLength !== undefined)
-                    inputEl.maxLength = maxLength;
-                if (pattern)
-                    inputEl.pattern = pattern;
-            }
-        }
-        inputEl.className = 'jux-input-element';
-        inputEl.id = `${this._id}-input`;
-        inputEl.name = name;
-        inputEl.value = value;
-        inputEl.placeholder = placeholder;
-        inputEl.required = required;
-        inputEl.disabled = disabled;
-        return inputEl;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { icon, maxLength, type, style, class: className, label } = this.state;
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-input';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // ✅ Label - always render if exists or can be auto-generated
-        if (label || !label) { // Always render label
-            wrapper.appendChild(this._renderLabel());
-        }
-        // Input container
-        const inputContainer = document.createElement('div');
-        inputContainer.className = 'jux-input-container';
-        if (icon)
-            inputContainer.classList.add('jux-input-with-icon');
-        // Icon
-        if (icon) {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-input-icon';
-            iconEl.appendChild(renderIcon(icon));
-            inputContainer.appendChild(iconEl);
-        }
-        // Input element
-        const inputEl = this._buildInputElement();
-        this._inputElement = inputEl;
-        inputContainer.appendChild(inputEl);
-        wrapper.appendChild(inputContainer);
-        // Error element
-        wrapper.appendChild(this._renderError());
-        // Character counter
-        if (maxLength && (type === 'text' || type === 'textarea')) {
-            const counterEl = document.createElement('div');
-            counterEl.className = 'jux-input-counter';
-            counterEl.id = `${this._id}-counter`;
-            counterEl.textContent = `${this.state.value.length}/${maxLength}`;
-            wrapper.appendChild(counterEl);
-            inputEl.addEventListener('input', (e) => {
-                const input = inputEl;
-                counterEl.textContent = `${input.value.length}/${maxLength}`;
-                this.state.value = input.value;
-                this._triggerCallback('input', input.value, e, this);
-            });
-        }
-        else {
-            inputEl.addEventListener('input', (e) => {
-                const input = inputEl;
-                this.state.value = input.value;
-                this._triggerCallback('input', input.value, e, this);
-            });
-        }
-        // Fire change event on blur
-        inputEl.addEventListener('change', (e) => {
-            const input = inputEl;
-            this._triggerCallback('change', input.value, e, this);
-        });
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        this._wireFormSync(inputEl, 'input');
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v) => String(v));
-            labelSync.stateObj.subscribe((val) => {
-                this.label(transform(val));
-            });
-        }
-        container.appendChild(wrapper);
-        requestAnimationFrame(() => {
-            if (window.lucide) {
-                window.lucide.createIcons();
-            }
-        });
-        return this;
-    }
-}
-export function input(id, options = {}) {
-    return new Input(id, options);
-}
-// Shorter, consistent naming
-export function text(id, options) {
-    return new Input(id, { ...options, type: 'text' });
-}
-export function textRequired(id, options) {
-    return new Input(id, { ...options, type: 'text', required: true });
-}
-export function number(id, options) {
-    return new Input(id, { ...options, type: 'number' });
-}
-export function numberRequired(id, options) {
-    return new Input(id, { ...options, type: 'number', required: true });
-}
-export function email(id, options) {
-    return new Input(id, { ...options, type: 'email' });
-}
-export function emailRequired(id, options) {
-    return new Input(id, { ...options, type: 'email', required: true });
-}
-export function password(id, options) {
-    return new Input(id, { ...options, type: 'password' });
-}
-export function passwordRequired(id, options) {
-    return new Input(id, { ...options, type: 'password', required: true });
-}
-export function tel(id, options) {
-    return new Input(id, { ...options, type: 'tel' });
-}
-export function telRequired(id, options) {
-    return new Input(id, { ...options, type: 'tel', required: true });
-}
-export function phone(id, options) {
-    return new Input(id, { ...options, type: 'tel' });
-}
-export function phoneRequired(id, options) {
-    return new Input(id, { ...options, type: 'tel', required: true });
-}
-export function url(id, options) {
-    return new Input(id, { ...options, type: 'url' });
-}
-export function urlRequired(id, options) {
-    return new Input(id, { ...options, type: 'url', required: true });
-}
-export function textarea(id, options) {
-    return new Input(id, { ...options, type: 'textarea' });
-}
-export function textareaRequired(id, options) {
-    return new Input(id, { ...options, type: 'textarea', required: true });
-}
-export function range(id, options) {
-    return new Input(id, { ...options, type: 'range' });
-}
-export function rangeRequired(id, options) {
-    return new Input(id, { ...options, type: 'range', required: true });
-}
-export function date(id, options) {
-    return new Input(id, { ...options, type: 'date' });
-}
-export function dateRequired(id, options) {
-    return new Input(id, { ...options, type: 'date', required: true });
-}
-export function time(id, options) {
-    return new Input(id, { ...options, type: 'time' });
-}
-export function timeRequired(id, options) {
-    return new Input(id, { ...options, type: 'time', required: true });
-}
-export function color(id, options) {
-    return new Input(id, { ...options, type: 'color' });
-}
-export function colorRequired(id, options) {
-    return new Input(id, { ...options, type: 'color', required: true });
-}