juxscript 1.1.4 → 1.1.6

package/lib/components/input.js

@@ -0,0 +1,348 @@
+import { FormInput } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change', 'input'];
+export class Input extends FormInput {
+    constructor(id, options = {}) {
+        super(id, {
+            type: options.type ?? 'text',
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? '',
+            label: options.label ?? '',
+            icon: options.icon ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            rows: options.rows ?? 3,
+            min: options.min,
+            max: options.max,
+            step: options.step,
+            minLength: options.minLength,
+            maxLength: options.maxLength,
+            pattern: options.pattern,
+            style: options.style ?? '',
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+    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
+     * ═════════════════════════════════════════════════════════════════ */
+    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;
+    }
+    _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 } = 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
+        if (this.state.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', () => {
+                const input = inputEl;
+                counterEl.textContent = `${input.value.length}/${maxLength}`;
+                this.state.value = input.value;
+                // 🎯 Fire the input callback event
+                this._triggerCallback('input', input.value);
+            });
+        }
+        else {
+            // Fire input event even without counter
+            inputEl.addEventListener('input', () => {
+                const input = inputEl;
+                this.state.value = input.value;
+                // 🎯 Fire the input callback event
+                this._triggerCallback('input', input.value);
+            });
+        }
+        // Fire change event on blur
+        inputEl.addEventListener('change', () => {
+            const input = inputEl;
+            // 🎯 Fire the change callback event
+            this._triggerCallback('change', input.value);
+        });
+        // 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 });
+}